c5c14d2fad
- Replaced placeholder form submission with real POST to /api/contact - Added honeypot field for spam protection - Success/error feedback states - Rate limiting handled by backend
104 lines
4.7 KiB
HTML
104 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Contact — Krusty Planet</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="stylesheet" href="/css/style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="/"><strong>🌍 Krusty Planet</strong></a>
|
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" id="nav-toggle"><span></span><span></span><span></span></a>
|
|
</div>
|
|
<div class="navbar-menu" id="nav-menu">
|
|
<div class="navbar-start">
|
|
<a class="navbar-item" href="/">Home</a>
|
|
<a class="navbar-item" href="/services.html">Services</a>
|
|
<a class="navbar-item" href="/pricing.html">Pricing</a>
|
|
<a class="navbar-item" href="/free-audit.html">Free Audit</a>
|
|
<a class="navbar-item" href="/blog.html">Blog</a>
|
|
<a class="navbar-item" href="/contact.html">Contact</a>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="navbar-item"><button class="button is-small is-light" id="theme-toggle">🌙</button></div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero is-small is-kp">
|
|
<div class="hero-body has-text-centered">
|
|
<h1 class="title has-text-white">Contact</h1>
|
|
<p class="subtitle has-text-light">Tell us what you're building</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="columns is-centered">
|
|
<div class="column is-8">
|
|
<div class="box kp-card">
|
|
<form id="contact-form">
|
|
<!-- Honeypot field for spam protection - hidden from users -->
|
|
<div class="field" style="position: absolute; left: -5000px;" aria-hidden="true">
|
|
<label class="label" for="website">Website</label>
|
|
<div class="control"><input class="input" type="text" name="website" id="website" tabindex="-1" autocomplete="off" /></div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Name</label>
|
|
<div class="control"><input class="input" type="text" name="name" placeholder="Your name or alias" required /></div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Email</label>
|
|
<div class="control"><input class="input" type="email" name="email" placeholder="your@email.com" required /></div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Service Interest</label>
|
|
<div class="control">
|
|
<div class="select is-fullwidth">
|
|
<select name="service">
|
|
<option value="">Select a service...</option>
|
|
<option value="starter">Starter ($50-100)</option>
|
|
<option value="custom">Custom Build ($200-1,000)</option>
|
|
<option value="enterprise">Enterprise ($2,000+)</option>
|
|
<option value="support">Ongoing Support</option>
|
|
<option value="training">Training & Documentation</option>
|
|
<option value="other">Something else</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Message</label>
|
|
<div class="control"><textarea class="textarea" name="message" placeholder="Describe your project or question..." rows="6" required></textarea></div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control"><button class="button is-primary is-fullwidth" type="submit">Send Message</button></div>
|
|
</div>
|
|
<div id="form-status" class="notification is-success" style="display:none;">
|
|
Message received. We'll respond within 48 hours.
|
|
</div>
|
|
<p class="is-size-7 mt-3 has-text-grey-light">
|
|
Your submission is processed via email and deleted from the server after delivery.
|
|
We don't store your information or share it with third parties.
|
|
For maximum privacy, reach us via our I2P eepsite (contact us for the address).
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer has-background-dark has-text-light">
|
|
<div class="content has-text-centered">
|
|
<p><strong>🌍 Krusty Planet</strong> — Privacy-focused AI consulting</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/js/main.js"></script>
|
|
</body>
|
|
</html>
|