Skip to content

Commit aa2f654

Browse files
BreizhHardwareBreizhHardware
authored
Merge pull request #6 from BreizhHardware/dev
feat: Refactor web UI
2 parents 7a221a9 + e1b16ac commit aa2f654

File tree

1 file changed

+54
-61
lines changed

1 file changed

+54
-61
lines changed

‎index.html‎

Lines changed: 54 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,67 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Github-Ntfy Add a repo</title>
6+
<title>Github-Ntfy Add a Repo</title>
77
<script src="https://cdn.tailwindcss.com"></script>
88
<script src="./script.js" defer></script>
99
</head>
10-
<body class="bg-gradient-to-b from-stone-500 to-green-700">
11-
<h1 class="text-4xl font-semibold leading-10 text-gray-900 text-center">Github-Ntfy</h1>
12-
<div class="flex flex-row gap-2 justify-center items-center my-2 h-screen">
13-
<div class="flex flex-col gap-2 justify-center items-center my-2 h-screen border-double border-2 border-white p-2" id="github">
14-
<h1>Add a github repo</h1>
15-
<form id="addRepoForm">
16-
<div class="space-y-12">
17-
<div class="border-b border-gray-900/10 pb-12">
18-
<h2 class="text-base font-semibold leading-7 text-gray-900">Name of the github repo</h2>
19-
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
20-
<div class="sm:col-span-4">
21-
<div class="mt-2">
22-
<div class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
23-
<span class="flex select-none items-center pl-3 sm:text-sm">github.com/</span>
24-
<input type="text" name="repo" id="repo" autocomplete="repo" class="block flex-1 border-0 bg-transparent py-1.5 pl-1 placeholder:text-gray-600 focus:ring-0 sm:text-sm sm:leading-6" placeholder="BreizhHardware/ntfy_alerts">
25-
</div>
26-
</div>
27-
</div>
28-
</div>
29-
</div>
10+
<body class="bg-[#1b2124] text-gray-200">
11+
<header class="text-center py-8 bg-[#23453d] shadow-lg">
12+
<h1 class="text-5xl font-bold tracking-wide text-white">Github-Ntfy</h1>
13+
</header>
14+
15+
<main class="flex flex-wrap justify-center gap-8 py-12">
16+
<!-- Github Repo Section -->
17+
<section class="bg-[#23453d] rounded-lg shadow-lg p-6 w-full max-w-lg">
18+
<h2 class="text-2xl font-semibold mb-4">Add a Github Repo</h2>
19+
<form id="addRepoForm" class="space-y-6">
20+
<div>
21+
<label for="repo" class="block text-sm font-medium">Name of the Github Repo</label>
22+
<div class="mt-2 flex items-center border rounded-md bg-gray-700">
23+
<span class="px-3 text-gray-400">github.com/</span>
24+
<input type="text" name="repo" id="repo" autocomplete="repo" class="flex-1 py-2 px-3 bg-transparent focus:outline-none" placeholder="BreizhHardware/ntfy_alerts">
3025
</div>
31-
<div class="mt-6 flex items-center justify-end gap-x-6">
32-
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
33-
<button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
34-
</div>
35-
</form>
36-
<div class="mt-8">
37-
<h2 class="text-base font-semibold leading-7 text-gray-900">Watched Github Repositories</h2>
38-
<ul id="watchedReposList" class="mt-4">
39-
<!-- Dynamically populated with JavaScript -->
40-
</ul>
4126
</div>
27+
<div class="flex justify-end gap-4">
28+
<button type="button" class="px-4 py-2 text-gray-400 hover:text-white">Cancel</button>
29+
<button type="submit" class="px-4 py-2 bg-green-700 hover:bg-green-600 text-white font-semibold rounded-md">Save</button>
30+
</div>
31+
</form>
32+
<div class="mt-8">
33+
<h3 class="text-lg font-semibold mb-2">Watched Github Repositories</h3>
34+
<ul id="watchedReposList" class="space-y-2">
35+
<!-- Dynamically populated with JavaScript -->
36+
</ul>
4237
</div>
43-
<div class="flex flex-col gap-2 justify-center items-center my-2 h-screen border-double border-2 border-white p-2" id="docker">
44-
<h1>Add a docker repo</h1>
45-
<form id="addDockerRepoForm">
46-
<div class="space-y-12">
47-
<div class="border-b border-gray-900/10 pb-12">
48-
<h2 class="text-base font-semibold leading-7 text-gray-900">Name of the docker repo</h2>
49-
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
50-
<div class="sm:col-span-4">
51-
<div class="mt-2">
52-
<div class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
53-
<span class="flex select-none items-center pl-3 sm:text-sm">hub.docker.com/r/</span>
54-
<input type="text" name="dockerRepo" id="dockerRepo" autocomplete="dockerRepo" class="block flex-1 border-0 bg-transparent py-1.5 pl-1 placeholder:text-gray-600 focus:ring-0 sm:text-sm sm:leading-6" placeholder="breizhhardware/github-ntfy">
55-
</div>
56-
</div>
57-
</div>
58-
</div>
59-
</div>
38+
</section>
39+
40+
<!-- Docker Repo Section -->
41+
<section class="bg-[#23453d] rounded-lg shadow-lg p-6 w-full max-w-lg">
42+
<h2 class="text-2xl font-semibold mb-4">Add a Docker Repo</h2>
43+
<form id="addDockerRepoForm" class="space-y-6">
44+
<div>
45+
<label for="dockerRepo" class="block text-sm font-medium">Name of the Docker Repo</label>
46+
<div class="mt-2 flex items-center border rounded-md bg-gray-700">
47+
<span class="px-3 text-gray-400">hub.docker.com/r/</span>
48+
<input type="text" name="dockerRepo" id="dockerRepo" autocomplete="dockerRepo" class="flex-1 py-2 px-3 bg-transparent focus:outline-none" placeholder="breizhhardware/github-ntfy">
6049
</div>
61-
<div class="mt-6 flex items-center justify-end gap-x-6">
62-
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
63-
<button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
64-
</div>
65-
</form>
66-
<div class="mt-8">
67-
<h2 class="text-base font-semibold leading-7 text-gray-900">Watched Docker Repositories</h2>
68-
<ul id="watchedDockerReposList" class="mt-4">
69-
<!-- Dynamically populated with JavaScript -->
70-
</ul>
7150
</div>
51+
<div class="flex justify-end gap-4">
52+
<button type="button" class="px-4 py-2 text-gray-400 hover:text-white">Cancel</button>
53+
<button type="submit" class="px-4 py-2 bg-green-700 hover:bg-green-600 text-white font-semibold rounded-md">Save</button>
54+
</div>
55+
</form>
56+
<div class="mt-8">
57+
<h3 class="text-lg font-semibold mb-2">Watched Docker Repositories</h3>
58+
<ul id="watchedDockerReposList" class="space-y-2">
59+
<!-- Dynamically populated with JavaScript -->
60+
</ul>
7261
</div>
73-
</div>
74-
<p class="font-semibold leading-10 text-gray-900 text-center">I know this web interface is awfull but I'm not a web designer ^^.</p>
62+
</section>
63+
</main>
64+
65+
<footer class="text-center py-6 bg-[#23453d]">
66+
<p class="text-sm">I know this web interface is simple, but I'm improving!</p>
67+
</footer>
7568
</body>
76-
</html>
69+
</html>

0 commit comments

Comments
 (0)