<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Silent Reading Research</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
    
    <style>

:root {
    --primary: #6366f1;
    --secondary: #818cf8;
    --background: #f8fafc;
    --text: #1e293b;
    --sidebar: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: var(--background);
    color: var(--text);
    display: flex;
}


.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--background);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s;
}

.brain-loader {
    width: 50px;
    height: 50px;
    border: 3px solid var(--primary);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}


.sidebar {
    width: 250px;
    height: 100vh;
    background: var(--sidebar);
    padding: 20px;
    position: fixed;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.sidebar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.sidebar ul li {
    list-style: none;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar ul li:hover, .sidebar ul li.active {
    background: var(--primary);
    color: white;
}


main {
    margin-left: 250px;
    padding: 30px;
    width: calc(100% - 250px);
}

.page {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page.active {
    display: block;
    opacity: 1;
}


.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 15px;
}


@keyframes spin {
    to { transform: rotate(360deg); }
}


@media (max-width: 768px) {
    .sidebar {
        width: 70px;
    }
    
    .sidebar .logo span,
    .sidebar ul li span {
        display: none;
    }
    
    main {
        margin-left: 70px;
        width: calc(100% - 70px);
    }
}
        .research-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .research-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .research-card:hover {
            transform: translateY(-5px);
        }

        .journal-entry {
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .citation {
            padding: 15px;
            border-left: 4px solid var(--primary);
            margin-bottom: 15px;
            background: white;
            border-radius: 0 15px 15px 0;
        }

        .highlight {
            color: var(--primary);
            font-weight: 500;
        }

        .chart-container {
            background: white;
            padding: 20px;
            border-radius: 15px;
            margin: 20px 0;
        }
        .loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s;
}

.loader-content {
    text-align: center;
    color: white;
}

.loader-text {
    margin: 20px 0;
}

.loader-text h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.loading-bar {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    margin: 20px auto;
}

.loading-progress {
    width: 0%;
    height: 100%;
    background: white;
    border-radius: 2px;
    animation: loading 2s ease-in-out forwards;
}

@keyframes loading {
    to { width: 100%; }
}

/* Quick Facts Styles */
.quick-facts {
    margin-top: 40px;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.fact-card {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.fact-card:hover {
    transform: translateY(-5px);
}

.fact-card i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 15px;
}

/* Timeline Styles */
.timeline {
    margin: 40px 0;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: var(--primary);
}

.timeline-item {
    margin: 40px 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.timeline-content {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 600px;
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
}

.timeline-content h3 {
    color: var(--primary);
    margin-bottom: 15px;
}

.timeline-content ul {
    list-style-type: none;
    padding: 0;
}

.timeline-content ul li {
    margin: 10px 0;
    padding-left: 20px;
    position: relative;
}

.timeline-content ul li::before {
    content: '•';
    color: var(--primary);
    position: absolute;
    left: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .timeline::before {
        left: 30px;
    }
    
    .timeline-content {
        width: calc(100% - 60px);
        margin-left: 60px;
    }
    
    .timeline-content::before {
        left: -50px;
    }
}
.survey-results {
    margin-top: 40px;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.chart-container {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.survey-insights {
    background: var(--primary);
    color: white;
    padding: 20px;
    border-radius: 15px;
    margin-top: 30px;
}

.survey-insights ul {
    margin-top: 15px;
}

.survey-insights li {
    margin: 10px 0;
}

.survey-section {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.survey-section h2 {
    color: var(--primary);
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.methodology-note {
    background: var(--primary);
    color: white;
    padding: 25px;
    border-radius: 15px;
    margin-top: 40px;
}

.methodology-note h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.survey-section .chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

@media (max-width: 768px) {
    .survey-section .chart-grid {
        grid-template-columns: 1fr;
    }
}
.mobile-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.mobile-alert-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    margin: 20px;
    max-width: 400px;
    animation: slideIn 0.5s ease-out;
}

.mobile-alert-content i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.mobile-alert-content h2 {
    color: var(--primary);
    margin-bottom: 15px;
}

.mobile-alert-content p {
    margin-bottom: 20px;
    line-height: 1.5;
}

.mobile-alert-content button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s ease;
}

.mobile-alert-content button:hover {
    background: var(--secondary);
}

@keyframes slideIn {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
    </style>
</head>
<body>
<div class="loader">
    <div class="loader-content">

        <div class="loader-text">
            <h2>Silent Reading Research</h2>
            <p>By Marcel</p>
        </div>
        <div class="loading-bar">
            <div class="loading-progress"></div>
        </div>
    </div>
</div>

<div id="mobileAlert" style="display: none;" class="mobile-alert">
    <div class="mobile-alert-content">
        <i class="fas fa-desktop"></i>
        <h2>Desktop Needed</h2>
        <p>For the best experience viewing this research and data, please use a computer or laptop.</p>

    </div>
</div>

    <nav class="sidebar">
        <div class="logo">
            <i class="fas fa-brain"></i>
            <span>Silent Reading Study</span>
        </div>
        <ul>
            <li class="active" data-page="home">
                <i class="fas fa-home"></i>
                <span>Home</span>
            </li>
            <li data-page="research">
                <i class="fas fa-microscope"></i>
                <span>Research</span>
            </li>
<li data-page="survey">
    <i class="fas fa-chart-pie"></i>
    <span>Survey Data</span>
</li>
            <li data-page="journal">
                <i class="fas fa-book-open"></i>
                <span>Journal</span>
            </li>
            <li data-page="citations">
                <i class="fas fa-quote-right"></i>
                <span>Citations</span>
            </li>
        </ul>
    </nav>

    <main>

        <div class="page active" id="home">
            <h1 data-aos="fade-down">Impact of Silent Reading on Daily Life</h1>
            <p data-aos="fade-up" style="margin: 20px 0;">
Research Study Conducted By Marcel
            </p>
            <div class="stats-container">
                <div class="stat-card" data-aos="fade-up" data-aos-delay="100">
                    <i class="fas fa-brain"></i>
                    <h3>Cognitive Benefits</h3>
                    <p>Enhanced understanding and reading speed through regular silent reading practice</p>
                </div>
                <div class="stat-card" data-aos="fade-up" data-aos-delay="200">
                    <i class="fas fa-heart"></i>
                    <h3>Emotional Growth</h3>
                    <p>Improved emotional intelligence and stress reduction through reading</p>
                </div>
                <div class="stat-card" data-aos="fade-up" data-aos-delay="300">
                    <i class="fas fa-users"></i>
                    <h3>Social Impact</h3>
                    <p>Better relationships and enhanced empathy through understanding more complex perspectives</p>
                </div>
            </div>
                                            <div class="quick-facts" data-aos="fade-up">
    <h2>Key Findings</h2>
    <div class="facts-grid">
        <div class="fact-card">
            <i class="fas fa-percentage"></i>
            <h3>28%</h3>
            <p>of students read for enjoyment once a week or less</p>
        </div>
        <div class="fact-card">
            <i class="fas fa-clock"></i>
            <h3>Daily Reading</h3>
            <p>Just 15 minutes of silent reading can improve vocabulary and understanding of what you read</p>
        </div>
        <div class="fact-card">
            <i class="fas fa-mobile-alt"></i>
            <h3>Screen Time</h3>
            <p>Reading provides a break from phones and social media</p>
        </div>
        <div class="fact-card">
            <i class="fas fa-brain"></i>
            <h3>Brain Development</h3>
            <p>Enhances white matter formation and neural connectivity</p>
        </div>
    </div>
</div>
        </div>


        <div class="page" id="research">
            <h2 data-aos="fade-down">Research Findings</h2>
            <div class="research-grid">

                <div class="research-card" data-aos="fade-up">
                    <h3><i class="fas fa-chart-line"></i> Reading Habits Statistics</h3>
                    <p>Recent studies show that only 28% of students read for enjoyment once a week or less, with 10% never reading at all. This concerning trend indicates a decline in reading habits as students age.</p>
                </div>
                <div class="research-card" data-aos="fade-up">
                    <h3><i class="fas fa-brain"></i> Cognitive Development</h3>
                    <p>Research shows that screen time can lead to developmental delays and affects white matter formation in the brain. Silent reading helps counter these effects by putting the phone down and stimulating neural pathways.</p>
                </div>
                <div class="research-card" data-aos="fade-up">
                    <h3><i class="fas fa-heart"></i> Emotional Benefits</h3>
                    <p>Silent reading has proven to help understand your emotions, as well as improve how you process them. It also serves as an excellent stress reducer.</p>
                </div>
                <div class="research-card" data-aos="fade-up">
                    <h3><i class="fas fa-book"></i> Reading Efficiency</h3>
                    <p>Silent reading proves more effective than reading aloud, improving comprehension, increasing reading speed, and helping readers avoid distractions.</p>
                </div>
            </div>
                            <div class="detailed-findings" data-aos="fade-up">
    <h2>Detailed Analysis</h2>
    <div class="timeline">
        <div class="timeline-item">
            <div class="timeline-content">
                <h3>Emotional Intelligence</h3>
                <p>Studies show that regular readers demonstrate:</p>
                <ul>
                    <li>Higher levels of empathy </li>
                    <li>Better emotional control</li>
                    <li>Improved stress management</li>
                    <li>Enhanced social awareness</li>
                </ul>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-content">
                <h3>Cognitive Benefits</h3>
                <p>Silent reading contributes to:</p>
                <ul>
                    <li>Increased focus and concentration</li>
                    <li>Better memory retention</li>
                    <li>Improved critical thinking</li>
                    <li>Enhanced vocabulary</li>
                </ul>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-content">
                <h3>Academic Performance</h3>
                <p>Regular readers show:</p>
                <ul>
                    <li>Higher test scores</li>
                    <li>Better writing skills</li>
                    <li>Improved understanding</li>
                    <li>Enhanced analytical abilities</li>
                </ul>
            </div>
        </div>
    </div>
</div>
        </div>

<div class="page" id="survey">
    <h1 data-aos="fade-down">Survey Analysis</h1>
    <p data-aos="fade-up" style="margin: 20px 0;">
        Analysis of two surveys conducted: one with 46 participants focusing on reading habits, 
        and another with 178 participants examining reading preferences and behaviors.
    </p>


    <div class="survey-section" data-aos="fade-up">
        <h2>Silent Reading Impact Survey (46 Participants in District)</h2>
        <div class="chart-grid">
            <div class="chart-container">
                <h3>Reading Frequency</h3>
                <canvas id="readingFrequencyChart"></canvas>
            </div>
            
            <div class="chart-container">
                <h3>Stress Reduction Effect</h3>
                <canvas id="stressReductionChart"></canvas>
            </div>
            
            <div class="chart-container">
                <h3>Sleep Quality Impact</h3>
                <canvas id="sleepQualityChart"></canvas>
            </div>
            
            <div class="chart-container">
                <h3>Effective Reading Factors</h3>
                <canvas id="readingFactorsChart"></canvas>
            </div>

            <div class="chart-container">
                <h3>Impact on Well-being</h3>
                <canvas id="wellbeingChart"></canvas>
            </div>
        </div>
    </div>


    <div class="survey-section" data-aos="fade-up">
        <h2>Reading Preferences Survey (178 Participants done in free time)</h2>
        <div class="chart-grid">
            <div class="chart-container">
                <h3>Reading Selection Factors</h3>
                <canvas id="readingSelectionChart"></canvas>
            </div>

            <div class="chart-container">
                <h3>Average Reading Time Distribution</h3>
                <canvas id="readingTimeChart"></canvas>
            </div>
        </div>
    </div>

    <div class="survey-insights" data-aos="fade-up">
        <h3>Key Findings:</h3>
        <ul>
            <li>69.5% of participants agree or strongly agree that silent reading positively affects their well-being</li>
            <li>70% report that silent reading helps reduce stress</li>
            <li>75% prefer a quiet and comfortable environment for effective reading</li>
            <li>Only 22% read daily, indicating room for improvement in reading habits</li>
            <li>Genre and book cover are the top factors influencing reading choices</li>
            <li>Most readers prefer 20-30 minute reading sessions</li>
        </ul>
    </div>

    <div class="methodology-note" data-aos="fade-up">
        <h3>Survey Info</h3>
        <p>These surveys were conducted through online forms. The first survey focused on the impact of silent reading on well-being and daily life in the district, while the second survey examined reading preferences and habits. Outside of school, Data was collected over a period of two weeks, ensuring a diverse range of participants across different age groups and reading backgrounds.</p>
    </div>
</div>


        <div class="page" id="journal">
            <h2 data-aos="fade-down">Reading Journal</h2>
            <div class="journal-entry" data-aos="fade-up">
                <h3>Day 1</h3>
                <p>Today I started reading The Night is for Hunting by John Marsden for my silent reading session. I wont lie, I find the story a bit slow, and I’m not feeling very hooked. They are mostly just talking about cows and farming, but it’s hard to get invested in the plot yet. Although it doesnt intrigue me, I’m sticking with it because you know I have too.</p>
                <p>Observations:</p>
                <ul>
                    <li>Really slow read</li>
                    <li>Pretty Boring</li>
                    <li>Did get me off my phone</li>
                </ul>
            </div>
                        <div class="journal-entry" data-aos="fade-up">
                            <h3>Day 2</h3>
                <p>I continued reading The Night is for Hunting today, but I'm still not interested in the story. Im not really emotionally in the book if you know what I mean, I mean if im forced to read it I will.</p>
                <p>Observations:</p>
                <ul>
                    <li>Repetitve</li>
                    <li>Even more boring</li>
                    <li>Did get more action here talking about rebels</li>
                </ul>
            </div>
                                    <div class="journal-entry" data-aos="fade-up">
                            <h3>Day 3</h3>
                <p>Overall, the reading was good and it did get me away from the phone, If I actually enjoyed this book silent reading isnt even bad. I should've changed books while reading but it's okay. In the end I felt benefits from the silent reading it could of also been from putting my phone down.</p>
                <p>Observations:</p>
                <ul>
                    <li>Silent Reading is good</li>
                    <li>Different books would change a lot</li>
                    <li>It does have benefits</li>
                </ul>
            </div>
        </div>


<div class="page" id="citations">
    <h2 data-aos="fade-down">MLA Citations</h2>
    <div class="citation" data-aos="fade-up">
        "Benefits of Silent Reading." Iris Reading, irisreading.com/benefits-of-silent-reading/. Accessed 3 Dec. 2024.
    </div>
    <div class="citation" data-aos="fade-up">
        "Screen Time and Developmental Delays." Psychiatry Online, psychiatryonline.org/doi/full/10.1176/appi.pn.2020.1a13. Accessed 3 Dec. 2024.
    </div>
    <div class="citation" data-aos="fade-up">
        "Building a Reader." Queenwood, www.queenwood.nsw.edu.au/queenwood/media/Qqueenwood-documents/ACCESS_Vol35_No1_MARCH2021_BuildingaReader-(1).pdf. Accessed 2 Dec. 2024.
    </div>
    <div class="citation" data-aos="fade-up">
        "Improving Teens' Reading and Their Well-Being." ASCD, ascd.org/blogs/improving-teens-reading-and-their-well-being. Accessed 3 Dec. 2024.
    </div>
    <div class="citation" data-aos="fade-up">
        "The Psychological Benefits of Reading." Paths to Literacy, paths.care/resources/the-psychological-benefits-of-reading/. Accessed 3 Dec. 2024.
    </div>
    <div class="citation" data-aos="fade-up">
        "The Importance of Silent Reading." UBC Blogs, blogs.ubc.ca/learningliteracy/2015/01/25/the-importance-of-silent-reading/. Accessed 4 Dec. 2024.
    </div>
</div>

    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>

        AOS.init({
            duration: 1000,
            once: true
        });

window.addEventListener('load', () => {

    new Chart(document.getElementById('readingSelectionChart'), {
    type: 'pie',
    data: {
        labels: ['Cover', 'Genre', 'Author', 'Marketing'],
        datasets: [{
            data: [59, 46, 28, 17], 
            backgroundColor: [
                'rgba(255, 99, 132, 0.8)',
                'rgba(54, 162, 235, 0.8)',
                'rgba(255, 206, 86, 0.8)',
                'rgba(75, 192, 192, 0.8)'
            ],
            borderColor: 'white',
            borderWidth: 2,
            hoverOffset: 15
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'What Makes Readers Choose Their Books? (Based on 150 responses)',
                font: {
                    size: 16
                }
            },
            legend: {
                position: 'right',
                labels: {
                    padding: 20,
                    usePointStyle: true
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = Math.round((context.raw / total) * 100);
                        return `${context.label}: ${context.raw} responses (${percentage}%)`;
                    }
                }
            }
        },
        animation: {
            animateScale: true,
            animateRotate: true,
            duration: 2000
        }
    }
});


new Chart(document.getElementById('readingTimeChart'), {
    type: 'bar',
    data: {
        labels: ['10 Minutes', '20 Minutes', '30 Minutes', '1 Hour+', '1 Hour >'],
        datasets: [{
            label: 'Number of Readers',
            data: [31, 54, 33, 7, 25], 
            backgroundColor: [
                'rgba(255, 99, 132, 0.8)',
                'rgba(54, 162, 235, 0.8)',
                'rgba(255, 206, 86, 0.8)',
                'rgba(75, 192, 192, 0.8)',
                'rgba(153, 102, 255, 0.8)'
            ],
            borderColor: 'white',
            borderWidth: 2,
            borderRadius: 8,
            hoverBackgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Average Reading Time Distribution (Based on 150 responses)',
                font: {
                    size: 16
                }
            },
            legend: {
                display: false
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = Math.round((context.raw / total) * 100);
                        return `${context.raw} readers (${percentage}%)`;
                    }
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    display: false
                },
                title: {
                    display: true,
                    text: 'Number of Readers'
                }
            },
            x: {
                grid: {
                    display: false
                },
                title: {
                    display: true,
                    text: 'Reading Duration'
                }
            }
        },
        animation: {
            duration: 2000,
            easing: 'easeInOutQuart'
        }
    }
});
    new Chart(document.getElementById('readingFrequencyChart'), {
        type: 'doughnut',
        data: {
            labels: ['Daily', 'Weekly', 'Few times a month', 'Never', 'Rarely'],
            datasets: [{
                data: [10, 8, 6, 7, 15],
                backgroundColor: [
                    'rgba(76, 175, 80, 0.8)',
                    'rgba(33, 150, 243, 0.8)',
                    'rgba(255, 193, 7, 0.8)',
                    'rgba(244, 67, 54, 0.8)',
                    'rgba(156, 39, 176, 0.8)'
                ],
                borderColor: 'white',
                borderWidth: 2,
                hoverOffset: 15
            }]
        },
        options: {
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        padding: 20,
                        usePointStyle: true
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((context.raw / total) * 100);
                            return `${context.label}: ${context.raw} (${percentage}%)`;
                        }
                    }
                }
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    });


    new Chart(document.getElementById('stressReductionChart'), {
        type: 'pie',
        data: {
            labels: ['Yes', 'No'],
            datasets: [{
                data: [32, 14],
                backgroundColor: [
                    'rgba(76, 175, 80, 0.8)',
                    'rgba(244, 67, 54, 0.8)'
                ],
                borderColor: 'white',
                borderWidth: 2,
                hoverOffset: 15
            }]
        },
        options: {
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((context.raw / total) * 100);
                            return `${context.label}: ${percentage}%`;
                        }
                    }
                }
            },
            animation: {
                animateScale: true,
                animateRotate: true,
                duration: 2000
            }
        }
    });
