Pawasbbb.github.io/logout.html at master · Pawasbb/Pawasbbb.github.io · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login | Money Tracker</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body style="font-family: Arial, Helvetica, sans-serif;">
    <div id="all" class="container">
        <div class="video-container">
        </div>
        <div id="background">
            <div id="loginscr" class="my-3 text-white position-absolute top-50 start-50 translate-middle p-5" style="text-align: center;">
                <h1 style="font-size: 4em; font-family:'Times New Roman', Times, serif"><b>MONEY TRACKER</b></h1>
                <img src="gambar/logo1.png" />
                <h4 style="font-size: 16px; font-weight: bold;">INPUT YOUR NAME</h4>
                <input type="text" id="name" class="w-100 text-center" placeholder="username">
                <div class="my-3">
                    <button id="login" class="btn btn-primary">Login</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal untuk konfirmasi logout -->
    <div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Konfirmasi Logout</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Apakah Anda yakin ingin logout?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tidak</button>
                    <button id="confirmLogout" type="button" class="btn btn-primary">Iya</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>

    <script>
        $("#login").on("click", function () {
            var name = document.getElementById("name").value;
            localStorage.setItem("name", name);
            // Redirect to the main page
            window.location.href = "main.html";
        });

        // Menggunakan modal saat logout
        $("#confirmLogout").on("click", function () {
            localStorage.removeItem("name");
            window.location.href = "login.html"; // Redirect ke halaman login setelah logout
        });
    </script>

</body>

</html>