install.gohtml RawHistoryFolder
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>{{ .header.meta.title }}</title>
7 <meta name="description" content="{{ .Header.Meta.Description }}" />
8 <meta name="keywords" content="{{ .Header.Meta.Keywords }}" />
9 <!-- Custom CSS + Tailwind -->
10 <link rel="stylesheet" href="/assets/css/tailwind.css" />
11 <!-- Iconoir -->
12 <link rel="stylesheet" href="/libs/iconoir.css" />
13 <!-- Alpine -->
14 <script src="/libs/alpine.min.js"></script>
15 <!-- HTMX min js -->
16 <script src="/libs/htmx.min.js"></script>
17 <!-- HTMX SSE -->
18 <script src="/libs/htmx-sse.js"></script>
19 <!-- Custom JS from assets/js -->
20 <script src="/assets/js/custom.js"></script>
21 </head>
22
23 <body
24 class="IBMPlexSans bg-zinc-200 md:p-8 flex flex-col items-center"
25 hx-boost="true"
26 >
27 <!-- Logo and Title -->
28 <div
29 id="logo-mascot"
30 class="flex flex-col justify-center items-center p-4 mb-4"
31 >
32 <div class="circle-shadow flex justify-center w-100">
33 <img
34 src="/assets/imgs/gordon-mascot-hq-trsp.png"
35 alt="logo"
36 class="sm:h-24 h-32 xl:h-48"
37 />
38 </div>
39 <div class="flex justify-center mt-4">
40 <h1
41 class="gordon-title text-2xl lg:text-4xl xl:text-5xl text-gordonmascot-hblue tracking-tighter"
42 >
43 Gordon
44 </h1>
45 <span class="gordon-v-subtitle text-gordonmascot-mblue text-sm ml-2"
46 >v0.0.1</span
47 >
48 </div>
49 </div>
50
51 <!-- Main Content -->
52 <div class="bg-white p-4 rounded-md shadow mb-4 w-2/3">
53 <!-- Install Traefik -->
54 <div id="install-traefik">
55 <div class="flex flex-col items-center">
56 <h2 class="text-2xl font-semibold text-gray-800">
57 1 - Install Traefik
58 </h2>
59 <!-- Dual view left : install procedure / right : SSE log installation -->
60 <div class="flex flex-col md:flex-row justify-items-center w-full">
61 <!-- Left -->
62 <div class="w-full md:w-1/2 p-4">
63 <form
64 id="install-traefik-form"
65 action="/admin/install/traefik"
66 method="POST"
67 hx-post="/admin/install/traefik"
68 hx-swap="outerHTML"
69 >
70 <h2 class="">1.1 - Set your top domain name</h2>
71 <input
72 type="text"
73 name="topdomain"
74 id="topdomain"
75 class="w-full py-2 px-4 my-2 border border-gray-300 rounded-md"
76 placeholder="example.com"
77 />
78 <h2>1.2 - Set your admin email (a reachable one)</h2>
79 <input
80 type="text"
81 name="adminemail"
82 id="adminemail"
83 class="w-full p-2 border border-gray-300 rounded-md"
84 placeholder="admin@example.com"
85 />
86 <button
87 type="submit"
88 class="w-full p-2 bg-gordonmascot-hblue text-slate-100 rounded-md mt-4"
89 >
90 Save & Install Traefik
91 </button>
92 </form>
93 </div>
94 <!-- Right -->
95 <div class="w-full md:w-1/2 p-4 text-slate-100">
96 <div
97 class="flex flex-col items-center bg-gordonmascot-hblue rounded-md"
98 >
99 <div class="w-full h-64 overflow-y-scroll-auto p-4">
100 <div
101 class="flex flex-col space-y-2"
102 hx-ext="sse"
103 sse-connect="/admin/install/traefik/sse"
104 >
105 <!-- One item -->
106 <div class="flex flex-row items-center">
107 <span class="">[INFO]</span>
108 <span class="">Traefik installed</span>
109 </div>
110 <!-- One item -->
111 <div class="flex flex-row items-center">
112 <span class="">[INFO]</span>
113 <span class="ml-2">Traefik started</span>
114 </div>
115 <!-- One item -->
116 <div class="flex flex-row items-center">
117 <span class="">[INFO]</span>
118 <span class="ml-2"
119 >Traefik configuration file created</span
120 >
121 </div>
122 <!-- One item -->
123 <div class="flex flex-row items-center">
124 <span class="">[INFO]</span>
125 <span class="">Traefik configuration file updated</span>
126 </div>
127 </div>
128 </div>
129 </div>
130 </div>
131 </div>
132 </div>
133 </div>
134 <!-- End Install Traefik -->
135 </div>
136 </body>
137</html>