Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

User page progress #12

Merged
merged 21 commits into from
Sep 5, 2024
Merged
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
81cd1cd
finished meeting notes + started user page css (this isn't finished y…
tirani427 Aug 1, 2024
68dd5e7
Merge branch 'main' of https://github.com/acmucsd-projects/su24a-hack…
tirani427 Aug 10, 2024
926bf34
current make-list code html/css
tirani427 Aug 10, 2024
6ea733d
updated user-page.html + make-list.html (including make-list.js and m…
tirani427 Aug 10, 2024
a8b2a1e
experimenting with overlay
jonathan-ty Aug 13, 2024
cd04f64
Rename gradient-background.png to source/assets/images/gradient-backg…
jonathan-ty Aug 13, 2024
29e3df2
Delete source/assets/images/gradient-background.png
jonathan-ty Aug 13, 2024
e0cf27d
gradient-bg-img.png
jonathan-ty Aug 13, 2024
4fbfff8
Delete source/assets/images/gradient-bg-img.png
jonathan-ty Aug 13, 2024
9e53935
Add files via upload
jonathan-ty Aug 13, 2024
66b9fad
Delete source/assets/images/gradient-bg-img-2.png
jonathan-ty Aug 13, 2024
fda6733
Add files via upload
jonathan-ty Aug 13, 2024
7b99690
completed user page!
jonathannnty Aug 13, 2024
9ef4e7d
final touches
jonathannnty Aug 13, 2024
6fce41a
added functionality to the make-list page (wireframe page 6) (not fin…
tirani427 Aug 17, 2024
4143c26
added some animations for images + allowed for selection of images in…
tirani427 Aug 17, 2024
a0b9c23
bouncing logo and redesign!
jonathannnty Aug 20, 2024
4f19dd0
polish
jonathannnty Aug 20, 2024
513b6ca
fixed webpage dimension issue + redundancies in user-page.css
jonathannnty Aug 20, 2024
ec0d04c
Merge branch 'user-page' of https://github.com/acmucsd-projects/su24a…
jonathannnty Aug 20, 2024
1b84ca7
Finished user-page!
jonathannnty Sep 4, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
current make-list code html/css
  • Loading branch information
tirani427 committed Aug 10, 2024
commit 926bf34cdb5226084e72e8d6f121d3d8fc994241
150 changes: 150 additions & 0 deletions source/css/make-list.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@

#grocery-header{
background: #FC9E5F;
border-radius: 10px;

padding: 9px;

color:rgb(128, 57, 9);

margin: 10px;
}
::placeholder{
color:rgb(128, 57, 9);
font-size: 110%;
font-weight: bold;
}

#next-page-buttons{
background: #7C9E57;
border-radius: 10px;

padding:10px;
margin:10px;

font-size: 110%;
font-weight: bold;

justify-content: left;

}

.information-holder{
display:grid;
grid-template-columns: 1fr 1fr 1fr;

background-color: rgb(225, 228, 207);

border-radius: 10px;

margin: 10px;
}

.column1, .column2, .column3{
border-style: solid;
border-color: rgb(252, 255, 232);
border-radius: 10px;
}

.column1{
#item-list{
font-weight: bold;
font-size: 125%
}
}



.column2{
.align-images-center{
display: grid;
justify-content: center;
padding-bottom: 10px;

img{
border-radius: 10px;
}
}

h2{
margin: 10px;
font-size: 150%;
}

.image-holder{
display: flex;
flex-direction: row;
justify-content: center;

button{
border-radius: 10px;
width:35px;
background-color: rgb(12,71,103, 0.60);

font-size: 250%;

&:hover{
cursor: pointer;
opacity: 80%;
}

}

img{
border-radius: 10px;
margin: 10px;
}

}

}

.column3{
.fact-buttons{
display: flex;
justify-content: center;
margin:10px;

button{
border-style: none;

font-size: 130%;

background-color: rgb(206, 208, 192);

font-weight: bold;

padding: 10px;

&:hover{
cursor: pointer;
opacity: 80%;

}

&:active{
background-color: rgb(173, 175, 161);
}
}

#description-button{
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

#nutrition-button{
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}


}

#nutrition-facts{
margin: 10px;

font-size: 110%;
}

}

62 changes: 56 additions & 6 deletions source/make-list.html
Original file line number Diff line number Diff line change
@@ -5,22 +5,72 @@
<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/make-list.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>
<div class="header-links">
<div class="icon+link">
<img src="./assets/images/search-icon-black.png" width="20" height="20">
<a href="./user-page.html">Search Items</a>
</div>
<div class="icon+link">
<img src="./assets/images/cart3.png" width="20" height="20">
<a href="./make-list.html">Shopping List</a>
</div>
<div class="icon+link">
<img src="./assets/images/person-icon.png" width="20" height="20">
<a href="./user-page.html">Sign In</a>
</div>
</div>
</header>

<h1>WIREFRAME PAGE 6</h1>
<!-- <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>
<button id="next-page-buttons">Add Item</button> <!--href="./item-price.html"-->
<div>
<textarea rows="1" cols="170" id="grocery-header" placeholder="Enter List Name"></textarea>

<div class="information-holder">
<div class="column1">
<list id="item-list">
<ul>hello</ul>
</list>
</div>

<div class="column2">
<h2 id="item-name">Name</h2>
<div class="align-images-center">
<p id="main-image">Main Image Holder</p>
<img id="main-image" src="./assets/images/traderjoes-icon.png" width="100">
<p id="extra-images">Extra Image Holder</p>
</div>
<div class="image-holder">
<button id="back-image-button">&larr;</button>
<img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
<img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
<img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
<button id="next-image-button">&rarr;</button>
</div>
</div>

<div class="column3">
<div class="item-description">
<div class="fact-buttons">
<button id="description-button">Description</button>
<button id="nutrition-button">Nutrition Facts</button>
</div>
<p id="nutrition-facts">Nutritional Facts</p>
</div>
</div>

</div>
</div>
<button id="next-page-buttons">Finished with your list?</button> <!--href="./compare-stores.html"-->
</main>
</body>