A!leys Galerie

// Magical RPG Inventory with Confetti
// Ein interaktives Inventory-System mit magischen Effekten und Konfetti bei Erfolg

class MagicalInventory {
    constructor() {
        this.items = [
            { name: "Health Potion", type: "consumable", effect: "+20 HP" },
            { name: "Mana Elixir", type: "consumable", effect: "+30 MP" },
            { name: "Steel Sword", type: "weapon", effect: "+15 ATK" },
            { name: "Leather Armor", type: "armor", effect: "+10 DEF" },
            { name: "Dragon Scale", type: "material", effect: "Crafting" },
            { name: "Magic Wand", type: "weapon", effect: "+25 MAG" }
        ];
        this.equipped = { weapon: null, armor: null };
        this.stats = { hp: 100, mp: 50, atk: 10, def: 5, mag: 5 };
    }

    // Magische Effekte bei Item-Verwendung
    useItem(itemName) {
        const item = this.items.find(i => i.name === itemName);
        if (!item) return "Item not found!";

        switch (item.type) {
            case "consumable":
                if (item.name === "Health Potion") {
                    if (this.stats.hp < 100) {
                        this.stats.hp = Math.min(100, this.stats.hp + 20);
                        return `Used ${item.name}! HP: ${this.stats.hp}/100`;
                    } else return "HP is already full!";
                }
                if (item.name === "Mana Elixir") {
                    if (this.stats.mp < 50) {
                        this.stats.mp = Math.min(50, this.stats.mp + 30);
                        return `Used ${item.name}! MP: ${this.stats.mp}/50`;
                    } else return "MP is already full!";
                }
                break;
            case "weapon":
                this.equipped.weapon = item;
                return `Equipped ${item.name}! ATK: +${item.effect.slice(4)}`;
            case "armor":
                this.equipped.armor = item;
                return `Equipped ${item.name}! DEF: +${item.effect.slice(4)}`;
            default:
                return `Cannot use ${item.name} directly!`;
        }
    }

    // Magischer Angriff mit Konfetti
    attack(enemyStats) {
        let damage = this.stats.atk + (this.equipped.weapon ? parseInt(this.equipped.weapon.effect.slice(4)) : 0);
        damage = Math.max(1, Math.floor(damage * (1 - enemyStats.def / 200))); // DEF reduces damage

        enemyStats.hp -= damage;
        this.showConfetti("Attack successful!");

        if (enemyStats.hp <= 0) {
            return "Enemy defeated! Victory!";
        } else {
            return `Dealt ${damage} damage! Enemy HP: ${enemyStats.hp}`;
        }
    }

    // Magische Kommunalität
    combineItems(item1, item2) {
        const i1 = this.items.find(i => i.name === item1);
        const i2 = this.items.find(i => i.name === item2);

        if (!i1 || !i2) return "Items not found!";
        if (i1.type !== "material" || i2.type !== "material") return "Only materials can be combined!";

        // Magische Kombination
        const newItem = {
            name: `Mystic ${i1.name.replace("Dragon ", "")}${i2.name.replace("Dragon ", "")}`,
            type: "weapon",
            effect: "+30 MAG +15 ATK"
        };

        this.items.push(newItem);
        this.items = this.items.filter(i => i.name !== item1 && i.name !== item2);
        this.showConfetti("Successfully combined items!");
        return `Created ${newItem.name}!`;
    }

    // Magische Konfetti-Anzeige
    showConfetti(message) {
        console.log("\n" + "=" repeat(50));
        console.log(" * ".repeat(10));
        console.log("  " + message.split(" ").join(" * ") + "  ");
        console.log(" * ".repeat(10));
        console.log("=" repeat(50) + "\n");
    }

