a bit nicer webpage css

Signed-off-by: Chmouel Boudjnah <[email protected]>
chmouel · Apr 6, 2023 · cdf7dbb · cdf7dbb
1 parent 00ce7b2
commit cdf7dbb
Showing 1 changed file with 54 additions and 50 deletions.
diff --git a/gosmee/templates/index.tmpl b/gosmee/templates/index.tmpl
@@ -7,77 +7,81 @@
     <title>Gosmee - Webhook Forwarder</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <style>
-        #main {
-            font-size: 20px;
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
             font-family: Arial, Helvetica, sans-serif;
+            font-size: 16px;
+            line-height: 1.6;
+        }
+
+        .container {
             width: 100%;
-            height: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 50px;
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: center;
         }
 
-        .mainbox {
-            padding: 0 50px;
+        h2 {
+            font-size: 36px;
+            font-weight: bold;
+            margin-bottom: 30px;
+            text-align: center;
+            text-decoration: underline;
         }
 
-        .centered {
-            text-align: center;
+        ul {
+            list-style: none;
+            padding: 0;
         }
 
-        h2 {
-            margin-bottom: 10;
-            text-decoration: underline;
+        li {
+            margin-bottom: 15px;
         }
 
-        .footer {
-            margin-top: 50px;
-            font-size: 10px;
-            color: #ccc;
-            font-style: italic;
+        a {
+            color: #007bff;
             text-decoration: none;
-            text-align: right;
         }
 
-        h5 {
-            /* remove padding */
-            margin: 0;
+        .code {
+            background-color: #f2f2f2;
+            border-radius: 5px;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 14px;
+            padding: 5px;
         }
 
-        /* make list elements more space in between*/
-        li {
-            margin-bottom: 15px;
-        }
+      .footer {
+        margin-top: 50px;
+        font-size: 10px;
+        color: #ccc;
+        font-style: italic;
+        text-decoration: none;
+      }
     </style>
 </head>
 
 <body>
-    <div id="main">
-        <!-- create a centered div  -->
-        <h2 class="centered">Gosmee webhook forwarder</h2>
-        <div class="mainbox">
-            </h5>
-            <ul>
-                <li> Download the gosmee client for your platform: <a
-                        href="https://github.com/chmouel/gosmee/#install">here</a>
-                <li>Use this endpoint URL to configure your webhook service (ie: Github, Gitlab, Zapier etc..):
-                    <br><br>
-                    <a href="{{ .URL }}">{{ .URL }}</a>
-                </li>
-                <li>
-                    Using the gosmee client you can then forward the endpoint URL to your local service :
-                    <br><br>
-                    <code>-$ gosmee client {{ .URL }} http://localhost:8080</code>
-                </li>
-                <li>
-                    See <code>gosmee help</code> for more options.
-            </ul>
-        </div>
+    <div class="container">
+        <h2>Gosmee webhook forwarder</h2>
+        <ul>
+            <li>Download the gosmee client for your platform: <a href="https://github.com/chmouel/gosmee/#install">here</a></li>
+            <li>Use this endpoint URL to configure your webhook service (ie: Github, Gitlab, Zapier etc..):</li>
+            <li><a href="{{ .URL }}" target="_blank">{{ .URL }}</a></li>
+            <li>Using the gosmee client you can then forward the endpoint URL to your local service (for example here on <b>http://localhost:8080</b>):</li>
+            <li><div class="code">$ gosmee client {{ .URL }} http://localhost:8080</div></li>
+            <li>See <b>gosmee help</b> for more options.</li>
+        </ul>
+        <p class="footer">{{ .Footer }} <a href="https://github.com/chmouel/gosmee" target="_blank">Powered by gosmee/{{ .Version }}</a></p>
     </div>
-    <!-- show footer -->
-    <p class="footer">
-        {{ .Footer }}
-        <a href="https://github.com/chmouel/gosmee">Powered by gosmee/{{ .Version }}</a>
-    </p>
+</body>
+
 </html>