Valens-Visual-Lab/admin.html at main · Valencinn/Valens-Visual-Lab · 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
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/base.css">
    <link rel="stylesheet" href="./styles/classes.css">
    <link rel="stylesheet" href="./styles/layout.css">
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
        rel="stylesheet" />
</head>

<body class="bg-dark text-light">
    <header class="nav container flex between center-y">
        <a class="logo" href="index.html">
            <img src="./images/logopng.png" alt="Algorithm Visual Lab logo">
        </a>


        <nav class="flex-center gap-md hide-sm">
            <a href="./algorithms.html" class="nav-link">Algorithms</a>
            <a href="" class="nav-link">Structures</a>
            <a href="./about.html" class="nav-link">About</a>
        </nav>

        <div class="flex-center gap-sm">
            <a href="./admin.html" class="btn ghost">Log in</a>
            <a href="#" class="btn primary">Start</a>
        </div>
    </header>

    <main class="hero-admin container">
        <h1 class="hero-title">Administration</h1>
        <p class="hero-sub">
            Manage users and algorithms. This area is restricted to administrators.
        </p>
    </main>

    <div class="container">
        <section id="login" class="card mt-lg">
            <h3 class="mb-md">Admin login</h3>

            <div class="flex gap-sm flex-wrap">
                <input id="email" type="email" placeholder="Email" class="p-sm rounded" />
                <input id="password" type="password" placeholder="Password" class="p-sm rounded" />
                <button id="loginBtn" class="btn primary">
                    Login
                </button>
            </div>
        </section>

        <section id="restricted" class="card mt-lg hidden">
            <h3 class="mb-sm">Access denied</h3>
            <p class="text-muted">
                This section is restricted to administrators only.
            </p>
        </section>

        <section id="adminPanel" class="mt-lg hidden">
            <div class="flex gap-sm mb-md">
                <button id="showUsers" class="btn-ghost">
                    View users
                </button>
                <button id="showContent" class="btn-ghost">
                    View algorithms
                </button>
                <button id="addUser" class="btn-ghost">
                    Add user
                </button>
                <button id="addAlgorithm" class="btn-ghost">
                    Add algorithm
                </button>
            </div>

            <div id="list" class="list-linear"></div>

            <div id="userForm" class="card mt-md hidden">
                <h3 id="userFormTitle" class="mb-md">Add User</h3>
                <form id="userFormElement" class="flex flex-column gap-sm">
                    <input type="text" id="userName" placeholder="Name" class="p-sm rounded" required />
                    <input type="email" id="userEmail" placeholder="Email" class="p-sm rounded" required />
                    <input type="password" id="userPassword" placeholder="Password" class="p-sm rounded" required />
                    <label class="flex gap-sm">
                        <input type="checkbox" id="userIsAdmin" />
                        Is Admin
                    </label>
                    <label class="flex gap-sm">
                        <input type="checkbox" id="userIsSubscribed" />
                        Is Subscribed
                    </label>
                    <div class="flex gap-sm">
                        <button type="submit" class="btn primary">Save</button>
                        <button type="button" id="cancelUserForm" class="btn-ghost">Cancel</button>
                    </div>
                </form>
            </div>

            <div id="algorithmForm" class="card mt-md hidden">
                <h3 id="algorithmFormTitle" class="mb-md">Add Algorithm</h3>
                <form id="algorithmFormElement" class="flex flex-column gap-sm">
                    <input type="text" id="algorithmName" placeholder="Name" class="p-sm rounded" required />
                    <input type="text" id="algorithmCategory" placeholder="Category" class="p-sm rounded" required />
                    <select id="algorithmDifficulty" class="p-sm rounded" required>
                        <option value="">Select Difficulty</option>
                        <option value="beginner">Beginner</option>
                        <option value="intermediate">Intermediate</option>
                        <option value="advanced">Advanced</option>
                    </select>
                    <select id="algorithmStatus" class="p-sm rounded" required>
                        <option value="">Select Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="draft">Draft</option>
                    </select>
                    <div class="flex gap-sm">
                        <button type="submit" class="btn primary">Save</button>
                        <button type="button" id="cancelAlgorithmForm" class="btn-ghost">Cancel</button>
                    </div>
                </form>
            </div>
        </section>
    </div>

    <script type="module" src="/src/admin.ts"></script>
</body>

</html>