Skip to content

Commit 7b2ff0b

Browse files
Lin-JetLin-Jet
committed
prizes even color seperation, bolder text, changed favicon
2 parents f18d21b + dbdde75 commit 7b2ff0b

File tree

12 files changed

+449
-11
lines changed

12 files changed

+449
-11
lines changed

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/src/assets/HMXfavicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
7+
<title>HackMerced X Live</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎public/prizeAssets/counter.svg

+3
Loading

‎public/prizeAssets/header.png

7.69 KB
Loading

‎public/prizeAssets/header.svg

+3
Loading

‎public/prizeAssets/row.png

17 KB
Loading

‎public/prizeAssets/row.svg

+3
Loading

‎public/vite.svg

-1
This file was deleted.

‎src/Components/CSS/Prizes.css

+82
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,86 @@
1+
.prizes-points {
2+
font-size: 6rem;
3+
font-weight: bold;
4+
background-image: url("/prizeAssets/counter.svg");
5+
background-repeat: no-repeat;
6+
background-position: center;
7+
background-size: contain;
8+
user-select: none;
9+
mix-blend-mode: hard-light;
10+
}
11+
.prizes-points > p { padding:0; margin:0; }
12+
13+
.prizes-listingcontainer {
14+
/* width:80vw; */
15+
16+
}
17+
18+
.prizes-header {
19+
background-image: url("/prizeAssets/header.png");
20+
background-repeat: no-repeat;
21+
background-position:center;
22+
background-size:60rem;
23+
user-select:none;
24+
margin-top:3rem;
25+
font-size:1.5rem;
26+
}
27+
.prizes-header > div {
28+
display:inline-block;
29+
margin:0 1rem;
30+
}
31+
32+
.prizes-table {
33+
width:100%;
34+
}
35+
36+
.prize {
37+
height:8rem;
38+
font-size: 1.5rem;
39+
background-image:url("prizeAssets/row.png");
40+
background-repeat: no-repeat;
41+
background-position: center;
42+
background-size:60rem;
43+
}
44+
.prize:nth-child(even){
45+
filter: hue-rotate(10deg);
46+
}
47+
.prize > img {
48+
position:absolute;
49+
height:5rem;
50+
transform:translateX(-80%);
51+
}
52+
53+
.prizes-claim {
54+
/* margin:0rem 3rem; */
55+
}
56+
.prize-text {
57+
position:absolute;
58+
margin-top:2rem;
59+
transform:translateX(40%);
60+
/* margin-left:100%; */
61+
}
62+
.prize-text > div {
63+
display:inline-block;
64+
margin:0 1rem;
65+
}
66+
.prize-name {
67+
width:8rem;
68+
font-weight: 800;
69+
}
70+
.prize-desc {
71+
width:8rem;
72+
font-weight: 500;
73+
}
74+
.prize-cost {
75+
width:8rem;
76+
font-weight: 500;
77+
}
78+
.prize-quantity {
79+
width:8rem;
80+
font-weight: 500;
81+
}
182

83+
/* man builds worlds least responsive page; asked to leave project */
284

385
/* Viewports */
486

‎src/Components/PrizeListing.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
3+
function claimPrize(name) {
4+
// badger api pls
5+
}
6+
/* notes:
7+
-
8+
*/
9+
10+
function PrizeListing({name, description, cost, quantity}) {
11+
return (
12+
<div className="prize">
13+
<div className="prize-text">
14+
<div className="prize-name">{name}</div>
15+
<div className="prize-desc">{description}</div>
16+
<div className="prize-cost">{cost} points</div>
17+
<div className="prize-quantity">{quantity} remaining</div>
18+
<div><button className='prizes-claim' style={{dispaly:"inline-block"}} onClick={() => claimPrize(name)}>Claim</button></div>
19+
{/* <img src="prizeAssets/row.png" /> */}
20+
</div>
21+
</div>
22+
);
23+
}
24+
25+
export default PrizeListing;

‎src/Components/Prizes.jsx

+65-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,71 @@
11
import React from 'react';
22
import './CSS/Prizes.css'
3-
3+
import PrizeListing from './PrizeListing'
44

55
function Prizes() {
6-
return (
7-
<div className="Prizes">
8-
<h1>HackMerced X Prizes Page</h1>
6+
let points = 129
7+
let prizeArray = [ // test data
8+
{
9+
title: "Boogie Board",
10+
description: "Take it to the lake!", // is this contents in the db?
11+
cost: "120",
12+
quantity: "3",
13+
id: 6532 // should i use this as react key or is index okay
14+
},
15+
{
16+
title: "Car", // hopefully these aren't too long and they wont break
17+
description: "Take it to the road!",
18+
cost: "400",
19+
quantity: "2"
20+
},
21+
{
22+
title: "test1", // hopefully these aren't too long and they wont break
23+
description: "Take it to the road!",
24+
cost: "400",
25+
quantity: "2"
26+
},
27+
{
28+
title: "test2", // hopefully these aren't too long and they wont break
29+
description: "Take it to the road!",
30+
cost: "400",
31+
quantity: "2"
32+
},
33+
{
34+
title: "test3", // hopefully these aren't too long and they wont break
35+
description: "Take it to the road!",
36+
cost: "400",
37+
quantity: "2"
38+
},
39+
{
40+
title: "test4", // hopefully these aren't too long and they wont break
41+
description: "Take it to the road!",
42+
cost: "400",
43+
quantity: "2"
44+
},
45+
{
46+
title: "test5", // hopefully these aren't too long and they wont break
47+
description: "Take it to the road!",
48+
cost: "400",
49+
quantity: "2"
50+
},
51+
]
52+
return (
53+
<div className="Prizes">
54+
<div className="prizes-points" align="center">
55+
<p>Points: {points}</p>
56+
</div>
57+
<div className="prizes-listingcontainer">
58+
<div className="prizes-header">
59+
<div>&nbsp;</div>
60+
</div>
61+
<div className="prizes-table">
62+
{prizeArray.map(item => {
63+
return <PrizeListing key={prizeArray.indexOf(item)} name={item.title} description={item.description} cost={item.cost} quantity={item.quantity} />
64+
})}
65+
</div>
966
</div>
10-
);
11-
}
67+
</div>
68+
);
69+
}
1270

13-
export default Prizes;
71+
export default Prizes;

0 commit comments

Comments
 (0)