LaundryServiceWebApp-EmailJS/index.html at main · rushikeshdharme-dev/LaundryServiceWebApp-EmailJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Laundry Services — Upgrade Your Child</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
</head>
<body>
  <!-- NAVBAR -->
  <header class="navbar">
    <div class="container nav-inner">
      <div class="brand">
        <img src="./images/Laundry Logo.png" alt="Laundry Logo" class="logo"/>
        <span class="brand-name">SparkWash</span>
      </div>
      <nav class="nav-links">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About Us</a>
        <a href="#contact">Contact Us</a>
      </nav>
      <div class="user-name">Rushikesh Dharme</div>
      <button class="nav-toggle" aria-label="toggle nav">☰</button>
    </div>
  </header>

  <!-- HERO -->
  <section id="home" class="hero container">
    <div class="hero-left">
      <h1>Fast. Clean. Reliable.</h1>
      <p>Get your clothes cleaned, folded, and delivered on time. Book online and receive instant confirmation.</p>
      <button id="bookScrollBtn" class="primary">Book a Service Today</button>
    </div>
    <div class="hero-right">
      <img src="https://media.istockphoto.com/id/1463361334/photo/washing-machine.jpg?s=612x612&w=0&k=20&c=XZbX6NeoxSvLldqyOFAm5yh0N-b5933E5wzfGRQtq_U=" alt="Laundry service" />
    </div>
  </section>

  <!-- SERVICE OVERVIEW -->
  <section class="overview">
    <div class="container overview-cards">
      <div class="card"><strong>15+</strong><span>Services</span></div>
      <div class="card"><strong>240+</strong><span>Happy Customers</span></div>
      <div class="card"><strong>2+</strong><span>Years Experience</span></div>
    </div>
  </section>

  <!-- BOOKING SERVICES -->
  <section id="services" class="container booking-section">
    <div class="booking-left">
      <h2>Our Services</h2>
      <div id="serviceList" class="service-list">
        <!-- Services injected by script.js -->
      </div>
      <p class="hint">Use "Add Item" to add service to cart. Use "Remove" to remove one unit.</p>
    </div>

    <div class="booking-right">
      <div class="cart">
        <h3>Your Cart</h3>
        <div id="cartItems" class="cart-items">No items added.</div>
        <div class="cart-total">Total: ₹ <span id="totalAmount">0</span></div>
      </div>

      <div class="booking-form">
        <h3>Book Now</h3>
        <form id="bookingForm">
          <label>Full Name
            <input type="text" name="full_name" id="fullName" required />
          </label>
          <label>Email
            <input type="email" name="email" id="email" required />
          </label>
          <label>Phone
            <input type="tel" name="phone" id="phone" required pattern="[0-9]{10}" />
          </label>
          <input type="hidden" name="order_details" id="orderDetails" />
          <button type="submit" id="bookNowBtn" class="primary">Book Now</button>
        </form>
        <p id="bookingMsg" class="booking-msg" aria-live="polite"></p>
      </div>
    </div>
  </section>

  <!-- QUALITY DESCRIPTION -->
  <section class="quality container" id="about">
    <h2>Why Choose Us?</h2>
    <div class="qualities">
      <div class="q">Premium Services</div>
      <div class="q">Quick Support</div>
      <div class="q">Timely Delivery</div>
      <div class="q">Affordable Prices</div>
    </div>
  </section>

  <!-- NEWSLETTER -->
  <section class="newsletter container">
    <h3>Subscribe to our Newsletter</h3>
    <form id="newsletterForm" class="newsletter-form">
      <input type="text" id="nlName" placeholder="Full name" required />
      <input type="email" id="nlEmail" placeholder="Email" required />
      <button type="submit" class="primary">Subscribe</button>
    </form>
    <p id="nlMsg" class="booking-msg"></p>
  </section>

  <!-- FOOTER -->
  <footer id="contact">
    <div class="container footer-inner">
      <div class="footer-left">
        <img src="./images/Laundry Logo.png" alt="logo" class="logo-footer" />
        <p>SparkWash — Fast, Clean & Reliable</p>
      </div>
      <div class="footer-links">
        <a href="#about">About Us</a>
        <a href="#">FAQs</a>
        <a href="#contact">Contact Us</a>
      </div>
      <div class="socials">
        <a href="#" aria-label="facebook">Fb</a>
        <a href="#" aria-label="instagram">Ig</a>
        <a href="#" aria-label="twitter">Tw</a>
      </div>
    </div>
    <div class="copyright">© 2025 SparkWash. All rights reserved.</div>
  </footer>

  <script src="script.js"></script>
</body>
</html>