Bernt
58ca4e68db
- Go backend API with full CRUD for all modules (CRM, Sales, Finance, HR, Legal, Marketing, Support, Purchase, Inventory, Projects, Automation, Analytics) - Rust analytics service with parallel report generation - C runtime with POSIX shared memory IPC - PostgreSQL schema with 30+ tables, full migrations - Redis cache, sessions, pub/sub - Kafka event streaming with Zookeeper - WebSocket hub for real-time updates - Automation engine with cron jobs, workflows, event triggers - JWT authentication, multi-tenant from start - Docker Compose with all services - Nginx reverse proxy with rate limiting - Integration tests passing - Feature gap analysis against Fortnox/Odoo/Visma Refs: BOC-001
459 lines
16 KiB
HTML
459 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sv">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>quiXzoom Field Gear Collection</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #0A0A1B;
|
|
color: #fff;
|
|
min-height: 100vh;
|
|
}
|
|
.header {
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.header h1 {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 0.5rem;
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.header p {
|
|
color: rgba(255,255,255,0.6);
|
|
font-size: 0.9rem;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
.eligibility-banner {
|
|
background: rgba(99, 102, 241, 0.1);
|
|
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
text-align: center;
|
|
}
|
|
.eligibility-banner.locked {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
}
|
|
.eligibility-banner.unlocked {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
}
|
|
.category-filter {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
overflow-x: auto;
|
|
padding: 1rem 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.category-btn {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
color: #fff;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: all 0.2s;
|
|
}
|
|
.category-btn:hover, .category-btn.active {
|
|
background: #6366f1;
|
|
border-color: #6366f1;
|
|
}
|
|
.products-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
.product-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.product-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
|
|
}
|
|
.product-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
background: linear-gradient(135deg, #1a1a2e, #16213e);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 4rem;
|
|
}
|
|
.product-info {
|
|
padding: 1rem;
|
|
}
|
|
.product-name {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.product-desc {
|
|
color: rgba(255,255,255,0.5);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.product-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.product-price {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: #6366f1;
|
|
}
|
|
.product-btn {
|
|
background: #6366f1;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: background 0.2s;
|
|
}
|
|
.product-btn:hover {
|
|
background: #4f46e5;
|
|
}
|
|
.product-btn:disabled {
|
|
background: rgba(255,255,255,0.1);
|
|
cursor: not-allowed;
|
|
}
|
|
.stock-low {
|
|
color: #f59e0b;
|
|
font-size: 0.75rem;
|
|
}
|
|
.stock-out {
|
|
color: #ef4444;
|
|
font-size: 0.75rem;
|
|
}
|
|
.cart-icon {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
background: rgba(255,255,255,0.1);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 8px;
|
|
}
|
|
.tier-badge {
|
|
margin-top: 0.5rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
}
|
|
.tier-contributor {
|
|
background: rgba(255,255,255,0.1);
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
.tier-field {
|
|
background: rgba(99, 102, 241, 0.2);
|
|
color: #6366f1;
|
|
}
|
|
.tier-verified {
|
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
|
|
color: #8b5cf6;
|
|
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
}
|
|
.cart-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.8);
|
|
z-index: 100;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.cart-content {
|
|
background: #1a1a2e;
|
|
border-radius: 16px;
|
|
padding: 1.5rem;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
.cart-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.checkout-btn {
|
|
width: 100%;
|
|
background: #6366f1;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
margin-top: 1rem;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.products-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
.header h1 { font-size: 1.4rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>quiXzoom Field Gear</h1>
|
|
<p>Professionell utrustning för professionella Zoomers</p>
|
|
<div class="cart-icon" onclick="showCart()">
|
|
🛒 <span id="cart-count">0</span>
|
|
</div>
|
|
<div class="tier-badge" id="tier-badge"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div id="eligibility-banner" class="eligibility-banner">
|
|
<span id="eligibility-text">Kontrollerar din Zoomer-status...</span>
|
|
</div>
|
|
|
|
<div class="category-filter">
|
|
<button class="category-btn active" onclick="filterCategory('all')">Alla</button>
|
|
{% for cat in categories %}
|
|
<button class="category-btn" onclick="filterCategory('{{ cat }}')">{{ cat|capitalize }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="products-grid" id="products-grid">
|
|
{% for product in products %}
|
|
<div class="product-card" data-category="{{ product.category }}">
|
|
<div class="product-image">🎯</div>
|
|
<div class="product-info">
|
|
<div class="product-name">{{ product.name }}</div>
|
|
<div class="product-desc">{{ product.description }}</div>
|
|
<div class="product-meta">
|
|
<span class="product-price">{{ "%.0f"|format(product.price_sek/100) }} kr</span>
|
|
{% if product.stock_quantity > 0 %}
|
|
<button class="product-btn" onclick="addToCart({{ product.id }})" data-product="{{ product.id }}">
|
|
Lägg till
|
|
</button>
|
|
{% else %}
|
|
<span class="stock-out">Slut i lager</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if product.stock_quantity > 0 and product.stock_quantity < 10 %}
|
|
<div class="stock-low">Endast {{ product.stock_quantity }} kvar</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-modal" id="cart-modal" onclick="hideCart(event)">
|
|
<div class="cart-content" onclick="event.stopPropagation()">
|
|
<h2>Kundvagn</h2>
|
|
<div id="cart-items"></div>
|
|
<div id="cart-total" style="text-align: right; font-size: 1.2rem; font-weight: 700; margin-top: 1rem;"></div>
|
|
<button class="checkout-btn" onclick="checkout()">Gå till kassan</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let userEligible = false;
|
|
let cart = JSON.parse(localStorage.getItem('cart') || '[]');
|
|
|
|
async function checkEligibility() {
|
|
const token = localStorage.getItem('quixzoom_token');
|
|
if (!token) {
|
|
showLocked('Logga in för att se shoppen');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch('/api/tier', {
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
});
|
|
const data = await res.json();
|
|
userEligible = data.completed_missions >= 10;
|
|
|
|
// Update tier badge
|
|
const badge = document.getElementById('tier-badge');
|
|
if (data.tier === 'verified_field_contributor') {
|
|
badge.textContent = '⭐ Verified Field Contributor';
|
|
badge.className = 'tier-badge tier-verified';
|
|
showUnlocked(`✅ Verified Field Contributor — ${data.completed_missions} uppdrag @ ${(data.approval_rate*100).toFixed(0)}% godkänt`);
|
|
} else if (data.tier === 'field_contributor') {
|
|
badge.textContent = '🎯 Field Contributor';
|
|
badge.className = 'tier-badge tier-field';
|
|
showUnlocked(`✅ Field Contributor — ${data.completed_missions} uppdrag`);
|
|
} else {
|
|
badge.textContent = '👤 Contributor';
|
|
badge.className = 'tier-badge tier-contributor';
|
|
showLocked(`🔒 ${10 - data.completed_missions} uppdrag kvar till Field Contributor`);
|
|
}
|
|
} catch (e) {
|
|
showLocked('Kunde inte verifiera din status');
|
|
}
|
|
}
|
|
|
|
function showLocked(msg) {
|
|
const banner = document.getElementById('eligibility-banner');
|
|
banner.className = 'eligibility-banner locked';
|
|
document.getElementById('eligibility-text').textContent = msg;
|
|
document.querySelectorAll('.product-btn').forEach(btn => btn.disabled = true);
|
|
}
|
|
|
|
function showUnlocked(msg) {
|
|
const banner = document.getElementById('eligibility-banner');
|
|
banner.className = 'eligibility-banner unlocked';
|
|
document.getElementById('eligibility-text').textContent = msg;
|
|
document.querySelectorAll('.product-btn').forEach(btn => btn.disabled = false);
|
|
}
|
|
|
|
function filterCategory(cat) {
|
|
document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
|
|
document.querySelectorAll('.product-card').forEach(card => {
|
|
if (cat === 'all' || card.dataset.category === cat) {
|
|
card.style.display = 'block';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function addToCart(productId) {
|
|
if (!userEligible) return;
|
|
const product = products.find(p => p.id === productId);
|
|
if (!product) return;
|
|
|
|
const existing = cart.find(item => item.product_id === productId);
|
|
if (existing) {
|
|
existing.quantity += 1;
|
|
} else {
|
|
cart.push({
|
|
product_id: productId,
|
|
name: product.name,
|
|
price: product.price_sek,
|
|
quantity: 1
|
|
});
|
|
}
|
|
|
|
localStorage.setItem('cart', JSON.stringify(cart));
|
|
updateCartCount();
|
|
alert('Tillagd i kundvagnen!');
|
|
}
|
|
|
|
function updateCartCount() {
|
|
document.getElementById('cart-count').textContent = cart.reduce((sum, item) => sum + item.quantity, 0);
|
|
}
|
|
|
|
function showCart() {
|
|
const modal = document.getElementById('cart-modal');
|
|
const itemsDiv = document.getElementById('cart-items');
|
|
itemsDiv.innerHTML = '';
|
|
|
|
if (cart.length === 0) {
|
|
itemsDiv.innerHTML = '<p style="text-align: center; color: rgba(255,255,255,0.5);">Kundvagnen är tom</p>';
|
|
} else {
|
|
cart.forEach((item, idx) => {
|
|
itemsDiv.innerHTML += `
|
|
<div class="cart-item">
|
|
<span>${item.name} x${item.quantity}</span>
|
|
<span>${(item.price * item.quantity / 100).toFixed(0)} kr</span>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
|
|
document.getElementById('cart-total').textContent = `Totalt: ${(total/100).toFixed(0)} kr`;
|
|
|
|
modal.style.display = 'flex';
|
|
}
|
|
|
|
function hideCart(event) {
|
|
if (event.target.id === 'cart-modal') {
|
|
document.getElementById('cart-modal').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
async function checkout() {
|
|
if (cart.length === 0) return;
|
|
|
|
const token = localStorage.getItem('quixzoom_token');
|
|
if (!token) {
|
|
alert('Logga in först');
|
|
return;
|
|
}
|
|
|
|
// Skapa order
|
|
const res = await fetch('/api/orders', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
items: cart.map(item => ({
|
|
product_id: item.product_id,
|
|
quantity: item.quantity
|
|
})),
|
|
shipping_address: {
|
|
name: 'Test',
|
|
street: 'Testgatan 1',
|
|
city: 'Stockholm',
|
|
postal_code: '11122'
|
|
}
|
|
})
|
|
});
|
|
|
|
if (res.ok) {
|
|
const order = await res.json();
|
|
cart = [];
|
|
localStorage.removeItem('cart');
|
|
updateCartCount();
|
|
window.location.href = `/checkout?order_id=${order.id}`;
|
|
} else {
|
|
const err = await res.json();
|
|
alert(err.detail || 'Kunde inte skapa order');
|
|
}
|
|
}
|
|
|
|
let products = [];
|
|
async function loadProducts() {
|
|
const res = await fetch('/api/products');
|
|
products = await res.json();
|
|
}
|
|
|
|
loadProducts();
|
|
|
|
checkEligibility();
|
|
updateCartCount();
|
|
</script>
|
|
</body>
|
|
</html>
|