Spaces:

imxuma
/

personal

Running

App Files Files Community

imxuma commited on Mar 29, 2025

Commit

4420807

verified ·

1 Parent(s): ee79cfe

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +695 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Personal
-emoji: 🏃
-colorFrom: green
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: personal
+emoji: 🐳
+colorFrom: blue
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,695 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fullscreen Countdown Timer</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Arial', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
+            color: white;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            position: relative;
+        }
+        .timer-container {
+            text-align: center;
+            z-index: 1;
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            max-width: 90%;
+            transition: all 0.3s ease;
+            margin-top: -80px;
+        }
+        .timer-container:hover {
+            transform: scale(1.02);
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 2.5rem;
+            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+            letter-spacing: 1px;
+        }
+        .timer {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        .time-box {
+            position: relative;
+            width: 120px;
+            height: 180px;  /* Увеличил высоту контейнера */
+            perspective: 1000px;
+        }
+        .time-value {
+            position: absolute;
+            width: 100%;
+            height: 120px;  /* Высота цифр */
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 5rem;
+            font-weight: bold;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
+            top: 0;
+        }
+        .time-value.flip {
+            animation: flip 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
+        }
+        @keyframes flip {
+            0% {
+                transform: rotateX(0deg);
+            }
+            100% {
+                transform: rotateX(-180deg);
+            }
+        }
+        .time-label {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            margin-top: 2.5rem;  /* Увеличил отступ сверху */
+            margin-bottom: 0;
+            font-size: 1.2rem;
+            opacity: 0.8;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding-top: 10px;  /* Дополнительное пространство между цифрами и текстом */
+        }
+        .controls {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+        }
+        button {
+            padding: 0.8rem 1.5rem;
+            font-size: 1rem;
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            backdrop-filter: blur(5px);
+        }
+        button:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-3px);
+        }
+        button:active {
+            transform: translateY(1px);
+        }
+        .set-timer {
+            display: flex;
+            gap: 1rem;
+            margin-top: 2rem;
+            justify-content: center;
+            align-items: center;
+        }
+        .time-input {
+            position: relative;
+        }
+        .time-input input {
+            padding: 0.8rem;
+            width: 100px;
+            text-align: center;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 5px;
+            color: white;
+            font-size: 1.5rem;
+            font-weight: bold;
+            appearance: textfield;
+            -moz-appearance: textfield;
+        }
+        .time-input input::-webkit-outer-spin-button,
+        .time-input input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        .arrows {
+            position: absolute;
+            right: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 0;
+            height: 100%;
+            top: 0;
+            pointer-events: none;
+        }
+        .arrow-btn {
+            position: relative;
+            width: 20px;
+            height: 50%;
+            padding: 0;
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            pointer-events: all;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .arrow-btn.up {
+            top: 0;
+            border-radius: 0 5px 0 0;
+        }
+        .arrow-btn.down {
+            bottom: 0;
+            border-radius: 0 0 5px 0;
+        }
+        .arrow-btn:after {
+            content: '';
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 5px solid white;
+            transition: all 0.2s ease;
+            opacity: 0.7;
+        }
+        .arrow-btn.down:after {
+            transform: rotate(180deg);
+        }
+        .arrow-btn:hover:after {
+            opacity: 1;
+            transform: scale(1.2);
+        }
+        .arrow-btn.down:hover:after {
+            transform: rotate(180deg) scale(1.2);
+        }
+        .time-input-wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .time-label-input {
+            margin-top: 1rem;
+            font-size: 1rem;
+            opacity: 0.8;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .timer {
+                flex-wrap: wrap;
+            }
+            .time-box {
+                width: 80px;
+                height: 140px;
+            }
+            .time-value {
+                font-size: 3rem;
+                height: 80px;
+            }
+            .time-label {
+                font-size: 1rem;
+                margin-top: 2rem;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+            .time-input input {
+                width: 80px;
+                font-size: 1.2rem;
+            }
+            .time-label-input {
+                margin-top: 0.8rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .time-box {
+                width: 60px;
+                height: 120px;
+            }
+            .time-value {
+                font-size: 2rem;
+                height: 60px;
+            }
+            .time-label {
+                font-size: 0.8rem;
+                margin-top: 1.5rem;
+            }
+            button {
+                padding: 0.6rem 1rem;
+                font-size: 0.9rem;
+            }
+            .set-timer {
+                flex-direction: column;
+            }
+            .time-input input {
+                width: 100px;
+            }
+            .time-label-input {
+                margin-top: 0.6rem;
+            }
+        }
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: #f00;
+            opacity: 0;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 100;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            animation: fadeIn 0.5s ease;
+        }
+        .modal-content {
+            background: linear-gradient(135deg, #16213e, #0f3460);
+            padding: 2rem;
+            border-radius: 15px;
+            text-align: center;
+            max-width: 90%;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+            position: relative;
+        }
+        .close-modal {
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            background: #ff6b6b;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .close-modal:hover {
+            transform: rotate(90deg) scale(1.1);
+        }
+        .modal h2 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            color: #ff6b6b;
+            text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
+        }
+        .modal p {
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            margin-top: 1rem;
+            overflow: hidden;
+        }
+        .progress {
+            height: 100%;
+            background: linear gradient(90deg, #ff6b6b, #ff8e8e);
+            width: 100%;
+            transition: width 0.3s ease;
+        }
+    </style>
+</head>
+<body>
+    <div class="particles" id="particles"></div>
+    <div class="timer-container">
+        <h1>Countdown Timer</h1>
+        <div class="timer">
+            <div class="time-box">
+                <div class="time-value" id="hours">00</div>
+                <div class="time-label">Hours</div>
+            </div>
+            <div class="time-box">
+                <div class="time-value" id="minutes">00</div>
+                <div class="time-label">Minutes</div>
+            </div>
+            <div class="time-box">
+                <div class="time-value" id="seconds">00</div>
+                <div class="time-label">Seconds</div>
+            </div>
+        </div>
+        <div class="progress-bar">
+            <div class="progress" id="progress"></div>
+        </div>
+        <div class="controls">
+            <button id="startBtn"><i class="fas fa-play"></i> Start</button>
+            <button id="pauseBtn"><i class="fas fa-pause"></i> Pause</button>
+            <button id="resetBtn"><i class="fas fa-redo"></i> Reset</button>
+        </div>
+        <div class="set-timer">
+            <div class="time-input-wrapper">
+                <div class="time-input">
+                    <input type="number" id="inputHours" min="0" max="99" value="0">
+                    <div class="arrows">
+                        <button class="arrow-btn up" onclick="incrementHours()"></button>
+                        <button class="arrow-btn down" onclick="decrementHours()"></button>
+                    </div>
+                </div>
+                <div class="time-label-input">Hours</div>
+            </div>
+            <div class="time-input-wrapper">
+                <div class="time-input">
+                    <input type="number" id="inputMinutes" min="0" max="59" value="10">
+                    <div class="arrows">
+                        <button class="arrow-btn up" onclick="incrementMinutes()"></button>
+                        <button class="arrow-btn down" onclick="decrementMinutes()"></button>
+                    </div>
+                </div>
+                <div class="time-label-input">Minutes</div>
+            </div>
+            <div class="time-input-wrapper">
+                <div class="time-input">
+                    <input type="number" id="inputSeconds" min="0" max="59" value="0">
+                    <div class="arrows">
+                        <button class="arrow-btn up" onclick="incrementSeconds()"></button>
+                        <button class="arrow-btn down" onclick="decrementSeconds()"></button>
+                    </div>
+                </div>
+                <div class="time-label-input">Seconds</div>
+            </div>
+        </div>
+    </div>
+    <div class="modal" id="modal">
+        <div class="modal-content">
+            <div class="close-modal" id="closeModal">
+                <i class="fas fa-times"></i>
+            </div>
+            <h2>Time's Up!</h2>
+            <p>Your countdown has reached zero.</p>
+            <button id="newTimerBtn"><i class="fas fa-plus"></i> Start New Timer</button>
+        </div>
+    </div>
+    <script>
+        // DOM Elements
+        const hoursElement = document.getElementById('hours');
+        const minutesElement = document.getElementById('minutes');
+        const secondsElement = document.getElementById('seconds');
+        const startBtn = document.getElementById('startBtn');
+        const pauseBtn = document.getElementById('pauseBtn');
+        const resetBtn = document.getElementById('resetBtn');
+        const inputHours = document.getElementById('inputHours');
+        const inputMinutes = document.getElementById('inputMinutes');
+        const inputSeconds = document.getElementById('inputSeconds');
+        const modal = document.getElementById('modal');
+        const closeModal = document.getElementById('closeModal');
+        const newTimerBtn = document.getElementById('newTimerBtn');
+        const progress = document.getElementById('progress');
+        const particles = document.getElementById('particles');
+        // Variables
+        let countdownInterval;
+        let totalSeconds = 0;
+        let remainingSeconds = 0;
+        let isRunning = false;
+        // Create particles
+        function createParticles() {
+            for (let i = 0; i < 50; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'confetti';
+                particle.style.left = `${Math.random() * 100}vw`;
+                particle.style.top = `${Math.random() * 100}vh`;
+                particle.style.width = `${5 + Math.random() * 10}px`;
+                particle.style.height = particle.style.width;
+                particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
+                particles.appendChild(particle);
+            }
+        }
+        // Initialize particles
+        createParticles();
+        // Update time display
+        function updateDisplay(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            const secs = seconds % 60;
+            // Flip animation for changing numbers
+            if (hoursElement.textContent !== hours.toString().padStart(2, '0')) {
+                hoursElement.classList.add('flip');
+                setTimeout(() => {
+                    hoursElement.textContent = hours.toString().padStart(2, '0');
+                    hoursElement.classList.remove('flip');
+                }, 300);
+            } else {
+                hoursElement.textContent = hours.toString().padStart(2, '0');
+            }
+            if (minutesElement.textContent !== minutes.toString().padStart(2, '0')) {
+                minutesElement.classList.add('flip');
+                setTimeout(() => {
+                    minutesElement.textContent = minutes.toString().padStart(2, '0');
+                    minutesElement.classList.remove('flip');
+                }, 300);
+            } else {
+                minutesElement.textContent = minutes.toString().padStart(2, '0');
+            }
+            if (secondsElement.textContent !== secs.toString().padStart(2, '0')) {
+                secondsElement.classList.add('flip');
+                setTimeout(() => {
+                    secondsElement.textContent = secs.toString().padStart(2, '0');
+                    secondsElement.classList.remove('flip');
+                }, 300);
+            } else {
+                secondsElement.textContent = secs.toString().padStart(2, '0');
+            }
+            // Update progress bar
+            if (totalSeconds > 0) {
+                const progressPercent = (seconds / totalSeconds) * 100;
+                progress.style.width = `${progressPercent}%`;
+                // Change color as time runs out
+                if (progressPercent < 20) {
+                    progress.style.background = 'linear-gradient(90deg, #ff6b6b, #ff3e3e)';
+                } else if (progressPercent < 50) {
+                    progress.style.background = 'linear-gradient(90deg, #ffa36b, #ff6b6b)';
+                }
+            }
+        }
+        // Start countdown
+        function startCountdown() {
+            if (isRunning) return;
+            // Get initial values
+            const hours = parseInt(inputHours.value) || 0;
+            const minutes = parseInt(inputMinutes.value) || 0;
+            const seconds = parseInt(inputSeconds.value) || 0;
+            if (hours === 0 && minutes === 0 && seconds === 0) {
+                alert('Please set a valid time before starting the timer.');
+                return;
+            }
+            remainingSeconds = hours * 3600 + minutes * 60 + seconds;
+            totalSeconds = remainingSeconds;
+            isRunning = true;
+            updateDisplay(remainingSeconds);
+            countdownInterval = setInterval(() {
+                remainingSeconds--;
+                if (remainingSeconds < 0) {
+                    clearInterval(countdownInterval);
+                    isRunning = false;
+                    showModal();
+                    triggerConfetti();
+                    return;
+                }
+                updateDisplay(remainingSeconds);
+            }, 1000);
+        }
+        // Pause countdown
+        function pauseCountdown() {
+            if (!isRunning) return;
+            clearInterval(countdownInterval);
+            isRunning = false;
+        }
+        // Reset countdown
+        function resetCountdown() {
+            clearInterval(countdownInterval);
+            isRunning = false;
+            // Reset to initial input values
+            const hours = parseInt(inputHours.value) || 0;
+            const minutes = parseInt(inputMinutes.value) || 0;
+            const seconds = parseInt(inputSeconds.value) || 0;
+            remainingSeconds = hours * 3600 + minutes * 60 + seconds;
+            totalSeconds = remainingSeconds;
+            updateDisplay(remainingSeconds);
+            progress.style.background = 'linear-gradient(90deg, #ff6b6b, #ff8e8e)';
+        }
+        // Show modal when timer completes
+        function showModal() {
+            modal.style.display = 'flex';
+        }
+        // Close modal
+        function closeModalFunc() {
+            modal.style.display = 'none';
+        }
+        // Start new timer
+        function startNewTimer() {
+            closeModalFunc();
+            inputHours.value = '0';
+            inputMinutes.value = '10';
+            inputSeconds.value = '0';
+            resetCountdown();
+        }
+        // Trigger confetti effect
+        function triggerConfetti() {
+            const confettiElements = document.querySelectorAll('.confetti');
+            confettiElements.forEach((el, index) => {
+                setTimeout(() => {
+                    el.style.opacity = '1';
+                    el.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 200}px) rotate(${Math.random() * 360}deg)`;
+                    el.style.transition = 'all 1s ease';
+                    setTimeout(() => {
+                        el.style.opacity = '0';
+                        el.style.transform = 'translate(0, 0) rotate(0deg)';
+                        el.style.transition = 'none';
+                    }, 1000);
+                }, index * 50);
+            });
+        }
+        // Input increment/decrement functions
+        function incrementHours() {
+            const current = parseInt(inputHours.value) || 0;
+            if (current < 99) inputHours.value = current + 1;
+        }
+        function decrementHours() {
+            const current = parseInt(inputHours.value) || 0;
+            if (current > 0) inputHours.value = current - 1;
+        }
+        function incrementMinutes() {
+            const current = parseInt(inputMinutes.value) || 0;
+            if (current < 59) inputMinutes.value = current + 1;
+            else inputMinutes.value = 0;
+        }
+        function decrementMinutes() {
+            const current = parseInt(inputMinutes.value) || 0;
+            if (current > 0) inputMinutes.value = current - 1;
+            else inputMinutes.value = 59;
+        }
+        function incrementSeconds() {
+            const current = parseInt(inputSeconds.value) || 0;
+            if (current < 59) inputSeconds.value = current + 1;
+            else inputSeconds.value = 0;
+        }
+        function decrementSeconds() {
+            const current = parseInt(inputSeconds.value) || 0;
+            if (current > 0) inputSeconds.value = current - 1;
+            else inputSeconds.value = 59;
+        }
+        // Event listeners
+        startBtn.addEventListener('click', startCountdown);
+        pauseBtn.addEventListener('click', pauseCountdown);
+        resetBtn.addEventListener('click', resetCountdown);
+        closeModal.addEventListener('click', closeModalFunc);
+        newTimerBtn.addEventListener('click', startNewTimer);
+        // Initialize with default time
+        resetCountdown();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>