Skip to content

Commit

Permalink
Changed the service-menu.html page. instead of hard-coded services, …
Browse files Browse the repository at this point in the history 
…I download them from the database and display them on the website.

created IndexedDB:
- ServiceDB
tables created:
- Appointments
- Employees
- Services
- ServiceCategories
    Added an icon for landing data on the page.
  • Loading branch information
@CodeRookie0
CodeRookie0 committed Feb 19, 2024
1 parent 47db2a5 commit 920bf55
Show file tree
Hide file tree
Showing 3 changed files with 601 additions and 244 deletions.
14 changes: 14 additions & 0 deletions css/service-menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,4 +182,18 @@
.sub-header .scroll-menu-wrapper{
width: 90%;
}
}
.loading-indicator {
text-align: center;
margin-top: 20px;
margin-bottom: 70px;
}
.loading-indicator i {
font-size: 40px;
color: #f44336;
}
.loading-indicator p {
margin-top: 10px;
font-size: 18px;
color: #f44336;
}
235 changes: 6 additions & 229 deletions html/service-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,240 +38,17 @@ <h2>Services</h2>
<div class="scroll-menu-wrapper">
<i id="left-scroll-btn" class="fa-solid fa-chevron-left"></i>
<div class="scroll-menu">
<a href="#women-services">Women's Hair Services <div class="line"></div></a>
<a href="#mens-services">Men's Grooming Services<div class="line"></div></a>
<a href="#beard-services">Beard & Shaving<div class="line"></div></a>
<a href="#children-services">Children's Haircuts<div class="line"></div></a>
<a href="#occasion-hairdos">Special Occasion Hairdos<div class="line"></div></a>
<a href="#waves-curls">Permanent Waves and Curls<div class="line"></div></a>

</div>
<i id="right-scroll-btn" class="fa-solid fa-chevron-right"></i>
</div>
<div id="loadingIndicator" class="loading-indicator">
<i class="fa-solid fa-spinner fa-spin"></i>
<p>Loading services...</p>
</div>
</div>
<section class="service-section">
<!-- First row of services section -->
<div class="service-category" id="women-services">
<h1 class="service-category-title">Women's Hair Services</h1>
<div class="service-category-row">
<div class="service-option">
<h4>Cutting medium and long hair</h4>
<p>45 min - 1 hr <span class="separator">&bull;</span> 70 PLN - 120 PLN</p>
<p>Looking for a stylish update? Our experts will sculpt your medium or long locks into a fresh new look tailored just for you.</p>
<a href="book-service.html?service=CuttingMediumLongHair" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Cutting short hair</h4>
<p>30 min - 45 min <span class="separator">&bull;</span> 60 PLN</p>
<p>Short hair, don't care! Our skilled stylists will craft a precise and chic cut that perfectly suits your style and personality.</p>
<a href="book-service.html?service=CuttingShortHair" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Coloring</h4>
<p>1 hr - 2 hr <span class="separator">&bull;</span> from 220 PLN</p>
<p>Ready for a vibrant change? Let our color specialists transform your locks with a stunning hue that complements your skin tone and personal style.</p>
<a href="book-service.html?service=Coloring" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Color toning</h4>
<p>45 min - 1 hr <span class="separator">&bull;</span> from 110 PLN</p>
<p>Enhance your natural color with subtle toning that adds depth and dimension to your locks, leaving you with a radiant and polished look.</p>
<a href="book-service.html?service=ColorToning" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Dyeing roots</h4>
<p>1 hr - 1 hr 30 min <span class="separator">&bull;</span> from 160 PLN</p>
<p>Say goodbye to pesky roots! Our expert colorists will seamlessly blend your roots with your existing color for a flawless and refreshed appearance.</p>
<a href="book-service.html?service=DyeingRoots" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
</div>

