adding html files for each page + css + meeting notes

acmucsd-projects · Jul 25, 2024 · e9d6ce7 · e9d6ce7
1 parent 380a44f
commit e9d6ce7
Show file tree

Hide file tree

Showing 13 changed files with 304 additions and 0 deletions.
diff --git a/admin/meetings/07242024-midweek-meeting-2.md b/admin/meetings/07242024-midweek-meeting-2.md
@@ -0,0 +1,33 @@
+# [Team Name]: Midweek Meeting 2 <br> 07/24/2024 6:00pm - 6:30pm
+
+## Members Present
+- Vinod
+- Gowtham
+- Jonathan
+- Ishaan
+- Tia
+
+## Next Meeting
+**July 27, 2024 from 10:00am to 11:00am**
+- Basics of website design (code) will be shown.
+- Each team member who worked on the code should push it to the repo by the meeting.
+
+## Topics
+- Review Wireframe
+- Coding Set Up
+
+### Review Wireframe
+The team went over the final wireframe for the website.
+
+### Coding Set Up
+- Current work has been done mainly on the landing page (index.html & index.css)
+  - Will be pushed later tonight.
+- Need to split the webpages into separate html files. Current Plan:
+  - **Page 1 and Page 4 = index.html & index.css**
+  - **Page 5 = user-page.html**
+  - **Page 6 = make-list.html**
+  - **Page 7 = item-price.html**
+  - **Page 2 = compare-stores.html**
+  - **Page 8 = receipt.html**
+- ***Each html will have its own css and js files.***
+- main.css is standard across all pages (font, header color, etc.)
diff --git a/source/assets/images/Logo1.png b/source/assets/images/Logo1.png
diff --git a/source/assets/images/Logo2.png b/source/assets/images/Logo2.png
diff --git a/source/assets/images/final-icon1.png b/source/assets/images/final-icon1.png
diff --git a/source/compare-stores.html b/source/compare-stores.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <!-- WIREFRAME PAGE 2-->
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./css/main.css">
+        <title>Go Go Grocery!</title>
+    </head>
+
+    <body>
+        <header>
+            <img src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E">
+            <h1>Go Go Grocery</h1>
+            <a>Search</a>
+            <a href="./make-list.html">Shopping List</a>
+            <a href="./user-page.html">Sign In</a>
+        </header>
+
+        <main>
+            <h1>WIREFRAME PAGE 2</h1>
+            <!--CODE COMPARING STORES-->
+        </main>
+    </body>
+
+</html>
diff --git a/source/css/index.css b/source/css/index.css
@@ -0,0 +1,19 @@
+/*header>img{
+    margin-left: 0px;
+    border-radius: 0px;
+}*/
+
+.sign-up{
+    background-color: rgba(254, 153, 32, 0.80);
+    padding: 7.5px;
+    padding-bottom: 50px;
+
+}
+
+#sign-up-button{
+    background: #FE9920;
+    padding-top:10px;
+    padding-bottom:10px;
+    padding-left: 40px;
+    padding-right: 40px;
+}
diff --git a/source/css/main.css b/source/css/main.css
@@ -0,0 +1,78 @@
+@import url("https://fonts.googleapis.com/css2?family=Sulphur+Point:wght@300;400;700&display=swap");
+
+/*
+ * This serves as the base styling for all the pages in the app
+*/
+
+* {
+    /*font-family: "Sulphur Point", sans-serif;*/
+    font-family: monospace;
+    font-style: normal;
+}
+
+html,
+body {
+    min-height: 100vh;
+    /* Prevents tiling of background gradients or images */
+    max-width: 100vw;
+    /* Gets rid of unnecessary scroll bar that appeared on some screens */
+}
+
+body {
+    background-color: #f8f2e1;
+    padding: 100px 0px 50px;
+    /* 100px top to give space for sticky header can be adjusted as needed, 0px on side to allow header to occupy full screen 50px on bottom because I felt like it */
+    margin: 0px;
+    /* There's a margin between html and body? */
+    font-family: monospace;
+}
+
+header {
+    /*
+    * This allows the header to lay the elements out depending on screen size and stretches header across the top of the screen
+    */
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    position: fixed;
+    /* Keeps header at top of screen through scrolling top sets it to top of screen */
+    top: 0;
+    color: #2f2a1e;
+    z-index: 1000;
+    background-color: #B9A44C;
+    /* Heading at top of specific page */
+    &>h1 {
+        font-size: 3em;
+        letter-spacing: 5px;
+        margin: 5px;
+
+    }
+
+    &>a{
+        padding-left: 100px;
+    }
+
+    /* This handles the class of "back" buttons in the headers. Home button on project.html and back button on notes.html */
+    .back {
+        &>i {
+            font-size: 2em;
+            font-weight: 700;
+            letter-spacing: 5px;
+            margin: 3px;
+            margin-left: 8px;
+            color: white;
+        }
+
+        &:hover {
+            opacity: 60%;
+        }
+    }
+}
+
+@media screen and (max-width: 768px) {
+    body {
+        padding-top: 120px;
+    }
+}
diff --git a/source/index.html b/source/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./css/main.css">
+        <link rel="stylesheet" href="./css/index.css">
+        <title>Go Go Grocery!</title>
+    </head>
+
+    <body>
+        <header>
+            <img src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E">
+            <h1>Go Go Grocery</h1>
+            <a>Search</a>
+            <a href="./make-list.html">Shopping List</a>
+            <a href="./user-page.html">Sign In</a>
+        </header>
+
+        <br>
+        <br>
+        <main class="info">
+            <section class="sign-up">
+                <h1>Start Comparing Today!</h1>
+                <h3>Smart Shop, Smart Save!</h3>
+                <button id="sign-up-button">Sign Up!</button>
+            </section>
+        </main>
+    </body>
+
+</html>
diff --git a/source/item-price.html b/source/item-price.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <!-- WIREFRAME PAGE 7-->
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./css/main.css">
+        <title>Go Go Grocery!</title>
+    </head>
+
+    <body>
+        <header>
+            <img src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E">
+            <h1>Go Go Grocery</h1>
+            <a>Search</a>
+            <a href="./make-list.html">Shopping List</a>
+            <a href="./user-page.html">Sign In</a>
+        </header>
+
+
+        <main>
+            <h1>WIREFRAME PAGE 7</h1>
+            <!--CODE FOR THE PRICE COMPARISON-->
+        </main>
+    </body>
+
+</html>
diff --git a/source/js/js.md b/source/js/js.md
@@ -0,0 +1,3 @@
+# PLACEHOLDER FOR JS FOLDER
+
+all js code will go in here.
diff --git a/source/make-list.html b/source/make-list.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <!-- WIREFRAME PAGE 6-->
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./css/main.css">
+        <title>Go Go Grocery!</title>
+    </head>
+
+    <body>
+        <header>
+            <img src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E">
+            <h1>Go Go Grocery</h1>
+            <a>Search</a>
+            <a href="./make-list.html">Shopping List</a>
+            <a href="./user-page.html">Sign In</a>
+        </header>
+
+
+        <main class="product-list">
+            <h1>WIREFRAME PAGE 6</h1>
+            <!--CODE FOR THE PRODUCT LIST - item | item image | description/nutrition fact-->
+            <a href="./item-price.html">Add Item</a>
+            <a href="./compare-stores.html">Finished with your list?</a>
+        </main>
+    </body>
+
+</html>
diff --git a/source/receipt.html b/source/receipt.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <!-- WIREFRAME PAGE 8-->
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./css/main.css">
+        <title>Go Go Grocery!</title>
+    </head>
+
+    <body>
+        <header>
+            <img src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E">
+            <h1>Go Go Grocery</h1>
+            <a>Search</a>
+            <a href="./make-list.html">Shopping List</a>
+            <a href="./user-page.html">Sign In</a>
+        </header>
+
+        <main>
+            <h1>WIREFRAME PAGE 8</h1>
+            <!--CODE FOR THE PRODUCT LIST - item | item image | description/nutrition fact-->
+        </main>
+    </body>
+
+</html>
diff --git a/source/user-page.html b/source/user-page.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <!-- WIREFRAME PAGE 5-->
+     <!-- HAPPENS AFTER LOGIN IS COMPLETE (don't know how to implement it yet.) so it happens when you click sign in-->
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./css/main.css">
+        <title>Go Go Grocery!</title>
+    </head>
+
+    <body>
+        <header>
+            <img src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E">
+            <h1>Go Go Grocery</h1>
+            <a>Search</a>
+            <a href="./make-list.html">Shopping List</a>
+            <a href="./user-page.html">Sign In</a>
+        </header>
+
+        <main>
+            <h1> WIREFRAME PAGE 5</h1> <!-- delete later -->
+            <a href="./make-list.html">Create New List</a>
+            <br>
+            <a href="./receipt.html">View Existing List</a>
+        </main>
+        <br>
+        <br>
+    </body>
+
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# PLACEHOLDER FOR JS FOLDER

		all js code will go in here.