AnnyKong · Alicewillbe · Apr 19, 2019 · Apr 19, 2019 · Apr 19, 2019 · Apr 19, 2019
diff --git a/README.md b/README.md
@@ -1 +1,5 @@
 # ModeShift-App
+## Update Diary
+* IMPORTANT: the implementation should be friendly on phone view
+### 4/18 a plain web frame with menu bar
+menu bar implemented both static and dynamic
diff --git a/src/img/cat_head.jpg b/src/img/cat_head.jpg
diff --git a/src/img/down.png b/src/img/down.png
diff --git a/src/img/lion_head.png b/src/img/lion_head.png
diff --git a/src/img/up.png b/src/img/up.png
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,71 @@
+<!--
+Progress on 04/18: dynamic menu bar added
+
+Contributor: Xinrong Zhao
+-->
+<!DOCTYPE html>
+<!--
+Clients are free to change whatever they want
+-->
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>TODO: rename the title</title>
+
+    <!-- Linked to dummy css file -->
+    <link rel="stylesheet" type="text/css" href="styleframe.css" />
+
+    <!-- Linked to dummy js file -->
+    <script type="text/javascript" src="main.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1 id="page-title">HEADER: This is the page about</h1>
+      <hr />
+      <div id="top-menu">
+        <button id="top-menu-drop-button">
+          <img id="top-menu-drop-button-image" src="img/down.png" alt="image-angle-double-down-button"/>
+        </button>
+        <button id="top-menu-up-button">
+          <img id="top-menu-up-button-image" src="img/up.png" alt="image-angle-double-up-button"/>
+        </button>
+        <div id="top-menu-bar">
+          <a class="top-menu-content" href="pages/1.html">content</a>
+          <a class="top-menu-content" href="pages/1.html">content</a>
+          <a class="top-menu-content" href="pages/1.html">content</a>
+          <a class="top-menu-content" href="pages/1.html">content</a>
+          <a class="top-menu-content" href="pages/1.html">content</a>
+        </div>
+      </div>
+    </header>
+    <main>
+      <p>
+        I won't tell you the page width is only 80%, and I set it to the middle which I feel is pretty but you can change it if you want.
+        <br />
+        Deleting elements are simple, you can just set its css property "display" to be "none", and for sure you can set it back to "block" by javacript if you wanna see it again.
+        <br />
+        A good thing to know is that you can also set "display" to be "flex" for any container (i.e. elements that contains other elements, such as &lt;div&rt;), and you can get a bunch of benefit from doing that. For example, I can do
+      </p>
+
+      <h2>Side-by-side class</h2>
+      <section id="example" class="side-by-side">
+        <p>I love salt</p>
+        <p>but I also love sugar</p>
+      </section>
+
+      <h2>Try the drop down button!!</h2>
+    </main>
+    <footer class="side-by-side">
+      <section id="footer-left">
+        <p>WE</p>
+      </section>
+      <section id="footer-center">
+        <img src="img/lion_head.png" alt="lion head" />
+        <img src="img/cat_head.jpg" alt="cat head" />
+      </section>
+      <section id="footer-right">
+        <p>MARRIED!</p>
+      </section>
+    </footer>
+  </body>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,64 @@
+/* This file contains main thing js does
+ * Contributor: Xinrong Zhao
+ */
+
+"use strict";  // turn on syntax check
+
+window.addEventListener("load", init);
+window.addEventListener("resize", resizeBackground);
+///////////////////////////////////////////////////////
+// response functions
+///////////////////////////////////////////////////////
+function init(){
+  // init dropdown menu
+  let drop_btn = document.getElementById("top-menu-drop-button");
+  drop_btn.addEventListener("click", showDropDownMenu)
+
+  let up_btn = document.getElementById("top-menu-up-button");
+  up_btn.addEventListener("click", hideDropDownMenu)
+
+  // init header/footer background
+  resizeBackground();
+}
+
+function showDropDownMenu() {
+  // delete myself
+  document.getElementById("top-menu-drop-button-image").style.display = "none";
+  this.style.display = "none";
+
+  // set up button and menu visible
+  document.getElementById("top-menu-up-button-image").style.display = "block";
+  document.getElementById("top-menu-up-button").style.display = "block";
+  document.getElementById("top-menu-bar").style.display = "flex";
+}
+
+function hideDropDownMenu() {
+  // delete myself
+  document.getElementById("top-menu-up-button-image").style.display = "none";
+  this.style.display = "none";
+
+  // set up button and menu visible
+  document.getElementById("top-menu-drop-button-image").style.display = "block";
+  document.getElementById("top-menu-drop-button").style.display = "block";
+  document.getElementById("top-menu-bar").style.display = "none";
+}
+
+function resizeBackground() {
+  let header = document.querySelector("header");
+  let height = getComputedStyle(header).getPropertyValue('height'); /* string */
+  header.style.marginTop = "-" + height;
+  document.querySelector("main").style.marginTop = height;
+
+  let footer = document.querySelector("footer");
+  height = getComputedStyle(footer).getPropertyValue('height'); /* string */
+
+  let imgs = document.querySelectorAll("footer img");
+  for (let i = 0; i < imgs.length; i++) {
+    imgs[i].style.height = height;
+  }
+
+  let ps = document.querySelectorAll("footer p");
+  for (let i = 0; i < imgs.length; i++) {
+    ps[i].style.lineHeight = height;
+  }
+}
diff --git a/src/styleframe.css b/src/styleframe.css
@@ -0,0 +1,106 @@
+/*
+ * This stylesheet contains some basics for web design
+ * clients can change whatever they want to adapt to their own websites
+ * 
+ * Contributor: Xinrong Zhao
+*/
+
+/*
+ * import extra fonts
+ * @from fonts.google.com
+ * @usage font-family: 'Roboto', sans-serif;
+ */
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+/*********************************************
+** META
+**********************************************/
+.side-by-side {
+  display: flex;
+}
+
+/*********************************************
+** MAIN
+**********************************************/
+body {
+  width: 100%;
+  margin: auto; /* centered horizontally */
+  background-color: #D0E0FE;
+  font-family: 'Roboto', sans-serif;
+}
+
+header {
+  position: fixed;
+}
+
+footer {
+  max-height: 50px;
+  justify-content: center;
+  align-items: center;
+}
+
+footer img {
+  vertical-align: middle;
+}
+
+header, footer {
+  width: 100%;
+  /* @ 1 line(s) above
+   * width is not inherited?
+   */
+  text-align: center;
+  /* @ 1 line(s) above
+   * align text by center
+   */
+  color: white;
+  background-image: linear-gradient(to right, rgba(70,130,180, 1), rgba(70,130,180, 0.95), rgba(70,130,180, 1));
+}
+
+hr {
+  border: 0px;
+  height: 1px;
+  margin: 2px;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
+}
+
+#top-menu-drop-button, #top-menu-up-button {
+  width: 100%;
+  height: 25px;
+  background-color: rgba(0,0,0,0);
+  border-style: none;
+}
+
+#top-menu-drop-button-image, #top-menu-up-button-image {
+  margin: auto;
+  max-height: 25px;
+}
+
+#top-menu-up-button, #top-menu-up-button-image, #top-menu-bar {
+  display: none;
+}
+
+#top-menu-bar {
+  flex-wrap: wrap;
+  justify-content: center;
+  background-image: rgb(70,130,180);
+}
+
+.top-menu-content:link, .top-menu-content:visited {
+  padding: 10px 20px;
+  text-decoration: none;
+  color: white;
+}
+
+.top-menu-content:hover, .top-menu-content:active {
+  text-decoration: underline;
+}
+
+main {
+  width: 80%;
+  margin: auto;
+  padding-top: 10px;
+}
+
+#example {
+  justify-content: space-between;
+}