Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>پزشک و ساعت تعاملی | Interactive Doctor Clock</title> | |
| <style> | |
| /* Modern CSS Reset & Variables */ | |
| :root { | |
| --primary-color: #0077b6; | |
| --secondary-color: #90e0ef; | |
| --accent-color: #ff006e; | |
| --text-color: #333; | |
| --bg-gradient: linear-gradient(135deg, #e0f7fa 0%, #f4f4f9 100%); | |
| --card-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: var(--bg-gradient); | |
| color: var(--text-color); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| /* Header Section */ | |
| header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| max-width: 800px; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| color: var(--primary-color); | |
| margin-bottom: 10px; | |
| text-shadow: 2px 2px 0px rgba(0,0,0,0.1); | |
| } | |
| p { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| color: #555; | |
| } | |
| .built-with-link { | |
| margin-top: 15px; | |
| display: inline-block; | |
| font-size: 0.9rem; | |
| color: #888; | |
| text-decoration: none; | |
| } | |
| .built-with-link:hover { | |
| color: var(--primary-color); | |
| text-decoration: underline; | |
| } | |
| /* Main Container */ | |
| .app-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 30px; | |
| justify-content: center; | |
| align-items: flex-start; | |
| width: 100%; | |
| max-width: 1000px; | |
| } | |
| /* Visualization Card */ | |
| .scene-card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 30px; | |
| box-shadow: var(--card-shadow); | |
| flex: 2; | |
| min-width: 300px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| transition: transform 0.3s ease; | |
| } | |
| .scene-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| /* The SVG Scene */ | |
| .doctor-clock-svg { | |
| width: 100%; | |
| height: 400px; | |
| max-width: 500px; | |
| overflow: visible; | |
| } | |
| /* Animation Classes */ | |
| .doctor-hand-left { | |
| transform-origin: 180px 220px; | |
| animation: playLeft 2s ease-in-out infinite alternate; | |
| } | |
| .doctor-hand-right { | |
| transform-origin: 220px 220px; | |
| animation: playRight 2s ease-in-out infinite alternate; | |
| } | |
| .clock-hand-hour { | |
| transform-origin: 300px 200px; | |
| animation: clockTime 10s linear infinite; | |
| } | |
| .clock-hand-minute { | |
| transform-origin: 300px 200px; | |
| animation: clockTime 60s linear infinite; | |
| } | |
| .doctor-body { | |
| animation: breathe 3s ease-in-out infinite; | |
| } | |
| @keyframes playLeft { | |
| 0% { transform: rotate(0deg); } | |
| 50% { transform: rotate(-45deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| @keyframes playRight { | |
| 0% { transform: rotate(0deg); } | |
| 50% { transform: rotate(45deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| @keyframes clockTime { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes breathe { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.02); } | |
| } | |
| /* Controls & Description */ | |
| .controls-card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 30px; | |
| box-shadow: var(--card-shadow); | |
| flex: 1; | |
| min-width: 300px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .control-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| } | |
| button { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 50px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| width: 100%; | |
| font-family: inherit; | |
| box-shadow: 0 4px 15px rgba(0, 119, 182, 0.3); | |
| } | |
| button:hover { | |
| background-color: #023e8a; | |
| transform: scale(1.05); | |
| } | |
| button.secondary { | |
| background-color: var(--accent-color); | |
| box-shadow: 0 4px 15px rgba(255, 0, 110, 0.3); | |
| } | |
| button.secondary:hover { | |
| background-color: #d60054; | |
| } | |
| .output-box { | |
| margin-top: 20px; | |
| background-color: #f8f9fa; | |
| padding: 15px; | |
| border-radius: 10px; | |
| border: 1px dashed #ccc; | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| min-height: 80px; | |
| } | |
| .output-title { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| display: block; | |
| color: var(--accent-color); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| h1 { font-size: 2rem; } | |
| .scene-card { width: 100%; } | |
| .controls-card { width: 100%; } | |
| .doctor-clock-svg { height: 300px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>پزشک و ساعت بازی</h1> | |
| <p>این برنامه یک صحنه تعاملی از یک پزشک در حال بازی با ساعت را به تصویر میکشد. روی دکمهها کلیک کنید تا صحنه تغییر کند.</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with-link">Built with anycoder</a> | |
| </header> | |
| <div class="app-container"> | |
| <!-- Left Side: The Animation --> | |
| <div class="scene-card"> | |
| <svg class="doctor-clock-svg" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Definitions for Gradients and Filters --> | |
| <defs> | |
| <linearGradient id="doctorGradient" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#e0f7fa;stop-opacity:1" /> | |
| <stop offset="100%" style="stop-color:#81d4fa;stop-opacity:1" /> | |
| </linearGradient> | |
| <filter id="shadow"> | |
| <feDropShadow dx="2" dy="4" stdDeviation="3" flood-opacity="0.3"/> | |
| </filter> | |
| </defs> | |
| <!-- Background Wall --> | |
| <rect x="0" y="0" width="600" height="400" fill="#f0f8ff" rx="20" /> | |
| <circle cx="300" cy="200" r="160" fill="none" stroke="#e1f5fe" stroke-width="5" /> | |
| <!-- The Clock (Background) --> | |
| <g transform="translate(300, 200)"> | |
| <circle r="150" fill="white" stroke="#b0bec5" stroke-width="8" /> | |
| <circle r="145" fill="white" stroke="#cfd8dc" stroke-width="2" /> | |
| <!-- Clock Numbers --> | |
| <text x="0" y="-125" text-anchor="middle" font-family="Arial" font-size="24" font-weight="bold" fill="#37474f">12</text> | |
| <text x="130" y="5" text-anchor="middle" font-family="Arial" font-size="24" font-weight="bold" fill="#37474f">3</text> | |
| <text x="0" y="135" text-anchor="middle" font-family="Arial" font-size="24" font-weight="bold" fill="#37474f">6</text> | |
| <text x="-130" y="5" text-anchor="middle" font-family="Arial" font-size="24" font-weight="bold" fill="#37474f">9</text> | |
| <!-- Clock Dots --> | |
| <circle cx="0" cy="-140" r="3" fill="#78909c" /> | |
| <circle cx="140" cy="0" r="3" fill="#78909c" /> | |
| <circle cx="0" cy="140" r="3" fill="#78909c" /> | |
| <circle cx="-140" cy="0" r="3" fill="#78909c" /> | |
| <!-- Clock Hands --> | |
| <line x1="0" y1="0" x2="0" y2="-70" stroke="#37474f" stroke-width="6" stroke-linecap="round" class="clock-hand-hour" style="animation-duration: 12s;" /> | |
| <line x1="0" y1="0" x2="0" y2="-100" stroke="#ff006e" stroke-width="4" stroke-linecap="round" class="clock-hand-minute" style="animation-duration: 60s;" /> | |
| <circle cx="0" cy="0" r="8" fill="#ff006e" /> | |
| </g> | |
| <!-- Doctor Character Group --> | |
| <g class="doctor-body" transform="translate(200, 100)"> | |
| <!-- Legs --> | |
| <line x1="100" y1="250" x2="100" y2="350" stroke="#37474f" stroke-width="18" stroke-linecap="round" /> | |
| <line x1="180" y1="250" x2="180" y2="350" stroke="#37474f" stroke-width="18" stroke-linecap="round" /> | |
| <!-- Body (White Coat) --> | |
| <path d="M100,250 L180,250 L190,380 L90,380 Z" fill="url(#doctorGradient)" stroke="#0277bd" stroke-width="2" /> | |
| <!-- Stethoscope --> | |
| <path d="M120,260 C120,300 100,320 100,320" fill="none" stroke="#455a64" stroke-width="5" /> | |
| <path d="M160,260 C160,300 180,320 180,320" fill="none" stroke="#455a64" stroke-width="5" /> | |
| <circle cx="100" cy="330" r="10" fill="#90a4ae" /> | |
| <circle cx="180" cy="330" r="10" fill="#90a4ae" /> | |
| <!-- Head --> | |
| <circle cx="140" cy="200" r="45" fill="#ffccbc" stroke="#d7ccc8" stroke-width="2" /> | |
| <!-- Face Details --> | |
| <circle cx="125" cy="195" r="4" fill="#333" /> <!-- Left Eye --> | |
| <circle cx="155" cy="195" r="4" fill="#333" /> <!-- Right Eye --> | |
| <path d="M125,210 Q140,220 155,210" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" /> <!-- Smile --> | |
| <!-- Medical Cap --> | |
| <path d="M100,180 Q140,140 180,180 L180,170 Q140,130 100,170 Z" fill="white" stroke="#b0bec5" stroke-width="1" /> | |
| <rect x="100" y="170" width="80" height="10" fill="white" /> | |
| <!-- Arms (Animated) --> | |
| <!-- Left Arm (Playing with clock) --> | |
| <g class="doctor-hand-left"> | |
| <line x1="100" y1="250" x2="50" y2="200" stroke="#0277bd" stroke-width="16" stroke-linecap="round" /> | |
| <circle cx="50" cy="200" r="10" fill="#ffccbc" /> <!-- Hand --> | |
| </g> | |
| <!-- Right Arm (Playing with clock) --> | |
| <g class="doctor-hand-right"> | |
| <line x1="180" y1="250" x2="230" y2="200" stroke="#0277bd" stroke-width="16" stroke-linecap="round" /> | |
| <circle cx="230" cy="200" r="10" fill="#ffccbc" /> <!-- Hand --> | |
| </g> | |
| </g> | |
| <!-- Speech Bubble --> | |
| <path d="M420,100 L480,80 L500,120 L480,160 L420,160 Z" fill="#ffffff" stroke="#b0bec5" stroke-width="2" /> | |
| <text x="430" y="135" font-family="Arial" font-size="20" fill="#555" text-anchor="middle">دکتر بازی با ساعت!</text> | |
| </svg> | |
| <div style="margin-top: 20px; text-align: center;"> | |
| <button onclick="resetAnimation()">بازنشانی صحنه</button> | |
| </div> | |
| </div> | |
| <!-- Right Side: Controls & Info --> | |
| <div class="controls-card"> | |
| <h2 style="margin-bottom: 20px; color: var(--primary-color);">کنترلها و ایجاد صحنه</h2> | |
| <div class="control-group"> | |
| <label>تغییر حالت پزشک:</label> | |
| <button onclick="changeDoctorState('serious')" class="secondary">پزشک جدی (کاری)</button> | |
| <br><br> | |
| <button onclick="changeDoctorState('playful')">پزشک بازیگوش (بازی با ساعت)</button> | |
| </div> | |
| <div class="control-group"> | |
| <label>تغییر ساعت:</label> | |
| <button onclick="changeTime('morning')">صبح (ساعت 8)</button> | |
| <button onclick="changeTime('afternoon')">ظهر (ساعت 13)</button> | |
| <button onclick="changeTime('night')">شب (ساعت 22)</button> | |
| </div> | |
| <div class="control-group"> | |
| <label>تولید توضیحات تصویر (Prompt):</label> | |
| <p style="font-size: 0.9rem; color: #666;">این بخش یک متن توصیفی برای هوش مصنوعی تولید میکند:</p> | |
| <button onclick="generatePrompt()">تولید Prompt فارسی</button> | |
| <div class="output-box"> | |
| <span class="output-title">خروجی:</span> | |
| <span id="promptOutput">برای شروع یک گزینه را انتخاب کنید...</span> | |
| </div> | |
| </div> | |
| <div class="control-group" style="margin-top: auto;"> | |
| <button onclick="alert('این یک نمایشگر تعاملی HTML است. از کد منبع برای ساختن پروژه خود استفاده کنید!')" style="background-color: #555;">درباره این برنامه</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // JavaScript Logic for Interactivity | |
| // Get SVG elements | |
| const doctorBody = document.querySelector('.doctor-body'); | |
| const leftHand = document.querySelector('.doctor-hand-left'); | |
| const rightHand = document.querySelector('.doctor-hand-right'); | |
| const clockHour = document.querySelector('.clock-hand-hour'); | |
| const clockMinute = document.querySelector('.clock-hand-minute'); | |
| const promptOutput = document.getElementById('promptOutput'); | |
| // Reset Animation | |
| function resetAnimation() { | |
| // Toggle class to restart animation | |
| leftHand.classList.remove('doctor-hand-left'); | |
| rightHand.classList.remove('doctor-hand-right'); | |
| void leftHand.offsetWidth; // Trigger reflow | |
| leftHand.classList.add('doctor-hand-left'); | |
| rightHand.classList.add('doctor-hand-right'); | |
| promptOutput.innerHTML = "انیمیشن بازنشانی شد. پزشک دوباره در حال بازی با ساعت است."; | |
| } | |
| // Change Doctor State (CSS Transform) | |
| function changeDoctorState(state) { | |
| if (state === 'serious') { | |
| // Make doctor look straight, stop playing | |
| doctorBody.style.transform = "translateX(200px) translateY(100px) scale(1)"; // Reset specific transform if needed, but mostly using CSS classes | |
| leftHand.style.animation = "none"; | |
| rightHand.style.animation = "none"; | |
| // Add a "working" look | |
| promptOutput.innerHTML = "تغییر حالت: پزشک در حال کار و مشاهده پرونده است (دستها روی لگن)."; | |
| } else { | |
| // Playful state (Default) | |
| leftHand.style.animation = "playLeft 2s ease-in-out infinite alternate"; | |
| rightHand.style.animation = "playRight 2s ease-in-out infinite alternate"; | |
| promptOutput.innerHTML = "تغییر حالت: پزشک در حال بازی و سرگرمی با ساعت دیواری است."; | |
| } | |
| } | |
| // Change Clock Time (Rotate hands) | |
| function changeTime(time) { | |
| let hourDeg = 0; | |
| let minDeg = 0; | |
| if (time === 'morning') { | |
| hourDeg = 240; // 8 * 30 | |
| minDeg = 0; | |
| promptOutput.innerHTML = "ساعت تنظیم شد: صبح (۸:۰۰). پزشک به زودی بیماران را میبیند."; | |
| } else if (time === 'afternoon') { | |
| hourDeg = 390; // 13 * 30 (or 1 * 30 + 360) | |
| minDeg = 0; | |
| promptOutput.innerHTML = "ساعت تنظیم شد: ظهر (۱۳:۰۰). پزشک در حال استراحت نهار است."; | |
| } else if (time === 'night') { | |
| hourDeg = 660; // 22 * 30 | |
| minDeg = 0; | |
| promptOutput.innerHTML = "ساعت تنظیم شد: شب (۲۲:۰۰). پزشک در حال بررسی ساعت برای شیفت شب است."; | |
| } | |
| // Apply rotation | |
| clockHour.style.transform = `rotate(${hourDeg}deg)`; | |
| clockMinute.style.transform = `rotate(${minDeg}deg)`; | |
| // Update animation duration to stop infinite rotation temporarily | |
| clockHour.style.animationDuration = "0s"; | |
| clockMinute.style.animationDuration = "0s"; | |
| } | |
| // Generate Prompt | |
| function generatePrompt() { | |
| const prompt = "یک تصویر خندهدار از یک پزشک با لباس مخصوص و کلاه، که در حال بازی کردن با یک ساعت دیواری قدیمی است. پزشک دستهایش را به سمت ساعت درازا کرده و با لبخند نگاه میکند. پسزمینه یک اتاق پزشکی تمیز و روشن است. سبک وکتور، رنگهای شاد و روشن."; | |
| promptOutput.innerHTML = prompt; | |
| // Simple typing effect | |
| promptOutput.style.opacity = 0; | |
| setTimeout(() => { | |
| promptOutput.style.transition = "opacity 0.5s"; | |
| promptOutput.style.opacity = 1; | |
| }, 50); | |
| } | |
| // Initialize default state | |
| window.onload = function() { | |
| changeDoctorState('playful'); | |
| changeTime('morning'); | |
| generatePrompt(); | |
| }; | |
| </script> | |
| </body> | |
| </html> |