समय प्रबंधन उपकरण

    <div class="timer-display">
        <div class="timer-main" id="sessionTimer">25:00</div>
        <div class="timer-subtitle">पोमोडोरो सत्र</div>
    </div>

    <div class="session-progress">
        <div class="progress-bar">
            <div class="progress" style="width: 60%"></div>
        </div>
        <div class="progress-text">15 मिनट पूर्ण</div>
    </div>

    <div class="session-stats">
        <div class="stat-item">
            <div class="stat-label">आज के सत्र</div>
            <div class="stat-value">3</div>
        </div>
        <div class="stat-item">
            <div class="stat-label">कुल फोकस समय</div>
            <div class="stat-value">1h 25m</div>
        </div>
        <div class="stat-item">
            <div class="stat-label">औसत अवधि</div>
            <div class="stat-value">28m</div>
        </div>
    </div>
</div>

<!-- अध्ययन अनुसूची -->
<div class="study-schedule">
    <h3>आज की अध्ययन अनुसूची</h3>
    <div class="schedule-tabs">
        <button class="tab-btn active" onclick="showSchedule('today')">आज</button>
        <button class="tab-btn" onclick="showSchedule('week')">सप्ताह</button>
        <button class="tab-btn" onclick="showSchedule('custom')">कस्टम</button>
    </div>

    <div id="today-schedule" class="schedule-content active">
        <div class="timeline">
            <div class="time-slot completed">
                <div class="time-slot-time">7:00 AM</div>
                <div class="time-slot-content">
                    <div class="subject-tag quantitative">मात्रात्मक</div>
                    <div class="topic-name">समय और कार्य समस्याएं</div>
                    <div class="duration">45 मिनट</div>
                    <div class="status-badge completed">✓ पूर्ण</div>
                </div>
            </div>

            <div class="time-slot completed">
                <div class="time-slot-time">8:00 AM</div>
                <div class="time-slot-content">
                    <div class="subject-tag reasoning">रीजनिंग</div>
                    <div class="topic-name">रक्त संबंध</div>
                    <div class="duration">30 मिनट</div>
                    <div class="status-badge completed">✓ पूर्ण</div>
                </div>
            </div>

            <div class="time-slot current">
                <div class="time-slot-time">9:00 AM</div>
                <div class="time-slot-content">
                    <div class="subject-tag english">अंग्रेजी</div>
                    <div class="topic-name">रीडिंग कॉम्प्रिहेंशन</div>
                    <div class="duration">60 मिनट</div>
                    <div class="status-badge current">⏱ प्रगति पर</div>
                    <div class="slot-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 40%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="time-slot upcoming">
                <div class="time-slot-time">10:30 AM</div>
                <div class="time-slot-content">
                    <div class="subject-tag awareness">जागरूकता</div>
                    <div class="topic-name">समसामयिकी</div>
                    <div class="duration">30 मिनट</div>
                    <div class="status-badge upcoming">⏰ आगामी</div>
                </div>
            </div>

            <div class="time-slot upcoming">
                <div class="time-slot-time">2:00 PM</div>
                <div class="time-slot-content">
                    <div class="subject-tag test">मॉक टेस्ट</div>
                    <div class="topic-name">पूर्ण-लंबाई अभ्यास</div>
                    <div class="duration">120 मिनट</div>
                    <div class="status-badge important">📝 महत्वपूर्ण</div>
                </div>
            </div>

            <div class="time-slot upcoming">
                <div class="time-slot-time">6:00 PM</div>
                <div class="time-slot-content">
                    <div class="subject-tag review">रिवीजन</div>
                    <div class="topic-name">दैनिक पुनरावलोकन</div>
                    <div class="duration">45 मिनट</div>
                    <div class="status-badge upcoming">⏰ आगामी</div>
                </div>
            </div>
        </div>
    </div>

    <div id="week-schedule" class="schedule-content">
        <div class="week-view">
            <div class="week-grid">
                <div class="day-header">सोम</div>
                <div class="day-header">मंगल</div>
                <div class="day-header">बुध</div>
                <div class="day-header">गुरु</div>
                <div class="day-header">शुक्र</div>
                <div class="day-header">शनि</div>
                <div class="day-header">रवि</div>

                <div class="day-cell completed">
                    <div class="day-summary">
                        <div class="day-date">Oct 21</div>
                        <div class="day-study-time">3h 45m</div>
                        <div class="day-sessions">5 सत्र</div>
                    </div>
                </div>

                <div class="day-cell completed">
                    <div class="day-summary">
                        <div class="day-date">Oct 22</div>
                        <div class="day-study-time">4h 15m</div>
                        <div class="day-sessions">6 सत्र</div>
                    </div>
                </div>

                <div class="day-cell current">
                    <div class="day-summary">
                        <div class="day-date">Oct 23</div>
                        <div class="day-study-time">2h 30m</div>
                        <div class="day-sessions">3 सत्र (प्रगति पर)</div>
                    </div>
                </div>

                <div class="day-cell planned">
                    <div class="day-summary">
                        <div class="day-date">Oct 24</div>
                        <div class="day-study-time">4h 00m</div>
                        <div class="day-sessions">5 सत्र नियोजित</div>
                    </div>
                </div>

                <div class="day-cell planned">
                    <div class="day-summary">
                        <div class="day-date">Oct 25</div>
                        <div class="day-study-time">3h 30m</div>
                        <div class="day-sessions">4 सत्र नियोजित</div>
                    </div>
                </div>

                <div class="day-cell weekend">
                    <div class="day-summary">
                        <div class="day-date">Oct 26</div>
                        <div class="day-study-time">2h 00m</div>
                        <div class="day-sessions">3 सत्र नियोजित</div>
                    </div>
                </div>

                <div class="day-cell weekend">
                    <div class="day-summary">
                        <div class="day-date">Oct 27</div>
                        <div class="day-study-time">1h 30m</div>
                        <div class="day-sessions">2 सत्र नियोजित</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="custom-schedule" class="schedule-content">
        <div class="custom-schedule-form">
            <h4>कस्टम अनुसूची बनाएं</h4>
            <form onsubmit="createCustomSchedule(event)">
                <div class="form-group">
                    <label>अनुसूची नाम</label>
                    <input type="text" id="scheduleName" placeholder="उदा., सप्ताहांत अध्ययन योजना" required>
                </div>

                <div class="form-group">
                    <label>समय स्लॉट</label>
                    <div id="timeSlots">
                        <div class="time-slot-input">
                            <input type="time" class="start-time" value="09:00" required>
                            <input type="time" class="end-time" value="10:30" required>
                            <select class="subject-select">
                                <option value="quantitative">मात्रात्मक</option>
                                <option value="reasoning">रीजनिंग</option>
                                <option value="english">अंग्रेजी</option>
                                <option value="awareness">जागरूकता</option>
                                <option value="test">मॉक टेस्ट</option>
                                <option value="review">रिवीजन</option>
                            </select>
                            <input type="text" class="topic-input" placeholder="विषय नाम">
                            <button type="button" class="remove-slot" onclick="removeTimeSlot(this)">×</button>
                        </div>
                    </div>
                    <button type="button" class="add-slot-btn" onclick="addTimeSlot()">+ समय स्लॉट जोड़ें</button>
                </div>

                <div class="form-group">
                    <label>दोहराएं</label>
                    <select id="repeatOption">
                        <option value="once">एक बार</option>
                        <option value="daily">दैनिक</option>
                        <option value="weekly">साप्ताहिक</option>
                        <option value="weekdays">सप्ताह के दिन</option>
                        <option value="weekends">सप्ताहांत</option>
                    </select>
                </div>

                <button type="submit" class="submit-btn">अनुसूची बनाएं</button>
            </form>
        </div>
    </div>
