AutoScroll/index.html at main · Norblit/AutoScroll · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>AutoScroll</title>
</head>
<body>
    <div class="container">

        <!-- TITLE/DARK MODE SWITCH  -->
        <div class="mx-auto text-center ">
            <div class="titleContainer col-12">
                <h1 class="mainTitle mt-3 animate__animated animate__slideInUp animate__delay-2">AutoScroll</h1>
            </div>
            <div class="col mb-2 mx-auto darkModeContainer col-4">
                <div class="form-check form-switch mx-auto">
                    <input class="form-check-input" type="checkbox" role="switch" id="darkSwitch">
                </div>
            </div>
        </div>

        <!-- INSTRUCTIONS/INPUT  -->
        <div class="main-section text-center mx-auto col-12">
            <p class="col-9 mx-auto">Enjoy reading at your own pace and environment. Simply submit your reading material (text) into the input, configure your settings using the control panel, and click start. You can always go back to change these settings after you clicked start.</p>
            <h4>Paste your reading material here:</h4>
            <div class="form-floating">
                <textarea class="form-control inputText mx-auto" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 150px; width: 80%;" ></textarea>
                <button class="textFormat btn btn-primary mt-3 w-4">Submit</button>
            </div>
        </div>

        <!-- CONTROL PANEL/READ SECTION  -->
        <div class="control-panel text-center mt-4">
            <h4 class="mb-3">Control Panel</h4>
            <button class="btn btn-warning fsBtn">Font Size: 1x</button>
            <button class="btn btn-info speedBtn">Speed: 1x</button>
            <button class="btn btn-success startBtn">Start</button>
            <button class="btn btn-danger resetBtn">Reset</button>
            <button class="btn btn-secondary clearBtn">Clear</button>
            <div class="read text-start mt-3"></div>
        </div>

        <!-- TITLE/DARK MODE SWITCH  -->
        <footer class="text-center mt-3">
            <p>By: Norbey A.</p>
        </footer>

    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
<script src="./script.js"></script>
</body>
</html>