تطبيقات

[Servicesgeneral]

html_content = """

<title>أذكار اليوم</title> <style> :root { --morning-primary: #E8A838; --morning-secondary: #F4D03F; --morning-bg: linear-gradient(135deg, #FFF8E7 0%, #FFEFD5 50%, #FFE4B5 100%); --morning-card: rgba(255, 255, 255, 0.85); --morning-accent: #D4881A;

        --evening-primary: #4A5568;
        --evening-secondary: #718096;
        --evening-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        --evening-card: rgba(30, 41, 59, 0.85);
        --evening-accent: #63B3ED;
        
        --success: #48BB78;
        --danger: #F56565;
        --white: #ffffff;
        --shadow: 0 10px 40px rgba(0,0,0,0.1);
        --shadow-hover: 0 20px 60px rgba(0,0,0,0.15);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Noto Sans Arabic', 'Noto Naskh Arabic', sans-serif;
        min-height: 100vh;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-x: hidden;
    }

    body.morning-mode {
        background: var(--morning-bg);
        color: #2D3748;
    }

    body.evening-mode {
        background: var(--evening-bg);
        color: #E2E8F0;
    }

    /* Animated Background */
    .bg-animation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }

    .bg-animation .particle {
        position: absolute;
        border-radius: 50%;
        opacity: 0.3;
        animation: float 15s infinite ease-in-out;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
        50% { transform: translateY(-100px) rotate(180deg); opacity: 0.6; }
    }

    /* Header */
    .header {
        position: relative;
        z-index: 10;
        padding: 2rem 1.5rem 1rem;
        text-align: center;
    }

    .header h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, var(--morning-primary), var(--morning-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    body.evening-mode .header h1 {
        background: linear-gradient(135deg, var(--evening-accent), #A3BFFA);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .header .date-display {
        font-size: 1rem;
        opacity: 0.7;
        margin-bottom: 1.5rem;
    }

    /* Mode Toggle */
    .mode-toggle {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;
        position: relative;
        z-index: 10;
    }

    .mode-btn {
        padding: 0.75rem 2rem;
        border: none;
        border-radius: 50px;
        font-family: inherit;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .mode-btn.morning {
        background: linear-gradient(135deg, var(--morning-primary), var(--morning-secondary));
        color: white;
        box-shadow: 0 4px 15px rgba(232, 168, 56, 0.4);
    }

    .mode-btn.evening {
        background: linear-gradient(135deg, var(--evening-primary), var(--evening-secondary));
        color: white;
        box-shadow: 0 4px 15px rgba(74, 85, 104, 0.4);
    }

    .mode-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }

    .mode-btn.active {
        transform: scale(1.05);
        box-shadow: 0 0 0 3px rgba(255,255,255,0.3), 0 8px 25px rgba(0,0,0,0.2);
    }

    .mode-btn i {
        margin-left: 0.5rem;
    }

    /* Progress Bar */
    .progress-container {
        max-width: 600px;
        margin: 0 auto 2rem;
        padding: 0 1.5rem;
        position: relative;
        z-index: 10;
    }

    .progress-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .progress-bar {
        width: 100%;
        height: 8px;
        background: rgba(0,0,0,0.1);
        border-radius: 10px;
        overflow: hidden;
    }

    body.evening-mode .progress-bar {
        background: rgba(255,255,255,0.1);
    }

    .progress-fill {
        height: 100%;
        border-radius: 10px;
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        background: linear-gradient(90deg, var(--morning-primary), var(--morning-secondary));
    }

    body.evening-mode .progress-fill {
        background: linear-gradient(90deg, var(--evening-accent), #A3BFFA);
    }

    /* Azkar Container */
    .azkar-container {
        max-width: 700px;
        margin: 0 auto;
        padding: 0 1rem 3rem;
        position: relative;
        z-index: 10;
    }

    /* Azkar Card */
    .azkar-card {
        background: var(--morning-card);
        border-radius: 20px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.5);
    }

    body.evening-mode .azkar-card {
        background: var(--evening-card);
        border: 1px solid rgba(255,255,255,0.1);
    }

    .azkar-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    .azkar-card.completed {
        opacity: 0.6;
        transform: scale(0.98);
    }

    .azkar-card.completed .azkar-text {
        text-decoration: line-through;
        opacity: 0.5;
    }

    .card-number {
        position: absolute;
        top: 1rem;
        left: 1rem;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.9rem;
        background: linear-gradient(135deg, var(--morning-primary), var(--morning-secondary));
        color: white;
        box-shadow: 0 2px 10px rgba(232, 168, 56, 0.3);
    }

    body.evening-mode .card-number {
        background: linear-gradient(135deg, var(--evening-accent), #A3BFFA);
        box-shadow: 0 2px 10px rgba(99, 179, 237, 0.3);
    }

    .azkar-text {
        font-family: 'Noto Naskh Arabic', serif;
        font-size: 1.3rem;
        line-height: 2;
        text-align: center;
        margin: 1rem 0;
        font-weight: 500;
    }

    .azkar-reference {
        text-align: center;
        font-size: 0.85rem;
        opacity: 0.6;
        margin-bottom: 1rem;
        font-style: italic;
    }

    .azkar-count {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(232, 168, 56, 0.15);
        padding: 0.4rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--morning-accent);
        margin-bottom: 1rem;
    }

    body.evening-mode .azkar-count {
        background: rgba(99, 179, 237, 0.15);
        color: var(--evening-accent);
    }

    /* Counter Section */
    .counter-section {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 1rem;
    }

    .counter-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--morning-primary), var(--morning-secondary));
        color: white;
        box-shadow: 0 4px 15px rgba(232, 168, 56, 0.3);
    }

    body.evening-mode .counter-btn {
        background: linear-gradient(135deg, var(--evening-accent), #A3BFFA);
        box-shadow: 0 4px 15px rgba(99, 179, 237, 0.3);
    }

    .counter-btn:hover {
        transform: scale(1.1);
    }

    .counter-btn:active {
        transform: scale(0.95);
    }

    .counter-btn.minus {
        background: linear-gradient(135deg, #CBD5E0, #A0AEC0);
        box-shadow: 0 4px 15px rgba(160, 174, 192, 0.3);
    }

    .counter-display {
        font-size: 1.5rem;
        font-weight: 700;
        min-width: 60px;
        text-align: center;
        font-family: 'Noto Sans Arabic', sans-serif;
    }

    .complete-btn {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid var(--morning-primary);
        border-radius: 12px;
        background: transparent;
        color: var(--morning-primary);
        font-family: inherit;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 1rem;
    }

    body.evening-mode .complete-btn {
        border-color: var(--evening-accent);
        color: var(--evening-accent);
    }

    .complete-btn:hover {
        background: var(--morning-primary);
        color: white;
    }

    body.evening-mode .complete-btn:hover {
        background: var(--evening-accent);
        color: #1a202c;
    }

    .complete-btn.completed-btn {
        background: var(--success);
        border-color: var(--success);
        color: white;
    }

    /* Reset Button */
    .reset-section {
        text-align: center;
        margin-top: 2rem;
        padding: 0 1.5rem;
        position: relative;
        z-index: 10;
    }

    .reset-btn {
        padding: 0.75rem 2rem;
        border: 2px solid var(--danger);
        border-radius: 50px;
        background: transparent;
        color: var(--danger);
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .reset-btn:hover {
        background: var(--danger);
        color: white;
    }

    /* Scroll to top */
    .scroll-top {
        position: fixed;
        bottom: 2rem;
        left: 2rem;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--morning-primary), var(--morning-secondary));
        color: white;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
        opacity: 0;
        visibility: hidden;
        z-index: 100;
    }

    body.evening-mode .scroll-top {
        background: linear-gradient(135deg, var(--evening-accent), #A3BFFA);
    }

    .scroll-top.visible {
        opacity: 1;
        visibility: visible;
    }

    .scroll-top:hover {
        transform: translateY(-3px);
    }

    /* Animations */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .azkar-card {
        animation: slideIn 0.5s ease forwards;
    }

    .azkar-card:nth-child(1) { animation-delay: 0.05s; }
    .azkar-card:nth-child(2) { animation-delay: 0.1s; }
    .azkar-card:nth-child(3) { animation-delay: 0.15s; }
    .azkar-card:nth-child(4) { animation-delay: 0.2s; }
    .azkar-card:nth-child(5) { animation-delay: 0.25s; }
    .azkar-card:nth-child(6) { animation-delay: 0.3s; }
    .azkar-card:nth-child(7) { animation-delay: 0.35s; }
    .azkar-card:nth-child(8) { animation-delay: 0.4s; }
    .azkar-card:nth-child(9) { animation-delay: 0.45s; }
    .azkar-card:nth-child(10) { animation-delay: 0.5s; }
    .azkar-card:nth-child(11) { animation-delay: 0.55s; }
    .azkar-card:nth-child(12) { animation-delay: 0.6s; }
    .azkar-card:nth-child(13) { animation-delay: 0.65s; }
    .azkar-card:nth-child(14) { animation-delay: 0.7s; }
    .azkar-card:nth-child(15) { animation-delay: 0.75s; }

    /* Confetti Animation */
    .confetti {
        position: fixed;
        width: 10px;
        height: 10px;
        top: -10px;
        animation: confetti-fall 3s ease-out forwards;
        z-index: 1000;
        pointer-events: none;
    }

    @keyframes confetti-fall {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .header h1 {
            font-size: 2rem;
        }
        .azkar-text {
            font-size: 1.1rem;
        }
        .mode-btn {
            padding: 0.6rem 1.5rem;
            font-size: 0.9rem;
        }
    }

    /* Notification */
    .notification {
        position: fixed;
        top: 2rem;
        left: 50%;
        transform: translateX(-50%) translateY(-100px);
        background: var(--success);
        color: white;
        padding: 1rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        box-shadow: 0 10px 30px rgba(72, 187, 120, 0.4);
        z-index: 1000;
        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .notification.show {
        transform: translateX(-50%) translateY(0);
    }

    /* Tasbih beads visualization */
    .tasbih-beads {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin-top: 0.5rem;
        flex-wrap: wrap;
    }

    .bead {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    body.evening-mode .bead {
        background: rgba(255,255,255,0.1);
    }

    .bead.active {
        background: linear-gradient(135deg, var(--morning-primary), var(--morning-secondary));
        transform: scale(1.3);
        box-shadow: 0 0 10px rgba(232, 168, 56, 0.5);
    }

    body.evening-mode .bead.active {
        background: linear-gradient(135deg, var(--evening-accent), #A3BFFA);
        box-shadow: 0 0 10px rgba(99, 179, 237, 0.5);
    }
</style>

<!-- Notification -->
<div class="notification" id="notification">
    <i class="fas fa-check-circle"></i> تم إكمال جميع الأذكار! بارك الله فيك
</div>

<!-- Header -->
<header class="header">
    <h1><i class="fas fa-mosque"></i> أذكار اليوم</h1>
    <div class="date-display" id="dateDisplay"></div>
</header>

<!-- Mode Toggle -->
<div class="mode-toggle">
    <button class="mode-btn morning active" onclick="switchMode('morning')">
        <i class="fas fa-sun"></i> أذكار الصباح
    </button>
    <button class="mode-btn evening" onclick="switchMode('evening')">
        <i class="fas fa-moon"></i> أذكار المساء
    </button>
</div>

<!-- Progress -->
<div class="progress-container">
    <div class="progress-info">
        <span id="progressText">0 من 15</span>
        <span id="progressPercent">0%</span>
    </div>
    <div class="progress-bar">
        <div class="progress-fill" id="progressFill" style="width: 0%"></div>
    </div>
</div>

<!-- Azkar Container -->
<div class="azkar-container" id="azkarContainer"></div>

<!-- Reset Section -->
<div class="reset-section">
    <button class="reset-btn" onclick="resetAll()">
        <i class="fas fa-redo"></i> إعادة البدء
    </button>
</div>

<!-- Scroll to Top -->
<button class="scroll-top" id="scrollTop" onclick="scrollToTop()">
    <i class="fas fa-arrow-up"></i>
</button>

<script>
    // Azkar Data
    const morningAzkar = [
        {
            text: "أَصْبَحْنَا وَأَصْبَحَ الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ، لَا إِلَهَ إِلَّا اللَّهُ وَحْدَهُ لَا شَرِيكَ لَهُ، لَهُ الْمُلْكُ وَلَهُ الْحَمْدُ، وَهُوَ عَلَى كُلِّ شَيْءٍ قَدِيرٌ",
            reference: "مسلم",
            count: 1
        },
        {
            text: "اللَّهُمَّ بِكَ أَصْبَحْنَا، وَبِكَ أَمْسَيْنَا، وَبِكَ نَحْيَا، وَبِكَ نَمُوتُ، وَإِلَيْكَ النُّشُورُ",
            reference: "الترمذي",
            count: 1
        },
        {
            text: "اللَّهُمَّ مَا أَصْبَحَ بِي مِنْ نِعْمَةٍ أَوْ بِأَحَدٍ مِنْ خَلْقِكَ فَمِنْكَ وَحْدَكَ لَا شَرِيكَ لَكَ، فَلَكَ الْحَمْدُ وَلَكَ الشُّكْرُ",
            reference: "أبو داود",
            count: 1
        },
        {
            text: "اللَّهُمَّ إِنِّي أَسْأَلُكَ عِلْمًا نَافِعًا، وَرِزْقًا طَيِّبًا، وَعَمَلًا مُتَقَبَّلًا",
            reference: "ابن ماجه",
            count: 1
        },
        {
            text: "أَعُوذُ بِاللَّهِ مِنَ الشَّيْطَانِ الرَّجِيمِ",
            reference: "البخاري",
            count: 1
        },
        {
            text: "بِسْمِ اللَّهِ الَّذِي لَا يَضُرُّ مَعَ اسْمِهِ شَيْءٌ فِي الْأَرْضِ وَلَا فِي السَّمَاءِ، وَهُوَ السَّمِيعُ الْعَلِيمُ",
            reference: "الترمذي",
            count: 3
        },
        {
            text: "رَضِيتُ بِاللَّهِ رَبًّا، وَبِالْإِسْلَامِ دِينًا، وَبِمُحَمَّدٍ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ نَبِيًّا",
            reference: "أبو داود",
            count: 3
        },
        {
            text: "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ: عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ، وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ",
            reference: "مسلم",
            count: 3
        },
        {
            text: "حَسْبُنَا اللَّهُ وَنِعْمَ الْوَكِيلُ",
            reference: "البخاري",
            count: 7
        },
        {
            text: "اللَّهُمَّ إِنِّي أَسْأَلُكَ الْعَافِيَةَ فِي الدُّنْيَا وَالْآخِرَةِ",
            reference: "ابن ماجه",
            count: 1
        },
        {
            text: "اللَّهُمَّ صَلِّ وَسَلِّمْ عَلَى نَبِيِّنَا مُحَمَّدٍ",
            reference: "البخاري",
            count: 10
        },
        {
            text: "أَسْتَغْفِرُ اللَّهَ الْعَظِيمَ الَّذِي لَا إِلَهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ وَأَتُوبُ إِلَيْهِ",
            reference: "أبو داود",
            count: 3
        },
        {
            text: "اللَّهُمَّ إِنِّي أَعُوذُ بِكَ مِنَ الْهَمِّ وَالْحَزَنِ، وَالْعَجْزِ وَالْكَسَلِ، وَالْبُخْلِ وَالْجُبْنِ، وَضَلَعِ الدَّيْنِ وَغَلَبَةِ الرِّجَالِ",
            reference: "البخاري",
            count: 1
        },
        {
            text: "يَا حَيُّ يَا قَيُّومُ، بِرَحْمَتِكَ أَسْتَغِيثُ، أَصْلِحْ لِي شَأْنِي كُلَّهُ، وَلَا تَكِلْنِي إِلَى نَفْسِي طَرْفَةَ عَيْنٍ",
            reference: "الحاكم",
            count: 1
        },
        {
            text: "سُبْحَانَ اللَّهِ وَالْحَمْدُ لِلَّهِ وَلَا إِلَهَ إِلَّا اللَّهُ وَاللَّهُ أَكْبَرُ",
            reference: "مسلم",
            count: 100
        }
    ];

    const eveningAzkar = [
        {
            text: "أَمْسَيْنَا وَأَمْسَى الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ، لَا إِلَهَ إِلَّا اللَّهُ وَحْدَهُ لَا شَرِيكَ لَهُ، لَهُ الْمُلْكُ وَلَهُ الْحَمْدُ، وَهُوَ عَلَى كُلِّ شَيْءٍ قَدِيرٌ",
            reference: "مسلم",
            count: 1
        },
        {
            text: "اللَّهُمَّ بِكَ أَمْسَيْنَا، وَبِكَ أَصْبَحْنَا، وَبِكَ نَحْيَا، وَبِكَ نَمُوتُ، وَإِلَيْكَ الْمَصِيرُ",
            reference: "الترمذي",
            count: 1
        },
        {
            text: "اللَّهُمَّ مَا أَمْسَى بِي مِنْ نِعْمَةٍ أَوْ بِأَحَدٍ مِنْ خَلْقِكَ فَمِنْكَ وَحْدَكَ لَا شَرِيكَ لَكَ، فَلَكَ الْحَمْدُ وَلَكَ الشُّكْرُ",
            reference: "أبو داود",
            count: 1
        },
        {
            text: "اللَّهُمَّ إِنِّي أَسْأَلُكَ خَيْرَ هَذِهِ اللَّيْلَةِ: فَتْحَهَا، وَنَصْرَهَا، وَنُورَهَا، وَبَرَكَتَهَا، وَهُدَاهَا",
            reference: "الحاكم",
            count: 1
        },
        {
            text: "أَعُوذُ بِكَلِمَاتِ اللَّهِ التَّامَّاتِ مِنْ شَرِّ مَا خَلَقَ",
            reference: "مسلم",
            count: 3
        },
        {
            text: "بِسْمِ اللَّهِ الَّذِي لَا يَضُرُّ مَعَ اسْمِهِ شَيْءٌ فِي الْأَرْضِ وَلَا فِي السَّمَاءِ، وَهُوَ السَّمِيعُ الْعَلِيمُ",
            reference: "الترمذي",
            count: 3
        },
        {
            text: "رَضِيتُ بِاللَّهِ رَبًّا، وَبِالْإِسْلَامِ دِينًا، وَبِمُحَمَّدٍ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ نَبِيًّا",
            reference: "أبو داود",
            count: 3
        },
        {
            text: "سُبْحَانَ اللَّهِ وَبِحَمْدِهِ: عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ، وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ",
            reference: "مسلم",
            count: 3
        },
        {
            text: "حَسْبُنَا اللَّهُ وَنِعْمَ الْوَكِيلُ",
            reference: "البخاري",
            count: 7
        },
        {
            text: "اللَّهُمَّ إِنِّي أَسْأَلُكَ الْعَافِيَةَ فِي الدُّنْيَا وَالْآخِرَةِ",
            reference: "ابن ماجه",
            count: 1
        },
        {
            text: "اللَّهُمَّ صَلِّ وَسَلِّمْ عَلَى نَبِيِّنَا مُحَمَّدٍ",
            reference: "البخاري",
            count: 10
        },
        {
            text: "أَسْتَغْفِرُ اللَّهَ الْعَظِيمَ الَّذِي لَا إِلَهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ وَأَتُوبُ إِلَيْهِ",
            reference: "أبو داود",
            count: 3
        },
        {
            text: "اللَّهُمَّ إِنِّي أَعُوذُ بِكَ مِنَ الْهَمِّ وَالْحَزَنِ، وَالْعَجْزِ وَالْكَسَلِ، وَالْبُخْلِ وَالْجُبْنِ، وَضَلَعِ الدَّيْنِ وَغَلَبَةِ الرِّجَالِ",
            reference: "البخاري",
            count: 1
        },
        {
            text: "اللَّهُمَّ إِنِّي أَعُوذُ بِكَ مِنْ شَرِّ مَا عَمِلْتُ، وَمِنْ شَرِّ مَا لَمْ أَعْمَلْ",
            reference: "مسلم",
            count: 1
        },
        {
            text: "سُبْحَانَ اللَّهِ وَالْحَمْدُ لِلَّهِ وَلَا إِلَهَ إِلَّا اللَّهُ وَاللَّهُ أَكْبَرُ",
            reference: "مسلم",
            count: 100
        }
    ];

    let currentMode = 'morning';
    let azkarState = {};

    // Initialize
    function init() {
        updateDate();
        createBgAnimation();
        loadState();
        renderAzkar();
        updateProgress();
        
        // Scroll listener
        window.addEventListener('scroll', () => {
            const scrollTop = document.getElementById('scrollTop');
            if (window.scrollY > 300) {
                scrollTop.classList.add('visible');
            } else {
                scrollTop.classList.remove('visible');
            }
        });
    }

    function updateDate() {
        const options = { 
            weekday: 'long', 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric',
            calendar: 'islamic'
        };
        const date = new Date();
        const hijriDate = date.toLocaleDateString('ar-SA-u-ca-islamic', options);
        const gregorianDate = date.toLocaleDateString('ar-SA', { 
            weekday: 'long', 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
        });
        document.getElementById('dateDisplay').innerHTML = 
            `<div>${hijriDate}</div><div style="font-size:0.85rem;opacity:0.7;margin-top:4px">${gregorianDate}</div>`;
    }

    function createBgAnimation() {
        const container = document.getElementById('bgAnimation');
        for (let i = 0; i < 20; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.width = Math.random() * 30 + 10 + 'px';
            particle.style.height = particle.style.width;
            particle.style.animationDelay = Math.random() * 15 + 's';
            particle.style.animationDuration = Math.random() * 10 + 15 + 's';
            
            if (currentMode === 'morning') {
                particle.style.background = `rgba(232, 168, 56, ${Math.random() * 0.3 + 0.1})`;
            } else {
                particle.style.background = `rgba(99, 179, 237, ${Math.random() * 0.3 + 0.1})`;
            }
            
            container.appendChild(particle);
        }
    }

    function switchMode(mode) {
        currentMode = mode;
        document.body.className = mode + '-mode';
        
        // Update buttons
        document.querySelectorAll('.mode-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelector(`.mode-btn.${mode}`).classList.add('active');
        
        // Update background particles
        const particles = document.querySelectorAll('.particle');
        particles.forEach(p => {
            if (mode === 'morning') {
                p.style.background = p.style.background.replace('rgba(99, 179, 237', 'rgba(232, 168, 56');
            } else {
                p.style.background = p.style.background.replace('rgba(232, 168, 56', 'rgba(99, 179, 237');
            }
        });
        
        renderAzkar();
        updateProgress();
    }

    function getAzkar() {
        return currentMode === 'morning' ? morningAzkar : eveningAzkar;
    }

    function renderAzkar() {
        const container = document.getElementById('azkarContainer');
        const azkar = getAzkar();
        
        container.innerHTML = azkar.map((zikr, index) => {
            const state = azkarState[`${currentMode}_${index}`] || { current: 0, completed: false };
            const isCompleted = state.completed || state.current >= zikr.count;
            
            return `
                <div class="azkar-card ${isCompleted ? 'completed' : ''}" id="card_${index}">
                    <div class="card-number">${index + 1}</div>
                    <div class="azkar-text">${zikr.text}</div>
                    <div class="azkar-reference">📚 ${zikr.reference}</div>
                    <div style="text-align:center">
                        <span class="azkar-count">
                            <i class="fas fa-redo"></i> 
                            التكرار: ${zikr.count} ${zikr.count === 1 ? 'مرة' : zikr.count === 2 ? 'مرتان' : 'مرات'}
                        </span>
                    </div>
                    
                    <div class="counter-section">
                        <button class="counter-btn minus" onclick="decrement(${index})" ${state.current <= 0 ? 'disabled style="opacity:0.5"' : ''}>
                            <i class="fas fa-minus"></i>
                        </button>
                        <div class="counter-display" id="counter_${index}">${state.current}/${zikr.count}</div>
                        <button class="counter-btn" onclick="increment(${index})">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    
                    <div class="tasbih-beads" id="beads_${index}">
                        ${generateBeads(zikr.count, state.current)}
                    </div>
                    
                    <button class="complete-btn ${isCompleted ? 'completed-btn' : ''}" id="complete_${index}" onclick="toggleComplete(${index})">
                        <i class="fas ${isCompleted ? 'fa-check' : 'fa-circle'}"></i>
                        ${isCompleted ? 'تم' : 'إكمال'}
                    </button>
                </div>
            `;
        }).join('');
    }

    function generateBeads(total, current) {
        let beads = '';
        const maxBeads = Math.min(total, 33); // Limit visual beads
        const step = total > 33 ? Math.floor(total / 33) : 1;
        
        for (let i = 0; i < maxBeads; i++) {
            const actualIndex = i * step;
            const isActive = actualIndex < current;
            beads += `<div class="bead ${isActive ? 'active' : ''}"></div>`;
        }
        return beads;
    }

    function increment(index) {
        const key = `${currentMode}_${index}`;
        const azkar = getAzkar();
        const state = azkarState[key] || { current: 0, completed: false };
        
        if (state.current < azkar[index].count) {
            state.current++;
            azkarState[key] = state;
            saveState();
            updateCard(index);
            
            // Check if completed
            if (state.current >= azkar[index].count) {
                completeZikr(index);
            }
        }
    }

    function decrement(index) {
        const key = `${currentMode}_${index}`;
        const state = azkarState[key] || { current: 0, completed: false };
        
        if (state.current > 0) {
            state.current--;
            state.completed = false;
            azkarState[key] = state;
            saveState();
            updateCard(index);
        }
    }

    function toggleComplete(index) {
        const key = `${currentMode}_${index}`;
        const state = azkarState[key] || { current: 0, completed: false };
        const azkar = getAzkar();
        
        if (!state.completed) {
            state.current = azkar[index].count;
            state.completed = true;
            completeZikr(index);
        } else {
            state.current = 0;
            state.completed = false;
        }
        
        azkarState[key] = state;
        saveState();
        updateCard(index);
    }

    function completeZikr(index) {
        const card = document.getElementById(`card_${index}`);
        card.classList.add('completed');
        
        // Update button
        const btn = document.getElementById(`complete_${index}`);
        btn.innerHTML = '<i class="fas fa-check"></i> تم';
        btn.classList.add('completed-btn');
        
        updateProgress();
        checkAllCompleted();
    }

    function updateCard(index) {
        const key = `${currentMode}_${index}`;
        const state = azkarState[key] || { current: 0, completed: false };
        const azkar = getAzkar();
        const zikr = azkar[index];
        
        // Update counter display
        document.getElementById(`counter_${index}`).textContent = `${state.current}/${zikr.count}`;
        
        // Update beads
        document.getElementById(`beads_${index}`).innerHTML = generateBeads(zikr.count, state.current);
        
        // Update minus button
        const minusBtn = document.querySelector(`#card_${index} .counter-btn.minus`);
        if (state.current <= 0) {
            minusBtn.disabled = true;
            minusBtn.style.opacity = '0.5';
        } else {
            minusBtn.disabled = false;
            minusBtn.style.opacity = '1';
        }
        
        // Update card completion state
        const card = document.getElementById(`card_${index}`);
        const isCompleted = state.completed || state.current >= zikr.count;
        
        if (isCompleted) {
            card.classList.add('completed');
            document.getElementById(`complete_${index}`).innerHTML = '<i class="fas fa-check"></i> تم';
            document.getElementById(`complete_${index}`).classList.add('completed-btn');
        } else {
            card.classList.remove('completed');
            document.getElementById(`complete_${index}`).innerHTML = '<i class="fas fa-circle"></i> إكمال';
            document.getElementById(`complete_${index}`).classList.remove('completed-btn');
        }
        
        updateProgress();
    }

    function updateProgress() {
        const azkar = getAzkar();
        let completed = 0;
        
        azkar.forEach((_, index) => {
            const key = `${currentMode}_${index}`;
            const state = azkarState[key] || { current: 0, completed: false };
            if (state.completed || state.current >= azkar[index].count) {
                completed++;
            }
        });
        
        const percent = Math.round((completed / azkar.length) * 100);
        
        document.getElementById('progressText').textContent = `${completed} من ${azkar.length}`;
        document.getElementById('progressPercent').textContent = `${percent}%`;
        document.getElementById('progressFill').style.width = `${percent}%`;
    }

    function checkAllCompleted() {
        const azkar = getAzkar();
        let allCompleted = true;
        
        azkar.forEach((_, index) => {
            const key = `${currentMode}_${index}`;
            const state = azkarState[key] || { current: 0, completed: false };
            if (!state.completed && state.current < azkar[index].count) {
                allCompleted = false;
            }
        });
        
        if (allCompleted) {
            showNotification();
            createConfetti();
        }
    }

    function showNotification() {
        const notification = document.getElementById('notification');
        notification.classList.add('show');
        setTimeout(() => {
            notification.classList.remove('show');
        }, 4000);
    }

    function createConfetti() {
        const colors = ['#E8A838', '#F4D03F', '#48BB78', '#63B3ED', '#F56565', '#9F7AEA'];
        
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.className = 'confetti';
            confetti.style.left = Math.random() * 100 + '%';
            confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
            confetti.style.animationDelay = Math.random() * 2 + 's';
            confetti.style.animationDuration = Math.random() * 2 + 2 + 's';
            document.body.appendChild(confetti);
            
            setTimeout(() => confetti.remove(), 4000);
        }
    }

    function resetAll() {
        if (confirm('هل أنت متأكد من إعادة تعيين جميع الأذكار؟')) {
            azkarState = {};
            saveState();
            renderAzkar();
            updateProgress();
        }
    }

    function scrollToTop() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function saveState() {
        localStorage.setItem('azkarState', JSON.stringify(azkarState));
    }

    function loadState() {
        const saved = localStorage.getItem('azkarState');
        if (saved) {
            azkarState = JSON.parse(saved);
        }
    }

    // Auto-detect mode based on time
    function autoDetectMode() {
        const hour = new Date().getHours();
        if (hour >= 18 || hour < 5) {
            switchMode('evening');
        } else {
            switchMode('morning');
        }
    }

    // Initialize
    init();
    
    // Uncomment to auto-detect based on time
    // autoDetectMode();
</script>

"""

