From 9e0e463037f28a38d8bd86e0d11631b724542086 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Sat, 27 May 2023 23:41:37 -0500
Subject: [PATCH] made some changes

---
 restaurant_website/index.html | 135 ++++++++++++++++++++++++++++---
 restaurant_website/main.js    |  73 +++++++++++++++--
 restaurant_website/style.css  | 144 ++++++++++++++++++++++++++++++++--
 3 files changed, 329 insertions(+), 23 deletions(-)
diff --git a/restaurant_website/index.html b/restaurant_website/index.html
index eb7232c..1e24f94 100644
--- a/restaurant_website/index.html
+++ b/restaurant_website/index.html
@@ -12,8 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Poppins:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Vujahday+Script&display=swap" rel="stylesheet">
-
+    <link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Montserrat:wght@300;400;500;600;700;800;900&family=Norican&family=Permanent+Marker&family=Vujahday+Script&display=swap" rel="stylesheet">
 </head>
 <body>
     <header>
@@ -29,7 +28,7 @@
                     </div>
                     <li><a href="">HOME</a></li>
                     <li><a href="">MENU</a></li>
-                    <li><a href="">ORDERING</a></li>
+                    <li><a href="">ORDER</a></li>
                     <li><a href="#reservation">RESERVATION</a></li>
                     <li><a href="">ABOUT</a></li>
                     <li><a href="">CONTACT</a></li>
@@ -46,6 +45,23 @@
             <div class="home-content">
                 <h2>HAVE A GOOD DAY WITH A GOOD MEAL</h2>
                 <h3>Fresh ingredients make great food.</h3>
+                <div class="countdown">
+                    <div class="title" id="open-time">We are open at 17:00</div>
+                    <div class="col">
+                        <div>
+                            <input type="text" readonly value="0"><br>
+                            <label for="">Hours</label>
+                        </div>
+                        <div>
+                            <input type="text" readonly value="0"><br>
+                            <label for="">Minutes</label>
+                        </div>
+                        <div>
+                            <input type="text" readonly value="0"><br>
+                            <label for="">Seconds</label>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </section>
@@ -97,18 +113,22 @@
         <div class="container">
             <div class="static-content">
                 <div class="static-num">
+                    <i class="fa-solid fa-award"></i>
                     <div class="num" data="293">293</div>
                     <h2>Best Dishes</h2>
                 </div>
                 <div class="static-num">
+                    <i class="fa-solid fa-trophy"></i>
                     <div class="num" data="999">999</div>
                     <h2>Awards won</h2>
                 </div>
                 <div class="static-num">
+                    <i class="fa-solid fa-medal"></i>
                     <div class="num" data="148">148</div>
                     <h2>Our Chefs</h2>
                 </div>
                 <div class="static-num">
+                    <i class="fa-solid fa-star"></i>
                     <div class="num" data="278">278</div>
                     <h2>Daily Customers</h2>
                 </div>
@@ -122,7 +142,7 @@
             <div class="special-content">
                 <div class="special-left">
                     <div class="special-left-side">
-                        <h3>Chef's Special</h3>
+                        <h3>Most Popular Dishes</h3>
                     </div>
                     <!--chef1-->
                     <div class="img-container">
@@ -191,11 +211,11 @@
             <div class="reservation-form">
                 <h3>Reservation</h3>
                 <form action="">
-                    <input type="text" placeholder="First name">
-                    <input type="text" placeholder="Phone number">
-                    <input type="email" placeholder="Email">
-                    <input type="number" placeholder="Number of guests" min="1">
-                    <input type="date" placeholder="Date">
+                    <input class="input1" type="text" placeholder="First name">
+                    <input class="input1" type="text" placeholder="Phone number">
+                    <input class="input1" type="email" placeholder="Email">
+                    <input class="input1" type="number" placeholder="Number of guests" min="1">
+                    <input class="input1" type="date" placeholder="Pick Date">
                     <select name="hours">
                         <option value="hour-select">Select your time</option>
                         <option value="10">17:00</option>
@@ -217,7 +237,102 @@
         </div>
     </section>
 
