Hugging Face's logo

Spaces:
TheLoop404
/
stop-phone
Running

App Files Community
stop-phone / index.html
TheLoop404's picture
TheLoop404
ุงุตู†ุน ุชุทุจูŠู‚ ู„ู„ุฌูˆุงู„ ูŠู‚ูู„ ุฌูˆุงู„ ูƒุงู…ู„ ู„ู…ุฏุฉ ุณุงุนุฉ, ูˆ ููŠ ุฎุงุตูŠุฉ ุชุฎุตูŠุต ู„ู„ูˆู‚ุช ูˆ ููŠ ู„ุบุฉ ุนุฑุจูŠ ูˆ ููŠ ูˆุถุน ู„ูŠู„, ูˆููŠ ู…ูˆุงู‚ุช ู„ุชุนุฑู ูƒู… ูุงุถู„ ู…ู† ูˆู‚ุช - Initial Deployment
274138e verified
raw
history blame contribute delete
14.4 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script>
 tailwind.config = {
 darkMode: 'class',
 theme: {
 extend: {
 colors: {
 primary: '#4F46E5',
 dark: '#1E293B',
 darker: '#0F172A'
 }
 }
 }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
 body {
 font-family: 'Tajawal', sans-serif;
 }
 .progress-ring__circle {
 transition: stroke-dashoffset 0.5s;
 transform: rotate(-90deg);
 transform-origin: 50% 50%;
 }
 .flip-animation {
 animation: flip 0.5s ease-out;
 }
 @keyframes flip {
 0% { transform: rotateX(0deg); }
 50% { transform: rotateX(90deg); }
 100% { transform: rotateX(0deg); }
 }
 </style>
</head>
<body class="bg-gray-50 dark:bg-darker text-gray-800 dark:text-gray-200 min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <!-- Header -->
 <header class="flex justify-between items-center mb-8">
 <h1 class="text-2xl font-bold text-primary">ู‚ูู„ ุงู„ุฌูˆุงู„ ุงู„ุฐูƒูŠ</h1>
 <button id="themeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-dark">
 <i data-feather="moon" class="text-gray-700 dark:text-yellow-300"></i>
 </button>
 </header>
<!-- Timer Display -->
 <div class="bg-white dark:bg-dark rounded-xl shadow-lg p-6 mb-8 text-center">
 <div class="relative w-64 h-64 mx-auto mb-6">
 <svg class="w-full h-full" viewBox="0 0 100 100">
 <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"/>
 <circle class="progress-ring__circle text-primary" stroke-width="8" stroke-dasharray="251.2" stroke-dashoffset="0" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"/>
 </svg>
 <div class="absolute inset-0 flex flex-col items-center justify-center">
 <div id="timeDisplay" class="text-4xl font-bold">01:00:00</div>
 <div id="statusText" class="text-gray-500 dark:text-gray-400">ุฌุงู‡ุฒ ู„ู„ุจุฏุก</div>
 </div>
 </div>
<div class="flex justify-center space-x-4 mb-6">
 <button id="startBtn" class="bg-primary hover:bg-indigo-700 text-white px-6 py-2 rounded-full font-medium transition">
 ุจุฏุก ุงู„ู‚ูู„
 </button>
 <button id="stopBtn" class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-full font-medium transition hidden">
 ุฅูŠู‚ุงู
 </button>
 </div>
 </div>
<!-- Quick Presets -->
 <div class="mb-8">
 <h2 class="text-xl font-semibold mb-4">ูˆู‚ุช ุณุฑูŠุน</h2>
 <div class="grid grid-cols-3 gap-3">
 <button data-minutes="30" class="quick-time bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 py-3 rounded-lg transition">30 ุฏู‚ูŠู‚ุฉ</button>
 <button data-minutes="60" class="quick-time bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 py-3 rounded-lg transition">1 ุณุงุนุฉ</button>
 <button data-minutes="120" class="quick-time bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 py-3 rounded-lg transition">2 ุณุงุนุฉ</button>
 </div>
 </div>
<!-- Custom Time -->
 <div class="mb-8">
 <h2 class="text-xl font-semibold mb-4">ุชุฎุตูŠุต ุงู„ูˆู‚ุช</h2>
 <div class="bg-white dark:bg-dark rounded-xl shadow-lg p-4">
 <div class="flex items-center justify-between mb-4">
 <span class="font-medium">ุงู„ุณุงุนุงุช:</span>
 <div class="flex items-center">
 <button id="hourDec" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-l-lg">-</button>
 <span id="hourValue" class="px-4 py-1 bg-gray-50 dark:bg-gray-600">1</span>
 <button id="hourInc" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-r-lg">+</button>
 </div>
 </div>
 <div class="flex items-center justify-between">
 <span class="font-medium">ุงู„ุฏู‚ุงุฆู‚:</span>
 <div class="flex items-center">
 <button id="minuteDec" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-l-lg">-</button>
 <span id="minuteValue" class="px-4 py-1 bg-gray-50 dark:bg-gray-600">0</span>
 <button id="minuteInc" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-r-lg">+</button>
 </div>
 </div>
 </div>
 </div>
<!-- History -->
 <div>
 <h2 class="text-xl font-semibold mb-4">ุณุฌู„ ุงู„ุฃูˆู‚ุงุช</h2>
 <div class="bg-white dark:bg-dark rounded-xl shadow-lg overflow-hidden">
 <div class="divide-y divide-gray-200 dark:divide-gray-700">
 <div class="p-4 flex justify-between items-center">
 <div>
 <div class="font-medium">ู‚ูู„ ูƒุงู…ู„</div>
 <div class="text-sm text-gray-500 dark:text-gray-400">ุงู„ูŠูˆู… 10:30 ุต</div>
 </div>
 <div class="text-primary font-bold">45 ุฏู‚ูŠู‚ุฉ</div>
 </div>
 <div class="p-4 flex justify-between items-center">
 <div>
 <div class="font-medium">ู‚ูู„ ูƒุงู…ู„</div>
 <div class="text-sm text-gray-500 dark:text-gray-400">ุฃู…ุณ 3:15 ู…</div>
 </div>
 <div class="text-primary font-bold">1 ุณุงุนุฉ</div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Lock Screen Modal -->
 <div id="lockScreen" class="fixed inset-0 bg-darker text-white z-50 flex flex-col items-center justify-center hidden">
 <div class="text-center mb-8">
 <i data-feather="lock" class="w-16 h-16 mx-auto mb-4 text-red-500"></i>
 <h1 class="text-3xl font-bold mb-2">ุงู„ุฌูˆุงู„ ู…ู‚ูู„</h1>
 <div id="lockTimeDisplay" class="text-5xl font-mono font-bold mb-4">01:00:00</div>
 <p class="text-gray-400">ุณูŠุชู… ูุชุญ ุงู„ู‚ูู„ ุชู„ู‚ุงุฆูŠุงู‹ ุนู†ุฏ ุงู†ุชู‡ุงุก ุงู„ูˆู‚ุช</p>
 </div>
 <button id="emergencyBtn" class="px-6 py-2 bg-red-500 hover:bg-red-600 rounded-full font-medium">
 ูุชุญ ุงู„ุทูˆุงุฑุฆ (3 ู…ุญุงูˆู„ุงุช)
 </button>
 </div>
<script>
 feather.replace();
// Theme Toggle
 const themeToggle = document.getElementById('themeToggle');
 themeToggle.addEventListener('click', () => {
 document.documentElement.classList.toggle('dark');
 const icon = themeToggle.querySelector('i');
 if (document.documentElement.classList.contains('dark')) {
 icon.setAttribute('data-feather', 'sun');
 } else {
 icon.setAttribute('data-feather', 'moon');
 }
 feather.replace();
 });
 // Timer Logic
 let timer;
 let totalSeconds = 3600; // 1 hour default
 let isRunning = false;
 const timeDisplay = document.getElementById('timeDisplay');
 const lockTimeDisplay = document.getElementById('lockTimeDisplay');
 const statusText = document.getElementById('statusText');
 const startBtn = document.getElementById('startBtn');
 const stopBtn = document.getElementById('stopBtn');
 const lockScreen = document.getElementById('lockScreen');
 const hourValue = document.getElementById('hourValue');
 const minuteValue = document.getElementById('minuteValue');
 const circle = document.querySelector('.progress-ring__circle');
 const circumference = 2 * Math.PI * 40;
 // Set initial progress ring
 circle.style.strokeDasharray = circumference;
 circle.style.strokeDashoffset = 0;
 // Format time
 function formatTime(seconds) {
 const hrs = Math.floor(seconds / 3600);
 const mins = Math.floor((seconds % 3600) / 60);
 const secs = seconds % 60;
 return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
 }
 // Update timer display
 function updateDisplay() {
 timeDisplay.textContent = formatTime(totalSeconds);
 lockTimeDisplay.textContent = formatTime(totalSeconds);
// Update progress ring
 const offset = circumference - (totalSeconds / (totalSeconds + 1)) * circumference;
 circle.style.strokeDashoffset = offset;
 }
 // Start timer
 function startTimer() {
 if (isRunning) return;
isRunning = true;
 startBtn.classList.add('hidden');
 stopBtn.classList.remove('hidden');
 statusText.textContent = 'ุฌุงุฑูŠ ุงู„ุชุดุบูŠู„...';
// Show lock screen (simulating full phone lock)
 lockScreen.classList.remove('hidden');
 document.body.style.overflow = 'hidden';
timer = setInterval(() => {
 if (totalSeconds <= 0) {
 clearInterval(timer);
 isRunning = false;
 statusText.textContent = 'ุชู… ุงู„ุงู†ุชู‡ุงุก!';
 lockScreen.classList.add('hidden');
 document.body.style.overflow = 'auto';
// Play completion sound (simulated)
 const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
 audio.play();
return;
 }
totalSeconds--;
 updateDisplay();
// Add animation every minute
 if (totalSeconds % 60 === 0) {
 timeDisplay.classList.add('flip-animation');
 setTimeout(() => {
 timeDisplay.classList.remove('flip-animation');
 }, 500);
 }
 }, 1000);
 }
 // Stop timer
 function stopTimer() {
 clearInterval(timer);
 isRunning = false;
 startBtn.classList.remove('hidden');
 stopBtn.classList.add('hidden');
 statusText.textContent = 'ู…ุชูˆู‚ู';
 lockScreen.classList.add('hidden');
 document.body.style.overflow = 'auto';
 }
 // Quick time buttons
 document.querySelectorAll('.quick-time').forEach(button => {
 button.addEventListener('click', () => {
 const minutes = parseInt(button.getAttribute('data-minutes'));
 totalSeconds = minutes * 60;
 hourValue.textContent = Math.floor(minutes / 60);
 minuteValue.textContent = minutes % 60;
 updateDisplay();
 });
 });
 // Custom time controls
 document.getElementById('hourInc').addEventListener('click', () => {
 let hours = parseInt(hourValue.textContent);
 hours = Math.min(23, hours + 1);
 hourValue.textContent = hours;
 updateTotalSeconds();
 });
 document.getElementById('hourDec').addEventListener('click', () => {
 let hours = parseInt(hourValue.textContent);
 hours = Math.max(0, hours - 1);
 hourValue.textContent = hours;
 updateTotalSeconds();
 });
 document.getElementById('minuteInc').addEventListener('click', () => {
 let minutes = parseInt(minuteValue.textContent);
 minutes = (minutes + 5) % 60;
 minuteValue.textContent = minutes;
 updateTotalSeconds();
 });
 document.getElementById('minuteDec').addEventListener('click', () => {
 let minutes = parseInt(minuteValue.textContent);
 minutes = (minutes - 5 + 60) % 60;
 minuteValue.textContent = minutes;
 updateTotalSeconds();
 });
 function updateTotalSeconds() {
 const hours = parseInt(hourValue.textContent);
 const minutes = parseInt(minuteValue.textContent);
 totalSeconds = hours * 3600 + minutes * 60;
 updateDisplay();
 }
 // Button events
 startBtn.addEventListener('click', startTimer);
 stopBtn.addEventListener('click', stopTimer);
 // Emergency button (simulated)
 let emergencyAttempts = 3;
 document.getElementById('emergencyBtn').addEventListener('click', () => {
 emergencyAttempts--;
 if (emergencyAttempts <= 0) {
 alert('ู„ู‚ุฏ ุงุณุชู†ูุฐุช ุฌู…ูŠุน ู…ุญุงูˆู„ุงุช ุงู„ุทูˆุงุฑุฆ! ูŠุฑุฌู‰ ุงู„ุงู†ุชุธุงุฑ ุญุชู‰ ุงู†ุชู‡ุงุก ุงู„ูˆู‚ุช.');
 return;
 }
 alert(`ู…ุญุงูˆู„ุฉ ุทูˆุงุฑุฆ! ู„ุฏูŠูƒ ${emergencyAttempts} ู…ุญุงูˆู„ุงุช ู…ุชุจู‚ูŠุฉ. ู‡ุฐู‡ ุงู„ู…ูŠุฒุฉ ุณุชุญุชุงุฌ ุฅู„ู‰ ูƒู„ู…ุฉ ู…ุฑูˆุฑ ููŠ ุงู„ุชุทุจูŠู‚ ุงู„ูุนู„ูŠ.`);
 });
 // Initialize
 updateDisplay();
 </script>
</body>
</html>