Merge pull request #90 from RDjarbeng/dayofyearpage

Dayofyear page
RDjarbeng · Apr 25, 2022 · a4f0fe1 · a4f0fe1
2 parents ba96f35 + dde4ff7
commit a4f0fe1
Show file tree

Hide file tree

Showing 10 changed files with 692 additions and 17 deletions.
diff --git a/css/today.css b/css/today.css
diff --git a/html/about.html b/html/about.html
@@ -58,7 +58,10 @@
                     <span class="pick-color-ico" data-settheme="black"></span>
                 </section>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-address-card"></i> &nbsp;&nbsp;&nbsp;About
+                    <i class="fas fa-calendar-day"></i> &nbsp;&nbsp;&nbsp;Today
+                </div>
+                <div class="sidebar-list-items">
+                    <i class="fas fa-question-circle"></i> &nbsp;&nbsp;&nbsp;About
                 </div>
             </div>
             <!-- <div class="sidebar-app-version">Version 2</div> -->

diff --git a/html/countdown-list.html b/html/countdown-list.html
@@ -57,7 +57,10 @@
                     <span class="pick-color-ico" data-settheme="black"></span>
                 </section>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-address-card"></i> &nbsp;&nbsp;&nbsp;About
+                    <i class="fas fa-calendar-day"></i> &nbsp;&nbsp;&nbsp;Today
+                </div>
+                <div class="sidebar-list-items">
+                    <i class="fas fa-question-circle"></i> &nbsp;&nbsp;&nbsp;About
                 </div>
             </div>
         </section>

diff --git a/html/today.html b/html/today.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Countdown application with light and dark mode auto functionality">
+    <meta name="Keywords" content="Countdown, Midnight countdown">
+    <title>Final Countdown</title>
+    <link href="../img/icons/favicon.png" rel="icon">
+    <meta name="Author" content="R.Djarbeng| A.Nyakotey">    
+    <link rel="stylesheet" href="../css/today.css">
+    <link rel="stylesheet" href="../css/themes.css">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></noscript>
+    <link rel="manifest" href="/manifest.json">
+    <!-- ios support -->
+    <link rel="apple-touch-icon" href="../img/icons/favicon.png">
+    <meta name="apple-mobile-web-app-status-bar" content="#7b68ee">
+    <meta name="theme-color" content="#7b68ee">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="grey">
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#7b68ee">
+</head>
+
+<body class="dark" data-theme="purple">
+    <aside class="sidebar sidebar-hide">
+        <section class="sidebar-content">
+            <div class="brand">
+                <div class="brand-logo"><img src="../img/icons/chrome512.png" alt="logo"></div>
+                <div class="brand-name">Final CountDown</div>
+            </div>
+            <hr>
+            <div class="opt-group">OPTIONS</div>
+            <div class="sidebar-list">
+                <div class="sidebar-list-items">
+                    <i class="fas fa-home"></i> &nbsp;&nbsp;&nbsp;Home
+                </div>
+                <div class="sidebar-list-items">
+                    <i class="fas fa-clock"></i> &nbsp;&nbsp;&nbsp;My CountDowns
+                </div>
+                <div class="sidebar-list-items">
+                    <i class="fas fa-upload"></i> &nbsp;&nbsp;&nbsp;Set Custom Background
+                </div>
+                <div class="sidebar-list-items">
+                    <i class="fas fa-adjust"></i> &nbsp;&nbsp;&nbsp;Change Theme
+                </div>
+                <section class="pick-color">
+                    <span class="pick-color-ico" data-settheme="red"></span>
+                    <span class="pick-color-ico" data-settheme="pink"></span>
+                    <span class="pick-color-ico" data-settheme="yellow"></span>
+                    <span class="pick-color-ico" data-settheme="green"></span>
+                    <span class="pick-color-ico" data-settheme="blue"></span>
+                    <span class="pick-color-ico" data-settheme="purple"></span>
+                    <span class="pick-color-ico" data-settheme="black"></span>
+                </section>
+                <div class="sidebar-list-items">
+                    <i class="fas fa-calendar-day"></i> &nbsp;&nbsp;&nbsp;Today
+                </div>
+                <div class="sidebar-list-items">
+                    <i class="fas fa-question-circle"></i> &nbsp;&nbsp;&nbsp;About
+                </div>
+            </div>
+        </section>
+    </aside>
+    <header class="header">        
+        <div class="nav">
+            <i class="fas fa-bars fa-lg"></i>
+        </div>
+        <div class="logo">
+            <a href="../index.html"><div class="logo-ico"><img src="../img/icons/chrome192.png" alt="logo"></div></a>
+            <div class="logo-name">Final CountDown</div>
+        </div>
+        <div class="mode-row">
+            <span class="toggleMode" id='themeToggle'><i class="fas fa-sun"></i></span>
+        </div>
+    </header>
+    <main>
+        <section class="container">
+            <div class="date-row">
+                <div class="day-of-year">
+                    <div class="day-text">DAY</div> 
+                    <div class="day-count" id='countDay'>X</div>
+                    <div class="divider"></div>
+                    <div class="year-count">365</div>
+
+                    <div class="share-row">
+                        <div class="sm share-whatsapp" 
+                            id ="sendWhatsappButton" 
+                            data-action="share/whatsapp/share"
+                            title="share to Whatsapp">
+                            <i class="fab fa-whatsapp"></i>
+                        </div>
+                        <div class="sm copy-link" title="copy link"><i class="far fa-copy"></i></div>
+                    </div>
+                </div>
+                <div class="date">
+                    <div class="day-of-week" id ="dayOfWeek">Monday</div>
+                    <div class="day" id ="dayOfMonth">11</div>
+                    <div class="month" id="month">Mar</div>
+                    <div class="year" id="year">2022</div>
+                    <div class="time" id="time">11:00 pm</div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script src="../js/error.js"></script>    
+    <script src="../app.js"></script>
+    <script src="../js/sidebar.js"></script>
+    <script src="../js/loadCustomUI.js"></script>
+    <script src="../js/today.js"></script>
+</body>
+</html>
diff --git a/img/animbg.svg b/img/animbg.svg
diff --git a/img/circle-anim-bg.svg b/img/circle-anim-bg.svg
diff --git a/index.html b/index.html
@@ -60,7 +60,10 @@
                     <span class="pick-color-ico" data-settheme="black"></span>
                 </section>
                 <div class="sidebar-list-items">
