Webleb - HTML UI Elements - Un codice di diomankeita001

<!DOCTYPE html>
<html>
<head>
    <title>Cart Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Press Start 2P', cursive; /* A retro-style font if available */
            background-color: #f0f0f0;
        }

/* Fallback for 'Press Start 2P' or if you want to include it:
           @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        */

#game-container {
            width: 100%;
            height: 100vh; /* Full viewport height */
            position: relative;
            background-color: #87CEEB; /* Sky blue background */
            overflow: hidden;
            border-bottom: 20px solid #228B22; /* Ground */
            box-sizing: border-box; /* Include padding/border in height */
            display: flex; /* For centering game over text */
            justify-content: center;
            align-items: center;
        }

#score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 24px;
            color: #333;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 5px 10px;
            border-radius: 5px;
            min-width: 120px; /* Ensure space for score */
            text-align: center;
        }

#cart {
            width: 100px;
            height: 60px;
            background-color: #A0522D; /* Brown cart */
            position: absolute;
            bottom: 20px; /* Above the ground border */
            left: calc(50% - 50px); /* Centered initially */
            border-radius: 10px 10px 0 0;
            z-index: 5;
            box-shadow: 0 5px 10px rgba(0,0,0,0.3);
            transition: left 0.05s linear; /* Smooth cart movement */
        }

#cart::before, #cart::after {
            content: '';
            position: absolute;
            bottom: -20px; /* Wheels below the cart */
            width: 30px;
            height: 30px;
            background-color: #333; /* Dark wheels */
            border-radius: 50%;
            z-index: 4;
            border: 2px solid #111;
        }

#cart::before {
            left: 5px;
        }

#cart::after {
            right: 5px;
        }

.item {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #FFD700; /* Gold item */
            border-radius: 50%;
            border: 2px solid #DAA520;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 3;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            color: white;
            font-weight: bold;
            /* For visual distinction, could use different colors/shapes */
        }

#game-over {
            position: absolute;
            font-size: 48px;
            color: #FF0000;
            text-shadow: 3px 3px 0 #000;
            z-index: 20;
            display: none; /* Hidden by default */
            text-align: center;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            border: 5px solid #FF0000;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
        }

#game-over button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 24px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="score">Score: 0</div>
        <div id="cart"></div>
        <div id="game-over">
            GAME OVER!
            <br>
            <span id="final-score">Score: 0</span>
            <br>
            <button onclick="restartGame()">Play Again</button>
        </div>
    </div>

let cartX;
        const cartSpeed = 10;
        let score = 0;
        const items = [];
        let itemFallSpeed = 3; // pixels per frame, increases with score
        let itemSpawnInterval = 1500; // ms, decreases with score
        let lastItemSpawnTime = 0;
        let gameActive = true;
        let animationFrameId;

// Game configuration
        const ITEM_WIDTH = 40;
        const ITEM_HEIGHT = 40;
        const CART_WIDTH = 100;
        const CART_HEIGHT = 60;
        const GROUND_HEIGHT = 20; // Matches border-bottom height

function initializeGame() {
            gameActive = true;
            score = 0;
            itemFallSpeed = 3;
            itemSpawnInterval = 1500;
            lastItemSpawnTime = 0;
            scoreDisplay.textContent = `Score: ${score}`;
            gameOverScreen.style.display = 'none';

// Clear existing items
            items.forEach(item => item.element.remove());
            items.length = 0; // Clear the array

// Set initial cart position
            cartX = (gameContainer.offsetWidth / 2) - (CART_WIDTH / 2);
            cart.style.left = cartX + 'px';

if (animationFrameId) {
                cancelAnimationFrame(animationFrameId);
            }
            animationFrameId = requestAnimationFrame(gameLoop);
        }

function updateCartPosition() {
            cart.style.left = cartX + 'px';
        }

function createItem() {
            const item = document.createElement('div');
            item.classList.add('item');
            item.style.left = Math.random() * (gameContainer.offsetWidth - ITEM_WIDTH) + 'px';
            item.style.top = '0px';
            gameContainer.appendChild(item);
            items.push({ element: item, y: 0, x: parseFloat(item.style.left) });
        }

function gameLoop(currentTime) {
            if (!gameActive) return;

// Spawn new items
            if (currentTime - lastItemSpawnTime > itemSpawnInterval) {
                createItem();
                lastItemSpawnTime = currentTime;
            }

// Update item positions and check for collisions
            for (let i = items.length - 1; i >= 0; i--) {
                const item = items[i];
                item.y += itemFallSpeed;
                item.element.style.top = item.y + 'px';

// Check for collision with cart
                if (
                    item.y + ITEM_HEIGHT >= gameContainer.offsetHeight - CART_HEIGHT - GROUND_HEIGHT && // Item's bottom reaches cart's top
                    item.y + ITEM_HEIGHT <= gameContainer.offsetHeight - GROUND_HEIGHT && // Item's bottom is above or at ground level
                    item.x < cartX + CART_WIDTH && // Item's left is to the left of cart's right
                    item.x + ITEM_WIDTH > cartX // Item's right is to the right of cart's left
                ) {
                    // Collision!
                    score++;
                    scoreDisplay.textContent = `Score: ${score}`;
                    item.element.remove();
                    items.splice(i, 1);

// Increase difficulty
                    if (score % 5 === 0) { // Every 5 points
                        itemFallSpeed += 0.5;
                        itemSpawnInterval = Math.max(500, itemSpawnInterval - 100); // Max 500ms interval
                    }
                } else if (item.y > gameContainer.offsetHeight - GROUND_HEIGHT) { // Item fell past the cart onto the ground
                    item.element.remove();
                    items.splice(i, 1);
                    endGame(); // Game over if an item is missed
                    return; // Stop current loop and prevent further updates
                }
            }

animationFrameId = requestAnimationFrame(gameLoop);
        }

