mirror of
https://github.com/System-End/Team_Website.git
synced 2026-04-19 19:45:15 +00:00
k
This commit is contained in:
Unknown
parent
8337fb99f3
commit
30fd35a734
2 changed files with 1 additions and 381 deletions
|
|
@ -1,185 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="/Resources/Favicons/favicon.png"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!--Navigation Bar-->
|
||||
<nav class="fill" id="nav-bar">
|
||||
<ul>
|
||||
<img
|
||||
src="/Resources/Black Logo-1.png"
|
||||
id="nav-logo"
|
||||
alt="Team 1165 Logo"
|
||||
/>
|
||||
<li class="nav-button" id="home-dropdown">
|
||||
<a href="/index.html">Home</a>
|
||||
<nav class="dropdown-content" id="home-dropdown-content">
|
||||
<a class="first-dropdown" href="/index.html">Projects</a>
|
||||
<a href="/index.html">Leaders</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-button">
|
||||
<a href="/Pages/calendar.html">Calendar</a>
|
||||
</li>
|
||||
<li class="nav-button">
|
||||
<a href="/Pages/sponsors.html">Sponsors</a>
|
||||
</li>
|
||||
<li class="nav-button"><a href="/Pages/Shop.html">Shop</a></li>
|
||||
<li class="nav-button" id="donate-dropdown">
|
||||
<a href="/Pages/Donate.html">Donate</a>
|
||||
<nav class="dropdown-content" id="donate-dropdown-content">
|
||||
<a class="first-dropdown" href="/Pages/Gen Donate.html"
|
||||
>General Donation</a
|
||||
>
|
||||
<a href="/Pages/Tax credit Dono.html">Tax Credit</a>
|
||||
</nav>
|
||||
</li>
|
||||
|
||||
<li class="nav-button" id="Accomplishments-dropdown">
|
||||
<a href="/index.html">Accomplishments</a>
|
||||
<nav class="dropdown-content" id="Accomplishments-dropdown-content">
|
||||
<a class="first-dropdown" href="/Pages/Projects.html">Projects</a>
|
||||
<a href="/Pages/Awards.html">Awards</a>
|
||||
</nav>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Welcome to Our Online Shop</h1>
|
||||
<div class="products">
|
||||
<div class="product">
|
||||
<img src="hoodie.jpg" alt="Hoodie" />
|
||||
<h2>Hoodies - $45</h2>
|
||||
<label for="hoodie-size">Select Size:</label>
|
||||
<select id="hoodie-size">
|
||||
<option value="Xsmall">XSmall</option>
|
||||
<option value="small">Small</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large">Large</option>
|
||||
<option value="Xlarge">XLarge</option>
|
||||
<option value="XXlarge">XXLarge</option>
|
||||
<option value="XXXlarge">XXXLarge</option>
|
||||
</select>
|
||||
<label for="hoodie-quantity">Quantity:</label>
|
||||
<input
|
||||
type="number"
|
||||
id="hoodie-quantity"
|
||||
name="hoodie-quantity"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="product">
|
||||
<img src="tshirt.jpg" alt="T-Shirt" />
|
||||
<h2>T-Shirts - $15</h2>
|
||||
<label for="tshirt-size">Select Size:</label>
|
||||
<select id="tshirt-size">
|
||||
<option value="Xsmall">XSmall</option>
|
||||
<option value="small">Small</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="large">Large</option>
|
||||
<option value="Xlarge">XLarge</option>
|
||||
<option value="XXlarge">XXLarge</option>
|
||||
<option value="XXXlarge">XXXLarge</option>
|
||||
</select>
|
||||
<label for="tshirt-quantity">Quantity:</label>
|
||||
<input
|
||||
type="number"
|
||||
id="tshirt-quantity"
|
||||
name="tshirt-quantity"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<button id="checkout-button">Checkout</button>
|
||||
<div class="order-summary">
|
||||
<h2>Your Order Summary:</h2>
|
||||
<p id="order-summary"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var stripe = Stripe(
|
||||
"sk_test_51PBMFWCZYaFRUYezJHsiqgp6BHarFfhZjlNkDT8MNnxSOpCe3pDR427dyqYJMmEIF5JRe6aQc16KxHK3euoMZ9de00r03MbmAR"
|
||||
);
|
||||
var checkoutButton = document.getElementById("checkout-button");
|
||||
checkoutButton.addEventListener("click", function () {
|
||||
var hoodieSize = document.getElementById("hoodie-size").value;
|
||||
var hoodieQuantity = parseInt(
|
||||
document.getElementById("hoodie-quantity").value
|
||||
);
|
||||
var tshirtSize = document.getElementById("tshirt-size").value;
|
||||
var tshirtQuantity = parseInt(
|
||||
document.getElementById("tshirt-quantity").value
|
||||
);
|
||||
var totalPrice = hoodieQuantity * 45 + tshirtQuantity * 15;
|
||||
|
||||
// Create a Stripe Checkout session
|
||||
stripe.redirectToCheckout({
|
||||
items: [
|
||||
{
|
||||
sku: "sku_HOODIE",
|
||||
quantity: hoodieQuantity,
|
||||
size: hoodieSize,
|
||||
},
|
||||
{
|
||||
sku: "sku_TSHIRT",
|
||||
quantity: tshirtQuantity,
|
||||
size: tshirtSize,
|
||||
},
|
||||
],
|
||||
successUrl: "https://yourwebsite.com/success",
|
||||
cancelUrl: "https://yourwebsite.com/cancel",
|
||||
clientReferenceId: "unique_id", // optional
|
||||
payment_method_types: ["card"],
|
||||
mode: "payment",
|
||||
lineItems: [
|
||||
{
|
||||
quantity: hoodieQuantity,
|
||||
price: "price_HOODIE",
|
||||
description: "Hoodie - " + hoodieSize,
|
||||
},
|
||||
{
|
||||
quantity: tshirtQuantity,
|
||||
price: "price_TSHIRT",
|
||||
description: "T-Shirt - " + tshirtSize,
|
||||
},
|
||||
],
|
||||
submit_type: "pay",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Footer -->
|
||||
<section class="footer">
|
||||
<div class="social-icons">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/Team1165" target="_blank"
|
||||
><img src="/Resources/Facebook.png" alt="Facebook"
|
||||
/></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:team1165@gmail.com" target="_blank"
|
||||
><img src="/Resources/Gmail Logo.png" alt="Gmail"
|
||||
/></a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.instagram.com/teamparadise.1165"
|
||||
target="_blank"
|
||||
><img src="/Resources/Instagram.png" alt="Instagram"
|
||||
/></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
197
Pages/style.css
197
Pages/style.css
|
|
@ -510,199 +510,4 @@ h2 {
|
|||
margin-bottom: 10vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* shop css */
|
||||
/* body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.products {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product {
|
||||
flex-basis: 45%;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.product img {
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: calc(50% - 5px);
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#order-summary {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.products {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product {
|
||||
flex-basis: 45%;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.product img {
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: calc(50% - 5px);
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#order-summary {
|
||||
font-weight: bold;
|
||||
} */
|
||||
/* end shop css */
|
||||
/*@-webkit-keyframes fill {
|
||||
0% {
|
||||
width: 0%;
|
||||
height: 1px;
|
||||
}
|
||||
50% {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(163, 47, 47);
|
||||
}
|
||||
}*/
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue