<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AXELS 3D BUTIKK</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #12051f;
color: white;
}
header {
background: linear-gradient(135deg, #6d20c9, #a62cff);
padding: 25px;
text-align: center;
border-bottom: 5px solid #ff7900;
}
header h1 {
margin: 0;
font-size: 38px;
}
header p {
margin-bottom: 0;
}
.container {
max-width: 1000px;
margin: auto;
padding: 25px;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 20px;
}
.product {
background: #211033;
border: 2px solid #6d20c9;
border-radius: 20px;
overflow: hidden;
}
.product-image {
height: 230px;
background: #170823;
display: flex;
align-items: center;
justify-content: center;
color: #a995b7;
text-align: center;
padding: 20px;
}
.product-image div {
border: 2px dashed #70418f;
padding: 30px;
border-radius: 15px;
}
.product-content {
padding: 20px;
}
.product h2 {
margin-top: 0;
}
.price {
color: #ff7900;
font-size: 27px;
font-weight: bold;
margin: 15px 0;
}
button {
border: none;
border-radius: 12px;
padding: 13px 16px;
font-weight: bold;
cursor: pointer;
}
.add {
width: 100%;
background: #ff7900;
color: #18051f;
}
.cart {
margin-top: 30px;
background: #211033;
border: 2px solid #ff7900;
border-radius: 20px;
padding: 22px;
}
.cart-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid #4b2b60;
}
.item-name {
flex: 1;
}
.qty {
display: flex;
align-items: center;
gap: 7px;
}
.qty button {
background: #6d20c9;
color: white;
width: 35px;
height: 35px;
padding: 0;
}
.remove {
background: #43203d;
color: white;
}
.empty {
text-align: center;
color: #bbaec5;
padding: 25px;
}
.total {
text-align: right;
font-size: 26px;
font-weight: bold;
color: #ff7900;
margin-top: 20px;
}
.checkout {
width: 100%;
margin-top: 20px;
background: #ff7900;
color: #18051f;
font-size: 18px;
}
.order-form {
display: none;
margin-top: 20px;
background: #170823;
border: 1px solid #6d20c9;
border-radius: 15px;
padding: 20px;
}
.order-form.show {
display: block;
}
input,
textarea {
width: 100%;
padding: 13px;
margin: 7px 0 15px;
border-radius: 10px;
border: 1px solid #70418f;
background: #251137;
color: white;
}
textarea {
min-height: 90px;
}
.submit {
width: 100%;
background: #6d20c9;
color: white;
font-size: 16px;
}
.success {
display: none;
margin-top: 15px;
padding: 15px;
border-radius: 12px;
background: #17351f;
}
.success.show {
display: block;
}
@media(max-width:600px) {
.cart-item {
flex-wrap: wrap;
}
}
</style>
</head>
<body>
<header>
<h1>AXELS 3D BUTIKK</h1>
<p>🟣 3D-printede produkter 🟠</p>
</header>
<div class="container">
<!-- PRODUKTER -->
<div class="products">
<!-- FLØYTE -->
<div class="product">
<div class="product-image">
<div>
🖼️<br><br>
<strong>FLØYTEBILDE</strong><br>
<small>Produktbildet kan legges inn senere</small>
</div>
</div>
<div class="product-content">
<h2>Veldig høy fløyte</h2>
<p>
3D-printet fløyte.
</p>
<div class="price">
29,90 kr
</div>
<button
class="add"
onclick="addToCart('Veldig høy fløyte', 29.90)">
🛒 LEGG I HANDLEKURV
</button>
</div>
</div>
<!-- SEKKHOLDER -->
<div class="product">
<div class="product-image">
<div>
🖼️<br><br>
<strong>SEKKHOLDER-BILDE</strong><br>
<small>Produktbildet kan legges inn senere</small>
</div>
</div>
<div class="product-content">
<h2>
Veske/Bag/Sekk-holder til EL-sparkesykkel
</h2>
<p>
Praktisk 3D-printet holder.
</p>
<div class="price">
49,90 kr
</div>
<button
class="add"
onclick="addToCart(
'Veske/Bag/Sekk-holder til EL-sparkesykkel',
49.90
)">
🛒 LEGG I HANDLEKURV
</button>
</div>
</div>
</div>
<!-- HANDLEKURV -->
<div class="cart">
<h2>🛒 Handlekurv</h2>
<div id="cartItems"></div>
<div class="total" id="total">
TOTAL: 0,00 kr
</div>
<button
class="checkout"
onclick="openOrderForm()">
🟠 GÅ TIL BESTILLING
</button>
<!-- BESTILLINGSFORM -->
<div
class="order-form"
id="orderForm">
<h2>📦 Bestill</h2>
<p>
Skriv inn navnet ditt for å sende inn bestillingen.
</p>
<label>Navn</label>
<input
id="customerName"
type="text"
placeholder="Navnet ditt">
<label>Melding</label>
<textarea
id="message"
placeholder="F.eks. når du ønsker å hente bestillingen">
</textarea>
<button
class="submit"
onclick="submitOrder()">
✅ SEND BESTILLING
</button>
<div
class="success"
id="success">
</div>
</div>
</div>
</div>
<script>
/* HANDLEKURV */
let cart = [];
/* LEGG TIL */
function addToCart(name, price) {
let item = cart.find(
x => x.name === name
);
if (item) {
item.qty++;
} else {
cart.push({
name: name,
price: price,
qty: 1
});
}
renderCart();
}
/* ENDRE ANTALL */
function changeQty(index, amount) {
cart[index].qty += amount;
if (cart[index].qty <= 0) {
cart.splice(index, 1);
}
renderCart();
}
/* SLETT */
function removeItem(index) {
cart.splice(index, 1);
renderCart();
}
/* VIS HANDLEKURV */
function renderCart() {
const box =
document.getElementById("cartItems");
const totalBox =
document.getElementById("total");
if (cart.length === 0) {
box.innerHTML =
'<div class="empty">Handlekurven er tom 🛒</div>';
totalBox.innerText =
"TOTAL: 0,00 kr";
return;
}
let total = 0;
box.innerHTML = "";
cart.forEach(function(item, index) {
let subtotal =
item.price * item.qty;
total += subtotal;
box.innerHTML += `
<div class="cart-item">
<div class="item-name">
<strong>
${item.name}
</strong>
<br>
${money(item.price)} kr × ${item.qty}
</div>
<div class="qty">
<button
onclick="changeQty(${index}, -1)">
−
</button>
<strong>
${item.qty}
</strong>
<button
onclick="changeQty(${index}, 1)">
+
</button>
</div>
<button
class="remove"
onclick="removeItem(${index})">
🗑️
</button>
</div>
`;
});
totalBox.innerText =
"TOTAL: " + money(total) + " kr";
}
/* ÅPNE BESTILLING */
function openOrderForm() {
if (cart.length === 0) {
alert(
"Handlekurven er tom!"
);
return;
}
document
.getElementById("orderForm")
.classList.add("show");
}
/* SEND BESTILLING */
function submitOrder() {
if (cart.length === 0) {
alert(
"Handlekurven er tom!"
);
return;
}
const name =
document
.getElementById("customerName")
.value
.trim();
const message =
document
.getElementById("message")
.value
.trim();
if (!name) {
alert(
"Skriv inn navnet ditt."
);
return;
}
let total = 0;
cart.forEach(function(item) {
total +=
item.price * item.qty;
});
const orderNumber =
"AX-" + Date.now();
document
.getElementById("success")
.innerHTML = `
<strong>
✅ Bestillingen er registrert!
</strong>
<br><br>
Bestillingsnummer:
<strong>${orderNumber}</strong>
<br>
Navn:
<strong>${name}</strong>
<br>
Total:
<strong>${money(total)} kr</strong>
<br><br>
<small>
Bestillingen er klar.
</small>
`;
document
.getElementById("success")
.classList.add("show");
/*
VIKTIG:
Akkurat nå blir ikke bestillingen sendt
til deg.
I neste steg kobler vi denne knappen
til en ekte bestillingsliste/database,
slik at DU kan se alle bestillingene.
*/
}
/* PENGER */
function money(number) {
return number
.toFixed(2)
.replace(".", ",");
}
/* START */
renderCart();
</script>
</body>
</html>