<!-- Second row of services section -->
<div class="service-category" id="mens-services">
<h1 class="service-category-title">Men's Grooming Services</h1>
<div class="service-category-row">
<div class="service-option">
<h4>Men's haircut for medium and long hair</h4>
<p>30 min - 1 hr <span class="separator">&bull;</span> 60 PLN / 70 PLN</p>
<p>From classic cuts to modern styles, our skilled barbers will deliver a tailored haircut that suits your lifestyle and reflects your unique personality.</p>
<a href="book-service.html?service=MensHaircutMediumLongHair" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Men's haircut for short hair</h4>
<p>20 min - 30 min <span class="separator">&bull;</span> 50 PLN</p>
<p>Keep it sharp and stylish with a precision haircut designed to enhance your features and elevate your look.</p>
<a href="book-service.html?service=MensHaircutShortHair" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Avant-garde men's haircut</h4>
<p>45 min - 1 hr <span class="separator">&bull;</span> 60 PLN - 80 PLN</p>
<p>Ready to make a statement? Let our innovative stylists create a cutting-edge haircut that pushes boundaries and showcases your individuality.</p>
<a href="book-service.html?service=AvantGardeMensHaircut" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Men's highlights</h4>
<p>1 hr - 2 hr <span class="separator">&bull;</span> from 100 PLN</p>
<p>Add dimension and depth to your hair with subtle highlights that create a natural and sun-kissed effect, perfect for the modern gentleman.</p>
<a href="book-service.html?service=MensHighlights" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Coloring</h4>
<p>1 hr - 1 hr 30 min <span class="separator">&bull;</span> 180 PLN - 200 PLN</p>
<p>Whether you're covering gray or craving a new look, our expert colorists will customize a color treatment that enhances your style and complements your skin tone.</p>
<a href="book-service.html?service=ColoringForMen" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
</div>

<!-- Third row of services section -->
<div class="service-category" id="beard-services">
<h1 class="service-category-title">Beard and Shaving Services</h1>
<div class="service-category-row">
<div class="service-option">
<h4>Concealing gray on the beard</h4>
<p>30 min - 45 min <span class="separator">&bull;</span> 65 PLN</p>
<p>Say goodbye to gray with our beard coloring service, expertly applied to seamlessly blend away any signs of aging for a youthful and polished appearance.</p>
<a href="book-service.html?service=ConcealingGrayOnTheBeard" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Mustache adjustment</h4>
<p>15 min - 30 min <span class="separator">&bull;</span> 30 PLN</p>
<p>Keep your mustache looking sharp and defined with our precision grooming service, ensuring every strand is perfectly trimmed and shaped.</p>
<a href="book-service.html?service=MustacheAdjustment" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Beard contouring</h4>
<p>30 min - 45 min <span class="separator">&bull;</span> 50 PLN</p>
<p>Define your jawline and enhance your facial features with our beard contouring service, tailored to sculpt and shape your beard for a refined and masculine look.</p>
<a href="book-service.html?service=BeardContouring" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Full beard shave with a razor</h4>
<p>30 min - 45 min <span class="separator">&bull;</span> from 50 PLN</p>
<p>Experience the ultimate grooming luxury with our traditional razor shave, expertly executed to provide a smooth and close shave for a dapper and sophisticated appearance.</p>
<a href="book-service.html?service=FullBeardShaveWithARazor" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Beard cutting with scissors and razor</h4>
<p>45 min - 1 hr <span class="separator">&bull;</span> from 80 PLN</p>
<p>Achieve a tailored and polished beard with our precise cutting and shaping service, combining scissors and razor techniques for a flawless finish.</p>
<a href="book-service.html?service=BeardCuttingWithScissorsAndRazor" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
</div>

<!-- Fourth row of services section -->
<div class="service-category" id="children-services">
<h1 class="service-category-title">Children's Haircuts</h1>
<div class="service-category-row">
<div class="service-option">
<h4>Boys' haircut</h4>
<p>20 min - 30 min <span class="separator">&bull;</span> 35 PLN</p>
<p>Keep your little man looking sharp with our boys' haircut service, delivered with care and patience to ensure a comfortable and enjoyable experience.</p>
<a href="book-service.html?service=BoysHaircut" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Girls' haircut</h4>
<p>30 min - 45 min <span class="separator">&bull;</span> 40 PLN</p>
<p>Treat your little princess to a stylish and adorable haircut that reflects her personality and individuality, leaving her feeling confident and fabulous.</p>
<a href="book-service.html?service=GirlsHaircut" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Cutting bangs</h4>
<p>15 min - 30 min <span class="separator">&bull;</span> 20 PLN</p>
<p>Keep those bangs looking neat and tidy with our expert cutting service, ensuring they frame the face perfectly and enhance your child's natural beauty.</p>
<a href="book-service.html?service=CuttingBangs" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
</div>

<!-- Fifth row of services section -->
<div class="service-category" id="occasion-hairdos">
<h1 class="service-category-title">Special Occasion Hairdos</h1>
<div class="service-category-row">
<div class="service-option">
<h4>Updo</h4>
<p>1 hr - 2 hr <span class="separator">&bull;</span> 100 PLN - 300 PLN</p>
<p>Elevate your look for that special occasion with an elegant updo, expertly crafted to complement your outfit and leave you feeling glamorous and confident.</p>
<a href="book-service.html?service=Updo" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Test updo</h4>
<p>1 hr - 2 hr <span class="separator">&bull;</span> 150 PLN - 300 PLN</p>
<p>Perfect your look with a test updo session, allowing our skilled stylists to experiment with different styles and techniques until we find the perfect one for you.</p>
<a href="book-service.html?service=TestUpdo" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Wedding updo</h4>
<p>1 hr - 2 hr <span class="separator">&bull;</span> 150 PLN - 300 PLN</p>
<p>Look picture-perfect on your special day with a romantic and timeless wedding updo, customized to complement your bridal gown and overall wedding theme.</p>
<a href="book-service.html?service=WeddingUpdo" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Hair thickening – 100 highlights</h4>
<p>2 hr - 3 hr <span class="separator">&bull;</span> 1000 PLN</p>
<p>Add volume and dimension to your hair with our hair thickening service, featuring 100 highlights strategically placed to create the illusion of thicker and fuller locks.</p>
<a href="book-service.html?service=HairThickening100Highlights" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Keratin hair straightening</h4>
<p>2 hr - 4 hr <span class="separator">&bull;</span> from 400 PLN</p>
<p>Say goodbye to frizz and hello to sleek, smooth hair with our keratin hair straightening treatment, designed to transform unruly locks into silky and manageable strands.</p>
<a href="book-service.html?service=KeratinHairStraightening" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
</div>

<!-- Sixth row of services section -->
<div class="service-category" id="waves-curls">
<h1 class="service-category-title">Permanent Waves and Curls</h1>
<div class="service-category-row">
<div class="service-option">
<h4>Permanent wave for long hair</h4>
<p>2 hr - 3 hr <span class="separator">&bull;</span> from 170 PLN</p>
<p>Add texture and movement to your long locks with our permanent wave service, creating soft and natural-looking curls that enhance your overall style.</p>
<a href="book-service.html?service=PermanentWaveForLongHair" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Permanent wave for medium hair</h4>
<p>1 hr 30 min - 2 hr <span class="separator">&bull;</span> from 150 PLN</p>
<p>Embrace effortless waves with our permanent wave treatment for medium-length hair, delivering relaxed and tousled curls that exude casual elegance.</p>
<a href="book-service.html?service=PermanentWaveForMediumHair" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
<div class="service-category-row">
<div class="service-option">
<h4>Permanent wave for short hair</h4>
<p>1 hr - 1 hr 30 min <span class="separator">&bull;</span> from 120 PLN</p>
<p>Enhance your short hairstyle with our permanent wave service, adding volume and texture for a playful and dynamic look that suits your personality.</p>
<a href="book-service.html?service=PermanentWaveForShortHair" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
<div class="service-option">
<h4>Men's permanent wave</h4>
<p>1 hr - 1 hr 30 min <span class="separator">&bull;</span> from 120 PLN</p>
<p>Elevate your style with our men's permanent wave treatment, delivering subtle waves and texture for a relaxed and effortlessly cool vibe that lasts.</p>
<a href="book-service.html?service=MensPermanentWave" class="service-book-btn" onclick="saveServiceData(this)">Book</a>
</div>
</div>
</div>

</section>
</body>
<!-- Footer section with information about the salon and social media icons -->
Expand Down
Loading

0 comments on commit 920bf55

Please sign in to comment.