Save the file

output_path = '/mnt/agents/output/azkar_app.html'
with open(output_path, 'w', encoding='utf-8') as f:
f.write(html_content)

print(f"File saved to: {output_path}")
print(f"File size: {len(html_content)} characters")

[github-actions]

Review Feedback

Thank you for providing a very detailed issue about your HTML/CSS/JavaScript application for اذكار اليوم. The description includes both the technical implementation (source code, styling, data, interactions) and the intended output (file path, file size).

Clarifying Questions:

1. Is your main concern related to functionality, user experience, appearance, or is there a specific bug you want addressed?
2. Should the review focus on the code structure (HTML, CSS, JS), or on integration aspects (with TypeScript or GenAIScript)?
3. Are there performance, accessibility, localization, or compatibility requirements we should consider?

Details Provided:

• Full HTML/CSS/JavaScript code, including dynamic rendering, user interaction logic, and animation.
• Azkar data arrays for morning/evening.
• Target output path and file size.
• Arabic localization, visual and interactive features, date display (Hijri/Gregorian).
• Save/load mechanism via localStorage.

Missing/Unclear:

• No info about expected environment/deployment context (web server, static hosting, etc.).
• No error report or explicit feature request.
• How this relates to TypeScript or GenAIScript usage is unclear.
• Is there a reproducible problem, or is this a showcase for review?

Summary:
The issue contains ample detail for an application review and verification. Clarification on the specific concern or expectation will help focus the review effort. Please provide more context if this is to address a bug, feature addition, or integration with Microsoft GenAIScript or TypeScript.

AI-generated content by issue-reviewer may be incorrect. Use reactions to eval.