index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <meta content="Flashcards" property="og:site_name">
    <meta content="Flashcards - A Quizlet Alternative" property="og:title">
    <meta content="A hassle free and open-source alternative to Quizlet. No ads, no data collection, no payment." property="og:description">
    <meta content="" property="og:image">
    <meta name="theme-color" content="#0d6efd">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <script defer src="bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <script defer src="js/global.js"></script>
    <script defer src="js/theme.js"></script>
    <script defer src="js/toolbar.js"></script>
    <script defer src="js/generateButton.js"></script>
    <script defer src="js/studyButton.js"></script>
    <script defer src="js/cardOverlay.js"></script>
    <script defer src="js/importExport.js"></script>
</head>
<body>
    <noscript id="noscriptOverlay" class="text-center">
        <div>
            <h1>Javascript is required!</h1>
            <h3>This program will not work for you.</h3>
            <p>
                View the source code here:
                <a href="https://github.com/rbgk/flashcards" target="_blank">
                    https://github.com/rbgk/flashcards
                </a>
            </p>
        </div>
    </noscript>
    <main>
        <nav>
            <button type="button" class="btn btn-primary material-symbols-outlined" data-bs-toggle="modal" data-bs-target="#settingsModal">settings</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#aboutModal">About</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#instructionsModal">Instructions</button>
        </nav>

        <div class="hero" style="text-align: center;">
            <h1>
                Flashcards
            </h1>
            <span>
                <i>A Quizlet Alternative</i>
            </span>
        </div>

        <div class="inputSection">
            <textarea id="inputBox" autofocus></textarea>
        </div>

        <div class="toolbar text-center">
            <button title="Bold" class="btn btn-secondary" id="formatBoldButton" onclick="formatBold()">
                <span class="material-symbols-outlined">
                    format_bold
                </span>
            </button>
            <button title="Italic" class="btn btn-secondary" id="formatItalicButton" onclick="formatItalic()">
                <span class="material-symbols-outlined">
                    format_italic
                </span>
            </button>   
            <button title="Underline" class="btn btn-secondary" id="formatUnderlinedButton" onclick="formatUnderlined()">
                <span class="material-symbols-outlined">
                    format_underlined
                </span>
            </button>
            <button title="Toggle text wrap" class="btn btn-secondary" id="formatTextWrapButton" onclick="formatTextWrap()">
                <span class="material-symbols-outlined">
                    format_text_wrap
                </span>
            </button>
        </div>
        
        <div class="toolbar text-center">
            <button title="Save a set of flashcards to your browser" class="btn btn-secondary" id="archiveButton" onclick="saveToLocal()">
                <span class="material-symbols-outlined">
                    archive
                </span>
            </button>
            <button title="Load the saved set from the browser" class="btn btn-secondary" id="loadButton" onclick="loadSavedSet()">
                <span class="material-symbols-outlined">
                    unarchive
                </span>
            </button>
            <button title="Clear the text box" class="btn btn-danger" id="clearButton" onclick="clearInput()">
                <span class="material-symbols-outlined">
                    delete
                </span>
            </button>
        </div>

        <div class="action flex-even">
            <button class="btn btn-primary" id="submitButton" onclick="Generate()">Generate Cards</button>
            <p id="gameStatus">Create your flashcards!</p>
            <button class="btn btn-primary" id="studyButton" onclick="Study()">Study now</button>
        </div>

        <div id="game">
            <div id="gameUI">
                <button class="btn btn-primary arrows" id="arrow-decrease" onclick="decreaseCard()">
                    <span class="material-symbols-outlined">
                        arrow_back
                    </span>
                </button>

                <button id="cardFace" onclick="flipCard()"></button>
                
                <button class="btn btn-primary arrows" id="arrow-increase" onclick="increaseCard()" style="right: 0px;">
                    <span class="material-symbols-outlined">
                        arrow_forward
                    </span>
                </button>
                
                <button class="btn btn-close" data-bs-dismiss="game" aria-label="Close" onclick="closeOverlay()"></button>
            </div>
        </div>


        <!-- Settings Modal -->
        <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="settingsModalLabel">
                            Settings
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <ul class="no-bullet">
                            <li>
                                <button type="button" class="btn btn-primary material-symbols-outlined" id="themeToggleButton"  aria-label="toggle theme">
                                    <!-- theme.js -->
                                </button>
                                Manual override for automatic theme detection
                            </li>
                            <li>
                                <button type="button" class="btn btn-danger material-symbols-outlined" id="factoryResetButton" onclick="factoryReset()">
                                    delete_history
                                </button>
                                Clear data (theme override, text box, saved set)
                            </li>
                            <li>
                                <input type="file" id="fileInput" accept=".csv, .txt" style="display: none" onchange="importFile()">
                                <button type="button" class="btn btn-primary material-symbols-outlined" id="importButton" onclick="triggerImportPopup()">
                                    upload
                                </button>
                                Import file (.txt or .csv)
                            </li>
                            <li>
                                <div class="dropdown">
                                    <button type="button" class="btn btn-primary material-symbols-outlined" id="exportButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        download
                                    </button>
                                    Export file (.txt or .csv)
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#" onclick="exportFile('.txt', 'text/txt')">Export as .txt</a>
                                        <a class="dropdown-item" href="#" onclick="exportFile('.csv', 'text/csv')">Export as .csv</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- About Modal -->
        <div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="aboutModalLabel">
                            About
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Throughout much of high school, Quizlet was my go-to for quickly learning vocab.</p>
                        <p>As a college student taking up on a new language, I realized I needed Quizlet again to help with low-effort memorization.</p>
                        <p>Unfortunately, Quizlet has turned to a Freemium structure, and locked some really nice features.</p>
                        <p>It was no longer possible to comfortably navigate the site without using an ad-blocker.</p>
                        <p>As a software engineer, we tend to build solutions to our problems...</p>
                        <p>My initial goal was to build the solution to my standards, but I won't stop developing this project into something bigger, until I have to.</p>
                        <p>I can guarantee, this will be free forever, and <i>never</i> contain ads.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Try Flashcards now!</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Instructions Modal -->
        <div class="modal fade" id="instructionsModal" tabindex="-1" aria-labelledby="instructionsModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="instructionsModalLabel">
                            How to Use:
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <ol>
                            <li>
                                Type your words and definitions in the text box.
                            </li>
                            <li>
                                Separate the words and definitions with a comma "," character.
                            </li>
                            <li>
                                Generate your cards with the Generate Cards button.
                            </li>
                            <li>
                                When you're ready, you can click Study now.
                            </li>
                        </ol>
                        <ul class="no-bullet tips">
                            <li>
                                Tips:
                            </li>
                            <li>
                                <span class="tips material-symbols-outlined">archive</span>
                                Use the browser's storage to save a set of flashcards
                            </li>
                            <li>
                                <span class="tips material-symbols-outlined">unarchive</span>
                                Replaces the text box input with the saved set
                            </li>
                            <li>
                                <span class="tips material-symbols-outlined" style="color: red;">delete</span>
                                Clear the text box with the red trash can
                            </li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Got it!</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>