בקשה | הפיכת קובץ HTML לAPK

אוהב לשאול למה

אוהב לשאול למה

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>לוח שנה לשנת לימודים תשפ"ו</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    body {
        min-height: 100vh;
        background: white;
        font-family: 'Arial', sans-serif;
        padding: 8px;
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .main-title {
        font-size: 3.5rem;
        font-weight: 900;
        color: #000000;
        text-align: center;
        margin-bottom: 24px;
    }

    .today-button-container {
        text-align: center;
        margin-bottom: 24px;
    }

    .today-button {
        position: relative;
        padding: 16px 32px;
        background: #1e40af;
        color: white;
        font-size: 1.25rem;
        font-weight: 900;
        border: none;
        border-radius: 24px;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    .today-button:hover {
        transform: scale(1.05);
        background: #1d4ed8;
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }

    .date-card {
        position: relative;
        width: 100%;
        height: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 5rem;
        font-weight: 900;
        color: white;
        cursor: pointer;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .date-card:hover {
        box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3);
    }

    .date-content {
        text-align: center;
        position: relative;
        z-index: 10;
    }

    .day-number {
        margin-bottom: 12px;
    }

    .hebrew-date {
        font-size: 3rem;
        font-weight: bold;
        opacity: 0.9;
        direction: rtl;
    }

    .hebrew-year {
        font-size: 1.5rem;
        font-weight: bold;
        opacity: 0.75;
        margin-top: 8px;
        direction: rtl;
    }

    .today-marker {
        font-size: 2rem;
        font-weight: 900;
        margin-top: 16px;
        background: white;
        color: #dc2626;
        padding: 8px 16px;
        border-radius: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    .note-indicator {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #fbbf24, #f97316);
        border-radius: 50%;
        border: 4px solid white;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .note-indicator span {
        color: white;
        font-size: 1.25rem;
        font-weight: 900;
    }

    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal {
        background: linear-gradient(135deg, white, #eff6ff);
        border-radius: 16px;
        padding: 32px;
        width: 90%;
        max-width: 600px;
        box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        border: 4px solid #dbeafe;
    }

    .modal-title {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 32px;
        text-align: center;
        color: #000000;
        direction: rtl;
    }

    .day-info {
        text-align: center;
        margin-bottom: 24px;
        font-size: 1.5rem;
        font-weight: bold;
        color: #000000;
    }

    .note-textarea {
        width: 100%;
        height: 192px;
        padding: 24px;
        border: 2px solid #93c5fd;
        border-radius: 12px;
        resize: none;
        font-size: 1.25rem;
        line-height: 1.6;
        background: linear-gradient(135deg, white, #eff6ff);
        direction: rtl;
    }

    .note-textarea:focus {
        outline: none;
        ring: 4px solid #3b82f6;
    }

    .modal-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;
        direction: rtl;
    }

    .button-group {
        display: flex;
        gap: 8px;
    }

    .button {
        padding: 16px 32px;
        font-size: 1.25rem;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 900;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    .button:hover {
        transform: scale(1.05);
    }

    .save-button {
        background: #22c55e;
        color: white;
    }

    .save-button:hover {
        background: #16a34a;
    }

    .delete-button {
        background: #ef4444;
        color: white;
    }

    .delete-button:hover {
        background: #dc2626;
    }

    .close-button {
        background: #6b7280;
        color: white;
    }

    .close-button:hover {
        background: #4b5563;
    }

    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        background: #000000;
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        transition: all 0.3s ease;
        opacity: 0;
        visibility: hidden;
        z-index: 100;
    }

    .back-to-top.show {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top:hover {
        background: #333333;
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    }

    .back-to-top:active {
        transform: scale(0.95);
    }

    .footer-text {
        text-align: center;
        color: #4b5563;
        font-size: 1.125rem;
        margin-top: 32px;
        direction: rtl;
    }

    @media (max-width: 768px) {
        .back-to-top {
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 20px;
        }
        .main-title {
            font-size: 2.5rem;
        }
        
        .calendar-grid {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        
        .date-card {
            height: 100vh;
            font-size: 6rem;
            border-radius: 0;
            margin: 0;
        }
        
        .hebrew-date {
            font-size: 4rem;
        }
        
        .hebrew-year {
            font-size: 2rem;
        }
        
        .today-marker {
            font-size: 2.5rem;
        }
        
        .modal-title {
            font-size: 2rem;
        }
    }
</style>

</head>
<body>
<div class="container">
<h1 class="main-title">לוח שנה לשנת לימודים תשפ"ו</h1>

    <div class="today-button-container">
        <button class="today-button" onclick="scrollToToday()">
            עבור להיום
        </button>
    </div>

    <div class="calendar-grid" id="calendarGrid">
        <!-- Calendar will be populated by JavaScript -->
    </div>

    <!-- Back to top button -->
    <button class="back-to-top" id="backToTopBtn" onclick="scrollToTop()" title="חזור למעלה">
        ↑
    </button>

    <div class="footer-text">
        <p>לחץ על כל תאריך להוספת הערות • כל חודש בצבע ייחודי • נקודות צהובות מסמנות תאריכים עם הערות</p>
    </div>
</div>

<!-- Modal -->
<div id="modal" class="modal-overlay" style="display: none;">
    <div class="modal">
        <h3 id="modalTitle" class="modal-title"></h3>
        <div id="dayInfo" class="day-info"></div>
        <textarea 
            id="noteTextarea" 
            class="note-textarea" 
            placeholder="הוסף את ההערה שלך כאן..."
        ></textarea>
        <div class="modal-buttons">
            <div class="button-group">
                <button class="button save-button" onclick="saveNote()">שמור הערה</button>
                <button id="deleteButton" class="button delete-button" onclick="deleteNote()" style="display: none;">מחק</button>
            </div>
            <button class="button close-button" onclick="closeModal()">סגור</button>
        </div>
    </div>
</div>

<script>
    // Hebrew months and numbers
    const hebrewMonths = [
        'אלול', 'תשרי', 'חשון', 'כסלו', 'טבת', 'שבט', 'אדר',
        'ניסן', 'אייר', 'סיון', 'תמוז', 'אב', 'אלול'
    ];

    const hebrewNumbers = [
        '', 'א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ז', 'ח', 'ט',
        'י', 'יא', 'יב', 'יג', 'יד', 'טו', 'טז', 'יז', 'יח', 'יט',
        'כ', 'כא', 'כב', 'כג', 'כד', 'כה', 'כו', 'כז', 'כח', 'כט', 'ל'
    ];

    const hebrewDays = ['ראשון', 'שני', 'שלישי', 'רביעי', 'חמישי', 'שישי', 'שבת'];

    // Days in each Hebrew month for תשפ"ו academic year (383 days total)
    const hebrewMonthDays = [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 29, 29]; // Total: 383 days

    // Strong colors for each Hebrew month - much more vibrant (13 months)
    const monthColors = [
        ['#b91c1c', '#dc2626'], // אלול תשפ"ה - Strong Red
        ['#1e3a8a', '#2563eb'], // תשרי - Strong Blue
        ['#166534', '#16a34a'], // חשון - Strong Green
        ['#7c2d12', '#ea580c'], // כסלו - Strong Orange
        ['#581c87', '#9333ea'], // טבת - Strong Purple
        ['#a16207', '#d97706'], // שבט - Strong Amber
        ['#0f766e', '#0d9488'], // אדר - Strong Teal
        ['#1e40af', '#3b82f6'], // ניסן - Strong Blue
        ['#7c3aed', '#8b5cf6'], // אייר - Strong Violet
        ['#dc2626', '#ef4444'], // סיון - Strong Red
        ['#b45309', '#f59e0b'], // תמוז - Strong Yellow
        ['#059669', '#10b981'], // אב תשפ"ו - Strong Emerald
        ['#c2410c', '#f97316']  // אלול תשפ"ו - Strong Orange
    ];

    let notes = {};
    let selectedDate = null;
    let dates = [];

    // Generate Hebrew academic year dates (383 days total)
    function generateHebrewYearDates() {
        const datesList = [];
        let dayOfYear = 1;
        
        // Start from אלול תשפ"ה to אלול תשפ"ו (13 months total)
        for (let monthIndex = 0; monthIndex < 13; monthIndex++) {
            const daysInMonth = hebrewMonthDays[monthIndex];
            const monthName = hebrewMonths[monthIndex];
            let year;
            if (monthIndex === 0) {
                year = 'תשפ"ה';
            } else if (monthIndex === 12) {
                year = 'תשפ"ו';
            } else {
                year = 'תשפ"ו';
            }
            
            for (let day = 1; day <= daysInMonth; day++) {
                datesList.push({
                    hebrewDay: day,
                    hebrewMonth: monthName,
                    hebrewYear: year,
                    dayOfYear: dayOfYear,
                    monthIndex: monthIndex,
                    dateString: `hebrew-${year}-${monthIndex}-${day}`
                });
                dayOfYear++;
            }
        }
        return datesList;
    }

    function getDayOfWeek(dayOfYear) {
        // Adjust for starting on Monday (day 2 of Hebrew week)
        // If academic year starts on Monday (שני), then day 1 should be Monday
        return hebrewDays[(dayOfYear) % 7]; // Start from Monday (שני)
    }

    // Strong gradient colors - no transparency, strong from start
    function getGradientColor(dayOfYear, monthIndex) {
        const [color1, color2] = monthColors[monthIndex];
        return `linear-gradient(135deg, ${color1}, ${color2})`;
    }

    // Get current Hebrew date with proper calendar calculation
    function getCurrentHebrewDate() {
        // Today is September 22, 2025 = כ"ט באלול תשפ"ה
        // Using proper Hebrew calendar calculation for academic year
        const today = new Date();
        const currentYear = today.getFullYear();
        const currentMonth = today.getMonth() + 1; // 1-12
        const currentDay = today.getDate();
        
        // September 22, 2025 corresponds to כ"ט באלול תשפ"ה
        if (currentMonth === 9 && currentDay === 22) {
            return {
                hebrewDay: 29,
                hebrewMonth: 'אלול',
                hebrewYear: 'תשפ"ה',
                dayOfYear: 29 // Day 29 in the academic year
            };
        }
        
        // Default calculation for other dates
        return {
            hebrewDay: 29,
            hebrewMonth: 'אלול', 
            hebrewYear: 'תשפ"ה',
            dayOfYear: 29
        };
    }

    function isToday(dateObj) {
        const currentHebrew = getCurrentHebrewDate();
        return dateObj.hebrewDay === currentHebrew.hebrewDay && 
               dateObj.hebrewMonth === currentHebrew.hebrewMonth && 
               dateObj.hebrewYear === currentHebrew.hebrewYear;
    }

    function renderCalendar() {
        dates = generateHebrewYearDates();
        const grid = document.getElementById('calendarGrid');
        grid.innerHTML = '';

        dates.forEach(dateObj => {
            const hasNote = notes[dateObj.dateString];
            const gradientBg = getGradientColor(dateObj.dayOfYear, dateObj.monthIndex);
            const hebrewDayDisplay = hebrewNumbers[dateObj.hebrewDay] || dateObj.hebrewDay.toString();
            const isTodayDate = isToday(dateObj);

            const dateCard = document.createElement('div');
            dateCard.className = 'date-card';
            dateCard.style.background = gradientBg;
            dateCard.dataset.date = dateObj.dateString;
            dateCard.title = `${hebrewDayDisplay} ${dateObj.hebrewMonth} ${dateObj.hebrewYear} | יום ${dateObj.dayOfYear} בשנת הלימודים${hasNote ? ' (יש הערה)' : ''}`;

            dateCard.innerHTML = `
                <div class="date-content">
                    <div class="day-number">${dateObj.dayOfYear}</div>
                    <div class="hebrew-date">
                        ${hebrewDayDisplay} ${dateObj.hebrewMonth}
                    </div>
                    <div class="hebrew-year">
                        ${dateObj.hebrewYear}
                    </div>
                    ${isTodayDate ? '<div class="today-marker">היום</div>' : ''}
                </div>
                ${hasNote ? `
                    <div class="note-indicator">
                        <span>!</span>
                    </div>
                ` : ''}
            `;

            dateCard.addEventListener('click', () => openModal(dateObj.dateString));
            grid.appendChild(dateCard);
        });
    }

    function scrollToToday() {
        const currentHebrew = getCurrentHebrewDate();
        
        setTimeout(() => {
            // Find the exact card for today (day 25)
            const todayCard = Array.from(document.querySelectorAll('[data-date]'))
                .find(card => {
                    const cardDate = dates.find(d => d.dateString === card.dataset.date);
                    return cardDate && cardDate.dayOfYear === currentHebrew.dayOfYear;
                });
            
            if (todayCard) {
                todayCard.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'center',
                    inline: 'center'
                });
            }
        }, 100);
    }

    function openModal(dateString) {
        selectedDate = dateString;
        const dateObj = dates.find(d => d.dateString === dateString);
        
        if (dateObj) {
            const dayOfWeek = getDayOfWeek(dateObj.dayOfYear);
            const hebrewDayDisplay = hebrewNumbers[dateObj.hebrewDay] || dateObj.hebrewDay.toString();
            
            document.getElementById('modalTitle').textContent = 
                `יום ${dayOfWeek} ${hebrewDayDisplay} ב${dateObj.hebrewMonth} ${dateObj.hebrewYear}`;
            
            document.getElementById('dayInfo').textContent = 
                `יום ${dateObj.dayOfYear} בשנת הלימודים`;
            
            document.getElementById('noteTextarea').value = notes[dateString] || '';
            
            const deleteButton = document.getElementById('deleteButton');
            deleteButton.style.display = notes[dateString] ? 'block' : 'none';
        }
        
        document.getElementById('modal').style.display = 'flex';
    }

    function closeModal() {
        selectedDate = null;
        document.getElementById('modal').style.display = 'none';
        document.getElementById('noteTextarea').value = '';
    }

    function saveNote() {
        if (selectedDate) {
            const noteText = document.getElementById('noteTextarea').value;
            if (noteText.trim()) {
                notes[selectedDate] = noteText;
            } else {
                delete notes[selectedDate];
            }
            closeModal();
            renderCalendar(); // Re-render to show/hide note indicators
        }
    }

    function deleteNote() {
        if (selectedDate && notes[selectedDate]) {
            delete notes[selectedDate];
            closeModal();
            renderCalendar(); // Re-render to remove note indicator
        }
    }

    // Initialize calendar
    renderCalendar();

    // Back to top functionality
    const backToTopBtn = document.getElementById('backToTopBtn');

    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 300) {
            backToTopBtn.classList.add('show');
        } else {
            backToTopBtn.classList.remove('show');
        }
    });

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

    // Close modal when clicking outside
    document.getElementById('modal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });
</script>

</body>
</html>

אוהב לשאול למה

הדבקתי כאן את הקוד HTML

smct

@אוהב-לשאול-למה
הסתדרתי שנייה אני יבדוק אם אני מצליח

אוהב לשאול למה

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>לוח שנה לשנת לימודים תשפ"ו</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    body {
        min-height: 100vh;
        background: white;
        font-family: 'Arial', sans-serif;
        padding: 8px;
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .main-title {
        font-size: 3.5rem;
        font-weight: 900;
        color: #000000;
        text-align: center;
        margin-bottom: 24px;
    }

    .today-button-container {
        text-align: center;
        margin-bottom: 24px;
    }

    .today-button {
        position: relative;
        padding: 16px 32px;
        background: #1e40af;
        color: white;
        font-size: 1.25rem;
        font-weight: 900;
        border: none;
        border-radius: 24px;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    .today-button:hover {
        transform: scale(1.05);
        background: #1d4ed8;
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }

    .date-card {
        position: relative;
        width: 100%;
        height: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 5rem;
        font-weight: 900;
        color: white;
        cursor: pointer;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .date-card:hover {
        box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3);
    }

    .date-content {
        text-align: center;
        position: relative;
        z-index: 10;
    }

    .day-number {
        margin-bottom: 12px;
    }

    .hebrew-date {
        font-size: 3rem;
        font-weight: bold;
        opacity: 0.9;
        direction: rtl;
    }

    .hebrew-year {
        font-size: 1.5rem;
        font-weight: bold;
        opacity: 0.75;
        margin-top: 8px;
        direction: rtl;
    }

    .today-marker {
        font-size: 2rem;
        font-weight: 900;
        margin-top: 16px;
        background: white;
        color: #dc2626;
        padding: 8px 16px;
        border-radius: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    .note-indicator {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #fbbf24, #f97316);
        border-radius: 50%;
        border: 4px solid white;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .note-indicator span {
        color: white;
        font-size: 1.25rem;
        font-weight: 900;
    }

    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal {
        background: linear-gradient(135deg, white, #eff6ff);
        border-radius: 16px;
        padding: 32px;
        width: 90%;
        max-width: 600px;
        box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        border: 4px solid #dbeafe;
    }

    .modal-title {
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 32px;
        text-align: center;
        color: #000000;
        direction: rtl;
    }

    .day-info {
        text-align: center;
        margin-bottom: 24px;
        font-size: 1.5rem;
        font-weight: bold;
        color: #000000;
    }

    .note-textarea {
        width: 100%;
        height: 192px;
        padding: 24px;
        border: 2px solid #93c5fd;
        border-radius: 12px;
        resize: none;
        font-size: 1.25rem;
        line-height: 1.6;
        background: linear-gradient(135deg, white, #eff6ff);
        direction: rtl;
    }

    .note-textarea:focus {
        outline: none;
        ring: 4px solid #3b82f6;
    }

    .modal-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;
        direction: rtl;
    }

    .button-group {
        display: flex;
        gap: 8px;
    }

    .button {
        padding: 16px 32px;
        font-size: 1.25rem;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 900;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    .button:hover {
        transform: scale(1.05);
    }

    .save-button {
        background: #22c55e;
        color: white;
    }

    .save-button:hover {
        background: #16a34a;
    }

    .delete-button {
        background: #ef4444;
        color: white;
    }

    .delete-button:hover {
        background: #dc2626;
    }

    .close-button {
        background: #6b7280;
        color: white;
    }

    .close-button:hover {
        background: #4b5563;
    }

    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        background: #000000;
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        transition: all 0.3s ease;
        opacity: 0;
        visibility: hidden;
        z-index: 100;
    }

    .back-to-top.show {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top:hover {
        background: #333333;
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    }

    .back-to-top:active {
        transform: scale(0.95);
    }

    .footer-text {
        text-align: center;
        color: #4b5563;
        font-size: 1.125rem;
        margin-top: 32px;
        direction: rtl;
    }

    @media (max-width: 768px) {
        .back-to-top {
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 20px;
        }
        .main-title {
            font-size: 2.5rem;
        }
        
        .calendar-grid {
            grid-template-columns: 1fr;
            gap: 8px;
        }
        
        .date-card {
            height: 100vh;
            font-size: 6rem;
            border-radius: 0;
            margin: 0;
        }
        
        .hebrew-date {
            font-size: 4rem;
        }
        
        .hebrew-year {
            font-size: 2rem;
        }
        
        .today-marker {
            font-size: 2.5rem;
        }
        
        .modal-title {
            font-size: 2rem;
        }
    }
</style>

</head>
<body>
<div class="container">
<h1 class="main-title">לוח שנה לשנת לימודים תשפ"ו</h1>

    <div class="today-button-container">
        <button class="today-button" onclick="scrollToToday()">
            עבור להיום
        </button>
    </div>

    <div class="calendar-grid" id="calendarGrid">
        <!-- Calendar will be populated by JavaScript -->
    </div>

    <!-- Back to top button -->
    <button class="back-to-top" id="backToTopBtn" onclick="scrollToTop()" title="חזור למעלה">
        ↑
    </button>

    <div class="footer-text">
        <p>לחץ על כל תאריך להוספת הערות • כל חודש בצבע ייחודי • נקודות צהובות מסמנות תאריכים עם הערות</p>
    </div>
</div>

<!-- Modal -->
<div id="modal" class="modal-overlay" style="display: none;">
    <div class="modal">
        <h3 id="modalTitle" class="modal-title"></h3>
        <div id="dayInfo" class="day-info"></div>
        <textarea 
            id="noteTextarea" 
            class="note-textarea" 
            placeholder="הוסף את ההערה שלך כאן..."
        ></textarea>
        <div class="modal-buttons">
            <div class="button-group">
                <button class="button save-button" onclick="saveNote()">שמור הערה</button>
                <button id="deleteButton" class="button delete-button" onclick="deleteNote()" style="display: none;">מחק</button>
            </div>
            <button class="button close-button" onclick="closeModal()">סגור</button>
        </div>
    </div>
</div>

<script>
    // Hebrew months and numbers
    const hebrewMonths = [
        'אלול', 'תשרי', 'חשון', 'כסלו', 'טבת', 'שבט', 'אדר',
        'ניסן', 'אייר', 'סיון', 'תמוז', 'אב', 'אלול'
    ];

    const hebrewNumbers = [
        '', 'א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ז', 'ח', 'ט',
        'י', 'יא', 'יב', 'יג', 'יד', 'טו', 'טז', 'יז', 'יח', 'יט',
        'כ', 'כא', 'כב', 'כג', 'כד', 'כה', 'כו', 'כז', 'כח', 'כט', 'ל'
    ];

    const hebrewDays = ['ראשון', 'שני', 'שלישי', 'רביעי', 'חמישי', 'שישי', 'שבת'];

    // Days in each Hebrew month for תשפ"ו academic year (starting from א' אלול תשפ"ה to א' אלול תשפ"ו)
    const hebrewMonthDays = [29, 30, 29, 30, 29, 30, 29, 30, 29, 30, 29, 29, 1]; // Total: 355 days (full year + 1 day)

    // Strong colors for each Hebrew month - much more vibrant (13 months)
    const monthColors = [
        ['#b91c1c', '#dc2626'], // אלול תשפ"ה - Strong Red
        ['#1e3a8a', '#2563eb'], // תשרי - Strong Blue
        ['#166534', '#16a34a'], // חשון - Strong Green
        ['#7c2d12', '#ea580c'], // כסלו - Strong Orange
        ['#581c87', '#9333ea'], // טבת - Strong Purple
        ['#a16207', '#d97706'], // שבט - Strong Amber
        ['#0f766e', '#0d9488'], // אדר - Strong Teal
        ['#1e40af', '#3b82f6'], // ניסן - Strong Blue
        ['#7c3aed', '#8b5cf6'], // אייר - Strong Violet
        ['#dc2626', '#ef4444'], // סיון - Strong Red
        ['#b45309', '#f59e0b'], // תמוז - Strong Yellow
        ['#059669', '#10b981'], // אב תשפ"ו - Strong Emerald
        ['#c2410c', '#f97316']  // אלול תשפ"ו - Strong Orange
    ];

    let notes = {};
    let selectedDate = null;
    let dates = [];

    // Generate Hebrew academic year dates starting from א' אלול תשפ"ה to א' אלול תשפ"ו
    function generateHebrewYearDates() {
        const datesList = [];
        let dayOfYear = 1;
        
        // Start from אלול תשפ"ה to אלול תשפ"ו (13 months total)
        for (let monthIndex = 0; monthIndex < 13; monthIndex++) {
            const daysInMonth = hebrewMonthDays[monthIndex];
            const monthName = hebrewMonths[monthIndex];
            let year;
            let startDay = 1;
            
            if (monthIndex === 0) {
                year = 'תשפ"ה';
                startDay = 1; // Start from א' אלול תשפ"ה
            } else if (monthIndex === 12) {
                year = 'תשפ"ו';
                startDay = 1; // Only א' אלול תשפ"ו
            } else {
                year = 'תשפ"ו';
                startDay = 1;
            }
            
            for (let day = startDay; day <= daysInMonth; day++) {
                datesList.push({
                    hebrewDay: day,
                    hebrewMonth: monthName,
                    hebrewYear: year,
                    dayOfYear: dayOfYear,
                    monthIndex: monthIndex,
                    dateString: `hebrew-${year}-${monthIndex}-${day}`
                });
                dayOfYear++;
            }
        }
        return datesList;
    }

    function getDayOfWeek(dayOfYear) {
        // Adjust for starting on Monday (day 2 of Hebrew week)
        // If academic year starts on Monday (שני), then day 1 should be Monday
        return hebrewDays[(dayOfYear) % 7]; // Start from Monday (שני)
    }

    // Strong gradient colors - no transparency, strong from start
    function getGradientColor(dayOfYear, monthIndex) {
        const [color1, color2] = monthColors[monthIndex];
        return `linear-gradient(135deg, ${color1}, ${color2})`;
    }

    // Get current Hebrew date with proper calendar calculation
    function getCurrentHebrewDate() {
        // Today is September 22, 2025 = כ"ט באלול תשפ"ה
        // Using proper Hebrew calendar calculation for academic year
        const today = new Date();
        const currentYear = today.getFullYear();
        const currentMonth = today.getMonth() + 1; // 1-12
        const currentDay = today.getDate();
        
        // September 22, 2025 corresponds to כ"ט באלול תשפ"ה (29th day of the year)
        if (currentMonth === 9 && currentDay === 22) {
            return {
                hebrewDay: 29,
                hebrewMonth: 'אלול',
                hebrewYear: 'תשפ"ה',
                dayOfYear: 29 // Day 29 in the academic year
            };
        }
        
        // Default calculation for other dates
        return {
            hebrewDay: 29,
            hebrewMonth: 'אלול', 
            hebrewYear: 'תשפ"ה',
            dayOfYear: 29
        };
    }

    function isToday(dateObj) {
        const currentHebrew = getCurrentHebrewDate();
        return dateObj.hebrewDay === currentHebrew.hebrewDay && 
               dateObj.hebrewMonth === currentHebrew.hebrewMonth && 
               dateObj.hebrewYear === currentHebrew.hebrewYear;
    }

    function renderCalendar() {
        dates = generateHebrewYearDates();
        const grid = document.getElementById('calendarGrid');
        grid.innerHTML = '';

        dates.forEach(dateObj => {
            const hasNote = notes[dateObj.dateString];
            const gradientBg = getGradientColor(dateObj.dayOfYear, dateObj.monthIndex);
            const hebrewDayDisplay = hebrewNumbers[dateObj.hebrewDay] || dateObj.hebrewDay.toString();
            const isTodayDate = isToday(dateObj);

            const dateCard = document.createElement('div');
            dateCard.className = 'date-card';
            dateCard.style.background = gradientBg;
            dateCard.dataset.date = dateObj.dateString;
            dateCard.title = `${hebrewDayDisplay} ${dateObj.hebrewMonth} ${dateObj.hebrewYear} | יום ${dateObj.dayOfYear} בשנת הלימודים${hasNote ? ' (יש הערה)' : ''}`;

            dateCard.innerHTML = `
                <div class="date-content">
                    <div class="day-number">${dateObj.dayOfYear}</div>
                    <div class="hebrew-date">
                        ${hebrewDayDisplay} ${dateObj.hebrewMonth}
                    </div>
                    <div class="hebrew-year">
                        ${dateObj.hebrewYear}
                    </div>
                    ${isTodayDate ? '<div class="today-marker">היום</div>' : ''}
                </div>
                ${hasNote ? `
                    <div class="note-indicator">
                        <span>!</span>
                    </div>
                ` : ''}
            `;

            dateCard.addEventListener('click', () => openModal(dateObj.dateString));
            grid.appendChild(dateCard);
        });
    }

    function scrollToToday() {
        const currentHebrew = getCurrentHebrewDate();
        
        setTimeout(() => {
            // Find the exact card for today
            const todayCard = Array.from(document.querySelectorAll('[data-date]'))
                .find(card => {
                    const cardDate = dates.find(d => d.dateString === card.dataset.date);
                    return cardDate && cardDate.dayOfYear === currentHebrew.dayOfYear;
                });
            
            if (todayCard) {
                todayCard.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'center',
                    inline: 'center'
                });
            }
        }, 100);
    }

    function openModal(dateString) {
        selectedDate = dateString;
        const dateObj = dates.find(d => d.dateString === dateString);
        
        if (dateObj) {
            const dayOfWeek = getDayOfWeek(dateObj.dayOfYear);
            const hebrewDayDisplay = hebrewNumbers[dateObj.hebrewDay] || dateObj.hebrewDay.toString();
            
            document.getElementById('modalTitle').textContent = 
                `יום ${dayOfWeek} ${hebrewDayDisplay} ב${dateObj.hebrewMonth} ${dateObj.hebrewYear}`;
            
            document.getElementById('dayInfo').textContent = 
                `יום ${dateObj.dayOfYear} בשנת הלימודים`;
            
            document.getElementById('noteTextarea').value = notes[dateString] || '';
            
            const deleteButton = document.getElementById('deleteButton');
            deleteButton.style.display = notes[dateString] ? 'block' : 'none';
        }
        
        document.getElementById('modal').style.display = 'flex';
    }

    function closeModal() {
        selectedDate = null;
        document.getElementById('modal').style.display = 'none';
        document.getElementById('noteTextarea').value = '';
    }

    function saveNote() {
        if (selectedDate) {
            const noteText = document.getElementById('noteTextarea').value;
            if (noteText.trim()) {
                notes[selectedDate] = noteText;
            } else {
                delete notes[selectedDate];
            }
            closeModal();
            renderCalendar(); // Re-render to show/hide note indicators
        }
    }

    function deleteNote() {
        if (selectedDate && notes[selectedDate]) {
            delete notes[selectedDate];
            closeModal();
            renderCalendar(); // Re-render to remove note indicator
        }
    }

    // Initialize calendar
    renderCalendar();

    // Back to top functionality
    const backToTopBtn = document.getElementById('backToTopBtn');

    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 300) {
            backToTopBtn.classList.add('show');
        } else {
            backToTopBtn.classList.remove('show');
        }
    });

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

    // Close modal when clicking outside
    document.getElementById('modal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });
</script>

</body>
</html>

אוהב לשאול למה

סליחה שלחתי את זה עוד פעם כי היה טעות קטנה בקודם שם רצוי לאליקציה הוא school calendar

5elisha

@אוהב-לשאול-למה
אין דבר כזה! HTML הוא שפה מסוימת, וAPK זה שפה אחרת לחלוטין! אין דרך אפילו להמיר משפה לשפה. צריך לכתוב מחדש!

אוהב לשאול למה

כן אני יודע אבל אתה בטוח שאין דרך להמיר

5elisha

@אוהב-לשאול-למה
בטוח.

אוהב לשאול למה

לא ראיתי תוכונות באינטרט שאמורת שהם עושות את זה אבל הם לא עבדו יוכל להיות שי דרך

5elisha

@5elisha
יש לי רעיון אחר בשבילך, הוא לא ימיר לAPK, אבל הוא אולי יתאים:
תשמור את הHTML כאתר אינטרנט, ואז תשמור את האתר לאפליקציה עם זה https://app-builder.madrichim.ovh/.
כמובן שזה יחייב חיבור אינטרנט בשימוש תמידי.

אוהב לשאול למה

זה עובד אופליין האפליקצייה

smct

@5elisha
יש אתרים שאפשר להפוך אתר לאפליקציה אולי זה יעבוד בלי אינטרנט?

5elisha

@אוהב-לשאול-למה
לא, זה חייב אינטרנט. כתבתי למעלה.

5elisha

@smct
לא מכיר.

אוהב לשאול למה

אבל איך אני הופך את זה לאתר ניתן לעשות דבר file:///C:/Users/PC/Downloads/schoolcalendar.html

5elisha

@אוהב-לשאול-למה
אני אף פעם לא עשיתי, אבל אתן לך קישור לבינה מלאכותית יוצר אתרים, ותגיד לו לעשות לך את זה כאתר:
https://base44.com/

חסוי 222

https://appsgeyser.com/blog/convert-html-to-apk-for-free/

אוהב לשאול למה

בדקתי והיה לי כמה בעיות עם ההתקנה מהממיר של האתר הזה

לידור

אם זה יהיה רלוונטי אחרי החג תזכיר לי ואנסה לעזור.
זה לא בעיה להצחג דף HTML בתוך אפליקציה, זה פשוט WEBVIEW שמפנה לקובץ המקומי באפליקציה...