Alansdead/Doom Calendar

## Doom Calendar
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horror Date Picker</title>
    <style>
        :root {
            --blood-red: #8a0303;
            --dark-red: #5c0101;
            --bone: #e3dac9;
            --dark-gray: #2a2a2a;
            --darker-gray: #1a1a1a;
            --eerie-shadow: 0 0 15px rgba(138, 3, 3, 0.7);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        body {
            font-family: 'Courier New', monospace;
            background-color: var(--darker-gray);
            color: var(--bone);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
            padding: 20px;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23300101' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        }

        .container {
            max-width: 800px;
            width: 100%;
            background-color: var(--dark-gray);
            padding: 30px;
            border-radius: 8px;
            box-shadow: var(--eerie-shadow);
            position: relative;
            overflow: hidden;
        }

        .picker-container {
            position: relative;
            z-index: 10;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-align: center;
            color: var(--blood-red);
            text-shadow: 0 0 10px rgba(138, 3, 3, 0.3);
            font-family: 'Georgia', serif;
            letter-spacing: 2px;
        }

        .description {
            font-size: 1rem;
            margin-bottom: 30px;
            text-align: center;
            line-height: 1.6;
        }

        .blood {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .blood-drop {
            position: absolute;
            background-color: var(--blood-red);
            border-radius: 50% 50% 5% 50%;
            transform: rotate(45deg);
            box-shadow: 0 0 10px rgba(138, 3, 3, 0.5);
            z-index: 1;
            animation: drip 10s infinite;
        }

        @keyframes drip {
            0% {
                transform: translateY(-10px) rotate(45deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(calc(100vh + 20px)) rotate(45deg);
                opacity: 0;
            }
        }

        .input-group {
            margin-bottom: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        label {
            font-size: 1.2rem;
            margin-bottom: 10px;
            display: block;
            color: var(--bone);
        }

        .date-input {
            width: 100%;
            max-width: 300px;
            padding: 12px 15px;
            font-size: 16px;
            background-color: var(--darker-gray);
            color: var(--bone);
            border: 2px solid var(--blood-red);
            border-radius: 4px;
            outline: none;
            font-family: 'Courier New', monospace;
            position: relative;
            z-index: 2;
        }

        .date-input::-webkit-calendar-picker-indicator {
            filter: invert(1) sepia(100%) saturate(10000%) hue-rotate(300deg);
            cursor: pointer;
        }

        .date-input:focus {
            box-shadow: 0 0 10px var(--blood-red);
        }

        .chosen-date {
            margin-top: 30px;
            padding: 20px;
            background-color: rgba(26, 26, 26, 0.7);
            border: 1px solid var(--blood-red);
            border-radius: 4px;
            text-align: center;
            font-size: 1.2rem;
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        .chosen-date.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .blood-writing {
            color: var(--blood-red);
            font-family: 'Georgia', serif;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(138, 3, 3, 0.5);
        }

        .spider {
            position: absolute;
            width: 30px;
            height: 30px;
            z-index: 5;
            transform-origin: center top;
            animation: swing 3s ease-in-out infinite alternate;
            display: none;
        }

        .spider-body {
            position: absolute;
            width: 20px;
            height: 30px;
            background-color: black;
            border-radius: 50%;
            top: 15px;
            left: 5px;
        }

        .spider-leg {
            position: absolute;
            width: 40px;
            height: 2px;
            background-color: black;
            top: 25px;
        }

        .spider-leg:nth-child(1) {
            transform: rotate(30deg);
            left: -15px;
        }

        .spider-leg:nth-child(2) {
            transform: rotate(60deg);
            left: -10px;
        }

        .spider-leg:nth-child(3) {
            transform: rotate(-30deg);
            left: 15px;
        }

        .spider-leg:nth-child(4) {
            transform: rotate(-60deg);
            left: 10px;
        }

        .spider-leg:nth-child(5) {
            transform: rotate(120deg);
            left: -10px;
            top: 35px;
        }

        .spider-leg:nth-child(6) {
            transform: rotate(150deg);
            left: -15px;
            top: 35px;
        }

        .spider-leg:nth-child(7) {
            transform: rotate(-120deg);
            left: 10px;
            top: 35px;
        }

        .spider-leg:nth-child(8) {
            transform: rotate(-150deg);
            left: 15px;
            top: 35px;
        }

        .spider-thread {
            position: absolute;
            width: 1px;
            height: 100px;
            background-color: rgba(230, 230, 230, 0.7);
            left: 14px;
            top: -100px;
        }

        @keyframes swing {
            0% {
                transform: rotate(5deg);
            }
            100% {
                transform: rotate(-5deg);
            }
        }

        .creepy-sound {
            display: none;
        }

        .warning {
            color: var(--blood-red);
            text-align: center;
            margin-top: 30px;
            font-size: 0.9rem;
            font-style: italic;
        }

        .heartbeat {
            animation: heartBeat 1.5s infinite;
        }

        @keyframes heartBeat {
            0% {
                transform: scale(1);
            }
            14% {
                transform: scale(1.1);
            }
            28% {
                transform: scale(1);
            }
            42% {
                transform: scale(1.1);
            }
            70% {
                transform: scale(1);
            }
        }

        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="blood"></div>
        <div class="spider">
            <div class="spider-thread"></div>
            <div class="spider-body"></div>
            <div class="spider-leg"></div>
            <div class="spider-leg"></div>
            <div class="spider-leg"></div>
            <div class="spider-leg"></div>
            <div class="spider-leg"></div>
            <div class="spider-leg"></div>
            <div class="spider-leg"></div>
            <div class="spider-leg"></div>
        </div>

        <div class="picker-container">
            <h1 class="title">DOOM CALENDAR</h1>
            <p class="description">Select a date to reveal your horrifying fate. Each selection brings you closer to your inevitable doom.</p>

            <div class="input-group">
                <label for="doom-date">Select Your Fateful Day:</label>
                <input type="date" id="doom-date" class="date-input" min="2025-02-26">
            </div>

            <div class="chosen-date" id="fate-display">
                <p>Your fate awaits...</p>
            </div>

            <p class="warning">Warning: Some dates may trigger unsettling visual and audio effects.</p>
        </div>
    </div>

    <audio id="creepy-sound" class="creepy-sound">
        <source src="https://freesound.org/data/previews/367/367803_6658234-lq.mp3" type="audio/mpeg">
    </audio>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dateInput = document.getElementById('doom-date');
            const fateDisplay = document.getElementById('fate-display');
            const bloodContainer = document.querySelector('.blood');
            const spider = document.querySelector('.spider');
            const creepySound = document.getElementById('creepy-sound');
            const container = document.querySelector('.container');

            // Create blood drops
            function createBloodDrops() {
                bloodContainer.innerHTML = '';
                const dropCount = Math.floor(Math.random() * 10) + 10;

                for (let i = 0; i < dropCount; i++) {
                    const drop = document.createElement('div');
                    drop.classList.add('blood-drop');

                    // Random size between 5px and 20px
                    const size = Math.floor(Math.random() * 15) + 5;
                    drop.style.width = `${size}px`;
                    drop.style.height = `${size}px`;

                    // Random position
                    drop.style.left = `${Math.random() * 100}%`;

                    // Random delay
                    drop.style.animationDelay = `${Math.random() * 10}s`;

                    // Random duration
                    drop.style.animationDuration = `${Math.random() * 5 + 5}s`;

                    bloodContainer.appendChild(drop);
                }
            }

            // Random creepy fates
            const fates = [
                "The shadows have marked <span class='blood-writing'>MARCH 13TH</span> as the day they'll finally claim you. Sleep well until then.",
                "On <span class='blood-writing heartbeat'>SELECTED DATE</span>, the door you've always feared will finally open. What emerges won't be human.",
                "Your reflection will begin to move independently on <span class='blood-writing'>SELECTED DATE</span>. Don't try to stop it.",
                "The voices that have been whispering your name will become audible to everyone on <span class='blood-writing heartbeat'>SELECTED DATE</span>.",
                "The thing under your bed has chosen <span class='blood-writing'>SELECTED DATE</span> to finally introduce itself.",
                "Your shadow will detach on <span class='blood-writing heartbeat'>SELECTED DATE</span>. It's been waiting for years.",
                "The dead have your name on their lips. They'll speak it aloud on <span class='blood-writing'>SELECTED DATE</span>.",
                "Every mirror will reveal your true form on <span class='blood-writing heartbeat'>SELECTED DATE</span>. Avoid reflections at all costs.",
                "The countdown to your doom began long ago. It ends on <span class='blood-writing'>SELECTED DATE</span>.",
                "You'll find yourself in a familiar place on <span class='blood-writing heartbeat'>SELECTED DATE</span>, but everything will be slightly wrong.",
                "The numbers 3:47 will appear everywhere on <span class='blood-writing'>SELECTED DATE</span>. Don't be alone at that time.",
                "Your dreams on <span class='blood-writing heartbeat'>SELECTED DATE</span> will come true the following day. Pray for pleasant dreams.",
                "What walks in your skin on <span class='blood-writing'>SELECTED DATE</span> won't be you anymore."
            ];

            // Special dates effects
            const specialDates = {
                '2025-10-31': { // Halloween
                    message: "You fool! Selecting Halloween seals your fate. The veil is thinnest, and <span class='blood-writing heartbeat'>THEY</span> will find you with ease.",
                    effect: 'extreme'
                },
                '2025-12-25': { // Christmas
                    message: "Even on this festive day, horror finds you. <span class='blood-writing'>Saint Nick</span> has a special gift prepared - your soul wrapped in terror.",
                    effect: 'moderate'
                },
                '2025-02-14': { // Valentine's
                    message: "Love is in the air, but so is the scent of <span class='blood-writing heartbeat'>YOUR BLOOD</span>. Your heart won't remain yours for long.",
                    effect: 'moderate'
                },
                '2025-04-01': { // April Fools
                    message: "The joke's on you. What begins as laughter on <span class='blood-writing'>APRIL 1ST</span> ends with screams that no one will believe.",
                    effect: 'moderate'
                },
                '2025-06-21': { // Summer Solstice
                    message: "The longest day provides the most time for <span class='blood-writing heartbeat'>THEM</span> to hunt you. Darkness will be your only refuge.",
                    effect: 'extreme'
                }
            };

            function getFormattedDate(dateString) {
                const date = new Date(dateString);
                const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                return date.toLocaleDateString('en-US', options).toUpperCase();
            }

            function displayFate(date) {
                const formattedDate = getFormattedDate(date);

                // Check if it's a special date
                if (specialDates[date]) {
                    const specialDate = specialDates[date];
                    fateDisplay.innerHTML = `<p>${specialDate.message}</p>`;

                    if (specialDate.effect === 'extreme') {
                        bloodContainer.style.opacity = '1';
                        container.style.boxShadow = '0 0 30px rgba(138, 3, 3, 0.9)';
                        spider.style.display = 'block';
                        positionSpider();
                        try {
                            creepySound.play();
                        } catch (e) {
                            console.log('Auto-play prevented by browser');
                        }
                    } else if (specialDate.effect === 'moderate') {
                        bloodContainer.style.opacity = '0.7';
                        container.style.boxShadow = '0 0 20px rgba(138, 3, 3, 0.7)';
                    }
                } else {
                    // Regular date
                    let randomFate = fates[Math.floor(Math.random() * fates.length)];
                    randomFate = randomFate.replace('SELECTED DATE', formattedDate);
                    fateDisplay.innerHTML = `<p>${randomFate}</p>`;

                    // Random chance for effects on regular dates
                    const effectChance = Math.random();
                    if (effectChance > 0.8) {
                        bloodContainer.style.opacity = '0.5';
                        container.style.boxShadow = '0 0 20px rgba(138, 3, 3, 0.6)';
                    } else if (effectChance > 0.6) {
                        spider.style.display = 'block';
                        positionSpider();
                    } else {
                        bloodContainer.style.opacity = '0';
                        container.style.boxShadow = 'var(--eerie-shadow)';
                        spider.style.display = 'none';
                    }
                }

                createBloodDrops();
                fateDisplay.classList.add('visible');
            }

            function positionSpider() {
                const containerWidth = container.offsetWidth;
                spider.style.left = `${Math.random() * (containerWidth - 50) + 25}px`;
                spider.style.top = '0';
            }

            dateInput.addEventListener('change', function() {
                const selectedDate = this.value;
                displayFate(selectedDate);
            });

            // Initialize blood drops
            createBloodDrops();

            // Set default date to today
            const today = new Date();
            const todayFormatted = today.toISOString().split('T')[0];
            dateInput.value = todayFormatted;

            // Handle user click for audio
            document.body.addEventListener('click', function() {
                creepySound.volume = 0.2;
                try {
                    creepySound.play().catch(e => console.log('Audio play prevented'));
                } catch (e) {
                    console.log('Audio play error');
                }
            }, { once: true });
        });
    </script>
</body>
</html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Horror Date Picker</title>
	<style>
	:root {
	--blood-red: #8a0303;
	--dark-red: #5c0101;
	--bone: #e3dac9;
	--dark-gray: #2a2a2a;
	--darker-gray: #1a1a1a;
	--eerie-shadow: 0 0 15px rgba(138, 3, 3, 0.7);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: all 0.3s ease;
	}

	body {
	font-family: 'Courier New', monospace;
	background-color: var(--darker-gray);
	color: var(--bone);
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
	padding: 20px;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23300101' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
	}

	.container {
	max-width: 800px;
	width: 100%;
	background-color: var(--dark-gray);
	padding: 30px;
	border-radius: 8px;
	box-shadow: var(--eerie-shadow);
	position: relative;
	overflow: hidden;
	}

	.picker-container {
	position: relative;
	z-index: 10;
	}

	h1 {
	font-size: 2.5rem;
	margin-bottom: 20px;
	text-align: center;
	color: var(--blood-red);
	text-shadow: 0 0 10px rgba(138, 3, 3, 0.3);
	font-family: 'Georgia', serif;
	letter-spacing: 2px;
	}

	.description {
	font-size: 1rem;
	margin-bottom: 30px;
	text-align: center;
	line-height: 1.6;
	}

	.blood {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
	}

	.blood-drop {
	position: absolute;
	background-color: var(--blood-red);
	border-radius: 50% 50% 5% 50%;
	transform: rotate(45deg);
	box-shadow: 0 0 10px rgba(138, 3, 3, 0.5);
	z-index: 1;
	animation: drip 10s infinite;
	}

	@keyframes drip {
	0% {
	transform: translateY(-10px) rotate(45deg);
	opacity: 0;
	}
	10% {
	opacity: 1;
	}
	90% {
	opacity: 1;
	}
	100% {
	transform: translateY(calc(100vh + 20px)) rotate(45deg);
	opacity: 0;
	}
	}

	.input-group {
	margin-bottom: 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	label {
	font-size: 1.2rem;
	margin-bottom: 10px;
	display: block;
	color: var(--bone);
	}

	.date-input {
	width: 100%;
	max-width: 300px;
	padding: 12px 15px;
	font-size: 16px;
	background-color: var(--darker-gray);
	color: var(--bone);
	border: 2px solid var(--blood-red);
	border-radius: 4px;
	outline: none;
	font-family: 'Courier New', monospace;
	position: relative;
	z-index: 2;
	}

	.date-input::-webkit-calendar-picker-indicator {
	filter: invert(1) sepia(100%) saturate(10000%) hue-rotate(300deg);
	cursor: pointer;
	}

	.date-input:focus {
	box-shadow: 0 0 10px var(--blood-red);
	}

	.chosen-date {
	margin-top: 30px;
	padding: 20px;
	background-color: rgba(26, 26, 26, 0.7);
	border: 1px solid var(--blood-red);
	border-radius: 4px;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.6;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
	}

	.chosen-date.visible {
	opacity: 1;
	transform: translateY(0);
	}

	.blood-writing {
	color: var(--blood-red);
	font-family: 'Georgia', serif;
	font-weight: bold;
	text-shadow: 0 0 5px rgba(138, 3, 3, 0.5);
	}

	.spider {
	position: absolute;
	width: 30px;
	height: 30px;
	z-index: 5;
	transform-origin: center top;
	animation: swing 3s ease-in-out infinite alternate;
	display: none;
	}

	.spider-body {
	position: absolute;
	width: 20px;
	height: 30px;
	background-color: black;
	border-radius: 50%;
	top: 15px;
	left: 5px;
	}

	.spider-leg {
	position: absolute;
	width: 40px;
	height: 2px;
	background-color: black;
	top: 25px;
	}

	.spider-leg:nth-child(1) {
	transform: rotate(30deg);
	left: -15px;
	}

	.spider-leg:nth-child(2) {
	transform: rotate(60deg);
	left: -10px;
	}

	.spider-leg:nth-child(3) {
	transform: rotate(-30deg);
	left: 15px;
	}

	.spider-leg:nth-child(4) {
	transform: rotate(-60deg);
	left: 10px;
	}

	.spider-leg:nth-child(5) {
	transform: rotate(120deg);
	left: -10px;
	top: 35px;
	}

	.spider-leg:nth-child(6) {
	transform: rotate(150deg);
	left: -15px;
	top: 35px;
	}

	.spider-leg:nth-child(7) {
	transform: rotate(-120deg);
	left: 10px;
	top: 35px;
	}

	.spider-leg:nth-child(8) {
	transform: rotate(-150deg);
	left: 15px;
	top: 35px;
	}

	.spider-thread {
	position: absolute;
	width: 1px;
	height: 100px;
	background-color: rgba(230, 230, 230, 0.7);
	left: 14px;
	top: -100px;
	}

	@keyframes swing {
	0% {
	transform: rotate(5deg);
	}
	100% {
	transform: rotate(-5deg);
	}
	}

	.creepy-sound {
	display: none;
	}

	.warning {
	color: var(--blood-red);
	text-align: center;
	margin-top: 30px;
	font-size: 0.9rem;
	font-style: italic;
	}

	.heartbeat {
	animation: heartBeat 1.5s infinite;
	}

	@keyframes heartBeat {
	0% {
	transform: scale(1);
	}
	14% {
	transform: scale(1.1);
	}
	28% {
	transform: scale(1);
	}
	42% {
	transform: scale(1.1);
	}
	70% {
	transform: scale(1);
	}
	}

	@media (max-width: 600px) {
	.container {
	padding: 20px;
	}

	h1 {
	font-size: 2rem;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="blood"></div>
	<div class="spider">
	<div class="spider-thread"></div>
	<div class="spider-body"></div>
	<div class="spider-leg"></div>
	<div class="spider-leg"></div>
	<div class="spider-leg"></div>
	<div class="spider-leg"></div>
	<div class="spider-leg"></div>
	<div class="spider-leg"></div>
	<div class="spider-leg"></div>
	<div class="spider-leg"></div>
	</div>

	<div class="picker-container">
	<h1 class="title">DOOM CALENDAR</h1>
	<p class="description">Select a date to reveal your horrifying fate. Each selection brings you closer to your inevitable doom.</p>

	<div class="input-group">
	<label for="doom-date">Select Your Fateful Day:</label>
	<input type="date" id="doom-date" class="date-input" min="2025-02-26">
	</div>

	<div class="chosen-date" id="fate-display">
	<p>Your fate awaits...</p>
	</div>

	<p class="warning">Warning: Some dates may trigger unsettling visual and audio effects.</p>
	</div>
	</div>

	<audio id="creepy-sound" class="creepy-sound">
	<source src="https://freesound.org/data/previews/367/367803_6658234-lq.mp3" type="audio/mpeg">
	</audio>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const dateInput = document.getElementById('doom-date');
	const fateDisplay = document.getElementById('fate-display');
	const bloodContainer = document.querySelector('.blood');
	const spider = document.querySelector('.spider');
	const creepySound = document.getElementById('creepy-sound');
	const container = document.querySelector('.container');

	// Create blood drops
	function createBloodDrops() {
	bloodContainer.innerHTML = '';
	const dropCount = Math.floor(Math.random() * 10) + 10;

	for (let i = 0; i < dropCount; i++) {
	const drop = document.createElement('div');
	drop.classList.add('blood-drop');

	// Random size between 5px and 20px
	const size = Math.floor(Math.random() * 15) + 5;
	drop.style.width = `${size}px`;
	drop.style.height = `${size}px`;

	// Random position
	drop.style.left = `${Math.random() * 100}%`;

	// Random delay
	drop.style.animationDelay = `${Math.random() * 10}s`;

	// Random duration
	drop.style.animationDuration = `${Math.random() * 5 + 5}s`;

	bloodContainer.appendChild(drop);
	}
	}

	// Random creepy fates
	const fates = [
	"The shadows have marked <span class='blood-writing'>MARCH 13TH</span> as the day they'll finally claim you. Sleep well until then.",
	"On <span class='blood-writing heartbeat'>SELECTED DATE</span>, the door you've always feared will finally open. What emerges won't be human.",
	"Your reflection will begin to move independently on <span class='blood-writing'>SELECTED DATE</span>. Don't try to stop it.",
	"The voices that have been whispering your name will become audible to everyone on <span class='blood-writing heartbeat'>SELECTED DATE</span>.",
	"The thing under your bed has chosen <span class='blood-writing'>SELECTED DATE</span> to finally introduce itself.",
	"Your shadow will detach on <span class='blood-writing heartbeat'>SELECTED DATE</span>. It's been waiting for years.",
	"The dead have your name on their lips. They'll speak it aloud on <span class='blood-writing'>SELECTED DATE</span>.",
	"Every mirror will reveal your true form on <span class='blood-writing heartbeat'>SELECTED DATE</span>. Avoid reflections at all costs.",
	"The countdown to your doom began long ago. It ends on <span class='blood-writing'>SELECTED DATE</span>.",
	"You'll find yourself in a familiar place on <span class='blood-writing heartbeat'>SELECTED DATE</span>, but everything will be slightly wrong.",
	"The numbers 3:47 will appear everywhere on <span class='blood-writing'>SELECTED DATE</span>. Don't be alone at that time.",
	"Your dreams on <span class='blood-writing heartbeat'>SELECTED DATE</span> will come true the following day. Pray for pleasant dreams.",
	"What walks in your skin on <span class='blood-writing'>SELECTED DATE</span> won't be you anymore."
	];

	// Special dates effects
	const specialDates = {
	'2025-10-31': { // Halloween
	message: "You fool! Selecting Halloween seals your fate. The veil is thinnest, and <span class='blood-writing heartbeat'>THEY</span> will find you with ease.",
	effect: 'extreme'
	},
	'2025-12-25': { // Christmas
	message: "Even on this festive day, horror finds you. <span class='blood-writing'>Saint Nick</span> has a special gift prepared - your soul wrapped in terror.",
	effect: 'moderate'
	},
	'2025-02-14': { // Valentine's
	message: "Love is in the air, but so is the scent of <span class='blood-writing heartbeat'>YOUR BLOOD</span>. Your heart won't remain yours for long.",
	effect: 'moderate'
	},
	'2025-04-01': { // April Fools
	message: "The joke's on you. What begins as laughter on <span class='blood-writing'>APRIL 1ST</span> ends with screams that no one will believe.",
	effect: 'moderate'
	},
	'2025-06-21': { // Summer Solstice
	message: "The longest day provides the most time for <span class='blood-writing heartbeat'>THEM</span> to hunt you. Darkness will be your only refuge.",
	effect: 'extreme'
	}
	};

	function getFormattedDate(dateString) {
	const date = new Date(dateString);
	const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
	return date.toLocaleDateString('en-US', options).toUpperCase();
	}

	function displayFate(date) {
	const formattedDate = getFormattedDate(date);

	// Check if it's a special date
	if (specialDates[date]) {
	const specialDate = specialDates[date];
	fateDisplay.innerHTML = `<p>${specialDate.message}</p>`;

	if (specialDate.effect === 'extreme') {
	bloodContainer.style.opacity = '1';
	container.style.boxShadow = '0 0 30px rgba(138, 3, 3, 0.9)';
	spider.style.display = 'block';
	positionSpider();
	try {
	creepySound.play();
	} catch (e) {
	console.log('Auto-play prevented by browser');
	}
	} else if (specialDate.effect === 'moderate') {
	bloodContainer.style.opacity = '0.7';
	container.style.boxShadow = '0 0 20px rgba(138, 3, 3, 0.7)';
	}
	} else {
	// Regular date
	let randomFate = fates[Math.floor(Math.random() * fates.length)];
	randomFate = randomFate.replace('SELECTED DATE', formattedDate);
	fateDisplay.innerHTML = `<p>${randomFate}</p>`;

	// Random chance for effects on regular dates
	const effectChance = Math.random();
	if (effectChance > 0.8) {
	bloodContainer.style.opacity = '0.5';
	container.style.boxShadow = '0 0 20px rgba(138, 3, 3, 0.6)';
	} else if (effectChance > 0.6) {
	spider.style.display = 'block';
	positionSpider();
	} else {
	bloodContainer.style.opacity = '0';
	container.style.boxShadow = 'var(--eerie-shadow)';
	spider.style.display = 'none';
	}
	}

	createBloodDrops();
	fateDisplay.classList.add('visible');
	}

	function positionSpider() {
	const containerWidth = container.offsetWidth;
	spider.style.left = `${Math.random() * (containerWidth - 50) + 25}px`;
	spider.style.top = '0';
	}

	dateInput.addEventListener('change', function() {
	const selectedDate = this.value;
	displayFate(selectedDate);
	});

	// Initialize blood drops
	createBloodDrops();

	// Set default date to today
	const today = new Date();
	const todayFormatted = today.toISOString().split('T')[0];
	dateInput.value = todayFormatted;

	// Handle user click for audio
	document.body.addEventListener('click', function() {
	creepySound.volume = 0.2;
	try {
	creepySound.play().catch(e => console.log('Audio play prevented'));
	} catch (e) {
	console.log('Audio play error');
	}
	}, { once: true });
	});
	</script>
	</body>
	</html>