    @model HizliOkuma.Dtos.SummaryDto
    <!DOCTYPE html>
    <html lang="tr" translate="no">
    <head>
        <base href="/"/>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <title>Öğrenci Paneli</title>
        <link rel="preconnect" href="https://fonts.googleapis.com/">
        <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&amp;display=swap" rel="stylesheet">
        <link href="/global_assets/css/icons/icomoon/styles.min.css" rel="stylesheet" type="text/css">
        <link href="/global_assets/css/icons/fontawesome/styles.min.css" rel="stylesheet" type="text/css">
        <link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
        <link href="/assets/css/bootstrap_limitless.css" rel="stylesheet" type="text/css">
        <link href="/assets/css/layout.css" rel="stylesheet" type="text/css">
        <link href="/assets/css/components.min.css" rel="stylesheet" type="text/css">
        <link href="/assets/css/colors.min.css" rel="stylesheet" type="text/css">
        <link href="/assets/css/custom_animation.css" rel="stylesheet" type="text/css">

        <link href="/global_assets/css/extras/animate.min.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Ribeye+Marrow|Montserrat:300" rel="stylesheet">
        <script src="/assets/js/echarts.min.js"></script>
        <script src="/global_assets/js/main/jquery.min.js"></script>
        <script src="/global_assets/js/main/bootstrap.bundle.min.js"></script>
        <script src="/global_assets/js/plugins/loaders/blockui.min.js"></script>
        <script src="/global_assets/js/plugins/ui/slinky.min.js"></script>
        <script src="/global_assets/js/plugins/ui/fab.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js"></script>
        <script src="/global_assets/js/plugins/visualization/d3/d3.min.js"></script>
        <script src="/global_assets/js/plugins/visualization/d3/d3_tooltip.js"></script>
        <script src="/global_assets/js/plugins/forms/styling/switchery.min.js"></script>
        <script src="/global_assets/js/plugins/forms/selects/bootstrap_multiselect.js"></script>
        <script src="/global_assets/js/plugins/ui/moment/moment.min.js"></script>
        <script src="/global_assets/js/plugins/pickers/daterangepicker.js"></script>
        <script src="/global_assets/js/demo_pages/animations_css3.js"></script>
        <script src="/assets/js/app.js"></script>
        <script src="/assets/js/particles.js"></script>
        <style>
            .navbar-brand img{
                height: 4rem;
            }
            .modern-stats-card {
                position: relative;
                background: rgba(255, 255, 255, 0.9);  /* Arkaplan opaklığı artırıldı */
                backdrop-filter: blur(10px);
                border-radius: 20px;
                padding: 25px;
                margin-bottom: 30px;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
                transition: all 0.3s ease;
                min-height: 140px;  /* Minimum yükseklik eklendi */
            }

            .modern-stats-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
            }

            .card-content {
                position: relative;
                z-index: 2;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 100%;
            }

            .info-section {
                flex: 1;
                margin-right: 20px;  /* Sağ tarafta boşluk bırakıldı */
            }

            .animation-section {
                width: 80px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .animation-section > div {
                width: 100%;
                height: 100%;
            }

            .stats-title {
                color: #ffae68;
                font-size: 1.1rem;
                font-weight: 600;
                margin-bottom: 10px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .stats-value {
                color: #333;
                font-size: 1.8rem;
                font-weight: 700;
                margin-bottom: 5px;
                font-family: 'Open Sans', sans-serif;
            }

            .card-blur {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(255,174,104,0.1) 0%, rgba(255,142,56,0.1) 100%);
                border-radius: 20px;
                z-index: 1;
            }

            /* Responsive düzenlemeler */
            @@media (max-width: 768px) {
            .modern-stats-card {
                min-height: 120px;
            }

            .animation-section {
                width: 60px;
                height: 60px;
            }

            .animation-section > div {
                width: 60px;
                height: 60px;
            }

            .stats-value {
                font-size: 1.5rem;
            }

            .stats-title {
                font-size: 1rem;
            }
            }
            .progress-sm {
                background-color: rgba(255, 255, 255, 0.2);
            }

            .progress-bar.bg-warning {
                background-color: #ffae68 !important;
            }
            
            /* Yeni egzersiz menüsü stilleri */
            .exercise-dropdown {
                width: 900px;
                padding: 20px;
                border-radius: 12px;
                box-shadow: 0 5px 25px rgba(0,0,0,0.1);
                border: none;
            }

            .exercise-menu {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }

            .exercise-category {
                padding: 15px;
                background: rgba(255,255,255,0.5);
                border-radius: 8px;
            }

            .category-title {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
            }

            .category-items {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .category-items a {
                color: #666;
                font-size: 13px;
                padding: 6px 10px;
                border-radius: 4px;
                transition: all 0.2s ease;
                text-decoration: none;
            }

            .category-items a:hover {
                background: rgba(255,174,104,0.1);
                color: #ff8e38;
            }

            /* Testler menüsü için yeni stiller */
            .tests-menu {
                padding: 15px;
            }

            .tests-menu .category-title {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-bottom: 12px;
                padding: 0 10px;
            }

            .tests-menu .category-items {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .tests-menu .category-items a {
                color: #666;
                font-size: 13px;
                padding: 8px 12px;
                border-radius: 4px;
                transition: all 0.2s ease;
                text-decoration: none;
                display: flex;
                align-items: center;
            }

            .tests-menu .category-items a i {
                margin-right: 10px;
                font-size: 16px;
            }

            .tests-menu .category-items a:hover {
                background: rgba(255,174,104,0.1);
                color: #ff8e38;
            }

            /* Responsive düzenlemeler */
            @@media (max-width: 992px) {
                .exercise-dropdown {
                    width: 100%;
                    max-width: 600px;
                }

                .exercise-menu {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @@media (max-width: 768px) {
                .exercise-menu {
                    grid-template-columns: 1fr;
                }
               
                .navbar-collapse {
                    background: white;
                    padding: 15px;
                    border-radius: 8px;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                    position: absolute;
                    top: 100%;
                    left: 0;
                    right: 0;
                    z-index: 1000;
                }

                .dropdown-menu {
                    margin: 0 !important;
                    padding: 10px !important;
                    border: none !important;
                    box-shadow: none !important;
                    position: static !important;
                    transform: none !important;
                    width: 100% !important;
                    max-width: none !important;
                }

                .exercise-dropdown {
                    background: #f8f9fa;
                    margin-top: 10px;
                }

                .exercise-category {
                    background: white;
                }

                .navbar-nav {
                    padding: 10px 0;
                }

                .nav-item {
                    width: 100%;
                    margin: 5px 0;
                }

                .nav-link {
                    padding: 10px !important;
                    border-radius: 4px;
                }

                .dropdown-user .navbar-nav-link {
                    background: rgba(255,174,104,0.1);
                }
            }

            .footer {
                background: #fff;
                border-top: 1px solid rgba(0,0,0,0.06);
                position: fixed;
                bottom: 0;
                width: 100%;
                z-index: 999;
            }

            .footer-text {
                color: #666;
                font-weight: 500;
            }

            .footer-divider {
                color: #ddd;
            }

            .footer-copyright {
                color: #888;
            }

            /* Footer için responsive ayarlar */
            @@media (max-width: 768px) {
                .footer {
                    padding: 10px 0;
                }
                
                .footer-text, 
                .footer-copyright {
                    display: block;
                    text-align: center;
                }
                
                .footer-divider {
                    display: none;
                }
            }

            /* Footer'ın altında kalan içeriğe padding ekleyelim */
            .content-wrapper {
                padding-bottom: 60px;
            }
        </style>
        <script>
            // Grafikleri çiz
            document.addEventListener('DOMContentLoaded', function() {
                // Ana sayfadaki grafikleri çiz
                drawGraph2('columns_basic2');
                drawGraph3('columns_basic3');

                // Pencere boyutu değiştiğinde grafikleri yeniden çiz
                window.addEventListener('resize', function() {
                    drawGraph2('columns_basic2');
                    drawGraph3('columns_basic3');
                });
            });

            document.addEventListener('DOMContentLoaded', function() {
                // Egzersiz tab'larını yönet
                const tabs = document.querySelectorAll('.exercise-tab');
                const contents = document.querySelectorAll('.exercise-content');

                tabs.forEach(tab => {
                    tab.addEventListener('click', function() {
                        const category = this.dataset.category;
                        
                        // Tab'ları güncelle
                        tabs.forEach(t => t.classList.remove('active'));
                        this.classList.add('active');
                        
                        // İçerikleri güncelle
                        contents.forEach(content => {
                            if(content.dataset.category === category) {
                                content.classList.add('active');
                            } else {
                                content.classList.remove('active');
                            }
                        });
                    });
                });
            });
        </script>
    </head>
    <body>
    <div class="page-header" style="background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
        <div class="navbar navbar-expand-md navbar-light border-transparent" style="height: 70px;">
            <div class="container-fluid">
                <div class="d-flex align-items-center">
                    <a class="navbar-brand" href="/">
                        <img src="/img/logo.png" width="200" alt="Logo" style="margin-left: 20px;">
                    </a>
                </div>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="navbar-collapse collapse" id="navbar-collapse">
                    <ul class="navbar-nav ml-md-auto align-items-center">
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
                                <i class="icon-brain mr-1"></i>
                                Egzersizler
                            </a>
                            <div class="dropdown-menu dropdown-menu-right exercise-dropdown">
                                <div class="exercise-menu">
                                    <div class="exercise-category">
                                        <h6 class="category-title"><i class="icon-eye text-danger mr-2"></i>Göz Egzersizleri</h6>
                                        <div class="category-items">
                                            <a href="/Exercises/DegisenRengarenkKareler">Rengarenk Kareler</a>
                                            <a href="/Exercises/Takip">Takip</a>
                                            <a href="/Exercises/RitimSayaci">Ritim Sayacı</a>
                                            <a href="/Exercises/STakibi">S Takibi</a>
                                            <a href="/Exercises/BitmeyenKareler">Bitmeyen Kareler</a>
                                            <a href="/Exercises/GozKaslariniGelistir">Göz Kaslarını Geliştir</a>
                                            <a href="/Exercises/KoselereBak">Köşelere Bak</a>
                                        </div>
                                    </div>
                                    
                                    <div class="exercise-category">
                                        <h6 class="category-title"><i class="icon-spell-check text-purple mr-2"></i>Kelime Çalışmaları</h6>
                                        <div class="category-items">
                                            <a href="/Exercises/GozleriOynat">Gözleri Oynat</a>
                                            <a href="/Exercises/HizliGor">Hızlı Gör</a>
                                            <a href="/Exercises/AyniHarfler">Aynı Harfler</a>
                                            <a href="/Exercises/MantikliCumleKur">Mantıklı Cümle Kur</a>
                                            <a href="/Exercises/TekSeferdeGor">Tek Seferde Gör</a>
                                            <a href="/Exercises/OkumadaHizlan">Okumada Hızlan</a>
                                            <a href="/Exercises/PurdikkatOkuma">Pürdikkat Okuma</a>
                                        </div>
                                    </div>

                                    <div class="exercise-category">
                                        <h6 class="category-title"><i class="icon-paragraph-left2 text-primary mr-2"></i>Metin Okuma</h6>
                                        <div class="category-items">
                                            <a href="/Exercises/BoyanmisMetin">Boyanmış Metin</a>
                                            <a href="/Exercises/GizlenenMetin">Gizlenen Metin</a>
                                            <a href="/Exercises/KarartiliMetin">Karartılı Metin</a>
                                            <a href="/Exercises/GorunmezMetin">Görünmez Metin</a>
                                            <a href="/Exercises/KirpilmisMetin">Kırpılmış Metin</a>
                                            <a href="/Exercises/GorselliOykuler">Görselli Öyküler</a>
                                        </div>
                                    </div>

                                    <div class="exercise-category">
                                        <h6 class="category-title"><i class="icon-brain text-success mr-2"></i>Dikkat Egzersizleri</h6>
                                        <div class="category-items">
                                            <a href="/Exercises/HarfleriSay">Harfleri Say</a>
                                            <a href="/Exercises/NoktalariBul">Noktaları Bul</a>
                                            <a href="/Exercises/Yapboz">Yapboz</a>
                                            <a href="/Exercises/AyniSekiller">Aynı Şekiller</a>
                                            <a href="/Exercises/Renkbul">Renk Bul</a>
                                        </div>
                                    </div>

                                    <div class="exercise-category">
                                        <h6 class="category-title"><i class="icon-text-width text-info mr-2"></i>Hece Alıştırmaları</h6>
                                        <div class="category-items">
                                            <a href="/Exercises/HarfliBaloncuklar">Harfli Baloncuklar</a>
                                            <a href="/Exercises/HecelerAyriliyor">Heceler Ayrılıyor</a>
                                            <a href="/Exercises/HecelerBirlesiyor">Heceler Birleşiyor</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
                                <i class="icon-watch2 mr-1"></i>
                                Testler
                            </a>
                            <div class="dropdown-menu dropdown-menu-right tests-menu" style="min-width: 250px;">
                                <div class="category-title">
                                    <i class="icon-watch2 text-warning mr-2"></i>Testler
                                </div>
                                <div class="category-items">
                                    <a href="/Tests/Hiz-Olcum-Testleri">
                                        <i class="icon-watch2 text-primary"></i>
                                        <span>Hız Ölçüm Testleri</span>
                                    </a>
                                    <a href="/Tests/Dikkat-ve-Odaklanma-Testi">
                                        <i class="icon-circles text-success"></i>
                                        <span>Dikkat ve Odaklanma Testi</span>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a href="/NextLesson/" class="nav-link">
                                <i class="icon-rocket mr-1"></i>
                                Sonraki Ders
                            </a>
                        </li>
                        <li class="nav-item dropdown dropdown-user">
                            <a href="#" class="navbar-nav-link d-flex align-items-center animation rounded"
                               data-toggle="dropdown" style="padding: 8px 15px;">
                                <img src="/img/student.png" class="rounded-circle mr-2" height="34" alt="">
                                <div class="d-flex flex-column">
                                    <span style="font-size: 15px; text-transform: capitalize; color: #333;">@Model.NameAndSurname</span>
                                    <div class="progress progress-sm mt-1" style="height: 4px; width: 100px;">
                                        <div class="progress-bar bg-warning" style="width: @(Model.CompletePercentage)%">
                                            <span class="sr-only">@(Model.CompletePercentage)% Tamamlandı</span>
                                        </div>
                                    </div>
                                    <small style="font-size: 11px; color: #666;">Ders İlerlemesi: %@(Model.CompletePercentage)</small>
                                </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" 
                                 style="border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                                <a class="dropdown-item rounded" href="/Logout"><i class="icon-switch2"></i>Çıkış Yap</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="height: 3px; background: #ffae68;"></div>
    </div>

    <div class="page-content">
        <div class="content-wrapper">
            <div class="content">
                <div class="row">
                    <div class="col-md-4">
                        <div class="modern-stats-card">
                            <div class="card-content">
                                <div class="info-section">
                                    <h3 class="stats-title">Eğitim Başlangıcı</h3>
                                    <div class="stats-value">@Model.TermStartDate.ToString("dd.MM.yyyy")</div>
                                </div>
                                <div class="animation-section">
                                    <div id="startDateAnim" class="startdate"></div>
                                </div>
                            </div>
                            <div class="card-blur"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="modern-stats-card">
                            <div class="card-content">
                                <div class="info-section">
                                    <h3 class="stats-title">Eğitim Bitişi</h3>
                                    <div class="stats-value">@Model.TermEndDate.ToString("dd.MM.yyyy")</div>
                                </div>
                                <div class="animation-section">
                                    <div id="endDateAnim" class="enddate"></div>
                                </div>
                            </div>
                            <div class="card-blur"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="modern-stats-card">
                            <div class="card-content">
                                <div class="info-section">
                                    <h3 class="stats-title">Eğitim Grubu</h3>
                                    <div class="stats-value">@Model.ClassTypStr</div>
                                </div>
                                <div class="animation-section">
                                    <div id="groupAnim" class="groupanim"></div>
                                </div>
                            </div>
                            <div class="card-blur"></div>
                        </div>
                    </div>
                </div>

               

                <div class="row">
                    <div class="col-md-12">
                        <div class="custom-graph-card">
                            <div class="custom-card-header">
                                <h5 class="mb-1 text-center  font-weight-bold">Hızlı Okuma ve Anlama Sonuçları</h5>
                            </div>
                            <div class="custom-chart-container">
                                <div id="columns_basic2" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="custom-graph-card">
                            <div class="custom-card-header">
                                <h5 class="mb-1 text-center  font-weight-bold">Dikkat ve Odaklanma Sonuçları</h5>
                            </div>
                            <div class="custom-chart-container">
                                <div id="columns_basic3" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        <div class="text-center py-3">
            <span class="footer-text">Öğreten Hızlı Okuma</span>
            <span class="footer-divider mx-3">|</span>
            <span class="footer-copyright">&copy; 2025 Tüm hakları Saklıdır</span>
        </div>
    </div>
   
    <link rel="stylesheet" href="/css/graphic.css"/>
    <script>const model = @Json.Serialize(Model);
      
 
    </script>
    <script src="/js/graphic1.js"></script>
    <script src="/js/graphic2.js"></script>
    <script src="/js/graphic3.js"></script> 
    <script>
        ColorizeEducationRatingTab();
    </script>
    </body> 
    </html>
 