    // Magische Status-Anzeige
    showStatus() {
        console.log("\n" + "=".repeat(50));
        console.log("MAGICAL INVENTORY STATUS");
        console.log("=".repeat(50));
        console.log(`HP: ${this.stats.hp}/100`);
        console.log(`MP: ${this.stats.mp}/50`);
        console.log(`ATK: ${this.stats.atk + (this.equipped.weapon ? parseInt(this.equipped.weapon.effect.slice(4)) : 0)}`);
        console.log(`DEF: ${this.stats.def + (this.equipped.armor ? parseInt(this.equipped.armor.effect.slice(4)) : 0)}`);
        console.log(`MAG: ${this.stats.mag + (this.equipped.weapon ? parseInt(this.equipped.weapon.effect.slice(8)) : 0)}`);
        console.log("\nItems:");
        this.items.forEach(item => console.log(`- ${item.name} (${item.type})`));
        console.log("\nEquipped:");
        if (this.equipped.weapon) console.log(`- Weapon: ${this.equipped.weapon.name}`);
        if (this.equipped.armor) console.log(`- Armor: ${this.equipped.armor.name}`);
        console.log("=".repeat(50) + "\n");
    }
}

// Magische Main-Funktion
function main() {
    const inventory = new MagicalInventory();

    console.log("WELCOME TO THE MAGICAL INVENTORY SYSTEM!");
    console.log("Type 'help' for commands.\n");

    // Magische Menü-Schleife
    while (true) {
        console.log("> ");
        const input = require('readline').createInterface({
            input: process.stdin,
            output: process.stdout
        });
        const line = input[Symbol('asyncIterator')]().next().value;

        if (line === "help") {
            console.log("\nCommands:");
            console.log("- use [item] - Use an item (e.g., 'use Health Potion')");
            console.log("- attack - Attack an enemy");
            console.log("- combine [item1] [item2] - Combine two materials (e.g., 'combine Dragon Scale Dragon Scale')");
            console.log("- status - Show your status and inventory");
            console.log("- exit - Exit the program\n");
        }
        else if (line === "exit") break;
        else if (line.startsWith("use ")) {
            const item = line.slice(4);
            console.log(inventory.useItem(item));
        }
        else if (line === "attack") {
            const enemy = { hp: 50, def: 10 };
            console.log(inventory.attack(enemy));
        }
        else if (line.startsWith("combine ")) {
            const parts = line.slice(8).split(" ");
            if (parts.length === 2) {
                console.log(inventory.combineItems(parts[0], parts[1]));
            } else {
                console.log("Usage: combine [item1] [item2]");
            }
        }
        else if (line === "status") {
            inventory.showStatus();
        }
        else {
            console.log("Unknown command. Type 'help' for commands.\n");
        }
        input.close();
    }
    console.log("\nMAGICAL SESSION ENDED. THANK YOU FOR PLAYING!\n");
}

