Elecciones presidenciales (Rumania)

Abrir en el editor Publica tu código

Recomendado

16 April 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Proxima+Nova:wght@400;600&display=swap');
        
        body {
            font-family: 'Proxima Nova', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #fe2c55, #25f4ee, #000) no-repeat;
            background-size: cover;
            color: #fff;
        }
        .container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            gap: 20px;
        }
        .column {
            width: 48%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        .image-group {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        .image-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }
        .image-wrapper:hover {
            transform: scale(1.05);
            transition: transform 0.2s ease-in-out;
        }
        .image-small {
            width: 100px;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .image-large {
            width: 90%;
            height: auto;
            margin: 20px 0;
            border-radius: 15px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }
        .points {
            margin-top: 5px;
            font-size: 1em;
            font-weight: 600;
            color: #fff;
        }
        .name {
            font-size: 1.8em;
            font-weight: 600;
            margin-top: 10px;
        }
        .votes {
            font-size: 1.5em;
            font-weight: 400;
            margin: 10px 0 20px;
        }
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
        }
        .notification {
            position: relative;
            background: #222;
            color: #fff;
            padding: 15px 20px;
            border-radius: 25px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            font-size: 1em;
            font-weight: 600;
            animation: slide-in 0.5s ease-out;
            overflow: hidden;
        }
        .notification span {
            color: #25f4ee;
        }
        .notification .close-btn {
            position: absolute;
            top: 5px;
            right: 10px;
            background: transparent;
            border: none;
            color: #fff;
            font-size: 1.2em;
            cursor: pointer;
        }
        .notification .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 5px;
            background: #25f4ee;
            animation: progress-bar 2s linear forwards;
        }

@keyframes slide-in {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }
        @keyframes progress-bar {
            from {
                width: 100%;
            }
            to {
                width: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            <div class="image-group">
                <div class="image-wrapper" onclick="addVotes('left', 1, 'Elena Lasconi')">
                    <img class="image-small" src="https://storage.streamdps.com/iblock/f59/f5902abbd13178017285a308606fd0dd/cf6a40558018965a8171cf5a575dd9de.png" alt="Image 1">
                    <p class="points">1 Point</p>
                </div>
                <div class="image-wrapper" onclick="addVotes('left', 100, 'Elena Lasconi')">
                    <img class="image-small" src="https://tiktokcreatoruniversity.com/wp-content/themes/tiktok-learning/dist/images/highlight-slider/en/highlight-slider-donut.png" alt="Image 2">
                    <p class="points">100 Points</p>
                </div>
                <div class="image-wrapper" onclick="addVotes('left', 5000, 'Elena Lasconi')">
                    <img class="image-small" src="https://tiktokcreatoruniversity.com/wp-content/themes/tiktok-learning/dist/images/hero/en/money-gun.png" alt="Image 3">
                    <p class="points">5000 Points</p>
                </div>
            </div>
            <img class="image-large" src="https://bzb.ro/files/articles/2024/09/Elena_Lasconi_(1).jpg" alt="Elena Lasconi">
            <p class="name">Elena Lasconi</p>
            <p class="votes" id="votes-left">0 voturi</p>
        </div>
        <div class="column">
            <div class="image-group">
                <div class="image-wrapper" onclick="addVotes('right', 1, 'Calin Georgescu')">
                    <img class="image-small" src="https://storage.streamdps.com/iblock/50f/50f8e7cf26128a6e10d0b792019c1303/94aa2d574cfe6e3893c087cfb5a5efcd.png" alt="Image 4">
                    <p class="points">1 Point</p>
                </div>
                <div class="image-wrapper" onclick="addVotes('right', 100, 'Calin Georgescu')">
                    <img class="image-small" src="https://media.tenor.com/4E2JmrCfNtQAAAAj/10.gif" alt="Image 5">
                    <p class="points">100 Points</p>
                </div>
                <div class="image-wrapper" onclick="addVotes('right', 5000, 'Calin Georgescu')">
                    <img class="image-small" src="https://storage.streamdps.com/iblock/2e1/2e13ae32a1a89c24cf891ffa79d63ecc/3e53b8b47bfa1760ce4f3f4d71966516.png" alt="Image 6">
                    <p class="points">5000 Points</p>
                </div>
            </div>
            <img class="image-large" src="https://www.bursa.ro/_img/articole/mare/540262.jpg" alt="Calin Georgescu">
            <p class="name">Calin Georgescu</p>
            <p class="votes" id="votes-right">0 voturi</p>
        </div>
    </div>

showNotification(points, name);
        }

Elecciones presidenciales (Rumania)

Recomendado

Un código de anhtuanle2004yst

Botón de Cambio de Tema

Menú vertical flotante

HTML

CSS

JS

Recomendado

Un código de anhtuanle2004yst

Botón de Cambio de Tema

Menú vertical flotante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS