<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attendance App</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css" />
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar" id="navbar">
        <div class="logo">
            <h1>Attendance</h1>
        </div>
        <ul class="nav-links">
            <li><a href="/calendar/"><i class="ti ti-calendar-check"></i>Calendar</a></li>
        </ul>
    </nav>

    <!-- Hero Section -->
    <section class="hero" id="hero">

        <div class="hero-text">
            <h1>Track Your <span class="stroke-text">Attendance</span><br><span class="light-text">Like Never
                    Before.</span></h1>
            <p>
                75% attendance must in college?
            </p>
        </div>



        <!-- Search and Actions -->
        <div id="search-college-container" class="search-container">
            <div class="input-wrapper">
                <i class="ti ti-search"></i>
                <input type="text" id="search-college" placeholder="Search by college or class code" />
                <div id="search-results" class="search-results">
                    <p>Find your institute's subject list</p>
                </div>
            </div>
            <div class="buttons">
                <button class="action-btn" id="manage-tables" onclick="window.location.href='/subjects/'">
                    Create, upload or manage subjects' list <i class="ti ti-arrow-right"></i>
                </button>
            </div>
        </div>

        <div class="polygon polygon-1"></div>
        <div class="polygon polygon-2"></div>


        <div class="hero-images">
            <img src="/assets/hero-1.png" class="image image-1">
            <img src="/assets/hero-2.png" class="image image-2">
            <img src="/assets/hero-3.png" class="image image-3">
        </div>

    </section>

    <div class="background">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>


    <section class="feature-head">
        <h2 class="key-features-title section-title" id="key-features">
            features.
        </h2>
        <div class="features">
            <div class="feature-inner" data-reveal>
                <div class="feature-icon">
                    <img src="./assets/feature-1.png" alt="Two Message Bubbles icon">
                </div>
                <div class="feature-desc">
                    <h3>Smart Attendance Tracking</h3>
                    <span>Easily track daily attendance with an intuitive interface. It takes less than one minute
                        daily.</span>
                </div>
            </div>

            <div class="feature-inner" data-reveal>
                <div class="feature-icon">
                    <img src="./assets/feature-2.png" alt="Calendar icon">
                </div>
                <div class="feature-desc">
                    <h3>Customizable Timetable</h3>
                    <span>Create and manage personalized subjects’ list for different classes, tailored to your
                        schedule.</span>
                </div>
            </div>

            <div class="feature-inner" data-reveal>
                <div class="feature-icon">
                    <img src="./assets/feature-3.png" alt="Wallpaper image icon">
                </div>
                <div class="feature-desc">
                    <h3>Notes for Every Day</h3>
                    <span>Add and manage daily notes for important insights, with easy previews and editing
                        options.</span>
                </div>
            </div>

            <div class="feature-inner" data-reveal>
                <div class="feature-icon">
                    <img src="./assets/feature-4.png" alt="Magnifying glass icon">
                </div>
                <div class="feature-desc">
                    <h3>Export & Import Data</h3>
                    <span>Seamlessly backup your attendance records or transfer data between devices.</span>
                </div>
            </div>

            <div class="feature-inner" data-reveal>
                <div class="feature-icon">
                    <img src="./assets/feature-5.png" alt="Up and Down arrow icons">
                </div>
                <div class="feature-desc">
                    <h3>Easy Navigation</h3>
                    <span>Quickly switch between months or jump to today’s date with a single click.</span>
                </div>
            </div>

            <div class="feature-inner" data-reveal>
                <div class="feature-icon">
                    <img src="./assets/feature-6.png" alt="Key icon">
                </div>
                <div class="feature-desc">
                    <h3>Visual Analytics</h3>
                    <span>Gain insights into attendance patterns with clear, visual breakdowns of attendance percentages
                        and trends.</span>
                </div>
            </div>
        </div>
    </section>

    <div class="wavy-line"></div>

    <section class="pages-section">
        <h2 class="section-title">
            3 pages only. easy.
        </h2>
        <div class="pages">
            <div class="page page-1" onclick="window.location.href='/subjects/'">
                <div class="page-info" data-reveal="slide-down">
                    <h3><span>1</span> Manage Subjects</h3>
                    <p class="page-desc">to create or upload subjects' list</p>
                </div>
                <i class="ti ti-arrow-right" data-reveal="left"></i>
            </div>
            <div class="page page-2" onclick="window.location.href='/calendar/'">
                <div class="page-info" data-reveal="slide-down">
                    <h3><span>2</span> Calendar</h3>
                    <p class="page-desc">to mark attendance for any day</p>
                </div>
                <i class="ti ti-arrow-right" data-reveal="left"></i>
            </div>
            <div class="page page-3" onclick="window.location.href='/stats/'">
                <div class="page-info" data-reveal="slide-down">
                    <h3><span>3</span> Stats</h3>
                    <p class="page-desc">to see attendance percentages</p>
                </div>
                <i class="ti ti-arrow-right" data-reveal="left"></i>
            </div>
        </div>

        <div class="guide">
            <h2 class="section-title">in case your brain <br> is not braining...<i class="ti ti-mood-puzzled"></i></h2>
            <div class="steps">

                <div class="step step-1">
                    <span>1</span>
                    <p><strong>Create your list of subjects in the <a href="/subjects/">Manage Subjects</a>
                            page</strong>. If available, you can quickly search for your college name or class code to
                        find a pre-defined list.</p>
                </div>

                <div class="step step-2">
                    <span>2</span>
                    <p>Once the subjects are set up, <strong>navigate to the <a href="/calendar/">Calendar</a> page to
                            mark your daily attendance</strong>. You need to visit this page daily. You can also add
                        quick notes or introduce new subjects for any specific date as needed.</p>
                </div>

                <div class="step step-3">
                    <span>3</span>
                    <p><strong>View attendance statistics on the <a href="/stats/">Stats</a> page</strong>. Check
                        subject-wise percentages to monitor your progress effectively.</p>
                </div>

                <div class="step step-4">
                    <span><i class="ti ti-alert-triangle"></i></span>
                    <p>Use the Export and Import options to <strong>back up your attendance data</strong> or restore it
                        later.</p>
                </div>

                <div class="step step-5">
                    <span><i class="ti ti-info-circle"></i></span>
                    <p>If your class schedule changes, you can modify or add new subjects for specific days while
                        keeping your existing data intact via the <a href="/subjects/">Manage Subjects</a> page.</p>
                </div>

            </div>

        </div>
    </section>

    <h2 class="section-title">that's it.</h2>


    <!-- Footer -->
    <footer>
        <h2>Attendance</h2>
        <div class="explore">
            <a href="/page/about/">About</a>
            <a href="/page/privacy/">Privacy</a>
            <a href="/page/disclaimer/">Disclaimer</a>
            <a href="/page/sitemap/">Sitemap</a>
        </div>

        <div class="dev">
            <h3>made by <a href="https://makibul.com" target="_blank">Makibul</a>.</h3>
            <a class="social" href="https://makibul.com" target="_blank"><i class="ti ti-world"></i></a>
            <a class="social" href="mailto:contactmakibul+attendance@gmail.com" target="_blank"><i
                    class="ti ti-mail"></i></a>
            <a class="social" href="https://github.com/devMakibul" target="_blank"><i
                    class="ti ti-brand-github"></i></a>
            <a class="social" href="https://t.me/mak1bul" target="_blank"><i class="ti ti-brand-telegram"></i></a>
            <a class="social" href="https://paypal.me/mak1bul" target="_blank"><i class="ti ti-brand-paypal"></i></a>
        </div>
    </footer>

<div id="customModal" class="modal">
    <div class="modal-content">
      <p id="modalMessage"></p>
      <div class="modal-buttons">
          <button id="modalConfirm"><i class="ti ti-check"></i>OK</button>
          <button id="modalCancel"><i class="ti ti-x"></i> Cancel</button>
      </div>
    </div>
  </div>
  
  <div id="customAlert" class="modal">
    <div class="modal-content">
      <p id="alertMessage"></p>
      <button id="alertConfirm"><i class="ti ti-check"></i>OK</button>
    </div>
  </div>



    <script src="script.js"></script>
</body>

</html>