</div>

<!-- फोकस उपकरण -->
<div class="focus-tools">
    <h3>फोकस उपकरण</h3>
    <div class="tools-grid">
        <div class="tool-card">
            <div class="tool-icon">🍅</div>
            <div class="tool-title">पोमोडोरो टाइमर</div>
            <div class="tool-description">25 मिनट फोकस, 5 मिनट ब्रेक</div>
            <div class="tool-settings">
                <div class="setting-row">
                    <label>फोकस समय</label>
                    <input type="number" value="25" min="1" max="60" id="focusTime">
                </div>
                <div class="setting-row">
                    <label>ब्रेक समय</label>
                    <input type="number" value="5" min="1" max="30" id="breakTime">
                </div>
            </div>
            <button class="tool-btn" onclick="startPomodoro()">पोमोडोरो प्रारंभ करें</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">🎯</div>
            <div class="tool-title">डीप वर्क</div>
            <div class="tool-description">90 मिनट निर्बाध अध्ययन</div>
            <div class="tool-settings">
                <div class="setting-row">
                    <label>अवधि</label>
                    <select id="deepWorkDuration">
                        <option value="60">60 मिनट</option>
                        <option value="90" selected>90 मिनट</option>
                        <option value="120">120 मिनट</option>
                    </select>
                </div>
            </div>
            <button class="tool-btn" onclick="startDeepWork()">डीप वर्क प्रारंभ करें</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">⏰</div>
            <div class="tool-title">कस्टम टाइमर</div>
            <div class="tool-description">अपनी अध्ययन अवधि सेट करें</div>
            <div class="tool-settings">
                <div class="setting-row">
                    <label>घंटे</label>
                    <input type="number" value="0" min="0" max="8" id="customHours">
                </div>
                <div class="setting-row">
                    <label>मिनट</label>
                    <input type="number" value="30" min="0" max="59" id="customMinutes">
                </div>
            </div>
            <button class="tool-btn" onclick="startCustomTimer()">टाइमर प्रारंभ करें</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">🔕</div>
            <div class="tool-title">फोकस मोड</div>
                            <div class="tool-description">विकर्षण और सूचनाएं ब्लॉक करें</div>
            <div class="tool-settings">
                <div class="setting-row">
                    <label>साइट्स ब्लॉक करें</label>
                    <input type="checkbox" id="blockSites">
                </div>
                <div class="setting-row">
                    <label>साइलेंट मोड</label>
                    <input type="checkbox" id="silentMode">
                </div>
            </div>
            <button class="tool-btn" onclick="enableFocusMode()">फोकस सक्षम करें</button>
        </div>
    </div>
