add notification to initial page

BLV-OSAV-USAV · Mar 15, 2024 · 7e3cd49 · 7e3cd49
1 parent dcfc01f
commit 7e3cd49
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,10 @@
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <script src="https://unpkg.com/@phosphor-icons/web"></script>
+      <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
+      <script src="/js/notification.js"></script>
       <link rel="stylesheet" href="./style/home.css">
+      <link rel="stylesheet" href="notification.css">
       <link rel="manifest" href="./manifest.webmanifest" />
       <link rel="icon" type="image/x-icon" href="/img/favicon.png">
       <link
@@ -15,9 +18,35 @@
       />
     </head>
     <body>
+
+        <div class="container">
+            <div class="push__wrapper">
+                <div class="push__box">
+                    <div class="push__content">
+                        <div class="push__top">
+                            <div class="col">
+                                <div class="push__imgwrap">
+                                    <img class="push__icon" src="./img/favicon.png" alt="logo">
+                                </div>
+                                <span class="push__title">Optifood: <a href="/pages/quiz.html">Start Challenge</a></span>
+                            </div>
+                            <div class="col">
+                                <div class="push__time">now</div>
+                            </div>
+                        </div>
+                        <div class="push__main">
+                            <div class="push__person">Elias Medawar</div>
+                            <p>New challenge has arrived </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
       <header>
+
         <img src="/img/app-background.png" class="background-image">
       </header>
+
       <main>
         <div id="header">
           <h1>Leaderboard</h1>

diff --git a/notification.css b/notification.css
@@ -3,6 +3,7 @@
 * {
     margin: 0;
     padding: 0;
+    box-sizing: border-box; /* Added box-sizing */
 }
 
 body {
@@ -12,7 +13,7 @@ body {
     background-image: url(./img/iphone-14-2560x1440-abstract-ios-16-hd-24001.jpg);
     background-repeat: no-repeat;
     background-position: top;
-    background-size: 200vh;
+    background-size: cover; /* Changed background-size */
 }
 
 .container {
@@ -25,7 +26,6 @@ body {
 }
 
 .push__box {
-    display: none;
     position: relative;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.4);
@@ -35,10 +35,6 @@ body {
     margin: 8px 0;
 }
 
-.push__box:last-child {
-    display: block;
-}
-
 .push__box::before {
     content: '';
     position: absolute;
@@ -85,4 +81,11 @@ body {
 .push__person {
     font-weight: 700;
     margin-bottom: 2px;
+}
+
+/* Media Query for tablets and above */
+@media only screen and (min-width: 768px) {
+    body {
+        font-size: 18px; /* Adjust font-size for larger screens */
+    }
 }