Spaces:

Ryugen22
/

RECOM

Sleeping

App Files Files Community

Ryugen22 commited on May 2

Commit

f3cd459

verified ·

1 Parent(s): 98cd1cc

Upload 6 files

Browse files

Files changed (6) hide show

templates/admin_dashboard.html +164 -0
templates/admin_login.html +70 -0
templates/contact.html +209 -0
templates/index.html +303 -0
templates/instructions.html +320 -0
templates/success.html +85 -0

templates/admin_dashboard.html ADDED Viewed

	@@ -0,0 +1,164 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>RECOM — Admin Dashboard</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root { --orange: #F26419; --peach: #F9A87E; --cream: #FFF3EC; --deep: #3D1A00; --mid: #7A3B10; --light-orange: #FDDCC4; }
+  body { font-family: 'DM Sans', sans-serif; background: var(--cream); min-height: 100vh; padding-bottom: 60px; }
+  header {
+    background: #fff; border-bottom: 1.5px solid var(--light-orange);
+    padding: 18px 32px; display: flex; align-items: center; justify-content: space-between;
+    position: sticky; top: 0; z-index: 10;
+    box-shadow: 0 2px 16px rgba(242,100,25,0.07);
+  }
+  .logo { display: flex; align-items: center; gap: 12px; }
+  .logo-mark {
+    width: 38px; height: 38px; background: var(--orange); border-radius: 10px;
+    display: flex; align-items: center; justify-content: center;
+    color: #fff; font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700;
+  }
+  .logo-text { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--deep); }
+  .logo-text span { color: var(--orange); }
+  .admin-badge {
+    background: var(--light-orange); color: var(--orange);
+    font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
+    text-transform: uppercase; padding: 4px 12px; border-radius: 100px;
+    border: 1px solid var(--peach);
+  }
+  .logout {
+    background: none; border: 1.5px solid var(--light-orange); color: var(--mid);
+    padding: 8px 16px; border-radius: 10px; font-family: 'DM Sans', sans-serif;
+    font-size: 13px; cursor: pointer; text-decoration: none;
+    transition: border-color 0.2s, color 0.2s;
+  }
+  .logout:hover { border-color: var(--orange); color: var(--orange); }
+  .container { max-width: 900px; margin: 0 auto; padding: 32px 20px; }
+  .stats {
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 16px; margin-bottom: 32px;
+  }
+  .stat-card {
+    background: #fff; border: 1.5px solid var(--light-orange); border-radius: 16px;
+    padding: 20px 22px; animation: fadeUp 0.4s ease both;
+  }
+  .stat-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; font-weight: 500; }
+  .stat-value { font-family: 'Playfair Display', serif; font-size: 32px; color: var(--orange); font-weight: 700; }
+  .section-title {
+    font-family: 'Playfair Display', serif; font-size: 20px; color: var(--deep);
+    margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
+  }
+  /* Empty state */
+  .empty {
+    background: #fff; border: 1.5px solid var(--light-orange); border-radius: 18px;
+    padding: 60px 20px; text-align: center; color: var(--mid);
+  }
+  .empty-icon { font-size: 40px; margin-bottom: 12px; }
+  .empty p { font-size: 15px; font-weight: 300; }
+  /* Cards grid */
+  .cards-grid { display: grid; gap: 16px; }
+  .reg-card {
+    background: #fff; border: 1.5px solid var(--light-orange); border-radius: 18px;
+    padding: 22px 24px; animation: fadeUp 0.4s ease both;
+    transition: box-shadow 0.2s;
+  }
+  .reg-card:hover { box-shadow: 0 8px 28px rgba(242,100,25,0.12); }
+  .reg-header {
+    display: flex; align-items: flex-start; justify-content: space-between;
+    margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
+  }
+  .reg-name { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--deep); }
+  .reg-id {
+    background: var(--light-orange); color: var(--orange);
+    font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 100px;
+  }
+  .reg-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
+  .chip {
+    background: var(--cream); border: 1px solid var(--light-orange);
+    border-radius: 100px; padding: 4px 12px; font-size: 13px; color: var(--mid);
+  }
+  .chip strong { color: var(--deep); }
+  .reg-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+  .detail { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--mid); }
+  .detail-icon { font-size: 16px; flex-shrink: 0; }
+  .detail-text { line-height: 1.5; }
+  .reg-date { font-size: 12px; color: var(--mid); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--light-orange); font-weight: 300; }
+  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo">
+    <div class="logo-mark">R</div>
+    <div class="logo-text">RE<span>COM</span></div>
+    <div class="admin-badge">Admin</div>
+  </div>
+  <a href="/admin/logout" class="logout">Logout</a>
+</header>
+<div class="container">
+  <div class="stats">
+    <div class="stat-card" style="animation-delay:0.1s">
+      <div class="stat-label">Total Registrations</div>
+      <div class="stat-value">{{ students|length }}</div>
+    </div>
+    <div class="stat-card" style="animation-delay:0.2s">
+      <div class="stat-label">Total Revenue</div>
+      <div class="stat-value">₹{{ students|length * 200 }}</div>
+    </div>
+  </div>
+  <div class="section-title">📋 All Registrations</div>
+  {% if students|length == 0 %}
+  <div class="empty">
+    <div class="empty-icon">📭</div>
+    <p>No registrations yet. They'll appear here once students sign up.</p>
+  </div>
+  {% else %}
+  <div class="cards-grid">
+    {% for s in students|reverse %}
+    <div class="reg-card" style="animation-delay: {{ loop.index0 * 0.05 }}s">
+      <div class="reg-header">
+        <div class="reg-name">{{ s.name }}</div>
+        <div class="reg-id">#{{ s.id }}</div>
+      </div>
+      <div class="reg-chips">
+        <div class="chip">Class <strong>{{ s.class }}</strong></div>
+        <div class="chip">Section <strong>{{ s.section }}</strong></div>
+      </div>
+      <div class="reg-details">
+        <div class="detail">
+          <span class="detail-icon">📞</span>
+          <div class="detail-text">{{ s.get('phone', '—') }}</div>
+        </div>
+        <div class="detail">
+          <span class="detail-icon">💬</span>
+          <div class="detail-text">{{ s.get('whatsapp', '—') }}</div>
+        </div>
+        <div class="detail" style="grid-column: 1 / -1">
+          <span class="detail-icon">📍</span>
+          <div class="detail-text">{{ s.get('address', '—') }}</div>
+        </div>
+      </div>
+      <div class="reg-date">🕐 Registered on {{ s.get('registered_at', '—') }}</div>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+</body>
+</html>