// Magische Funktion zum Starten
main();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FontSpark — Creative Font Pairing</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <style>
        :root {
            --accent: #FF8C00;
            --bg-dark: #1a1a1a;
            --bg-light: #f8f8f8;
            --text-dark: #333;
            --text-light: #fff;
            --card-bg: rgba(255, 255, 255, 0.9);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            font-family: 'Bebas Neue', cursive;
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--accent);
        }

        .subtitle {
            text-align: center;
            margin-bottom: 3rem;
            color: #666;
        }

        .font-picker {
            display: flex;
            justify-content: space-between;
            margin-bottom: 3rem;
            gap: 20px;
        }

        .picker-group {
            flex: 1;
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .picker-group h3 {
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .font-family {
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }

        .font-family.selected {
            background-color: var(--accent);
            color: var(--text-light);
            border: 2px solid var(--text-light);
            transform: scale(1.02);
        }

        .font-family::before {
            content: 'Aa';
            font-size: 0.8rem;
            margin-right: 10px;
            color: #999;
        }

        .font-family.selected::before {
            color: var(--text-light);
        }

        .toggle-switch {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 40px;
            height: 20px;
            background-color: #ccc;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .toggle-switch.active {
            background-color: var(--accent);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }

        .toggle-switch.active::after {
            transform: translateX(20px);
        }

        .contrast-slider {
            margin: 20px 0;
        }

        .contrast-slider label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #d1d5db;
            outline: none;
            opacity: 0.9;
            transition: opacity .2s;
        }

        .slider:hover {
            opacity: 1;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: var(--accent);
            cursor: pointer;
            border-radius: 50%;
            border: 4px solid white;
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            transition: background-color 0.2s;
        }

        .slider::-webkit-slider-thumb:hover {
            background: #f97316;
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: var(--accent);
            cursor: pointer;
            border-radius: 50%;
            border: 4px solid white;
            transition: background-color 0.2s;
        }

        .slider::-moz-range-thumb:hover {
            background: #f97316;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 2rem 0;
        }

        button {
            background-color: var(--accent);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        button:hover {
            background-color: #e07a00;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .export-button {
            background-color: #2563eb;
        }

        .export-button:hover {
            background-color: #1d4ed8;
        }

        .mood-selector {
            margin-bottom: 1rem;
        }

        .mood-options {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .mood-option {
            background-color: #e5e7eb;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .mood-option:hover, .mood-option.selected {
            background-color: var(--accent);
            color: white;
        }

        .contrast-result {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }

        .contrast-text {
            font-size: 3rem;
            padding: 20px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .contrast-text.left {
            background-color: var(--card-bg);
            color: var(--text-dark);
        }

        .contrast-text.right {
            background-color: var(--accent);
            color: var(--text-light);
        }

        .export-section {
            margin-top: 3rem;
            padding: 20px;
            background-color: var(--card-bg);
            border-radius: 12px;
            display: none;
        }

        .export-section h3 {
            margin-bottom: 1rem;
        }

        .export-code {
            background-color: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 15px;
            font-family: 'Monaco', 'Menlo', monospace;
            white-space: pre-wrap;
            overflow-x: auto;
        }

        .export-button {
            background-color: #2563eb;
        }

        .export-button:hover {
            background-color: #1d4ed8;
        }

        @media (max-width: 768px) {
            .font-picker {
                flex-direction: column;
            }
            .contrast-text {
                width: 80%;
                font-size: 2rem;
            }
        }

        /* Load Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Bebas+Neue&display=swap');
    </style>
</head>
<body>
    <div class="container">
        <h1>FontSpark</h1>
        <p class="subtitle">Find the perfect font pair with AI-inspired contrast</p>

        <div class="mood-selector">
            <h3>Mood</h3>
            <div class="mood-options">
                <div class="mood-option selected" data-mood="playful">Playful</div>
                <div class="mood-option" data-mood="serious">Serious</div>
                <div class="mood-option" data-mood="elegant">Elegant</div>
                <div class="mood-option" data-mood="minimal">Minimal</div>
                <div class="mood-option" data-mood="vintage">Vintage</div>
            </div>
        </div>

        <div class="font-picker">
            <div class="picker-group">
                <div class="toggle-switch active" data-group="fontA"></div>
                <h3>Primary Font</h3>
                <div class="font-family" data-font="Comic Sans MS">Comic Sans MS</div>
                <div class="font-family" data-font="Times New Roman">Times New Roman</div>
                <div class="font-family" data-font="Helvetica">Helvetica</div>
                <div class="font-family" data-font="Courier New">Courier New</div>
                <div class="font-family" data-font="Georgia">Georgia</div>
                <div class="font-family" data-font="Arial">Arial</div>
                <div class="font-family" data-font="Verdana">Verdana</div>
            </div>

            <div class="picker-group">
                <div class="toggle-switch" data-group="fontB"></div>
                <h3>Accent Font</h3>
                <div class="font-family" data-font="Impact">Impact</div>
                <div class="font-family" data-font="Papyrus">Papyrus</div>
                <div class="font-family" data-font="Lobster">Lobster</div>
                <div class="font-family" data-font="Bebas Neue">Bebas Neue</div>
                <div class="font-family" data-font="Rockwell">Rockwell</div>
                <div class="font-family" data-font="Bruschettin">Bruschettin</div>
                <div class="font-family" data-font="Raleway">Raleway</div>
            </div>
        </div>

        <div class="contrast-slider">
            <label for="contrastSlider">Contrast Level</label>
            <input type="range" min="10" max="90" value="50" class="slider" id="contrastSlider">
        </div>

        <div class="controls">
            <button id="generateBtn">Generate Pair</button>
            <button id="exportBtn" class="export-button" disabled>Export CSS</button>
        </div>

        <div class="contrast-result">
            <div class="contrast-text left">
                <span class="sample-text">Sample text goes here</span>
            </div>
            <div class="contrast-text right">
                <span class="sample-text">Sample text goes here</span>
            </div>
        </div>

        <div class="export-section" id="exportSection">
            <h3>Copy &amp; Use</h3>
            <p>Your font pairing CSS:</p>
            <div class="export-code" id="exportCode">
                /* Font Pairing CSS */
                .primary-font {
                  font-family: 'Comic Sans MS', cursive, sans-serif;
                  font-weight: 400;
                }
                .accent-font {
                  font-family: 'Impact', sans-serif;
                  font-weight: 700;
                }
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM Elements
            const fontAGroup = document.querySelector('[data-group="fontA"]');
            const fontBGroup = document.querySelector('[data-group="fontB"]');
            const fontAFamilies = document.querySelectorAll('[data-group="fontA"] .font-family');
            const fontBFamilies = document.querySelectorAll('[data-group="fontB"] .font-family');
            const moodOptions = document.querySelectorAll('.mood-option');
            const contrastSlider = document.getElementById('contrastSlider');
            const generateBtn = document.getElementById('generateBtn');
            const exportBtn = document.getElementById('exportBtn');
            const exportSection = document.getElementById('exportSection');
            const exportCode = document.getElementById('exportCode');
            const leftText = document.querySelector('.contrast-text.left .sample-text');
            const rightText = document.querySelector('.contrast-text.right .sample-text');

            // State
            let currentFontA = 'Comic Sans MS';
            let currentFontB = 'Impact';
            let currentMood = 'playful';
            let contrastValue = 50;

            // Initialize
            updateFontDisplay();
            updateContrastResult();
            setupEventListeners();

            function setupEventListeners() {
                // Toggle between font A and B
                fontAGroup.addEventListener('click', (e) => {
                    if (e.target.closest('.font-family')) return;
                    fontAGroup.classList.toggle('active');
                    fontBGroup.classList.toggle('active');
                });

                fontBGroup.addEventListener('click', (e) => {
                    if (e.target.closest('.font-family')) return;
                    fontAGroup.classList.toggle('active');
                    fontBGroup.classList.toggle('active');
                });

                // Font selection
                fontAFamilies.forEach(font => {
                    font.addEventListener('click', () => {
                        currentFontA = font.dataset.font;
                        updateFontDisplay();
                        generateBtn.disabled = false;
                    });
                });

                fontBFamilies.forEach(font => {
                    font.addEventListener('click', () => {
                        currentFontB = font.dataset.font;
                        updateFontDisplay();
                        generateBtn.disabled = false;
                    });
                });

                // Mood selection
                moodOptions.forEach(option => {
                    option.addEventListener('click', () => {
                        moodOptions.forEach(opt => opt.classList.remove('selected'));
                        option.classList.add('selected');
                        currentMood = option.dataset.mood;
                        generateBtn.disabled = false;
                    });
                });

                // Contrast slider
                contrastSlider.addEventListener('input', () => {
                    contrastValue = parseInt(contrastSlider.value);
                    updateContrastResult();
                });

                // Generate button
                generateBtn.addEventListener('click', () => {
                    generateFontPair();
                    exportBtn.disabled = false;
                    exportSection.style.display = 'block';
                });

                // Export button
                exportBtn.addEventListener('click', () => {
                    copyToClipboard(exportCode.textContent);
                    alert('CSS code copied to clipboard!');
                });
            }

            function updateFontDisplay() {
                // Clear selections
                fontAFamilies.forEach(f => f.classList.remove('selected'));
                fontBFamilies.forEach(f => f.classList.remove('selected'));

                // Select current fonts
                const fontAFamily = Array.from(fontAFamilies).find(f => f.dataset.font === currentFontA);
                const fontBFamily = Array.from(fontBFamilies).find(f => f.dataset.font === currentFontB);

                if (fontAFamily) fontAFamily.classList.add('selected');
                if (fontBFamily) fontBFamily.classList.add('selected');

                updateContrastResult();
            }

            function updateContrastResult() {
                const contrastPercent = contrastValue;

                // Apply contrast to text (simplified for demo)
                const leftFontWeight = Math.min(400, 400 + (100 - contrastPercent) * 2);
                const rightFontWeight = Math.min(900, 400 + contrastPercent * 2);

                leftText.style.fontWeight = leftFontWeight;
                rightText.style.fontWeight = rightFontWeight;

                // Apply actual font families
                leftText.style.fontFamily = `${currentFontA}, sans-serif`;
                rightText.style.fontFamily = `${currentFontB}, sans-serif`;
            }

            function generateFontPair() {
                // In a real implementation, this would use actual font metrics
            }
        });
    </script>
</body>
</html>
```