267 lines
10 KiB
HTML
267 lines
10 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Shop - Buy Items</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=shopping_cart"
|
||
/>
|
||
<link rel="stylesheet" href="static/css/index.css" />
|
||
</head>
|
||
<body>
|
||
<button id="loginBtn" class="login-btn" style="display: none">
|
||
Login
|
||
</button>
|
||
<button id="logoutBtn" class="logout-btn" style="display: none">
|
||
Logout
|
||
</button>
|
||
<button id="cartBtn" class="cart-btn">
|
||
<span class="material-symbols-outlined"> shopping_cart </span
|
||
><span id="cartCount" class="cart-count" style="display: none"
|
||
>0</span
|
||
>
|
||
</button>
|
||
<!--balance-->
|
||
<div id="balanceBtn" class="balance-Btn" style="display: none">
|
||
<span id="balanceAmount" class="balance-amount">0</span>
|
||
</div>
|
||
<h1>Shop - Items to Buy</h1>
|
||
<button
|
||
id="accountBtn"
|
||
class="login-btn"
|
||
style="left: auto; right: 130px; top: 24px; display: none"
|
||
>
|
||
Manage Account
|
||
</button>
|
||
<table id="items-list" class="item-table">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>Item Name</th>
|
||
<th>Amount</th>
|
||
<th>Price</th>
|
||
<th>Stock</th>
|
||
<th></th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="loading">
|
||
<td colspan="6">Loading items...</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div id="msg"></div>
|
||
|
||
<!-- Login Modal -->
|
||
<div id="loginModal" class="modal">
|
||
<div class="modal-content">
|
||
<button class="close-btn" onclick="closeLoginModal()">×</button>
|
||
<h2>Login</h2>
|
||
<form id="loginForm" autocomplete="off">
|
||
<div style="margin-bottom: 12px">
|
||
<label for="loginUsername">Username</label>
|
||
<input
|
||
id="loginUsername"
|
||
name="loginUsername"
|
||
type="text"
|
||
required
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
<div style="margin-bottom: 12px">
|
||
<label for="loginPassword">Password</label>
|
||
<input
|
||
id="loginPassword"
|
||
name="loginPassword"
|
||
type="password"
|
||
required
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
<button type="submit" style="width: 100%">Login</button>
|
||
</form>
|
||
<div
|
||
id="loginMsg"
|
||
style="margin-top: 10px; color: #ff5555"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Transfer modal -->
|
||
<div id="transferModal" class="transfer-modal">
|
||
<div class="transfer-content">
|
||
<button class="close-btn" onclick="closeTransferModal()">
|
||
×
|
||
</button>
|
||
<h2>Transfer</h2>
|
||
<div id="transferForm">
|
||
<div id="transferToList" style="margin-bottom: 12px"></div>
|
||
<div style="margin-bottom: 12px">
|
||
<label for="transferAmount">Amount</label>
|
||
<input
|
||
id="transferAmount"
|
||
name="transferAmount"
|
||
type="number"
|
||
min="0"
|
||
required
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
|
||
<button id="transferBtn" style="width: 100%">
|
||
Transfer
|
||
</button>
|
||
</div>
|
||
<div
|
||
id="transferMsg"
|
||
style="margin-top: 10px; color: #ff5555"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cart Window -->
|
||
<div id="cartWindow" class="cart-window">
|
||
<div class="cart-content">
|
||
<button class="close-btn" onclick="closeCart()">×</button>
|
||
<h2>Your Cart</h2>
|
||
<div id="cartItems"></div>
|
||
<div id="cartTotal" style="margin: 12px 0"></div>
|
||
<button
|
||
id="checkoutBtn"
|
||
style="width: 100%; margin-top: 10px; background: #23a559"
|
||
>
|
||
Checkout
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Address Selection Modal -->
|
||
<div id="addressModal" class="address-modal">
|
||
<div class="address-content">
|
||
<button class="close-btn" onclick="closeAddressModal()">
|
||
×
|
||
</button>
|
||
<h2>Select Address</h2>
|
||
<form id="addressForm">
|
||
<div id="addressList" class="address-list"></div>
|
||
<button
|
||
type="submit"
|
||
style="
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
background: #5865f2;
|
||
"
|
||
>
|
||
Confirm Order
|
||
</button>
|
||
</form>
|
||
<div
|
||
id="addressMsg"
|
||
style="margin-top: 10px; color: #ff5555"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Account Management Modal -->
|
||
<div id="accountModal" class="modal">
|
||
<div
|
||
class="modal-content"
|
||
style="min-width: 340px; max-width: 95vw"
|
||
>
|
||
<button class="close-btn" onclick="closeAccountModal()">
|
||
×
|
||
</button>
|
||
<h2>Manage Account</h2>
|
||
<div
|
||
id="accountTabs"
|
||
style="display: flex; gap: 12px; margin-bottom: 16px"
|
||
>
|
||
<button id="tabPassword" style="flex: 1">
|
||
Change Password
|
||
</button>
|
||
<button id="tabAddresses" style="flex: 1">Addresses</button>
|
||
<button id="tabComputers" style="flex: 1">
|
||
Linked Computers
|
||
</button>
|
||
</div>
|
||
<div id="accountTabPassword" class="account-tab">
|
||
<form id="changePasswordForm" autocomplete="off">
|
||
<div style="margin-bottom: 10px">
|
||
<label>Current Password</label>
|
||
<input
|
||
id="currentPassword"
|
||
type="password"
|
||
required
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
<div style="margin-bottom: 10px">
|
||
<label>New Password</label>
|
||
<input
|
||
id="newPassword"
|
||
type="password"
|
||
required
|
||
minlength="6"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
<div style="margin-bottom: 10px">
|
||
<label>Confirm New Password</label>
|
||
<input
|
||
id="confirmNewPassword"
|
||
type="password"
|
||
required
|
||
minlength="6"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
style="width: 100%; background: #23a559"
|
||
>
|
||
Change Password
|
||
</button>
|
||
</form>
|
||
<div id="changePasswordMsg" style="margin-top: 10px"></div>
|
||
</div>
|
||
<div
|
||
id="accountTabAddresses"
|
||
class="account-tab"
|
||
style="display: none"
|
||
>
|
||
<div id="addressesList"></div>
|
||
<form
|
||
id="addAddressForm"
|
||
autocomplete="off"
|
||
style="margin-top: 12px"
|
||
>
|
||
<input
|
||
id="newAddress"
|
||
type="text"
|
||
placeholder="New address"
|
||
style="width: 70%"
|
||
required
|
||
/>
|
||
<button type="submit" style="background: #5865f2">
|
||
Add Address
|
||
</button>
|
||
</form>
|
||
<div id="addressesMsg" style="margin-top: 10px"></div>
|
||
</div>
|
||
<div
|
||
id="accountTabComputers"
|
||
class="account-tab"
|
||
style="display: none"
|
||
>
|
||
<div id="computersList"></div>
|
||
<div id="computersMsg" style="margin-top: 10px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="static/js/index.js"></script>
|
||
</body>
|
||
</html>
|