-    <script src="main.js"></script>
+    <section class="our-chef" id="chef">
+        <div class="container">
+            <h1 class="chef-heading">Meet Our Chefs</h1>
+            <div class="team-chef">
+                <div class="chef-item">
+                    <div class="chef-img">
+                        <img src="images/c1.jpg">
+                    </div>
+                    <div class="chef-info">
+                        <div>
+                            <h3>John Doe</h3>
+                            <span>Executive Chef</span>
+                            <ul>
+                                <li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
+                                <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
+                                <li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="chef-item">
+                    <div class="chef-img">
+                        <img src="images/c2.jpg">
+                    </div>
+                    <div class="chef-info">
+                        <div>
+                            <h3>John Doe</h3>
+                            <span>Head Chef</span>
+                            <ul>
+                                <li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
+                                <li><a href=""><i class="fa-brands fa-square-twitter"></i></a></li>
+                                <li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="chef-item">
+                    <div class="chef-img">
+                        <img src="images/c3.jpg">
+                    </div>
+                    <div class="chef-info">
+                        <div>
+                            <h3>Jane Doe</h3>
+                            <span>Deputy Chef</span>
+                            <ul>
+                                <li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
+                                <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
+                                <li><a href=""><i class="fa-brands fa-square-twitter"></i></a></li>
+                                <li><a href=""><i class="fa-brands fa-square-google-plus"></i></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+    </div>
+    </section>
+
+
+
+
+        
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     
+    <script src="main.js"></script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/restaurant_website/main.js b/restaurant_website/main.js
index d962e15..e4c7d04 100644
--- a/restaurant_website/main.js
+++ b/restaurant_website/main.js
@@ -10,11 +10,6 @@ closebtn.addEventListener('click', function(){
 });
 
 
-
-
-
-
-
 const staticContentE1 = document.querySelectorAll('.num');
 
 staticContentE1.forEach((staticContentE1) =>{
@@ -36,3 +31,71 @@ staticContentE1.forEach((staticContentE1) =>{
     }
   }
 });
+
+
+const openTimeStr = "We are open at 17:00"
+const openTime = parseInt(openTimeStr.substring(15, 20));
+document.getElementById("open-time").innerText = openTimeStr;
+const inputs = document.querySelectorAll("input")
+
+function clock(){
+  const closeTime = 22 
+  const now = new Date();
+  var now_hh = now.getHours();
+  
+  // if its after the restaraunt closed:
+  if (now_hh >= closeTime) {
+    tomorrow = new Date(now);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    tomorrow.setHours(openTime);
+    tomorrow.setMinutes(00);
+    tomorrow.setSeconds(00);
+    var diff = tomorrow - now;
+  }
+
+  // restaraunt is closed we are waiting for it to open
+  if (now_hh < openTime) {
+    todayOpen = new Date(now);
+    todayOpen.setHours(openTime);
+    todayOpen.setMinutes(00);
+    todayOpen.setSeconds(00);
+    var diff = todayOpen - now;
+  }
+
+  // return early if restaraunt is open.
+   if (now_hh > openTime && now_hh < closeTime) {
+     return;
+  }
+
+  day_to_miliseconds = 1000 * 60 * 60 * 24
+  // 1 day equivalent in milliseconds
+  hour_to_miliseconds = 1000 * 60 * 60
+  // 1 hour equivalent in milliseconds
+  minute_to_miliseconds = 1000 * 60
+  // 1 minute equivalent in milliseconds
+  second_to_miliseconds = 1000
+  // 1 second equivalent in milliseconds
+
+  let days = Math.floor(diff / day_to_miliseconds );
+  // number of days from the difference in dates
+  let hours = Math.floor((diff % day_to_miliseconds) / hour_to_miliseconds);
+  // number of hours from the remaining time after removing days 
+  let minutes = Math.floor((diff % hour_to_miliseconds) / minute_to_miliseconds);
+  // number of minutes from the remaining time after removing hours
+  let seconds = Math.floor((diff % minute_to_miliseconds) / second_to_miliseconds);
+  // number of hours from the remaining time after removing seconds
+
+  console.log(days, hours, minutes, seconds)
+  inputs[0].value = hours;
+  inputs[1].value = minutes;
+  inputs[2].value = seconds;
+}
+
+clock()
+
+setInterval(
+  ()=>{
+    clock()
+  },
+  1000
+)
diff --git a/restaurant_website/style.css b/restaurant_website/style.css
index cfee959..01fe6e9 100644
--- a/restaurant_website/style.css
+++ b/restaurant_website/style.css
@@ -31,7 +31,7 @@ header{
     padding: 1rem 0;
     background: rgba(243, 241, 241, 0.85);
     position: fixed;
-    z-index: 1;
+    z-index: 10;
 }
 .logo img{
     display: block;
@@ -71,6 +71,7 @@ header{
     cursor: pointer;
     display: none;
 }
+/*--------------------------------------------------------------------------------------------------------------------------*/
 #home{
     background: url(images/header.jpg) no-repeat center center/cover;
     min-height: 100vh;
@@ -203,8 +204,12 @@ header{
     color: var(--bg-color);
     border-radius: 4px;
 }
+.static-num i{
+    font-size: 5rem;
+    color: var(--main-color);
+}
 .num{
-    font-size: 4.5rem;
+    font-size: 3rem;
 }
 .static-num h2{
     font-size: 1.5rem;
@@ -274,26 +279,28 @@ header{
     padding: 6rem 0;
 }
 .reservation-form{
-    background: rgb(186, 183, 176);
+    background: var(--main-color);
     padding: 2rem;
     width: 50%;
 }
 .reservation-form h3{
     font-size: 3.5rem;
     font-family:'Vujahday Script';
-    color: var(--main-color);
+    color: var(--bg-color);
     text-align: center;
 }
 .reservation-form form{
     padding: 2rem 0;
 }
-.reservation-form  form input{
+.reservation-form  form .input1{
     width: 49.5%;
     padding: 0.3rem 0.4rem;
     margin-bottom: 1rem;
     border: none;
     border-radius: 5px;
     outline: none;
+    font-size: 1rem;
+    text-align: left;
 }
 .reservation-form  form textarea{
     width: 100%;
@@ -305,11 +312,12 @@ header{
 }
 .reservation-form  form select{
     width: 49.5%;
-    padding: 0.3rem 0.4rem;
+    padding: 0.7rem 0.4rem;
     margin-bottom: 1rem;
     border: none;
     border-radius: 5px;
     background: white;
+    font-size: 1rem;
 }
 .reservation-form  form button{
     display: inline-block;
@@ -323,10 +331,123 @@ header{
     transition: all 0.5s ease-in-out;
 }
 .reservation-form  form button:hover{
-    background-color: var(--main-color);
+    background-color: rgb(205, 171, 93);
     color: var(--bg-color); 
 }
 /*--------------------------------------------------------------------------------------------------------------------------*/
+#chef{
+    padding: 10rem 0 ;
+}
+.chef-heading{
+    text-align: center;
+    font-size: 3.5rem;
+    font-family:'Vujahday Script';
+    color: var(--main-color);
+    padding-bottom: 2rem;
+}
+.team-chef{
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-gap: 1.5rem;
+}
+.team-chef .chef-item .chef-img{
+    height: 35rem;
+    width: 100%;
+}
+.team-chef .chef-item .chef-img img{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+.team-chef .chef-item{
+    position: relative;
+    z-index: 2;
+    overflow: hidden;
+}
+.team-chef .chef-item:before{
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 5;
+}
+.team-chef .chef-item:hover.chef-item:before{
+    display: block;
+}
+.team-chef .chef-item .chef-info{
+    position: absolute;
+    top: 130%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: 1s;
+    cursor: pointer;
+}
+.team-chef .chef-item .chef-info h3{
+    font-size: 1.5rem;
+    color: var(--main-color);
+    padding: 0.5rem 0;
+}
+.team-chef .chef-item .chef-info span{
+    font-size: 1.1rem;
+    color: var(--bg-color);
+    font-weight: 500;
+}
+.team-chef .chef-item .chef-info ul{
+    display: flex;
+    grid-gap: 2rem;
+    padding: 2rem 0;
+}
+.team-chef .chef-item .chef-info ul li a{
+    color: var(--main-color);
+    font-size: 1rem;
+}
+.team-chef .chef-item:hover .chef-info{
+    top: 0;
+}
+/*--------------------------------------------------------------------------------------------------------------------------*/
+.countdown .title{
+    margin-top: 10px;
+    font-size: 3.5rem;
+    font-weight: 600;
+    font-family: 'Vujahday Script';
+    color: var(--main-color);
+    text-align: center;
+    letter-spacing: 1px;
+}
+.col{
+    width: 1000px;
+    display: flex;
+    justify-content: center;
+    color: var(--bg-color);
+}
+.col div{
+    width: 250px;
+    text-align: center;
+}
+input{
+    width: 50%;
+    height: 50px;
+    border-color: transparent;
+    text-align: center;
+    font-size: 2rem;
+}
+label{
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+/*--------------------------------------------------------------------------------------------------------------------------*/
 
 
 @media(max-width:1100px){
@@ -392,7 +513,7 @@ header{
     .reservation-form{
         width: 100%;
     }
-    .reservation-form  form input{
+    .reservation-form  form .input1{
         width: 100%;
     }
     .post-menu .post-box{
@@ -404,6 +525,13 @@ header{
     .static-content{
         grid-template-columns: repeat(2,1fr);
     }
+    .reservation-form  form select{
+        width: 100%;
+    }
+    .reservation-form  form textarea{
+        font-size: 1rem;
+    }
+
 }
 @media(max-width:450px){
     html{
