FM / dqg

/var/www/doncode.com/dqg

Name	Size	Mode	Actions
baby.jpg	1045012	0644	edit dl rm
index.html	8021	0644	edit dl rm

Edit: /var/www/doncode.com/dqg/index.html (8021B)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Вопрос от малыша</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: 'Arial', sans-serif;
            background-color: #2b2b2b; /* Темно-серый фон */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Скрываем скроллбары */
            transform: rotate(-1deg); /* Наклон */
        }

/* Контейнер Полароида */
        .polaroid {
            background-color: #ffffff;
            /* Внутренние отступы создают белую рамку */
            padding: 15px 15px 90px 15px; 
            
            box-shadow: 0 15px 40px rgba(0,0,0,0.6); /* Глубокая тень */
            
            position: relative;
            
            /* Ограничиваем размеры, чтобы при повороте углы не улетали за экран */
            max-width: 85vw;
            max-height: 85vh;
            
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            border-radius: 2px;
        }

/* Обертка для фото */
        .photo-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000; /* На случай если фото не загрузится */
        }

/* Само фото */
        .photo-wrapper img {
            display: block;
            /* Фото занимает все доступное место внутри wrapper, сохраняя пропорции */
            max-width: 100%;
            max-height: 65vh; /* Высота фото ограничена, чтобы влезла подпись */
            object-fit: contain; 
        }

/* Кнопки внизу (на белом поле) */
        .controls {
            position: absolute;
            bottom: 25px;
            width: 100%;
            text-align: center;
            transition: opacity 0.5s;
        }

.btn {
            font-size: 20px;
            font-weight: bold;
            padding: 12px 35px;
            margin: 0 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.1s, background-color 0.2s;
            font-family: 'Courier New', Courier, monospace; /* Шрифт под печатную машинку */
        }

.btn-yes {
            background-color: #333;
            color: white;
            border: 2px solid #333;
        }

.btn-yes:hover {
            background-color: #555;
            border-color: #555;
        }

.btn-no {
            background-color: transparent;
            color: #333;
            border: 2px solid #333;
        }

.btn-no:hover {
            background-color: #f0f0f0;
        }

.btn:active {
            transform: scale(0.95);
        }

/* Сообщение об ошибке */
        #error-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.95);
            color: #d8000c;
            padding: 15px 30px;
            border-radius: 5px;
            font-size: 18px;
            font-weight: bold;
            display: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            z-index: 20;
            text-align: center;
            border: 2px solid #d8000c;
            white-space: nowrap;
        }

/* Стиль печати CONFIRMED */
        #stamp {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-15deg);
            
            /* ЯРКИЙ ЗЕЛЕНЫЙ ЦВЕТ */
            color: #003b00; 
            border: 8px solid #003b00;
            
            padding: 10px 20px;
            font-size: 3rem; /* Крупный текст */
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 5px;
            opacity: 0.9;
            font-family: 'Courier New', Courier, monospace;
            z-index: 15;
            
            /* Текстура потертости */
            -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.6'/></svg>");
        }

/* Анимация удара */
        .stamp-animation {
            display: block !important;
            animation: stamp-land 0.35s cubic-bezier(0.6, 0.04, 0.98, 0.335) forwards;
        }

@keyframes stamp-land {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(2.5) rotate(-15deg);
            }
            70% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.9) rotate(-15deg);
            }
            100% {
                opacity: 0.95;
                transform: translate(-50%, -50%) scale(1) rotate(-15deg);
            }
        }

/* Адаптив для телефонов */
        @media (max-width: 600px) {
            .polaroid {
                max-width: 90vw;
                max-height: 80vh;
                transform: rotate(-2deg); /* Чуть меньше наклон на телефоне */
            }
            #stamp {
                font-size: 1.8rem;
                border-width: 5px;
            }
        }
    </style>
</head>
<body>

<div class="polaroid">
        <div class="photo-wrapper">
            
            <img src="baby.jpg" alt="Малыш">
            
            
            <div id="stamp">CONFIRMED</div>

<div id="error-message">НЕ ПРАВИЛЬНЫЙ ОТВЕТ 😡</div>
        </div>

function sayNo() {
            const errorMsg = document.getElementById('error-message');
            errorMsg.style.display = 'block';
            setTimeout(() => {
                errorMsg.style.display = 'none';
            }, 2000);
        }

function sayYes() {
            localStorage.setItem('godparentsConfirmed', 'true');
            
            const stamp = document.getElementById('stamp');
            const controls = document.getElementById('controls');
            
            controls.style.opacity = '0';
            setTimeout(() => {
                controls.style.display = 'none';
            }, 500);

stamp.classList.add('stamp-animation');
        }

function showConfirmedState() {
            const stamp = document.getElementById('stamp');
            const controls = document.getElementById('controls');
            
            controls.style.display = 'none';
            stamp.style.display = 'block';
        }
    </script>

</body>
</html>

Вопрос от малыша

CONFIRMED

НЕ ПРАВИЛЬНЫЙ ОТВЕТ 😡