Polish up user interface somewhat

10 months ago · 17070b30b3
parent c0006e40ce
commit 17070b30b3
3 changed files with 92 additions and 21 deletions
--- a/README.md
+++ b/README.md
@ -5,7 +5,7 @@ backend (e.g. a git repository), all with no account needed. The user only
 inputs their domain name, their desired backend, and then adds two entries to
 their DNS server.

-[Demo which may or may not be live](https://domani.mediocregopher.com)
+[Demo](https://domani.micropelago.net)

 Domani supports serving domains using the following protocols:

@ -197,17 +197,11 @@ immediately available at:

 ## Roadmap

-* Better web interface design.
 * Tutorials aimed at beginner users.

 * Support for more backends than just git repositories, including:
    * IPFS/IPNS
    * Small static files (e.g. for well-knowns)
-    * Google Drive
-    * Dropbox

 * Automatic HTTP/gemtext rendering for markdown files.
 * Automatic HTTP rendering for gemtext files.
-
-* Ability to disable the web interface.
-* Ability to disable HTTP completely.
--- a/src/service/http/tpl/base.html
+++ b/src/service/http/tpl/base.html
@ -18,9 +18,64 @@
  <link rel="stylesheet" type="text/css" href="/static/bamboo.css" />

  <style>
+
+    :root {
+      --domani-bg: #fffef9;
+      --domani-blue: #1a477e;
+      --domani-orange: #c35136;
+    }
+
+    body {
+      background-color: var(--domani-bg);
+      padding-bottom: 3rem;
+    }
+
+    h1, h2, h3, h4, h5, h1 a {
+      color: var(--domani-blue);
+    }
+
+    hr {
+      color: var(--domani-blue);
+      background-color: var(--domani-blue);
+      border: none;
+      height: 0.5rem;
+    }
+
+    a {
+      color: var(--domani-orange);
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    code {
+      background-color: white;
+    }
+
+    button, input[type="submit"] {
+      color: var(--domani-bg);
+      background-color: var(--domani-orange);
+    }
+
+    input {
+      background-color: white;
+      border: 1px solid var(--domani-blue);
+    }
+
    form {
      margin-bottom: 2rem;
    }
+
+    form fieldset {
+      border: 1px dotted var(--domani-blue);
+    }
+
+    form fieldset legend {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
  </style>

 </head>
@ -28,8 +83,8 @@
 <body>

  <header>
-    <h1><a href="/">Domani</a></h1>
-    <blockquote>The universal, zero-authentication hosting service</blockquote>
+    <h1><a href="/">☀️ Domani</a></h1>
+    <hr/>
  </header>

  <main>
--- a/src/service/http/tpl/index.html
+++ b/src/service/http/tpl/index.html
@ -1,17 +1,11 @@
-<p>Domani connects your domain to whatever you want to host on it, all with no
-account needed. Just input your desired backend, add two entries to your DNS
-server, and you're done!</p>

-<p><strong>YOU SHOULD NOT USE THIS FOR ANYTHING YOU CARE ABOUT AT THIS
-  TIME.</strong></p>
-
-<p>Domani is currently only a proof-of-concept with limited features,
-  but will continue to be expanded as development time permits.</p>
+<p>Domani makes it as easy as possible to host a website on your own domain
+name. No account is needed, just two simple steps and you're done!</p>

 <h2>Get Started</h2>

-<p>Input your domain name below to set it up, or to reconfigure it has already
-been set up.</p>
+<p>Input your domain name below to set it up, or to reconfigure a domain which
+you have already set up.</p>

 <form method="{{ form_method }}" action="/domain.html">

@ -26,14 +20,42 @@ been set up.</p>
  <input type="submit" value="Go!" />
 </form>

-<p>Or you can do any of the following alternative actions:</p>
+<p>Alternatively:</p>

 <ul>
  <li><a href="/domains.html">List all existing domains</a></li>
-  <li><a href="https://code.betamike.com/cryptic-io/domani">View the Source Code</a></li>
+  <li><a href="https://code.betamike.com/micropelago/domani">View the Source Code</a></li>
  <li><a href="mailto:me@mediocregopher.com">Report a Bug</a></li>
 </ul>

+<h2>How It Works</h2>
+
+<p>
+You will direct Domani to serve files from some external backend, for example a
+git repository. Domani will handle all the details of generating TLS
+certificates, fetching the files, and serving traffic to your website.
+</p>
+
+<p>To change the content of your website, just change the files in your
+configured backend. The changes will be reflected on your website after a short
+refresh period.</p>
+
+<h3>Gemini Support</h3>
+
+<p>
+<a href="https://gemini.circumlunar.space/">Gemini</a> is a new protocol
+with a focus on content, simplicity, and user-centrism.
+</p>
+
+<p>
+Domani supports both normal websites and gemini capsules, and will serve the
+same domain on both protocols at the same time. Getting started with gemini is
+as simple as creating an <code>index.gmi</code>
+<a href="https://gemini.circumlunar.space/docs/cheatsheet.gmi">gemtext</a> file
+in your backend, and visiting your domain in a
+<a href="https://github.com/kr1sp1n/awesome-gemini#graphical">gemini client</a>.
+</p>
+
 <h2>About</h2>

 <p>Domani is an open-source project which is designed to be hosted by