new Chart(document.getElementById('sleepQualityChart'), {
    type: 'pie',
    data: {
        labels: ['Yes', 'No'],
        datasets: [{
            data: [25, 21],
            backgroundColor: [
                'rgba(76, 175, 80, 0.8)',
                'rgba(244, 67, 54, 0.8)'
            ],
            borderColor: 'white',
            borderWidth: 2,
            hoverOffset: 15
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Does Silent Reading Improve Sleep Quality?',
                font: {
                    size: 16
                }
            },
            legend: {
                position: 'bottom'
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = Math.round((context.raw / total) * 100);
                        return `${context.label}: ${context.raw} responses (${percentage}%)`;
                    }
                }
            }
        },
        animation: {
            animateScale: true,
            animateRotate: true,
            duration: 2000
        }
    }
});


new Chart(document.getElementById('wellbeingChart'), {
    type: 'bar',
    data: {
        labels: ['Strongly Agree', 'Agree', 'Disagree', 'Strongly Disagree'],
        datasets: [{
            label: 'Number of Responses',
            data: [12, 26, 5, 3],
            backgroundColor: [
                'rgba(76, 175, 80, 0.8)', 
                'rgba(139, 195, 74, 0.8)', 
                'rgba(255, 152, 0, 0.8)',   
                'rgba(244, 67, 54, 0.8)'   
            ],
            borderColor: 'white',
            borderWidth: 2,
            borderRadius: 8,
            hoverBackgroundColor: [
                'rgba(76, 175, 80, 1)',
                'rgba(139, 195, 74, 1)',
                'rgba(255, 152, 0, 1)',
                'rgba(244, 67, 54, 1)'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Impact on Well-being',
                font: {
                    size: 16
                }
            },
            legend: {
                display: false
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = Math.round((context.raw / total) * 100);
                        return `${context.raw} responses (${percentage}%)`;
                    }
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    display: false
                },
                ticks: {
                    font: {
                        size: 12
                    }
                }
            },
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    font: {
                        size: 12
                    }
                }
            }
        },
        animation: {
            duration: 2000,
            easing: 'easeInOutQuart'
        }
    }
});

    new Chart(document.getElementById('readingFactorsChart'), {
        type: 'bar',
        data: {
            labels: ['Comfortable Seating', 'Quiet Environment', 'Specific Time', 'Music', 'Any Setting'],
            datasets: [{
                label: 'Number of Responses',
                data: [32, 35, 8, 8, 6],
                backgroundColor: [
                    'rgba(33, 150, 243, 0.8)',
                    'rgba(76, 175, 80, 0.8)',
                    'rgba(255, 193, 7, 0.8)',
                    'rgba(156, 39, 176, 0.8)',
                    'rgba(244, 67, 54, 0.8)'
                ],
                borderColor: 'white',
                borderWidth: 2,
                borderRadius: 5,
                hoverBackgroundColor: [
                    'rgba(33, 150, 243, 1)',
                    'rgba(76, 175, 80, 1)',
                    'rgba(255, 193, 7, 1)',
                    'rgba(156, 39, 176, 1)',
                    'rgba(244, 67, 54, 1)'
                ]
            }]
        },
        options: {
            indexAxis: 'y',
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((context.raw / total) * 100);
                            return `${context.raw} responses (${percentage}%)`;
                        }
                    }
                }
            },
            animation: {
                duration: 2000,
                easing: 'easeInOutQuart'
            },
            scales: {
                x: {
                    grid: {
                        display: false
                    }
                },
                y: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });


    const chartContainers = document.querySelectorAll('.chart-container');
    chartContainers.forEach(container => {
        container.style.minHeight = '300px';
        container.style.position = 'relative';
    });
});