function endGame() {
            gameActive = false;
            cancelAnimationFrame(animationFrameId);
            finalScoreDisplay.textContent = `Score: ${score}`;
            gameOverScreen.style.display = 'block';
        }

function restartGame() {
            initializeGame();
        }

// Keyboard controls
        document.addEventListener('keydown', (e) => {
            if (!gameActive) return;

if (e.key === 'ArrowLeft') {
                cartX -= cartSpeed;
            } else if (e.key === 'ArrowRight') {
                cartX += cartSpeed;
            }

// Keep cart within bounds
            if (cartX < 0) {
                cartX = 0;
            }
            if (cartX > gameContainer.offsetWidth - CART_WIDTH) {
                cartX = gameContainer.offsetWidth - CART_WIDTH;
            }
            updateCartPosition();
        });

// Adjust cart position on window resize
        window.addEventListener('resize', () => {
            if (gameActive) { // Only recenter if game is active
                cartX = (gameContainer.offsetWidth / 2) - (CART_WIDTH / 2);
                updateCartPosition();
            }
        });

// Initialize the game when the page loads
        initializeGame();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Beautiful Wishlist</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6a0572; /* Deep Purple */
            --secondary-color: #9d0208; /* Dark Red */
            --accent-color: #f77f00; /* Orange */
            --text-color: #333;
            --light-text-color: #555;
            --background-light: #f4f7f6;
            --card-background: #ffffff;
            --shadow-light: rgba(0, 0, 0, 0.08);
            --shadow-hover: rgba(0, 0, 0, 0.15);
        }

body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-light);
            color: var(--text-color);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

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

h1 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 40px;
            font-weight: 600;
            font-size: 2.8em;
            position: relative;
            padding-bottom: 15px;
        }

h1::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--accent-color);
            border-radius: 2px;
        }

.wishlist-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

.wishlist-item {
            background-color: var(--card-background);
            border-radius: 12px;
            box-shadow: 0 8px 16px var(--shadow-light);
            padding: 25px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

.wishlist-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px var(--shadow-hover);
        }

.wishlist-item img {
            max-width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

.wishlist-item h3 {
            color: var(--secondary-color);
            font-size: 1.6em;
            margin-top: 0;
            margin-bottom: 10px;
            font-weight: 600;
        }

.wishlist-item p {
            color: var(--light-text-color);
            font-size: 0.95em;
            margin-bottom: 15px;
            flex-grow: 1; /* Allows description to take available space */
        }

.wishlist-item .price {
            display: block;
            font-size: 1.4em;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

.wishlist-item .buy-button {
            display: inline-block;
            background-color: var(--accent-color);
            color: #ffffff;
            padding: 12px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9em;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 8px rgba(247, 127, 0, 0.3);
        }

.wishlist-item .buy-button:hover {
            background-color: #e07000; /* Slightly darker orange */
            transform: translateY(-2px);
        }

@media (max-width: 768px) {
            h1 {
                font-size: 2.2em;
            }
            .container {
                margin: 20px auto;
                padding: 0 15px;
            }
            .wishlist-item {
                padding: 20px;
            }
        }

@media (max-width: 480px) {
            h1 {
                font-size: 1.8em;
            }
            .wishlist-grid {
                grid-template-columns: 1fr;
            }
            .wishlist-item img {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>My Beautiful Wishlist</h1>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Fancy+Gadget" alt="Fancy Gadget">
                <h3>Fancy Smart Gadget</h3>
                <p>A sleek, innovative gadget that promises to simplify daily tasks and bring joy with its advanced features.</p>
                <span class="price">$249.99</span>
                <a href="#" class="buy-button">Learn More</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Cozy+Blanket" alt="Cozy Blanket">
                <h3>Ultra-Soft Cozy Blanket</h3>
                <p>Perfect for chilly evenings, this luxurious blanket offers unparalleled comfort and warmth, making any space inviting.</p>
                <span class="price">$79.50</span>
                <a href="#" class="buy-button">Find Details</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Adventure+Book" alt="Adventure Book">
                <h3>Epic Fantasy Novel Series</h3>
                <p>Dive into a captivating world of magic, heroes, and villains with this highly acclaimed fantasy book series. A true escape!</p>
                <span class="price">$59.99</span>
                <a href="#" class="buy-button">Discover More</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Coffee+Machine" alt="Coffee Machine">
                <h3>Premium Espresso Machine</h3>
                <p>Craft barista-quality coffee at home with this elegant and efficient espresso machine. Your mornings will thank you.</p>
                <span class="price">$399.00</span>
                <a href="#" class="buy-button">View Product</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Plant+Set" alt="Indoor Plant Set">
                <h3>Chic Indoor Plant Set</h3>
                <p>Add a touch of greenery to your living space with these low-maintenance, air-purifying indoor plants. Includes stylish pots!</p>
                <span class="price">$85.00</span>
                <a href="#" class="buy-button">See Options</a>
            </div>

<div class="wishlist-item">
                <img src="https://via.placeholder.com/300x180?text=Wireless+Headphones" alt="Wireless Headphones">
                <h3>Noise-Cancelling Headphones</h3>
                <p>Immerse yourself in your music or podcasts with these premium wireless headphones, offering crystal-clear audio and comfort.</p>
                <span class="price">$199.99</span>
                <a href="#" class="buy-button">Browse Now</a>
            </div>

</div>
    </div>
</body>
</html>

Validating your code, please wait...

HTML

CSS