Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Матюкливые часы</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #1a1a1a; | |
| color: #fff; | |
| transition: background-color 0.5s; | |
| } | |
| .morning { | |
| background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364); | |
| } | |
| .day { | |
| background: linear-gradient(to bottom, #56ccf2, #2f80ed); | |
| } | |
| .evening { | |
| background: linear-gradient(to bottom, #f46b45, #eea849); | |
| } | |
| .night { | |
| background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e); | |
| } | |
| .clock-container { | |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| backdrop-filter: blur(10px); | |
| } | |
| .digital-clock { | |
| font-family: 'Courier New', monospace; | |
| letter-spacing: 2px; | |
| } | |
| .rude-text { | |
| min-height: 100px; | |
| border-left: 5px solid #ff4757; | |
| transition: all 0.3s; | |
| } | |
| .rude-text:hover { | |
| transform: scale(1.01); | |
| box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3); | |
| } | |
| .btn { | |
| transition: all 0.3s; | |
| } | |
| .btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .btn:active { | |
| transform: translateY(-1px); | |
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .blink { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: transparent; | |
| } | |
| .glitch::before { | |
| left: 2px; | |
| text-shadow: -2px 0 #ff00ff; | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim 5s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -2px; | |
| text-shadow: -2px 0 #00ffff; | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim2 5s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim { | |
| 0% { clip: rect(31px, 9999px, 94px, 0); } | |
| 10% { clip: rect(112px, 9999px, 76px, 0); } | |
| 20% { clip: rect(85px, 9999px, 77px, 0); } | |
| 30% { clip: rect(27px, 9999px, 97px, 0); } | |
| 40% { clip: rect(64px, 9999px, 98px, 0); } | |
| 50% { clip: rect(61px, 9999px, 85px, 0); } | |
| 60% { clip: rect(99px, 9999px, 114px, 0); } | |
| 70% { clip: rect(34px, 9999px, 115px, 0); } | |
| 80% { clip: rect(98px, 9999px, 129px, 0); } | |
| 90% { clip: rect(43px, 9999px, 96px, 0); } | |
| 100% { clip: rect(82px, 9999px, 64px, 0); } | |
| } | |
| @keyframes glitch-anim2 { | |
| 0% { clip: rect(65px, 9999px, 119px, 0); } | |
| 10% { clip: rect(79px, 9999px, 66px, 0); } | |
| 20% { clip: rect(75px, 9999px, 117px, 0); } | |
| 30% { clip: rect(46px, 9999px, 113px, 0); } | |
| 40% { clip: rect(115px, 9999px, 74px, 0); } | |
| 50% { clip: rect(52px, 9999px, 61px, 0); } | |
| 60% { clip: rect(44px, 9999px, 127px, 0); } | |
| 70% { clip: rect(101px, 9999px, 91px, 0); } | |
| 80% { clip: rect(127px, 9999px, 100px, 0); } | |
| 90% { clip: rect(59px, 9999px, 74px, 0); } | |
| 100% { clip: rect(84px, 9999px, 126px, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4 night"> | |
| <div class="clock-container bg-gray-900 bg-opacity-80 w-full max-w-2xl"> | |
| <div class="p-8"> | |
| <h1 class="text-3xl font-bold text-center mb-6 text-red-400 pulse"> | |
| <i class="fas fa-clock mr-2"></i> Матюкливые часы | |
| </h1> | |
| <div class="digital-clock bg-black bg-opacity-70 p-6 rounded-lg mb-6 text-center"> | |
| <div class="text-6xl font-mono font-bold text-green-400"> | |
| <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds" class="blink">00</span> | |
| </div> | |
| <div class="text-xl mt-2 text-gray-300"> | |
| <span id="date"></span> | |
| </div> | |
| </div> | |
| <div class="rude-text bg-gray-800 p-6 rounded-lg mb-6 text-2xl text-center font-medium text-yellow-300 glitch" data-text="Нажми кнопку, чтобы узнать время, придурок!"> | |
| Нажми кнопку, чтобы узнать время, придурок! | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button id="tellTimeBtn" class="btn flex-1 bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-lg font-bold"> | |
| <i class="fas fa-comment-alt mr-2"></i> Узнать время | |
| </button> | |
| <button id="speakBtn" class="btn flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-bold"> | |
| <i class="fas fa-volume-up mr-2"></i> Скажи! | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| console.log("Матюкливые часы запущены, ты сам напросился!"); | |
| // Конфигурация грубых слов | |
| const rudeWords = { | |
| epithets: [ | |
| "ебанутых", "пиздатых", "хуёвых", "блядских", "ебучих", | |
| "гребанных", "херовых", "мудацких", "залупистых", "пиздецовых", | |
| "долбоёбских", "хуистых", "пиздюлиных", "ебанных", "зашкварных" | |
| ], | |
| connectors: [ | |
| "блядь", "мля", "сука", "нах", "пиздец", | |
| "еб твою мать", "твою налево", "ёпт", "бля", "ёб твою" | |
| ], | |
| exclamations: [ | |
| "ебануться!", "пиздец!", "нахрен!", "бляяя!", "ёбаный в рот!", | |
| "сука блять!", "охуеть!", "твою мать!", "ёптыть!", "ну нихуя себе!" | |
| ], | |
| morningExclamations: [ | |
| "иди нахуй!", "проснись и пиздуй!", "ебал я это утро!", "бля, рано!", "ну и хуйня!" | |
| ], | |
| nightExclamations: [ | |
| "иди спать, мудила!", "хули не спишь?", "ебанулся что ли?", "ночь на дворе, дебил!", "пиздец, уже ночь!" | |
| ] | |
| }; | |
| // Числа в слова | |
| const numbers = { | |
| 0: "ноль", | |
| 1: "один", | |
| 2: "два", | |
| 3: "три", | |
| 4: "четыре", | |
| 5: "пять", | |
| 6: "шесть", | |
| 7: "семь", | |
| 8: "восемь", | |
| 9: "девять", | |
| 10: "десять", | |
| 11: "одиннадцать", | |
| 12: "двенадцать", | |
| 13: "тринадцать", | |
| 14: "четырнадцать", | |
| 15: "пятнадцать", | |
| 16: "шестнадцать", | |
| 17: "семнадцать", | |
| 18: "восемнадцать", | |
| 19: "девятнадцать", | |
| 20: "двадцать", | |
| 30: "тридцать", | |
| 40: "сорок", | |
| 50: "пятьдесят" | |
| }; | |
| const ordinalNumbers = { | |
| 1: "первого", | |
| 2: "второго", | |
| 3: "третьего", | |
| 4: "четвёртого", | |
| 5: "пятого", | |
| 6: "шестого", | |
| 7: "седьмого", | |
| 8: "восьмого", | |
| 9: "девятого", | |
| 10: "десятого", | |
| 11: "одиннадцатого", | |
| 12: "двенадцатого", | |
| 13: "первого" | |
| }; | |
| // Функции для преобразования чисел в слова | |
| function numberToWords(num) { | |
| if (num <= 20 || num % 10 === 0) { | |
| return numbers[num]; | |
| } else { | |
| const tens = Math.floor(num / 10) * 10; | |
| const units = num % 10; | |
| return `${numbers[tens]} ${numbers[units]}`; | |
| } | |
| } | |
| function getMinuteWord(minutes) { | |
| const lastDigit = minutes % 10; | |
| const lastTwoDigits = minutes % 100; | |
| if (lastTwoDigits >= 11 && lastTwoDigits <= 19) { | |
| return "минут"; | |
| } else if (lastDigit === 1) { | |
| return "минута"; | |
| } else if (lastDigit >= 2 && lastDigit <= 4) { | |
| return "минуты"; | |
| } else { | |
| return "минут"; | |
| } | |
| } | |
| function getHourWord(hours) { | |
| const lastDigit = hours % 10; | |
| const lastTwoDigits = hours % 100; | |
| if (lastTwoDigits >= 11 && lastTwoDigits <= 19) { | |
| return "часов"; | |
| } else if (lastDigit === 1) { | |
| return "час"; | |
| } else if (lastDigit >= 2 && lastDigit <= 4) { | |
| return "часа"; | |
| } else { | |
| return "часов"; | |
| } | |
| } | |
| // Функция для определения времени суток | |
| function getTimeOfDay(hours) { | |
| if (hours >= 0 && hours < 3) return "ночи"; | |
| if (hours >= 3 && hours < 9) return "утра"; | |
| if (hours >= 9 && hours < 18) return "дня"; | |
| if (hours >= 18 && hours < 21) return "вечера"; | |
| return "ночи"; | |
| } | |
| // Функция для получения случайного элемента из массива | |
| function getRandomElement(arr) { | |
| return arr[Math.floor(Math.random() * arr.length)]; | |
| } | |
| // Функция для правильного склонения числительных | |
| function getMinutesLeftText(minutesLeft) { | |
| if (minutesLeft === 1) return "одной"; | |
| if (minutesLeft === 2) return "двух"; | |
| if (minutesLeft === 3) return "трёх"; | |
| if (minutesLeft === 4) return "четырёх"; | |
| if (minutesLeft === 8) return "восьми"; | |
| // Для чисел 5-20 и 25, 35, 45 | |
| if (minutesLeft >= 5 && minutesLeft <= 20) { | |
| return numberToWords(minutesLeft).replace('ь', 'и').replace('ть', 'ти'); | |
| } | |
| // Для чисел 21-24, 26-29, 31-34, 36-39, 41-44, 46-49 | |
| const tens = Math.floor(minutesLeft / 10) * 10; | |
| const units = minutesLeft % 10; | |
| if (tens === 20) { | |
| return `двадцати ${units === 0 ? '' : numberToWords(units)}`; | |
| } else if (tens === 30) { | |
| return `тридцати ${units === 0 ? '' : numberToWords(units)}`; | |
| } else if (tens === 40) { | |
| return `сорока ${units === 0 ? '' : numberToWords(units)}`; | |
| } | |
| return numberToWords(minutesLeft); | |
| } | |
| // Основная функция для генерации грубого времени | |
| function generateRudeTime() { | |
| const now = new Date(); | |
| let hours = now.getHours(); | |
| const minutes = now.getMinutes(); | |
| const seconds = now.getSeconds(); | |
| // Для 12-часового формата | |
| const twelveHourFormat = hours % 12 || 12; | |
| const nextHour = (twelveHourFormat % 12) + 1; | |
| const timeOfDay = getTimeOfDay(hours); | |
| const isMorning = hours >= 3 && hours < 9; | |
| const isNight = hours >= 21 || hours < 3; | |
| let rudeTime = ""; | |
| if (minutes === 0) { | |
| // Схема для ровного часа | |
| const hourWord = getHourWord(twelveHourFormat); | |
| const exclamation = isMorning ? getRandomElement(rudeWords.morningExclamations) : | |
| isNight ? getRandomElement(rudeWords.nightExclamations) : | |
| getRandomElement(rudeWords.exclamations); | |
| rudeTime = `Ровно ${numberToWords(twelveHourFormat)} ${hourWord} ${timeOfDay}, ${exclamation}`; | |
| } else if ((minutes >= 1 && minutes <= 29) || (minutes >= 31 && minutes <= 39)) { | |
| // Схема для минут от 1 до 29 и от 31 до 39 | |
| const minuteWord = getMinuteWord(minutes); | |
| const epithet = getRandomElement(rudeWords.epithets); | |
| const connector = getRandomElement(rudeWords.connectors); | |
| let minutesText; | |
| if (minutes === 1) { | |
| minutesText = "одна"; | |
| } else if (minutes === 2) { | |
| minutesText = "две"; | |
| } else { | |
| minutesText = numberToWords(minutes); | |
| } | |
| rudeTime = `${minutesText} ${epithet} ${minuteWord} ${ordinalNumbers[nextHour]}, ${connector}!`; | |
| } else if (minutes === 30) { | |
| // Схема для получаса | |
| const exclamation = isMorning ? getRandomElement(rudeWords.morningExclamations) : | |
| isNight ? getRandomElement(rudeWords.nightExclamations) : | |
| getRandomElement(rudeWords.exclamations); | |
| rudeTime = `Пол ${ordinalNumbers[nextHour]}, ${exclamation}`; | |
| } else if (minutes >= 40 && minutes <= 59) { | |
| // Схема для минут от 40 до 59 | |
| const minutesLeft = 60 - minutes; | |
| const minutesLeftText = getMinutesLeftText(minutesLeft); | |
| const epithet = getRandomElement(rudeWords.epithets); | |
| const connector = getRandomElement(rudeWords.connectors); | |
| // Исправлено "Без пятьи" на "Без пяти" | |
| rudeTime = `Без ${minutesLeftText} ${epithet} минут ${numberToWords(nextHour)}, ${connector}!`; | |
| } | |
| return rudeTime; | |
| } | |
| // Функция для обновления цифровых часов | |
| function updateDigitalClock() { | |
| const now = new Date(); | |
| const hours = now.getHours().toString().padStart(2, '0'); | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| const seconds = now.getSeconds().toString().padStart(2, '0'); | |
| document.getElementById('hours').textContent = hours; | |
| document.getElementById('minutes').textContent = minutes; | |
| document.getElementById('seconds').textContent = seconds; | |
| // Обновляем дату | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| document.getElementById('date').textContent = now.toLocaleDateString('ru-RU', options); | |
| // Обновляем фон в зависимости от времени суток | |
| updateBackground(now.getHours()); | |
| } | |
| // Функция для обновления фона | |
| function updateBackground(hours) { | |
| const body = document.body; | |
| body.classList.remove('morning', 'day', 'evening', 'night'); | |
| if (hours >= 3 && hours < 9) { | |
| body.classList.add('morning'); | |
| } else if (hours >= 9 && hours < 18) { | |
| body.classList.add('day'); | |
| } else if (hours >= 18 && hours < 21) { | |
| body.classList.add('evening'); | |
| } else { | |
| body.classList.add('night'); | |
| } | |
| } | |
| // Функция для озвучивания текста | |
| function speakText(text) { | |
| if ('speechSynthesis' in window) { | |
| const utterance = new SpeechSynthesisUtterance(text); | |
| utterance.lang = 'ru-RU'; | |
| utterance.rate = 0.9; | |
| // Попробуем найти русский голос | |
| const voices = speechSynthesis.getVoices(); | |
| const russianVoice = voices.find(voice => voice.lang.includes('ru')); | |
| if (russianVoice) { | |
| utterance.voice = russianVoice; | |
| } | |
| speechSynthesis.speak(utterance); | |
| } else { | |
| alert('Ваш браузер не поддерживает синтез речи!'); | |
| } | |
| } | |
| // Инициализация при загрузке страницы | |
| document.addEventListener('DOMContentLoaded', () => { | |
| updateDigitalClock(); | |
| // Обновляем часы каждую секунду | |
| setInterval(updateDigitalClock, 1000); | |
| // Обработчики кнопок | |
| document.getElementById('tellTimeBtn').addEventListener('click', () => { | |
| const rudeTime = generateRudeTime(); | |
| document.querySelector('.rude-text').textContent = rudeTime; | |
| // Анимация при нажатии | |
| const rudeTextElement = document.querySelector('.rude-text'); | |
| rudeTextElement.classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| rudeTextElement.classList.remove('animate-pulse'); | |
| }, 500); | |
| }); | |
| document.getElementById('speakBtn').addEventListener('click', () => { | |
| const rudeTime = generateRudeTime(); | |
| document.querySelector('.rude-text').textContent = rudeTime; | |
| // Анимация при нажатии | |
| const rudeTextElement = document.querySelector('.rude-text'); | |
| rudeTextElement.classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| rudeTextElement.classList.remove('animate-pulse'); | |
| }, 500); | |
| speakText(rudeTime); | |
| }); | |
| // Загружаем голоса для TTS | |
| if ('speechSynthesis' in window) { | |
| speechSynthesis.onvoiceschanged = () => { | |
| // Голоса загружены | |
| }; | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vertalius/rude-russian-clock" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |