Style & Strategy Boutique v2

by BlazeKoala99
320 lines11.1 KB
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Style & Strategy Boutique v2</title>
    <style>
        /* Modernes, dunkles Premium-Design */
        :root {
            --bg-dark: #0f172a;
            --panel-bg: #1e293b;
            --accent-glow: #3b82f6;
            --accent-success: #10b981;
            --accent-danger: #ef4444;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: var(--bg-dark);
            color: var(--text-main);
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            padding: 25px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        header h1 {
            margin: 0 0 10px 0;
            font-size: 2.5rem;
            letter-spacing: -1px;
            background: linear-gradient(to right, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        header p {
            color: var(--text-muted);
            margin: 0;
        }

        /* Suchleiste */
        .search-container {
            margin-top: 15px;
        }
        .search-container input {
            width: 100%;
            max-width: 400px;
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #334155;
            background: #0f172a;
            color: white;
            font-size: 1rem;
            outline: none;
        }
        .search-container input:focus {
            border-color: var(--accent-glow);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
        }

        /* Der Haupt-Kasten */
        .haupt-container {
            display: flex;
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* LINKE SPALTE: SHOP & WARENKORB */
        .shop-bereich {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .sektions-titel {
            font-size: 1.5rem;
            margin-top: 0;
            margin-bottom: 20px;
            border-bottom: 1px solid #334155;
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .produkt-liste {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
        }

        .produkt-karte {
            background: var(--panel-bg);
            border: 1px solid #334155;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .produkt-karte:hover {
            transform: translateY(-5px);
            border-color: var(--accent-glow);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
        }

        .produkt-karte img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            background-color: #0f172a;
        }

        .produkt-karte h3 {
            margin: 15px 0 5px 0;
            font-size: 1.1rem;
        }

        .preis {
            font-size: 1.25rem;
            color: #34d399;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .btn {
            background: var(--accent-glow);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s;
            width: 100%;
        }

        .btn:hover {
            background: #2563eb;
        }

        /* INTEGRIERTER WARENKORB-BEREICH */
        .warenkorb-bereich {
            background: var(--panel-bg);
            border: 1px solid #334155;
            border-radius: 12px;
            padding: 20px;
        }

        .warenkorb-liste {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 200px;
            overflow-y: auto;
        }

        .warenkorb-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #334155;
        }

        .remove-btn {
            background: none;
            border: none;
            color: var(--accent-danger);
            cursor: pointer;
            font-weight: bold;
        }

        .gesamt-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            font-size: 1.2rem;
            font-weight: bold;
        }

        /* RECHTE SPALTE: SCHACHSPIEL */
        .schach-bereich {
            width: 480px;
            background: var(--panel-bg);
            border: 1px solid #334155;
            padding: 20px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .iframe-wrapper {
            position: relative;
            width: 100%;
            padding-bottom: 100%; /* Macht das Schachfeld perfekt quadratisch */
            height: 0;
        }

        .iframe-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 8px;
            background: #262626;
        }

        /* Responsive Anpassung für kleinere Bildschirme */
        @media (max-width: 1000px) {
            .haupt-container {
                flex-direction: column;
            }
            .schach-bereich {
                width: 100%;
            }
        }
    </style>
</head>
<body>

    <header>
        <h1>👕♟️ Style & Strategy Boutique</h1>
        <p>Erlebe Premium-Shopping kombiniert mit taktischen Meisterzügen.</p>
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="Kleidung durchsuchen..." onkeyup="filterProducts()">
        </div>
    </header>

    <div class="haupt-container">
        
        <!-- LINKS: SHOP & WARENKORB -->
        <div class="shop-bereich">
            
            <div>
                <h2 class="sektions-titel">Kollektion 2026</h2>
                <div class="produkt-liste" id="produktListe">
                    <!-- Die Produkte werden per JavaScript eingefügt, damit das System dynamisch bleibt -->
                </div>
            </div>

            <!-- Interaktiver Warenkorb im selben Kasten -->
            <div class="warenkorb-bereich">
                <h3 style="margin-top: 0;">🛒 Dein Warenkorb</h3>
                <ul class="warenkorb-liste" id="warenkorbListe">
                    <p style="color: var(--text-muted); font-style: italic;" id="emptyCartMsg">Der Warenkorb ist noch leer.</p>
                </ul>
                <div class="gesamt-box">
                    <span>Gesamtsumme:</span>
                    <span id="gesamtPreis" style="color: #34d399;">0,00 €</span>
                </div>
                <button class="btn" style="margin-top: 15px; background: var(--accent-success);" onclick="checkout()">Jetzt kostenpflichtig bestellen</button>
            </div>

        </div>

        <!-- RECHTS: INTERAKTIVES SCHACH -->
        <div class="schach-bereich">
            <h2 class="sektions-titel">♟️ Live-Schacharena</h2>
            <div class="iframe-wrapper">
                <!-- Verbessertes Lichess-Widget gegen den Computer -->
                <iframe src="https://lichess.org"></iframe>
            </div>
        </div>

    </div>

    <script>
        // Datenbank für die Klamotten direkt im Code
        const PRODUKTE = [
            { id: 1, name: "Premium Cyber Hoodie", price: 59.99, img: "https://unsplash.com" },
            { id: 2, name: "Oversized Vintage Shirt", price: 29.99, img: "https://unsplash.com" },
            { id: 3, name: "Streetwear Cargo Jeans", price: 79.99, img: "https://unsplash.com" },
            { id: 4, name: "Schachmatt Snapback Cap", price: 19.99, img: "https://unsplash.com" }
        ];

        let warenkorb = [];

        // 1. Produkte auf der Seite generieren
        function renderProducts() {
            const liste = document.getElementById('produktListe');
            liste.innerHTML = "";
            PRODUKTE.forEach(p => {
                liste.innerHTML += `
                    <div class="produkt-karte" data-name="${p.name.toLowerCase()}">
                        <img src="${p.img}" alt="${p.name}">
                        <div>
                            <h3>${p.name}</h3>
                            <div class="preis">${p.price.toFixed(2).replace('.', ',')} €</div>
                            <button class="btn" onclick="addToCart(${p.id})">In den Warenkorb</button>
                        </div>
                    </div>
                `;
            });
        }

        // 2. Echtzeit-Suchfunktion für Klamotten
        function filterProducts() {
Verwende Code mit Vorsicht.const query = document.getElementById('searchInput').value.toLowerCase();const karten = document.querySelectorAll('.produkt-karte');karten.forEach(karte => {const name = karte.getAttribute('data-name');if(name.includes(query)) {karte.style.display = "flex";} else {karte.style.display = "none";}});}// 3. Artikel zum Warenkorb hinzufügenfunction addToCart(id) {const produkt = PRODUKTE.find(p => p.id === id);warenkorb.push(produkt);updateCart();}// 4. Artikel aus dem Warenkorb löschenfunction removeFromCart(index) {warenkorb.splice(index, 1);updateCart();}// 5. Warenkorb-Oberfläche und Gesamtsumme aktualisierenfunction updateCart() {const liste = document.getElementById('warenkorbListe');const gesamtAnzeige = document.getElementById('gesamtPreis');const emptyMsg = document.getElementById('emptyCartMsg');liste.innerHTML = "";let summe = 0;if (warenkorb.length === 0) {liste.appendChild(emptyMsg);gesamtAnzeige.innerText = "0,00 €";return;}warenkorb.forEach((item, index) => {summe += item.price;liste.innerHTML += <li class="warenkorb-item"> <span>${item.name}</span> <span>${item.price.toFixed(2).replace('.', ',')} €  <button class="remove-btn" onclick="removeFromCart(${index})">✕</button> </span> </li>;});gesamtAnzeige.innerText = summe.toFixed(2).replace('.', ',') + " €";}// 6. Checkout-Simulationfunction checkout() {if(warenkorb.length === 0) {alert("Dein Warenkorb ist leer!");return;}alert("Vielen Dank für deine Bestellung! Dein Paket wird vorbereitet.");warenkorb = [];updateCart();}// Startet das Laden der Produkte beim SeitenaufrufrenderProducts();
Game Source: Style & Strategy Boutique v2

Creator: BlazeKoala99
Libraries: none
Complexity: complex (320 lines, 11.1 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: style-strategy-boutique-v2-blazekoala99" to link back to the original. Then publish at arcadelab.ai/publish.