-                    <i class="fas fa-address-card"></i> &nbsp;&nbsp;&nbsp;About
+                    <i class="fas fa-calendar-day"></i> &nbsp;&nbsp;&nbsp;Today
+                </div>
+                <div class="sidebar-list-items">
+                    <i class="fas fa-question-circle"></i> &nbsp;&nbsp;&nbsp;About
                 </div>
             </div>
         </section>
@@ -81,17 +84,6 @@
         <section class="container">
             <div class="banner-row">
                 <div class="banner">
-                    <div class="banner-h1"> 
-                        DAY <span class="day" id='countDay'>X</span> / 365
-                        &emsp;
-                        <span class="share-whatsapp" 
-                            id ="sendWhatsappButton" 
-                            data-action="share/whatsapp/share"
-                            title="share to Whatsapp"
-                        >
-                            <i class="fab fa-whatsapp"></i>
-                        </span>
-                    </div>
                     <div class="banner-h2" id ='countdown-text'> CountDown to New Year <i class="fas fa-snowman"></i></div>
                 </div>
             </div>

diff --git a/js/sidebar.js b/js/sidebar.js
@@ -15,7 +15,8 @@ sidebarItems[1].addEventListener("click", () =>
 );
 sidebarItems[2].addEventListener("click", openBgPicker);
 sidebarItems[3].addEventListener("click", openColorPicker);
-sidebarItems[4].addEventListener("click", () => setLink("../html/about.html"));
+sidebarItems[4].addEventListener("click", () => setLink("../html/today.html"));
+sidebarItems[5].addEventListener("click", () => setLink("../html/about.html"));
 
 function setTheme(event) {
     let prevTheme = getComputedStyle(document.body).getPropertyValue(