templates/admin_login.html ADDED Viewed

	@@ -0,0 +1,70 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>RECOM — Admin</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root { --orange: #F26419; --peach: #F9A87E; --cream: #FFF3EC; --deep: #3D1A00; --mid: #7A3B10; --light-orange: #FDDCC4; }
+  body {
+    font-family: 'DM Sans', sans-serif; background: var(--cream);
+    min-height: 100vh; display: flex; align-items: center; justify-content: center;
+  }
+  body::before {
+    content: ''; position: fixed; top: -100px; right: -100px;
+    width: 400px; height: 400px; border-radius: 50%;
+    background: radial-gradient(circle, var(--peach) 0%, transparent 70%);
+    opacity: 0.4; pointer-events: none;
+  }
+  .card {
+    background: #fff; border: 1.5px solid var(--light-orange);
+    border-radius: 24px; padding: 44px 40px 40px;
+    width: min(400px, 92vw);
+    box-shadow: 0 12px 48px rgba(242,100,25,0.10);
+    animation: fadeUp 0.5s ease both;
+  }
+  .lock { font-size: 36px; margin-bottom: 16px; }
+  h2 { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--deep); margin-bottom: 6px; }
+  .sub { font-size: 14px; color: var(--mid); font-weight: 300; margin-bottom: 28px; }
+  label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }
+  input {
+    width: 100%; padding: 13px 16px; border: 1.5px solid var(--light-orange);
+    border-radius: 12px; font-family: 'DM Sans', sans-serif; font-size: 15px;
+    color: var(--deep); background: var(--cream); outline: none;
+    transition: border 0.2s, box-shadow 0.2s; margin-bottom: 20px;
+  }
+  input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,100,25,0.12); background: #fff; }
+  .error {
+    background: #fff0f0; border: 1.5px solid #ffcccc; border-radius: 10px;
+    padding: 10px 14px; font-size: 13px; color: #cc3300;
+    margin-bottom: 16px;
+  }
+  .btn {
+    width: 100%; padding: 14px; background: var(--orange); color: #fff;
+    border: none; border-radius: 12px; font-family: 'DM Sans', sans-serif;
+    font-size: 15px; font-weight: 500; cursor: pointer;
+    box-shadow: 0 6px 20px rgba(242,100,25,0.28);
+    transition: background 0.2s, transform 0.15s;
+  }
+  .btn:hover { background: #d6540f; transform: translateY(-1px); }
+  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+</style>
+</head>
+<body>
+<div class="card">
+  <div class="lock">🔐</div>
+  <h2>Admin Access</h2>
+  <p class="sub">Enter your password to view registrations.</p>
+  {% if error %}
+  <div class="error">{{ error }}</div>
+  {% endif %}
+  <form method="POST">
+    <label>Password</label>
+    <input type="password" name="password" placeholder="Enter admin password" required autofocus/>
+    <button type="submit" class="btn">Login →</button>
+  </form>
+</div>
+</body>
+</html>

templates/contact.html ADDED Viewed

	@@ -0,0 +1,209 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>RECOM — Contact Details</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --orange: #F26419; --peach: #F9A87E; --cream: #FFF3EC;
+    --deep: #3D1A00; --mid: #7A3B10; --light-orange: #FDDCC4;
+  }
+  body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--cream);
+    min-height: 100vh;
+    display: flex; flex-direction: column; align-items: center;
+    overflow-x: hidden;
+  }
+  body::before {
+    content: '';
+    position: fixed; top: -120px; right: -120px;
+    width: 480px; height: 480px; border-radius: 50%;
+    background: radial-gradient(circle, var(--peach) 0%, transparent 70%);
+    opacity: 0.4; pointer-events: none;
+  }
+  header {
+    width: 100%; padding: 28px 40px 20px;
+    display: flex; align-items: center; gap: 14px;
+  }
+  .logo-mark {
+    width: 44px; height: 44px; background: var(--orange);
+    border-radius: 12px; display: flex; align-items: center; justify-content: center;
+    color: #fff; font-family: 'Playfair Display', serif;
+    font-size: 22px; font-weight: 900; box-shadow: 0 4px 14px rgba(242,100,25,0.35);
+  }
+  .logo-text { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--deep); letter-spacing: 1px; }
+  .logo-text span { color: var(--orange); }
+  .steps {
+    display: flex; align-items: center; gap: 10px;
+    margin: 10px 0 30px; animation: fadeUp 0.5s ease both;
+  }
+  .step {
+    display: flex; align-items: center; gap: 6px;
+    font-size: 13px; font-weight: 500;
+  }
+  .step-dot {
+    width: 26px; height: 26px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; font-weight: 700;
+  }
+  .step.done .step-dot { background: var(--orange); color: #fff; }
+  .step.done .step-label { color: var(--orange); }
+  .step.active .step-dot { background: var(--deep); color: #fff; }
+  .step.active .step-label { color: var(--deep); }
+  .step.inactive .step-dot { background: var(--light-orange); color: var(--mid); }
+  .step.inactive .step-label { color: var(--mid); }
+  .step-line { width: 30px; height: 2px; background: var(--light-orange); border-radius: 2px; }
+  .greeting {
+    text-align: center; padding: 0 20px;
+    animation: fadeUp 0.6s 0.1s ease both;
+  }
+  .greeting .hi { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }
+  .greeting h2 { font-family: 'Playfair Display', serif; font-size: 28px; color: var(--deep); margin-bottom: 6px; }
+  .greeting h2 span { color: var(--orange); }
+  .greeting p { font-size: 14px; color: var(--mid); font-weight: 300; margin-bottom: 28px; }
+  .info-bar {
+    display: flex; gap: 10px; justify-content: center;
+    flex-wrap: wrap; margin-bottom: 32px;
+    animation: fadeUp 0.6s 0.2s ease both;
+  }
+  .chip {
+    background: #fff; border: 1.5px solid var(--light-orange);
+    border-radius: 100px; padding: 6px 16px;
+    font-size: 13px; color: var(--mid); font-weight: 500;
+  }
+  .chip strong { color: var(--deep); }
+  .card {
+    background: #fff; border: 1.5px solid var(--light-orange);
+    border-radius: 24px; padding: 38px 40px 34px;
+    width: min(440px, 92vw); box-shadow: 0 12px 48px rgba(242,100,25,0.10);
+    animation: fadeUp 0.6s 0.3s ease both; margin-bottom: 60px;
+  }
+  .card-title { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--deep); margin-bottom: 6px; }
+  .card-sub { font-size: 13px; color: var(--mid); margin-bottom: 28px; font-weight: 300; }
+  .field { margin-bottom: 20px; }
+  label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }
+  input, textarea {
+    width: 100%; padding: 13px 16px;
+    border: 1.5px solid var(--light-orange); border-radius: 12px;
+    font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--deep);
+    background: var(--cream); outline: none;
+    transition: border 0.2s, box-shadow 0.2s;
+  }
+  input:focus, textarea:focus {
+    border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,100,25,0.12); background: #fff;
+  }
+  textarea { resize: none; height: 80px; }
+  .note {
+    background: var(--light-orange); border-radius: 12px;
+    padding: 14px 16px; margin-bottom: 22px;
+    font-size: 13px; color: var(--mid); line-height: 1.6;
+  }
+  .note strong { color: var(--orange); }
+  .btn {
+    width: 100%; padding: 15px; background: var(--orange); color: #fff;
+    border: none; border-radius: 14px; font-family: 'DM Sans', sans-serif;
+    font-size: 16px; font-weight: 500; cursor: pointer; margin-top: 4px;
+    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
+    box-shadow: 0 6px 20px rgba(242,100,25,0.28);
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+  }
+  .btn:hover { background: #d6540f; transform: translateY(-2px); }
+  .btn:active { transform: translateY(0); }
+  .btn:disabled { background: var(--peach); cursor: not-allowed; transform: none; }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo-mark">R</div>
+  <div class="logo-text">RE<span>COM</span></div>
+</header>
+<div class="steps">
+  <div class="step done"><div class="step-dot">✓</div><div class="step-label">Basic Info</div></div>
+  <div class="step-line"></div>
+  <div class="step active"><div class="step-dot">2</div><div class="step-label">Contact</div></div>
+  <div class="step-line"></div>
+  <div class="step inactive"><div class="step-dot">3</div><div class="step-label">Done</div></div>
+</div>
+<div class="greeting">
+  <div class="hi">Almost there</div>
+  <h2>Hey, <span>{{ name }}!</span></h2>
+  <p>Just a couple more details and you're all set.</p>
+</div>
+<div class="info-bar">
+  <div class="chip">Class <strong>{{ cls }}</strong></div>
+  <div class="chip">Section <strong>{{ section }}</strong></div>
+</div>
+<div class="card">
+  <div class="card-title">Contact Details</div>
+  <div class="card-sub">We'll use this to coordinate pick-up & drop</div>
+  <div class="note">
+    <strong>📞 Our contact numbers will be shared here soon.</strong><br/>
+    You can also reach us once your booking is confirmed.
+  </div>
+  <form id="contactForm">
+    <div class="field">
+      <label>Phone Number</label>
+      <input type="tel" id="phone" placeholder="+91 98765 43210" maxlength="15" required/>
+    </div>
+    <div class="field">
+      <label>WhatsApp Number</label>
+      <input type="tel" id="whatsapp" placeholder="Same as above or different" maxlength="15"/>
+    </div>
+    <div class="field">
+      <label>Pick-up Address</label>
+      <textarea id="address" placeholder="Your area / locality in Hyderabad" required></textarea>
+    </div>
+    <button type="submit" class="btn" id="submitBtn">Confirm Booking ✓</button>
+  </form>
+</div>
+<script>
+  document.getElementById("contactForm").addEventListener("submit", async function(e) {
+    e.preventDefault();
+    const btn = document.getElementById("submitBtn");
+    btn.disabled = true;
+    btn.textContent = "Booking...";
+    const data = {
+      name: "{{ name }}",
+      class: "{{ cls }}",
+      section: "{{ section }}",
+      phone: document.getElementById("phone").value.trim(),
+      whatsapp: document.getElementById("whatsapp").value.trim(),
+      address: document.getElementById("address").value.trim()
+    };
+    const res = await fetch("/submit", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data)
+    });
+    const result = await res.json();
+    if (result.success) window.location.href = "/success";
+  });
+</script>
+</body>
+</html>