window.addEventListener('load', () => {
    setTimeout(() => {
        const loader = document.querySelector('.loader');
        loader.style.opacity = '0';
        setTimeout(() => {
            loader.style.display = 'none';
        }, 500);
    }, 2000); 
});


        document.querySelectorAll('.sidebar li').forEach(item => {
            item.addEventListener('click', () => {

                document.querySelectorAll('.sidebar li').forEach(i => i.classList.remove('active'));
                

                item.classList.add('active');
                

                const pageId = item.dataset.page;
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.remove('active');
                });
                document.getElementById(pageId).classList.add('active');
            });
        });


        const observerOptions = {
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.stat-card, .research-card, .journal-entry, .citation').forEach(card => {
            observer.observe(card);
        });

        function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 
        || window.innerWidth <= 768;
}

function showMobileAlert() {
    const alert = document.getElementById('mobileAlert');
    if (isMobile()) {
        alert.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }
}

function dismissAlert() {
    const alert = document.getElementById('mobileAlert');
    alert.style.animation = 'fadeOut 0.5s ease-out forwards';
    document.body.style.overflow = 'auto';
    setTimeout(() => {
        alert.style.display = 'none';
    }, 500);
}


window.addEventListener('load', () => {

    

    showMobileAlert();
});


window.addEventListener('resize', () => {
    if (isMobile() && document.getElementById('mobileAlert').style.display === 'none') {
        showMobileAlert();
    }
});
    </script>
</body>
</html>