Modify the Webserver

+- Main Page
-- Hello World Page
-- Homework 1

public/hello_world.html

@@ -1 +0,0 @@
-Hello World!

public/index.html

@@ -1,13 +1,38 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Homework 1</title>
+        <title>cdez.cdez.pw Main Page</title>
+        <style>
+          @import url("/styles.css");
+        </style>
     </head>
     <body>
-        <p>
+      <div class="mainPage">
-            I did my homework!
+        <header>
-            - Charles
+          Cdez Main Page
-        </p>
+        </header>
-        <img src="hwk1.png">
+        <div class="menuBar">
+          <ul>
+            <li><a href="/">Home Page</a></li>
+            <li><a href="/cs212/homework/2.html">Homework 2</a></li>
+            <li><a href="/cs212/homework/3.html">Homework 3</a></li>
+            <li><a href="/cs212/homework/4/">Homework 4</a></li>
+            <li><a href="/cs212/homework/7/">Homework 7</a></li>
+            <li><a href="/cs212/homework/8/">Homework 8</a></li>
+          </ul>
+        </div>
+        <main>
+          <div id="standardClock" class="clock" style="text-align: center;" onclick="currentTime()">Click me to reveal time!</div>
+        </main>
+        <div class="adBar">
+          <a href="https://www.amazon.com/Anker-PowerCore-Technology-High-Capacity-Compatible/dp/B07S829LBX/ref=sr_1_3?crid=CZRGH6QGGLWQ"><img src="https://m.media-amazon.com/images/I/71ytBCYHNkL._AC_SL1500_.jpg" alt="Anker: Power YOUR world" width=250 height=293></a>
+          <br>
+          <body>Anker Power Bank: Power Your World</body>
+        </div>
+        <footer>
+          Copyright 2023 by Charles Descamps
+        </footer>
+      </div>
+      <script type="text/javascript" src="/script.js"></script>
     </body>
 </html>

public/script.js

@@ -0,0 +1,24 @@
+function currentTime() {
+  let date = new Date();
+  let hrs = date.getHours();
+  let min = date.getMinutes();
+  let sec = date.getSeconds();
+  let meridiem = "AM";
+
+  if(hrs === 0){
+      hrs = 12;
+  }
+  if(hrs > 12){
+      hrs = hrs - 12;
+      meridiem = "PM";
+   }
+
+   hrs = (hrs < 10) ? "0" + hrs : hrs;
+   min = (min < 10) ? "0" + min : min;
+   sec = (sec < 10) ? "0" + sec : sec;
+
+   let time = hrs + ":" + min + ":" + sec + " " + meridiem;
+
+  document.getElementById("standardClock").innerText = time;
+  let t = setTimeout(function(){ currentTime() }, 1000);
+}

public/styles.css

@@ -0,0 +1,94 @@
+/* Ubuntu - cyrillic-ext */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* Ubuntu - cyrillic */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* Ubuntu - greek-ext */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* Ubuntu - greek */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* Ubuntu - latin-ext */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* Ubuntu - latin */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* CowboyBebopFontStyle */
+@font-face {
+    font-family: 'Bebop';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/CheltenhamStdBoldCondIt.woff') format('woff');
+}
+/* CSS Styles for headers 1-4 and paragraph tags. */
+h1 {font-family: 'Bebop', serif;}
+h2 {font-family: 'Bebop', serif;}
+h3 {font-family: 'Bebop', serif;}
+h4 {font-family: 'Ubuntu', sans-serif;}
+p {font-family: 'Ubuntu', sans-serif; padding:0.3em 1em;}
+/* CSS Styling for the ID sector */
+#sector {
+  text-align: center;
+  color: #003466;
+}
+.mainPage {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+header {
+  padding: 2rem;
+  grid-column: 1 / 4;
+}
+.menuBar {
+  grid-column: 1 / 2;
+}
+main {
+  grid-column: 2 / 3;
+}
+.adBar {
+  grid-column: 3 / 4;
+}
+footer {
+  padding: 1rem;
+  grid-column: 1 / 4;
+}