templates/index.html ADDED Viewed

	@@ -0,0 +1,303 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>RECOM — Record Completion Service</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --orange: #F26419;
+    --peach: #F9A87E;
+    --cream: #FFF3EC;
+    --deep: #3D1A00;
+    --mid: #7A3B10;
+    --light-orange: #FDDCC4;
+  }
+  body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--cream);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: hidden;
+  }
+  /* Decorative blob background */
+  body::before {
+    content: '';
+    position: fixed;
+    top: -120px; right: -120px;
+    width: 480px; height: 480px;
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--peach) 0%, transparent 70%);
+    opacity: 0.45;
+    pointer-events: none;
+  }
+  body::after {
+    content: '';
+    position: fixed;
+    bottom: -100px; left: -100px;
+    width: 380px; height: 380px;
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
+    opacity: 0.18;
+    pointer-events: none;
+  }
+  header {
+    width: 100%;
+    padding: 28px 40px 20px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+  .logo-mark {
+    width: 44px; height: 44px;
+    background: var(--orange);
+    border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    color: #fff;
+    font-family: 'Playfair Display', serif;
+    font-size: 22px;
+    font-weight: 900;
+    box-shadow: 0 4px 14px rgba(242,100,25,0.35);
+  }
+  .logo-text {
+    font-family: 'Playfair Display', serif;
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--deep);
+    letter-spacing: 1px;
+  }
+  .logo-text span { color: var(--orange); }
+  .hero {
+    margin-top: 20px;
+    text-align: center;
+    padding: 0 20px;
+    animation: fadeUp 0.7s ease both;
+  }
+  .badge {
+    display: inline-block;
+    background: var(--light-orange);
+    color: var(--orange);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    padding: 6px 18px;
+    border-radius: 100px;
+    margin-bottom: 18px;
+    border: 1.5px solid var(--peach);
+  }
+  h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: clamp(32px, 6vw, 56px);
+    color: var(--deep);
+    line-height: 1.15;
+    margin-bottom: 14px;
+  }
+  h1 em { color: var(--orange); font-style: normal; }
+  .sub {
+    color: var(--mid);
+    font-size: 16px;
+    font-weight: 300;
+    max-width: 420px;
+    margin: 0 auto 10px;
+    line-height: 1.7;
+  }
+  /* Price pill */
+  .price-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--orange);
+    color: #fff;
+    font-size: 15px;
+    font-weight: 500;
+    padding: 10px 22px;
+    border-radius: 100px;
+    margin: 16px 0 32px;
+    box-shadow: 0 6px 20px rgba(242,100,25,0.3);
+    animation: pulse 2.5s ease-in-out infinite;
+  }
+  .price-pill .rupee { font-size: 20px; font-weight: 700; }
+  @keyframes pulse {
+    0%, 100% { box-shadow: 0 6px 20px rgba(242,100,25,0.3); }
+    50% { box-shadow: 0 6px 28px rgba(242,100,25,0.55); }
+  }
+  /* Features strip */
+  .features {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 40px;
+    animation: fadeUp 0.7s 0.2s ease both;
+  }
+  .feat {
+    background: #fff;
+    border: 1.5px solid var(--light-orange);
+    border-radius: 12px;
+    padding: 12px 18px;
+    font-size: 13px;
+    color: var(--mid);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+  }
+  .feat-icon { font-size: 18px; }
+  /* Card */
+  .card {
+    background: #fff;
+    border: 1.5px solid var(--light-orange);
+    border-radius: 24px;
+    padding: 40px 40px 36px;
+    width: min(440px, 92vw);
+    box-shadow: 0 12px 48px rgba(242,100,25,0.10);
+    animation: fadeUp 0.7s 0.3s ease both;
+    margin-bottom: 60px;
+  }
+  .card-title {
+    font-family: 'Playfair Display', serif;
+    font-size: 20px;
+    color: var(--deep);
+    margin-bottom: 6px;
+  }
+  .card-sub {
+    font-size: 13px;
+    color: var(--mid);
+    margin-bottom: 28px;
+    font-weight: 300;
+  }
+  .field { margin-bottom: 20px; }
+  label {
+    display: block;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: var(--mid);
+    margin-bottom: 8px;
+  }
+  input, select {
+    width: 100%;
+    padding: 13px 16px;
+    border: 1.5px solid var(--light-orange);
+    border-radius: 12px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 15px;
+    color: var(--deep);
+    background: var(--cream);
+    outline: none;
+    transition: border 0.2s, box-shadow 0.2s;
+    appearance: none;
+  }
+  input:focus, select:focus {
+    border-color: var(--orange);
+    box-shadow: 0 0 0 3px rgba(242,100,25,0.12);
+    background: #fff;
+  }
+  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .btn {
+    width: 100%;
+    padding: 15px;
+    background: var(--orange);
+    color: #fff;
+    border: none;
+    border-radius: 14px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    margin-top: 8px;
+    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
+    box-shadow: 0 6px 20px rgba(242,100,25,0.28);
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+  }
+  .btn:hover { background: #d6540f; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(242,100,25,0.38); }
+  .btn:active { transform: translateY(0); }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(24px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo-mark">R</div>
+  <div class="logo-text">RE<span>COM</span></div>
+</header>
+<div class="hero">
+  <div class="badge">✦ Record Completion Service</div>
+  <h1>Your records,<br/><em>completed.</em></h1>
+  <p class="sub">We pick up your school records anywhere in Hyderabad, complete them, and drop them back — hassle-free.</p>
+  <div class="price-pill">
+    <span class="rupee">₹200</span>
+    <span>per record · Pick & Drop included · No extra charges</span>
+  </div>
+</div>
+<div class="features">
+  <div class="feat"><span class="feat-icon">🛵</span> Free Pick-up & Drop</div>
+  <div class="feat"><span class="feat-icon">📍</span> Anywhere in Hyderabad</div>
+  <div class="feat"><span class="feat-icon">⚡</span> Fast Turnaround</div>
+</div>
+<div class="card">
+  <div class="card-title">Let's get started</div>
+  <div class="card-sub">Enter your basic details to proceed</div>
+  <form id="basicForm">
+    <div class="field">
+      <label>Full Name</label>
+      <input type="text" id="name" placeholder="e.g. Arjun Reddy" required/>
+    </div>
+    <div class="row">
+      <div class="field">
+        <label>Class</label>
+        <input type="text" id="class" placeholder="e.g. MBBS, 10th" required/>
+      </div>
+      <div class="field">
+        <label>Section</label>
+        <input type="text" id="section" placeholder="e.g. A, B" required/>
+      </div>
+    </div>
+    <button type="submit" class="btn">Continue →</button>
+  </form>
+</div>
+<script>
+  document.getElementById("basicForm").addEventListener("submit", function(e) {
+    e.preventDefault();
+    const name = document.getElementById("name").value.trim();
+    const cls = document.getElementById("class").value;
+    const section = document.getElementById("section").value;
+    if (!name || !cls || !section) return;
+    window.location.href = `/instructions?name=${encodeURIComponent(name)}&class=${encodeURIComponent(cls)}&section=${encodeURIComponent(section)}`;
+  });
+</script>
+</body>
+</html>

templates/instructions.html ADDED Viewed

	@@ -0,0 +1,320 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>RECOM — How It Works</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root {
+    --orange: #F26419; --peach: #F9A87E; --cream: #FFF3EC;
+    --deep: #3D1A00; --mid: #7A3B10; --light-orange: #FDDCC4;
+  }
+  body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--cream);
+    min-height: 100vh;
+    display: flex; flex-direction: column; align-items: center;
+    overflow-x: hidden; padding-bottom: 60px;
+  }
+  body::before {
+    content: ''; position: fixed; top: -100px; right: -100px;
+    width: 420px; height: 420px; border-radius: 50%;
+    background: radial-gradient(circle, var(--peach) 0%, transparent 70%);
+    opacity: 0.4; pointer-events: none;
+  }
+  body::after {
+    content: ''; position: fixed; bottom: -80px; left: -80px;
+    width: 320px; height: 320px; border-radius: 50%;
+    background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
+    opacity: 0.13; pointer-events: none;
+  }
+  header {
+    width: 100%; padding: 28px 40px 0;
+    display: flex; align-items: center; gap: 14px;
+  }
+  .logo-mark {
+    width: 44px; height: 44px; background: var(--orange); border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    color: #fff; font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 900;
+    box-shadow: 0 4px 14px rgba(242,100,25,0.35);
+  }
+  .logo-text { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--deep); letter-spacing: 1px; }
+  .logo-text span { color: var(--orange); }
+  /* Steps */
+  .steps {
+    display: flex; align-items: center; gap: 10px;
+    margin: 24px 0 28px; animation: fadeUp 0.5s ease both;
+  }
+  .step { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
+  .step-dot {
+    width: 26px; height: 26px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
+  }
+  .step.done .step-dot { background: var(--orange); color: #fff; }
+  .step.done .step-label { color: var(--orange); }
+  .step.active .step-dot { background: var(--deep); color: #fff; }
+  .step.active .step-label { color: var(--deep); }
+  .step.inactive .step-dot { background: var(--light-orange); color: var(--mid); }
+  .step.inactive .step-label { color: var(--mid); }
+  .step-line { width: 30px; height: 2px; background: var(--light-orange); border-radius: 2px; }
+  /* Hero */
+  .page-hero {
+    text-align: center; padding: 0 20px 28px;
+    animation: fadeUp 0.5s 0.1s ease both;
+  }
+  .badge {
+    display: inline-block; background: var(--light-orange); color: var(--orange);
+    font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
+    padding: 6px 18px; border-radius: 100px; margin-bottom: 14px;
+    border: 1.5px solid var(--peach);
+  }
+  .page-hero h2 {
+    font-family: 'Playfair Display', serif; font-size: 30px; color: var(--deep); margin-bottom: 8px;
+  }
+  .page-hero p { font-size: 14px; color: var(--mid); font-weight: 300; }
+  /* Main card */
+  .main-card {
+    background: #fff; border: 1.5px solid var(--light-orange); border-radius: 24px;
+    padding: 36px 36px 32px; width: min(500px, 92vw);
+    box-shadow: 0 12px 48px rgba(242,100,25,0.10);
+    animation: fadeUp 0.5s 0.2s ease both;
+  }
+  /* Timeline section */
+  .section-label {
+    font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
+    color: var(--orange); margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
+  }
+  .section-label::after {
+    content: ''; flex: 1; height: 1.5px; background: var(--light-orange); border-radius: 2px;
+  }
+  .timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; }
+  .tl-item {
+    display: flex; gap: 16px; align-items: stretch;
+    animation: fadeUp 0.4s ease both;
+  }
+  .tl-left {
+    display: flex; flex-direction: column; align-items: center; width: 36px; flex-shrink: 0;
+  }
+  .tl-dot {
+    width: 36px; height: 36px; border-radius: 50%; background: var(--light-orange);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px; flex-shrink: 0; border: 2px solid var(--peach);
+  }
+  .tl-line { width: 2px; background: var(--light-orange); flex: 1; min-height: 16px; margin: 4px 0; }
+  .tl-item:last-child .tl-line { display: none; }
+  .tl-body { padding: 6px 0 20px; flex: 1; }
+  .tl-pages {
+    display: inline-block; background: var(--orange); color: #fff;
+    font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 100px;
+    margin-bottom: 6px; letter-spacing: 0.5px;
+  }
+  .tl-days { font-size: 18px; font-weight: 700; color: var(--deep); margin-bottom: 3px; }
+  .tl-desc { font-size: 13px; color: var(--mid); font-weight: 300; line-height: 1.5; }
+  /* Rules */
+  .rules { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
+  .rule {
+    display: flex; gap: 12px; align-items: flex-start;
+    padding: 14px 16px; border-radius: 14px;
+    border: 1.5px solid var(--light-orange); background: var(--cream);
+    font-size: 14px; color: var(--mid); line-height: 1.6;
+    animation: fadeUp 0.4s ease both;
+  }
+  .rule-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
+  .rule strong { color: var(--deep); font-weight: 600; }
+  /* Payment warning */
+  .payment-box {
+    background: linear-gradient(135deg, var(--orange) 0%, #e0520d 100%);
+    border-radius: 18px; padding: 22px 24px; margin-bottom: 28px; color: #fff;
+    animation: fadeUp 0.4s ease both;
+  }
+  .payment-box .pay-icon { font-size: 28px; margin-bottom: 10px; }
+  .payment-box h3 {
+    font-family: 'Playfair Display', serif; font-size: 18px;
+    margin-bottom: 8px; letter-spacing: 0.3px;
+  }
+  .payment-box p { font-size: 13px; opacity: 0.92; line-height: 1.65; font-weight: 300; }
+  /* Mistake policy */
+  .policy-box {
+    background: var(--light-orange); border: 1.5px solid var(--peach);
+    border-radius: 14px; padding: 16px 18px; margin-bottom: 28px;
+    font-size: 14px; color: var(--mid); line-height: 1.65;
+    animation: fadeUp 0.4s ease both;
+  }
+  .policy-box strong { color: var(--deep); }
+  /* Contact / WhatsApp block */
+  .contact-block {
+    background: #fff; border: 2px solid var(--orange); border-radius: 18px;
+    padding: 22px 24px; text-align: center; margin-bottom: 28px;
+    animation: fadeUp 0.4s ease both;
+    box-shadow: 0 6px 24px rgba(242,100,25,0.12);
+  }
+  .contact-block .ct-label {
+    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
+    color: var(--mid); font-weight: 600; margin-bottom: 10px;
+  }
+  .contact-block .ct-sub {
+    font-size: 13px; color: var(--mid); font-weight: 300; margin-bottom: 16px; line-height: 1.6;
+  }
+  .wa-btn {
+    display: inline-flex; align-items: center; gap: 10px;
+    background: #25D366; color: #fff; text-decoration: none;
+    padding: 13px 28px; border-radius: 14px; font-size: 16px; font-weight: 600;
+    box-shadow: 0 6px 20px rgba(37,211,102,0.3);
+    transition: background 0.2s, transform 0.15s;
+    margin-bottom: 10px;
+  }
+  .wa-btn:hover { background: #1ebe5d; transform: translateY(-2px); }
+  .wa-number { font-size: 18px; font-weight: 700; color: var(--deep); margin-top: 10px; letter-spacing: 1px; }
+  .wa-note { font-size: 12px; color: var(--mid); margin-top: 6px; font-weight: 300; }
+  /* Footer note */
+  .footer-note {
+    text-align: center; font-size: 13px; color: var(--mid);
+    font-weight: 300; margin-bottom: 28px; line-height: 1.7;
+  }
+  .footer-note strong { color: var(--deep); }
+  /* CTA */
+  .btn {
+    width: 100%; padding: 15px; background: var(--orange); color: #fff;
+    border: none; border-radius: 14px; font-family: 'DM Sans', sans-serif;
+    font-size: 16px; font-weight: 500; cursor: pointer;
+    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
+    box-shadow: 0 6px 20px rgba(242,100,25,0.28);
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+  }
+  .btn:hover { background: #d6540f; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(242,100,25,0.38); }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(18px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo-mark">R</div>
+  <div class="logo-text">RE<span>COM</span></div>
+</header>
+<div class="steps">
+  <div class="step done"><div class="step-dot">✓</div><div class="step-label">Basic Info</div></div>
+  <div class="step-line"></div>
+  <div class="step active"><div class="step-dot">2</div><div class="step-label">How It Works</div></div>
+  <div class="step-line"></div>
+  <div class="step inactive"><div class="step-dot">3</div><div class="step-label">Contact</div></div>
+  <div class="step-line"></div>
+  <div class="step inactive"><div class="step-dot">4</div><div class="step-label">Done</div></div>
+</div>
+<div class="page-hero">
+  <div class="badge">✦ Please Read Carefully</div>
+  <h2>Before You Submit</h2>
+  <p>Here's everything you need to know about our service.</p>
+</div>
+<div class="main-card">
+  <!-- Timeline -->
+  <div class="section-label">⏱ Completion Timeline</div>
+  <div class="timeline">
+    <div class="tl-item" style="animation-delay:0.1s">
+      <div class="tl-left"><div class="tl-dot">📄</div><div class="tl-line"></div></div>
+      <div class="tl-body">
+        <div class="tl-pages">Up to 30 pages</div>
+        <div class="tl-days">1 Day</div>
+        <div class="tl-desc">Quick turnaround for shorter records.</div>
+      </div>
+    </div>
+    <div class="tl-item" style="animation-delay:0.2s">
+      <div class="tl-left"><div class="tl-dot">📋</div><div class="tl-line"></div></div>
+      <div class="tl-body">
+        <div class="tl-pages">Up to 50 pages</div>
+        <div class="tl-days">2 Days</div>
+        <div class="tl-desc">Medium-length records completed in 2 days.</div>
+      </div>
+    </div>
+    <div class="tl-item" style="animation-delay:0.3s">
+      <div class="tl-left"><div class="tl-dot">📚</div></div>
+      <div class="tl-body">
+        <div class="tl-pages">50+ pages</div>
+        <div class="tl-days">3 – 7 Days</div>
+        <div class="tl-desc">Exact duration depends on the total page count. You'll be informed on submission day.</div>
+      </div>
+    </div>
+  </div>
+  <!-- Rules -->
+  <div class="section-label">📌 Important Rules</div>
+  <div class="rules">
+    <div class="rule" style="animation-delay:0.1s">
+      <span class="rule-icon">📎</span>
+      <div>The <strong>PDF file shared to our number will be written as-is.</strong> Nothing extra will be added, and nothing will be removed or cut off.</div>
+    </div>
+    <div class="rule" style="animation-delay:0.15s">
+      <span class="rule-icon">🖊️</span>
+      <div>If your record contains <strong>complex diagrams or drawings</strong>, an additional <strong>₹50 will be charged</strong> on top of the base price.</div>
+    </div>
+    <div class="rule" style="animation-delay:0.2s">
+      <span class="rule-icon">📅</span>
+      <div>The <strong>exact submission date</strong> will be announced to you at the time of record pick-up itself.</div>
+    </div>
+  </div>
+  <!-- Payment warning -->
+  <div class="payment-box" style="animation-delay:0.25s">
+    <div class="pay-icon">💳</div>
+    <h3>Payment Before Submission</h3>
+    <p>The payment must be completed <strong>before handing over your record.</strong> We do not accept post-completion payments. This ensures a smooth, problem-free process for both parties. Please pay first, then give your record for writing.</p>
+  </div>
+  <!-- Mistake policy -->
+  <div class="policy-box" style="animation-delay:0.3s">
+    <strong>🔍 Mistake Policy</strong><br/>
+    If you feel there was a mistake from our side, let us know. We'll review it carefully — and if we find there is actually a mistake, we'll correct it without any problem, free of charge.
+  </div>
+  <!-- Contact / WhatsApp -->
+  <div class="section-label">📞 Contact & Orders</div>
+  <div class="contact-block" style="animation-delay:0.35s">
+    <div class="ct-label">Available Anytime</div>
+    <div class="ct-sub">All orders must be placed to this number only.<br/>Send your PDF and confirm your pick-up here.</div>
+    <a href="https://wa.me/91XXXXXXXXXX" class="wa-btn" id="waLink">
+      <span>💬</span> Order on WhatsApp
+    </a>
+    <div class="wa-number" id="waNumber">+91 XXXXX XXXXX</div>
+    <div class="wa-note">Number will be updated shortly</div>
+  </div>
+  <div class="footer-note">
+    Thank you for choosing <strong>RECOM</strong>.<br/>Have a great day! 😊
+  </div>
+  <!-- CTA to next step -->
+  <button class="btn" onclick="goContact()">Proceed to Book →</button>
+</div>
+<script>
+  // Pass name/class/section through to next page
+  const params = new URLSearchParams(window.location.search);
+  function goContact() {
+    window.location.href = `/contact?${params.toString()}`;
+  }
+</script>
+</body>
+</html>

templates/success.html ADDED Viewed

	@@ -0,0 +1,85 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>RECOM — Booking Confirmed!</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  :root { --orange: #F26419; --peach: #F9A87E; --cream: #FFF3EC; --deep: #3D1A00; --mid: #7A3B10; --light-orange: #FDDCC4; }
+  body {
+    font-family: 'DM Sans', sans-serif; background: var(--cream);
+    min-height: 100vh; display: flex; flex-direction: column;
+    align-items: center; justify-content: center; overflow-x: hidden; padding: 40px 20px;
+  }
+  body::before {
+    content: ''; position: fixed; top: -100px; right: -100px;
+    width: 400px; height: 400px; border-radius: 50%;
+    background: radial-gradient(circle, var(--peach) 0%, transparent 70%);
+    opacity: 0.45; pointer-events: none;
+  }
+  .icon-wrap {
+    width: 90px; height: 90px; background: var(--orange); border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 40px; margin-bottom: 24px;
+    box-shadow: 0 12px 36px rgba(242,100,25,0.35);
+    animation: pop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
+  }
+  @keyframes pop {
+    from { transform: scale(0); opacity: 0; }
+    to   { transform: scale(1); opacity: 1; }
+  }
+  h2 {
+    font-family: 'Playfair Display', serif; font-size: 34px;
+    color: var(--deep); margin-bottom: 12px; text-align: center;
+    animation: fadeUp 0.5s 0.3s ease both;
+  }
+  p {
+    font-size: 15px; color: var(--mid); font-weight: 300;
+    max-width: 340px; text-align: center; line-height: 1.7;
+    margin-bottom: 8px; animation: fadeUp 0.5s 0.4s ease both;
+  }
+  .price-note {
+    display: inline-flex; align-items: center; gap: 8px;
+    background: var(--orange); color: #fff;
+    padding: 10px 24px; border-radius: 100px; font-size: 15px;
+    margin: 20px 0; font-weight: 500; animation: fadeUp 0.5s 0.5s ease both;
+    box-shadow: 0 6px 20px rgba(242,100,25,0.28);
+  }
+  .steps-done {
+    display: flex; flex-direction: column; gap: 10px;
+    background: #fff; border: 1.5px solid var(--light-orange);
+    border-radius: 18px; padding: 24px 28px; margin: 20px 0;
+    width: min(360px, 90vw); animation: fadeUp 0.5s 0.6s ease both;
+  }
+  .step-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mid); }
+  .step-row .dot { width: 28px; height: 28px; background: var(--light-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
+  a.back {
+    font-size: 14px; color: var(--orange); text-decoration: none;
+    font-weight: 500; margin-top: 10px; animation: fadeUp 0.5s 0.7s ease both;
+  }
+  a.back:hover { text-decoration: underline; }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(16px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+</style>
+</head>
+<body>
+  <div class="icon-wrap">🎉</div>
+  <h2>Booking Confirmed!</h2>
+  <p>We've received your details. Our team will reach out to you shortly to arrange pick-up.</p>
+  <div class="price-note">₹200 total · No hidden charges</div>
+  <div class="steps-done">
+    <div class="step-row"><div class="dot">📋</div> We'll call/WhatsApp you to confirm</div>
+    <div class="step-row"><div class="dot">🛵</div> Record picked up from your address</div>
+    <div class="step-row"><div class="dot">✏️</div> Record completed by our team</div>
+    <div class="step-row"><div class="dot">🏠</div> Dropped back at your doorstep</div>
+  </div>
+  <a href="/" class="back">← Submit another record</a>
+</body>
+</html>