</div>

<!-- समय विश्लेषण -->
<div class="time-analytics">
    <h3>समय विश्लेषण</h3>
    <div class="analytics-grid">
        <div class="chart-container">
            <h4>साप्ताहिक अध्ययन समय</h4>
            <canvas id="weeklyChart"></canvas>
        </div>

        <div class="stats-container">
            <h4>उत्पादकता आँकड़े</h4>
            <div class="stat-item">
                <div class="stat-label">औसत दैनिक अध्ययन</div>
                <div class="stat-value">3h 45m</div>
                <div class="stat-change positive">↑ 15m</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">शीर्ष अध्ययन समय</div>
                <div class="stat-value">9:00 AM - 11:00 AM</div>
                <div class="stat-detail">सबसे उत्पादक घंटे</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">फोकस दक्षता</div>
                <div class="stat-value">87%</div>
                <div class="stat-change positive">↑ 5%</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">लक्ष्य पूर्णता</div>
                <div class="stat-value">92%</div>
                <div class="stat-change positive">↑ 3%</div>
            </div>
        </div>
    </div>

    <div class="subject-time-breakdown">
        <h4>विषय समय वितरण</h4>
        <div class="subject-chart">
            <canvas id="subjectChart"></canvas>
        </div>
    </div>
</div>

<!-- अध्ययन लक्ष्य -->
<div class="study-goals">
    <h3>अध्ययन लक्ष्य</h3>
    <div class="goals-overview">
        <div class="goal-summary">
            <div class="goal-stat">
                <div class="goal-value">85%</div>
                <div class="goal-label">दैनिक लक्ष्य पूर्णता</div>
            </div>
            <div class="goal-stat">
                <div class="goal-value">4.2h</div>
                <div class="goal-label">औसत अध्ययन समय</div>
            </div>
            <div class="goal-stat">
                <div class="goal-value">28</div>
                <div class="goal-label">लगातार दिन</div>
            </div>
        </div>

        <div class="active-goals">
            <h4>सक्रिय लक्ष्य</h4>
            <div class="goal-list">
                <div class="goal-item">
                    <div class="goal-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 75%"></div>
                        </div>
                        <div class="goal-info">
                            <div class="goal-name">दैनिक 4 घंटे</div>
                            <div class="goal-detail">3h 15m / 4h</div>
                        </div>
                    </div>
                </div>

                <div class="goal-item">
                    <div class="goal-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 90%"></div>
                        </div>
                        <div class="goal-info">
                            <div class="goal-name">5 सत्र पूर्ण करें</div>
                            <div class="goal-detail">4 / 5 सत्र</div>
                        </div>
                    </div>
                </div>

                <div class="goal-item">
                    <div class="goal-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 60%"></div>
                        </div>
                        <div class="goal-info">
                            <div class="goal-name">80%+ दक्षता फोकस</div>
                            <div class="goal-detail">वर्तमान: 87%</div>
                        </div>
                    </div>
                </div>
            </div>

            <button class="add-goal-btn" onclick="addStudyGoal()">+ नया लक्ष्य जोड़ें</button>
        </div>
    </div>
</div>