Spaces:

Parsaahmadi
/

anycoder-44ae4f53

Running

File size: 18,919 Bytes

eaa32a0

<!DOCTYPE html>
<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>