To-Do-List-App/index.html at main · Ajutzu/To-Do-List-App · 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timesand | Dashboard</title>

    <!-- Icon -->
    <link rel="icon" href="images/icon.png" />

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

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

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

    <!-- Swalfire Override CSS -->
    <link rel="stylesheet" href="css/swalfire.css">

</head>

<body>


    <!-- Navbar -->
    <nav class="navbar shadow sticky-top navbar-expand-lg py-3 px-3 px-lg-5 bg-white">
        <div class="container-fluid">
            <!-- Add toggle button -->
            <button id="sidebarToggle" class="btn me-2 d-lg-none">
                <i class="bi bi-list fs-4"></i>
            </button>

            <!-- Logo -->
            <a class="navbar-brand" href="#">
                <img src="images/navbar.png" class="img-fluid" alt="Logo" style="max-width: 170px; width: 100%;">
            </a>

            <!-- Current Date/Time Display -->
            <div class="d-flex flex-column align-items-end">
                <h6 id="current-date" class="mb-0 fw-bolder fs-6"></h6>
                <p class="text-muted mb-0 small" id="current-time"></p>
            </div>
        </div>
    </nav>

    <div class="d-flex flex-column flex-lg-row m-0">
        <!-- Sidebar -->
        <div class="sidebar shadow">
            <div id="sidebar" class="d-flex flex-column p-3">
                <input type="text" class="mb-2 mt-4 form-control" placeholder="Search">

                <ul class="nav flex-column mt-3">
                    <li class="nav-item">
                        <p id="card-lists" class="nav-link text-dark hover-active active">
                            <span class="bi bi-speedometer2 me-2"></span>
                            Card Lists
                        </p>
                    </li>

                    <li class="nav-item">
                        <p id="reset-lists" class="nav-link text-dark hover-active">
                            <span class="bi bi-arrow-counterclockwise me-2"></span> <!-- Reset Icon -->
                            Reset Lists
                        </p>
                    </li>

                    <li class="nav-item">
                        <p id="add-list" class="nav-link text-dark hover-active" data-bs-toggle="modal"
                            data-bs-target="#exampleModal">
                            <span class="bi bi-plus-circle me-2"></span> <!-- Add Icon -->
                            Add Card
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-grow-1">
            <div class="p-3" id="dashboard"
                style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem;">
            </div>
        </div>
    </div>


    <!-- Modal -->

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content p-4">
                <div class="text-end">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5 class="modal-title mb-4">Add New Card</h5>
                    <div id="alertSuccess" class="alert alert-success alert-dismissible fade" role="alert" style="display: none;">
                        Card added successfully!
                    </div>
                    <div class="mb-3">
                        <label for="cardTitle" class="form-label">Title</label>
                        <input type="text" class="form-control" id="cardTitle" required>
                    </div>
                    <div class="mb-3">
                        <label for="cardDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="cardDescription" rows="3" required></textarea>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn brand-button" id="addCardButton">Add Card</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

<!-- Display Current Date/Time -->
<script src="javaScript/getDateTime.js"></script>

<!-- Change Active State Sidebar -->
<script src="javaScript/changeActive.js"></script>

<!-- Card Management -->
<script src="javaScript/cardManagement.js"></script>

<!-- Sidebar Toggle -->
<script src="javaScript/sidebarToggle.js"></script>

<!-- Delete Cards -->
<script src="javaScript/deleteCards.js"></script>

<!-- Swal Fire -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

</html>