Frontend
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blaiz Enterprise</title>
<link rel="stylesheet" href="[Link]">
<script defer src="[Link]"></script>
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">Blaiz Enterprise</div>
<ul class="nav-links" id="navLinks">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Products</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
<button class="menu-toggle" id="menuToggle">☰</button>
</nav>
</header>
<section class="hero">
<h1>Innovative Sensors for Every Use</h1>
<p>Pioneering technology for cameras, cars, and beyond.</p>
<a href="[Link]" class="btn">Explore Products</a>
</section>
<footer>
<p>© 2025 Blaiz Enterprise. All rights reserved.</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Blaiz Enterprise</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">Blaiz Enterprise</div>
<ul class="nav-links">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]" class="active">About</a></li>
<li><a href="[Link]">Products</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h2>About Us</h2>
<p>Blaiz Enterprise is a leader in sensor technology. We design and build cutting-edge sensors not
only for cameras but also for automotive and industrial applications.</p>
<p>Our mission is to create reliable, innovative solutions that improve safety and performance in
everyday life.</p>
</section>
<footer>
<p>© 2025 Blaiz Enterprise. All rights reserved.</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products | Blaiz Enterprise</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">Blaiz Enterprise</div>
<ul class="nav-links">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]" class="active">Products</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h2>Our Products</h2>
<ul class="product-list">
<li><strong>Camera Sensors</strong> – High-resolution sensors for digital cameras and
smartphones.</li>
<li><strong>Automotive Sensors</strong> – Advanced sensors for car doors, safety systems, and
automation.</li>
<li><strong>Custom Sensors</strong> – Tailored solutions for industrial and consumer
applications.</li>
</ul>
</section
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | Blaiz Enterprise</title>
<link rel="stylesheet" href="[Link]">
<script defer src="[Link]"></script>
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">Blaiz Enterprise</div>
<ul class="nav-links">
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Products</a></li>
<li><a href="[Link]" class="active">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h2>Contact Us</h2>
<form id="contactForm">
<label>Name</label>
<input type="text" id="name" required>
<label>Email</label>
<input type="email" id="email" required>
<label>Message</label>
<textarea id="message" required></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
<p id="formMessage"></p>
</section>
<footer>
<p>© 2025 Blaiz Enterprise. All rights reserved.</p>
</footer>
</body>
</html>
<footer>
<p>© 2025 Blaiz Enterprise. All rights reserved.</p>
</footer>
</body>
</html>
[Link]
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
header {
background: #111;
color: #fff;
padding: 10px 20px;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
.nav-links {
list-style: none;
display: flex;
gap: 20px;
.nav-links a {
color: #fff;
text-decoration: none;
.nav-links [Link] {
border-bottom: 2px solid #ff6600;
.menu-toggle {
display: none;
font-size: 24px;
background: none;
border: none;
color: #fff;
}
.hero {
text-align: center;
padding: 60px 20px;
background: linear-gradient(to right, #ff6600, #ff9900);
color: #fff;
.hero h1 {
font-size: 2.5rem;
.btn {
background: #111;
color: #fff;
padding: 10px 20px;
margin-top: 20px;
display: inline-block;
text-decoration: none;
.content {
padding: 40px 20px;
max-width: 800px;
margin: auto;
}
.product-list {
list-style: square;
margin-left: 20px;
form input, form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
form button {
background: #ff6600;
border: none;
color: #fff;
padding: 10px 15px;
cursor: pointer;
footer {
background: #111;
color: #fff;
text-align: center;
padding: 15px;
margin-top: 30px;
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
.menu-toggle {
display: block;
[Link]
// Mobile menu toggle
const menuToggle = [Link]('menuToggle');
const navLinks = [Link]('navLinks');
if (menuToggle) {
[Link]('click', () => {
[Link] = [Link] === 'flex' ? 'none' : 'flex';
[Link] = 'column';
});
// Contact form validation
const contactForm = [Link]('contactForm');
const formMessage = [Link]('formMessage');
if (contactForm) {
[Link]('submit', (e) => {
[Link]();
const name = [Link]('name').[Link]();
const email = [Link]('email').[Link]();
const message = [Link]('message').[Link]();
if (!name || !email || !message) {
[Link] = "⚠️Please fill out all fields.";
[Link] = "red";
return;
[Link] = "✅ Thank you for reaching out. We'll get back to you soon!";
[Link] = "green";
[Link]();
});
Backend
.Bash
npm init -y
npm install express mongoose cors body-parser dotenv nodemon
[Link]
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv").config();
const app = express();
[Link](cors());
[Link]([Link]());
// Connect to MongoDB
[Link]([Link].MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => [Link]("✅ MongoDB connected"))
.catch(err => [Link](err));
// Schema for contact messages
const contactSchema = new [Link]({
name: String,
email: String,
message: String,
date: { type: Date, default: [Link] }
});
const Contact = [Link]("Contact", contactSchema);
// Schema for products
const productSchema = new [Link]({
name: String,
description: String,
category: String,
dateAdded: { type: Date, default: [Link] }
});
const Product = [Link]("Product", productSchema);
// Routes
[Link]("/", (req, res) => {
[Link]("Blaiz Enterprise API is running 🚀");
});
// Save contact form submission
[Link]("/api/contact", async (req, res) => {
try {
const contact = new Contact([Link]);
await [Link]();
[Link]({ success: true, message: "Message saved successfully!" });
} catch (err) {
[Link](500).json({ success: false, error: [Link] });
});
// Get all products
[Link]("/api/products", async (req, res) => {
const products = await [Link]();
[Link](products);
});
// Add a new product
[Link]("/api/products", async (req, res) => {
try {
const product = new Product([Link]);
await [Link]();
[Link]({ success: true, product });
} catch (err) {
[Link](500).json({ success: false, error: [Link] });
});
// Start server
const PORT = [Link] || 5000;
[Link](PORT, () => [Link](`🚀 Server running on port ${PORT}`));
.env
MONGO_URI=mongodb://localhost:27017/blaiz_enterprise
PORT=5000
Replace the form [Link]
// Contact form with backend integration
if (contactForm) {
[Link]("submit", async (e) => {
[Link]();
const data = {
name: [Link]("name").[Link](),
email: [Link]("email").[Link](),
message: [Link]("message").[Link](),
};
try {
const res = await fetch("[Link] {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link](data),
});
const result = await [Link]();
[Link] = [Link] ? "⚠️
Message sent!" : " Failed to send.";
[Link] = [Link] ? "green" : "red";
if ([Link]) [Link]();
} catch (err) {
[Link] = "⚠️Server error.";
[Link] = "red";
});p
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Celestia — Beautifully Crafted Websites</title>
<meta name="description" content="Celestia — Modern website template. Responsive, accessible, and
styled." />
<!-- Google Font -->
<link href="[Link]
family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header class="site-header" id="top">
<div class="container header-inner">
<a class="brand" href="#top" aria-label="Celestia Home">
<!-- Simple logo SVG -->
<svg class="logo" viewBox="0 0 100 100" aria-hidden="true">
<defs>
<linearGradient id="g1" x1="0" x2="1">
<stop offset="0" stop-color="#7c5cff"/>
<stop offset="1" stop-color="#26d0ce"/>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#g1)"></circle>
<path d="M30 60 L50 30 L70 60 Z" fill="#fff" opacity="0.95"></path>
</svg>
<span class="brand-name">Celestia</span>
</a>
<nav class="nav" aria-label="Primary">
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="navLinks">
<span class="hamburger"></span>
</button>
<ul class="nav-links" id="navLinks">
<li><a href="#features">Features</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="btn ghost" id="themeToggle" aria-pressed="false" title="Toggle theme">🌙</button>
<a class="btn primary" href="#contact">Get Started</a>
</div>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero">
<div class="container hero-grid">
<div class="hero-copy">
<h1>Beautiful websites, built fast.</h1>
<p class="lead">We design and build elegant, accessible, and blazing fast websites — so your idea
looks stunning and performs even better.</p>
<div class="cta-row">
<a class="btn primary lg" href="#contact">Start a Project</a>
<a class="btn ghost" href="#portfolio">See Work</a>
</div>
<div class="trust">
<span>Trusted by</span>
<div class="logos" aria-hidden="true">
<svg class="tlogo" viewBox="0 0 100 30"><rect width="100" height="30" rx="4"
fill="#f2f4ff"></rect></svg>
<svg class="tlogo" viewBox="0 0 100 30"><rect width="100" height="30" rx="4"
fill="#f9f7ff"></rect></svg>
<svg class="tlogo" viewBox="0 0 100 30"><rect width="100" height="30" rx="4"
fill="#f7fff6"></rect></svg>
</div>
</div>
</div>
<div class="hero-art" aria-hidden="false">
<!-- Decorative device mock -->
<div class="device">
<div class="device-screen">
<svg viewBox="0 0 600 380" class="mock">
<rect x="12" y="12" width="576" height="356" rx="18" fill="#fff"/>
<g transform="translate(34,34)">
<rect x="0" y="0" width="512" height="312" rx="12" fill="url(#mg)"></rect>
</g>
<defs>
<linearGradient id="mg" x1="0" x2="1">
<stop offset="0" stop-color="#7c5cff"/>
<stop offset="1" stop-color="#26d0ce"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="device-shadow"></div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features" class="section features">
<div class="container">
<h2 class="section-title">Everything you need</h2>
<p class="section-sub">Design, performance, accessibility, and delightful interactions — all under
one roof.</p>
<div class="feature-grid">
<article class="feature">
<div class="icon" aria-hidden="true">⚡</div>
<h3>Fast performance</h3>
<p>Optimized markup, critical CSS, lazy loading and more — speed is a feature, not a bonus.</p>
</article>
<article class="feature">
<div class="icon" aria-hidden="true">🎨</div>
<h3>Pixel-perfect design</h3>
<p>Clean, modern aesthetics, responsive across devices — crafted for conversion.</p>
</article>
<article class="feature">
<div class="icon" aria-hidden="true">♿</div>
<h3>Accessible</h3>
<p>Semantic markup, keyboard support, and color contrast to make your site usable for
everyone.</p>
</article>
<article class="feature">
<div class="icon" aria-hidden="true">🔒</div>
<h3>Secure & stable</h3>
<p>Best practices for headers, sanitization, and progressive enhancement keep you safe.</p>
</article>
</div>
</div>
</section>
<!-- PORTFOLIO -->
<section id="portfolio" class="section portfolio">
<div class="container">
<h2 class="section-title">Selected projects</h2>
<p class="section-sub">A few highlights to show the range of styles and industries we work
with.</p>
<div class="portfolio-grid" id="projects">
<!-- Project items -->
<article class="project" tabindex="0" data-title="Nova Dashboard" data-desc="A data-heavy
dashboard with real-time charts and responsive layout." data-tags="Web App, Dashboard">
<div class="thumb">
<svg viewBox="0 0 160 90"><rect width="160" height="90" rx="8" fill="#eef2ff"></rect></svg>
</div>
<h3 class="p-title">Nova Dashboard</h3>
<p class="p-meta">Web App • Dashboard</p>
</article>
<article class="project" tabindex="0" data-title="Botanica" data-desc="An ecommerce site for
boutique plants — tailored shopping flows and subtle motion." data-tags="E-commerce, Retail">
<div class="thumb">
<svg viewBox="0 0 160 90"><rect width="160" height="90" rx="8" fill="#f3fff6"></rect></svg>
</div>
<h3 class="p-title">Botanica</h3>
<p class="p-meta">E-commerce • Retail</p>
</article>
<article class="project" tabindex="0" data-title="Horizon Studio" data-desc="Showcase site for an
architecture studio with immersive imagery." data-tags="Portfolio, Creative">
<div class="thumb">
<svg viewBox="0 0 160 90"><rect width="160" height="90" rx="8" fill="#fff7f2"></rect></svg>
</div>
<h3 class="p-title">Horizon Studio</h3>
<p class="p-meta">Portfolio • Creative</p>
</article>
</div>
</div>
<!-- Modal (hidden by default) -->
<div id="projectModal" class="modal" role="dialog" aria-hidden="true" aria-
labelledby="modalTitle">
<div class="modal-panel" role="document">
<button class="modal-close" id="modalClose" aria-label="Close project">✕</button>
<div class="modal-content">
<div class="modal-visual">
<svg viewBox="0 0 400 240"><rect width="400" height="240" rx="12"
fill="#f6f8ff"></rect></svg>
</div>
<div class="modal-body">
<h3 id="modalTitle">Project Title</h3>
<p id="modalDesc">Project description will appear here.</p>
<p class="modal-tags" id="modalTags"></p>
<div class="modal-actions">
<a class="btn primary" href="#" id="modalVisit">Visit</a>
<button class="btn ghost" id="modalClose2">Close</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section id="pricing" class="section pricing">
<div class="container">
<h2 class="section-title">Pricing</h2>
<p class="section-sub">Simple, transparent pricing — or custom quotes for larger projects.</p>
<div class="pricing-grid">
<div class="card">
<h3>Starter</h3>
<p class="price">€1,200</p>
<ul class="list">
<li>Static site up to 5 pages</li>
<li>Responsive design</li>
<li>Email form integration</li>
</ul>
<a class="btn outline" href="#contact">Choose</a>
</div>
<div class="card featured">
<h3>Business</h3>
<p class="price">€3,800</p>
<ul class="list">
<li>Custom design</li>
<li>CMS or Headless setup</li>
<li>Basic SEO + Analytics</li>
</ul>
<a class="btn primary" href="#contact">Choose</a>
</div>
<div class="card">
<h3>Enterprise</h3>
<p class="price">Custom</p>
<ul class="list">
<li>Complex integrations</li>
<li>Performance SLA</li>
<li>Dedicated support</li>
</ul>
<a class="btn outline" href="#contact">Contact</a>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section testimonials">
<div class="container">
<h2 class="section-title">What clients say</h2>
<div class="test-grid">
<figure class="testimonial">
<blockquote>
“Celestia transformed our outdated site into a conversion machine — fast, beautiful, and easy to
update.”
</blockquote>
<figcaption>— Amina K., Head of Product</figcaption>
</figure>
<figure class="testimonial">
<blockquote>
“They moved quickly, communicated clearly, and the final site exceeded expectations.”
</blockquote>
<figcaption>— David M., Founder</figcaption>
</figure>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="section contact">
<div class="container">
<h2 class="section-title">Say hello</h2>
<p class="section-sub">Tell us about your project and we’ll get back within 1–2 business days.</p>
<form id="contactForm" class="contact-form" novalidate>
<div class="form-grid">
<label class="field">
<span>Name</span>
<input type="text" name="name" id="name" required placeholder="Your name">
<small class="error" aria-live="polite"></small>
</label>
<label class="field">
<span>Email</span>
<input type="email" name="email" id="email" required placeholder="you@[Link]">
<small class="error" aria-live="polite"></small>
</label>
<label class="field full">
<span>Message</span>
<textarea name="message" id="message" rows="6" required placeholder="Tell us about your
project"></textarea>
<small class="error" aria-live="polite"></small>
</label>
</div>
<div class="form-actions">
<button class="btn primary" type="submit">Send Message</button>
<button type="reset" class="btn ghost">Reset</button>
<div id="formStatus" class="form-status" aria-live="polite"></div>
</div>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<div>
<p>© <span id="year"></span> Celestia — Crafted with care.</p>
</div>
<div>
<a href="#privacy" class="muted">Privacy</a>
<a href="#terms" class="muted">Terms</a>
</div>
</div>
</footer>
<script src="[Link]" defer></script>
</body>
</html>
:root{
--bg: #0f1724;
--surface: #0b1220;
--card: #0f1724ff;
--muted: #9aa4b2;
--accent1: #7c5cff;
--accent2: #26d0ce;
--text: #e6eef8;
--glass: rgba(255,255,255,0.03);
--radius: 12px;
--container: 1100px;
--shadow: 0 8px 30px rgba(2,6,23,0.6);
--glass-border: rgba(255,255,255,0.04);
/* Light theme overrides (prefers) */
:[Link] {
--bg: #f6f8fb;
--surface: #ffffff;
--card: #ffffff;
--muted: #5d6b78;
--text: #0b1220;
--glass: rgba(10,12,18,0.03);
--glass-border: rgba(8,10,16,0.04);
--shadow: 0 10px 40px rgba(10,12,20,0.06);
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background: linear-gradient(180deg,#071027 0%, #071022 40%), var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.45;
/* Container */
.container{
width:calc(100% - 2rem);
max-width:var(--container);
margin:0 auto;
padding:3rem 0;
/* Header */
.site-header{
position:sticky;
top:0;
z-index:60;
backdrop-filter: blur(6px);
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
border-bottom: 1px solid rgba(255,255,255,0.02);
.header-inner{
display:flex;
gap:1rem;
align-items:center;
justify-content:space-between;
padding:1rem 0;
.brand{ display:flex; align-items:center; text-decoration:none; color:var(--text) }
.brand .logo{ width:40px; height:40px; margin-right:0.6rem; }
.brand-name{ font-weight:700; letter-spacing:0.2px; font-size:1.05rem }
/* Nav */
.nav { display:flex; align-items:center; gap:1rem; }
.nav-links{
list-style:none;
display:flex;
gap:1rem;
margin:0;
padding:0;
.nav-links a{ color:var(--muted); text-decoration:none; padding:0.45rem 0.6rem; border-radius:8px }
.nav-links a:hover{ color:var(--text); background:var(--glass) }
.header-actions{ display:flex; gap:.6rem; align-items:center; }
.btn{
display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
font-weight:600; border-radius:10px; padding:.5rem .85rem; text-decoration:none;
border:0; background:transparent; color:var(--text);
.btn:focus{ outline:3px solid rgba(124,92,255,0.14); outline-offset:2px }
.[Link]{ background: linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; box-
shadow: var(--shadow); }
.[Link]{ background:transparent; border:1px solid var(--glass-border); color:var(--text);
padding:.45rem .6rem }
.[Link]{ border:1px solid rgba(255,255,255,0.06) }
/* Hamburger */
.nav-toggle{ display:none; background:none; border:0; padding:.25rem }
.hamburger{ display:block; width:22px; height:2px; background:var(--text); position:relative; border-
radius:2px }
.hamburger::before, .hamburger::after{ content:""; position:absolute; left:0; width:22px; height:2px;
background:var(--text); border-radius:2px }
.hamburger::before{ top:-7px } .hamburger::after{ top:7px }
/* Hero */
.hero{ padding:4rem 0 6rem; }
.hero-grid{ display:grid; grid-template-columns:1fr 480px; gap:2rem; align-items:center; }
.hero-copy h1{ font-size:2.4rem; margin:0 0 .6rem; line-height:1.02 }
.lead{ color:var(--muted); margin-bottom:1rem }
.cta-row{ display:flex; gap:.8rem; margin-bottom:1.1rem }
.trust{ display:flex; gap:1rem; align-items:center; color:var(--muted) }
.trust .tlogo{ width:80px; height:24px }
/* device visual */
.device{ width:100%; max-width:420px; margin-left:auto; transform:translateY(0);
transition:transform .4s cubic-bezier(.2,.9,.2,1); }
.device-screen{ border-radius:20px; overflow:hidden; box-shadow: var(--shadow) }
.device-shadow{ height:14px; width:80%; margin:8px auto 0; background:linear-gradient(90deg,
rgba(124,92,255,0.12), rgba(38,208,206,0.08)); border-radius:8px; opacity:0.9 }
/* Sections */
.section{ padding:4rem 0; }
.section-title{ font-size:1.4rem; margin:0 0 .25rem; }
.section-sub{ color:var(--muted); margin-bottom:1.6rem }
/* Features */
.feature-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
.feature{ background:var(--glass); border-radius:12px; padding:1.1rem; border:1px solid var(--glass-
border) }
.feature .icon{ font-size:1.8rem; margin-bottom:.5rem }
/* Portfolio grid */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.project{ background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-radius:10px;
padding:1rem; cursor:pointer; border:1px solid var(--glass-border); transition:transform .18s ease, box-
shadow .18s ease }
.project:focus, .project:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.thumb{ height:90px; margin-bottom:.7rem; border-radius:8px; overflow:hidden }
.p-title{ margin:.15rem 0 .35rem; font-size:1rem }
.p-meta{ color:var(--muted); font-size:.88rem }
/* Modal */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
background:rgba(2,6,23,0.6); visibility:hidden; opacity:0; transition:opacity .18s ease, visibility .18s ease;
z-index:120 }
.modal[aria-hidden="false"]{ visibility:visible; opacity:1 }
.modal-panel{ background:var(--surface); border-radius:14px; width:min(880px,94%); margin:1rem; box-
shadow:var(--shadow); padding:1rem; border:1px solid var(--glass-border) }
.modal-content{ display:flex; gap:1rem; align-items:flex-start; }
.modal-visual{ flex:1; height:220px; display:flex; align-items:center; justify-content:center }
.modal-body{ flex:1.3; }
.modal-close{ position:absolute; right:1.2rem; top:1.2rem; background:transparent; border:0;
color:var(--text); font-size:1.2rem }
/* Pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.card{ background:var(--glass); padding:1.25rem; border-radius:12px; border:1px solid var(--glass-
border); text-align:center }
.[Link]{ transform:scale(1.03); box-shadow:var(--shadow) }
.price{ font-size:1.6rem; margin: .5rem 0 1rem }
/* Testimonials */
.test-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
.testimonial{ background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:1rem;
border-radius:10px; border:1px solid var(--glass-border) }
/* Contact */
.contact-form{ margin-top:1rem; }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
.field{ display:flex; flex-direction:column }
.[Link]{ grid-column:1 / -1 }
.field input, .field textarea{ padding:.6rem .8rem; border-radius:8px; border:1px solid var(--glass-
border); background:transparent; color:var(--text) }
.field [Link]{ color:#ffb3b3; height:1.1rem; font-size:.82rem; margin-top:.35rem }
.form-actions{ display:flex; gap:.7rem; align-items:center; margin-top:1rem }
.form-status{ color:var(--muted); font-size:.92rem }
/* Footer */
.site-footer{ padding:1.25rem 0; border-top:1px solid rgba(255,255,255,0.02); background:linear-
gradient(180deg, transparent, rgba(255,255,255,0.01)) }
.footer-inner{ display:flex; justify-content:space-between; gap:1rem; align-items:center }
/* Responsive */
@media (max-width:980px){
.hero-grid{ grid-template-columns:1fr; }
.portfolio-grid{ grid-template-columns:repeat(2,1fr) }
.pricing-grid{ grid-template-columns:repeat(2,1fr) }
.test-grid{ grid-template-columns:1fr }
@media (max-width:720px){
.container{ padding:2rem 1rem }
.nav-links{ display:none; position:absolute; right:1rem; top:64px; background:var(--surface);
padding:8px; border-radius:10px; box-shadow:var(--shadow) }
.[Link]{ display:flex; flex-direction:column; width:160px }
.nav-toggle{ display:block }
.portfolio-grid{ grid-template-columns:1fr }
.pricing-grid{ grid-template-columns:1fr }
.feature-grid{ grid-template-columns:1fr }
.form-grid{ grid-template-columns:1fr }
.header-inner{ gap:.6rem }
/* small helpers */
.muted{ color:var(--muted); text-decoration:none; margin-left:.8rem }
.lg{ padding: .8rem 1.1rem; font-size:1rem }
/* [Link] — Vanilla JS for interactions
Features:
- Nav toggle (mobile)
- Theme toggle (prefers saved in localStorage)
- Portfolio modal (open from project items)
- Simple contact form validation and fake send
- Small accessible behaviours
*/
(() => {
/* Elements */
const navToggle = [Link]('navToggle');
const navLinks = [Link]('navLinks');
const themeToggle = [Link]('themeToggle');
const projectGrid = [Link]('projects');
const modal = [Link]('projectModal');
const modalClose = [Link]('modalClose');
const modalClose2 = [Link]('modalClose2');
const modalTitle = [Link]('modalTitle');
const modalDesc = [Link]('modalDesc');
const modalTags = [Link]('modalTags');
const modalVisit = [Link]('modalVisit');
const yearEl = [Link]('year');
/* set year */
if (yearEl) [Link] = new Date().getFullYear();
/* NAV (mobile) */
[Link]('click', () => {
const expanded = [Link]('aria-expanded') === 'true';
[Link]('aria-expanded', String(!expanded));
[Link]('open');
});
// Close nav when link clicked (mobile)
[Link]('click', (e) => {
if ([Link] === 'A') {
[Link]('open');
[Link]('aria-expanded', 'false');
});
/* THEME */
const root = [Link];
const preferLight = [Link] && [Link]('(prefers-color-scheme:
light)').matches;
const saved = [Link]('celestia-theme');
const initLight = saved ? saved === 'light' : preferLight;
if (initLight) [Link]('light'), [Link] = '☀️', [Link]('aria-
pressed','true');
[Link]('click', () => {
const isLight = [Link]('light');
[Link] = isLight ? '☀️' : '🌙';
[Link]('aria-pressed', String(isLight));
[Link]('celestia-theme', isLight ? 'light' : 'dark');
});
/* PORTFOLIO MODAL */
function openModalFrom(target) {
const title = [Link] || 'Untitled';
const desc = [Link] || '';
const tags = [Link] || '';
[Link] = title;
[Link] = desc;
[Link] = tags;
[Link]('aria-hidden', 'false');
[Link]('.modal-panel').focus?.();
// set visit link to a placeholder (in real site use real URL)
[Link] = '#contact';
function closeModal() {
[Link]('aria-hidden', 'true');
[Link]('click', (e) => {
const card = [Link]('.project');
if (!card) return;
openModalFrom(card);
});
// open modal via keyboard (Enter/Space)
[Link]('keydown', (e) => {
if ([Link] === 'Enter' || [Link] === ' ') {
const card = [Link]('.project');
if (card) { [Link](); openModalFrom(card); }
}
});
[Link]('click', closeModal);
[Link]('click', closeModal);
[Link]('click', (e) => {
if ([Link] === modal) closeModal();
});
[Link]('keydown', (e) => {
if ([Link] === 'Escape') closeModal();
});
/* CONTACT form (client-side validation + fake send) */
const form = [Link]('contactForm');
const formStatus = [Link]('formStatus');
function showFieldError(el, msg) {
const small = [Link]('.error') || [Link]('.error');
if (small) [Link] = msg || '';
[Link]('submit', (e) => {
[Link]();
[Link] = '';
const formData = new FormData(form);
const name = [Link]('name')?.trim();
const email = [Link]('email')?.trim();
const message = [Link]('message')?.trim();
let ok = true;
// Clear previous errors
[Link]('.error').forEach(s => [Link] = '');
if (!name || [Link] < 2) {
const el = [Link]('name').parentElement;
showFieldError(el, 'Please enter your name (2+ characters).');
ok = false;
if (!email || !/^\S+@\S+\.\S+$/.test(email)) {
const el = [Link]('email').parentElement;
showFieldError(el, 'Please enter a valid email.');
ok = false;
if (!message || [Link] < 10) {
const el = [Link]('message').parentElement;
showFieldError(el, 'Please tell us a bit more (10+ characters).');
ok = false;
if (!ok) {
[Link] = 'Please fix the errors above and try again.';
return;
// Simulate sending
const btn = [Link]('button[type="submit"]');
const prev = [Link];
[Link] = true;
[Link] = 'Sending…';
// Simulate network delay (fake)
setTimeout(() => {
[Link] = false;
[Link] = prev;
[Link]();
[Link] = 'Thanks! Your message has been sent (simulation). We’ll reply soon.';
}, 900);
});
/* small accessibility helper: focus trap in modal when open */
let lastFocused;
[Link]('transitionstart', () => {
if ([Link]('aria-hidden') === 'false') {
lastFocused = [Link];
const focusable = [Link]('button, a, [tabindex]') || modal;
[Link]();
[Link] = 'hidden';
} else {
[Link] = '';
lastFocused?.focus?.();
});
// Smooth scroll for internal links
[Link]('a[href^="#"]').forEach(a => {
[Link]('click', (e) => {
const href = [Link]('href');
if (href === '#' || href === '#!') return;
const target = [Link](href);
if (target) {
[Link]();
[Link]({ behavior: 'smooth', block: 'start' });
});
});
})();