Krusty Planet website - static HTML with Bulma

Theme system: dark, light, forest, coffee
localStorage persistence for theme preference
This commit is contained in:
Jezza Hehn 2026-04-10 02:04:51 +00:00
commit cbecb8c96e
14 changed files with 1347 additions and 0 deletions

99
contact.html Normal file
View file

@ -0,0 +1,99 @@
<!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">
<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>