full_stack_coding-simple_reminder/index.html at main · fchavonet/full_stack_coding-simple_reminder · 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
60
61
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Simple Reminder</title>

    <!-- CSS -->
    <link rel="stylesheet" href="./style.css">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- Script -->
    <script src="./script.js" defer></script>
</head>

<body>
    <main>
        <!-- Simple Reminder -->
        <div id="simple-reminder-container">
            <h2>
                <img id="holberton-seahorse" src="./assets/images/holberton_seahorse.png" alt="Holberton seahorse">
                Simple Reminder
            </h2>

            <div id="input-container">
                <input id="input-field" type="text" maxlength="50" autocomplete="off" placeholder="Add a new reminder...">
                <button onclick="addReminder()">+</button>
            </div>

            <ul id="reminders-container">
                <!-- <li><p>First reminder!</p><span></span></li> -->
            </ul>
        </div>

        <!-- Toggle mode button -->
        <button id="toggle-mode-btn">
            <i class="bi bi-moon-stars-fill"></i>
        </button>

        <!-- Portfolio link -->
        <a id="portfolio-link" href="https://www.fchavonet.dev" target="_blank">www.fchavonet.dev</a>

        <!-- GitHub link -->
        <a id="github-link" href="https://github.com/fchavonet/creative_coding-simple_reminder" target="_blank">
            <img src="https://img.shields.io/github/stars/fchavonet/creative_coding-simple_reminder?style=social&label=GitHub%20Stars" alt="GitHub Stars">
        </a>

        <!-- Responsive Warning -->
        <div id="responsive-warning">
            <i class="bi bi-exclamation-triangle-fill warning-icons"></i>
            <p>This web application is not optimized for mobile.</p>
            <p>Please visit it on a desktop computer for the best experience.</p>
        </div>
    </main>
</body>

</html>