Add a little bit of styling

This commit is contained in:
Midgard 2020-03-26 21:29:50 +01:00
parent 013ae64b88
commit 9c8dc01f18
Signed by: midgard
GPG key ID: 511C112F1331BBB4
4 changed files with 68 additions and 15 deletions

View file

@ -1,3 +1,5 @@
# ![](./img/feathermost.svg) Feathermost
To run in development mode, execute `rundev.sh`.
This will start a web server, and mitmproxy to avoid CORS problems.
Dependencies for that: Bash, Python and [`mitmproxy`](https://mitmproxy.org/).

5
assets/feathermost.svg Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="m15.876 1.9088 0.10531 2.1226c1.7207 1.901 2.3999 4.5932 1.5433 7.1234-1.2787 3.7771-5.4948 5.7626-9.4172 4.4347-3.9223-1.3277-6.0655-5.4661-4.7869-9.2431 0.85942-2.5387 3.0459-4.268 5.5783-4.7259l1.3682-1.6166c-4.2687-0.11553-8.2959 2.5341-9.7368 6.7905-1.7704 5.2298 1.034 10.905 6.2638 12.675 5.2298 1.7704 10.905-1.034 12.675-6.2639 1.4385-4.2496-0.14353-8.793-3.5931-11.297" fill="#211f1e"/>
<path d="m14.088 0.18611c-2.949 2.0501-4.6451 4.0857-5.4995 5.8449l0.55031 0.95054-0.6633-0.70972c-0.22057 0.4915-0.37422 0.95962-0.47175 1.3987l0.9144 0.97831-0.98725-0.59197c-0.28612 1.8724 0.49604 3.1322 1.5241 3.2524-0.35881-1.8001 2.191-7.5492 3.272-8.6437-1.1888 1.6761-3.3544 6.5967-2.9779 8.66 0.94305 0.0189 1.6754-0.21441 2.2174-1.1364l-1.498 0.20886 1.7873-0.79608c0.18886-0.44764 0.36498-1.0028 0.53624-1.6901l-1.347 0.43884 1.4523-0.8811c0.37979-1.6614 0.74537-4.0021 1.1906-7.2836zm-4.339 11.14c-0.093389-3e-3 -0.17276 7.8e-4 -0.29408-0.0164 0.065492 0.32214 0.00469 0.70281 0.058398 1.1769 0.030084 0.26557 0.034064 0.50318 0.15617 0.75233 0.17368-0.10889 0.46654-0.11338 0.4455-0.35553-0.01666-0.1918-0.11713-0.2967-0.18128-0.52938-0.11616-0.42133-0.13274-0.72968-0.1847-1.028z" fill="#211f1e"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

37
assets/main.css Normal file
View file

@ -0,0 +1,37 @@
body {
font-family: sans-serif;
background-color: #eee;
color: #222;
max-width: 768px;
margin: 0 auto;
line-height: 1.5;
}
input {
font: inherit;
color: inherit;
}
h1 {
text-align: center;
line-height: 1.2;
}
h1 img {
width: 1em;
height: 1em;
vertical-align: middle;
}
#login {
text-align: center;
}
#login table {
margin: 0 auto 1em;
}
#login table th {
font-weight: normal;
text-align: right;
}
#login_server_row td, #login_server_row th {
padding-bottom: 1em;
}

View file

@ -4,29 +4,38 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Feathermost</title>
<link rel="stylesheet" href="/assets/main.css"/>
</head>
<body>
<form>
<div id="noscript">
<p>This application cannot work without JavaScript, unfortunately. In order to proceed, please enable it for this website.</p>
<p>Feathermost is an alternative webclient for the Mattermost chat platform. It is not possible to provide a JavaScript-less experience without having to trust us with your user data.</p>
</div>
<script type="text/javascript">document.body.innerHTML = "";</script>
<h1><img src="/assets/feathermost.svg" alt=""/> Feathermost</h1>
<form id="login">
<h2 id="add-a-server">Add a server</h2>
<table>
<tr><th>Server</th><td><input type="text" id="server" value="http://localhost:8080"/></td></tr>
<tr><th>Username</th><td><input type="text" id="username"/></td></tr>
<tr><th>Password</th><td><input type="password" id="password"/></td></tr>
<tr id="login_server_row">
<th>Server</th>
<td><input type="text" id="login_server" value="http://localhost:8080" required/></td>
</tr><tr>
<th>Username</th>
<td><input type="text" id="login_username" required/></td>
</tr><tr>
<th>Password</th>
<td><input type="password" id="login_password" required/></td>
</tr>
</table>
<input type="button" onclick="logIn(); return false" id="login" value="Log in"/>
<span id="login_message"></span><br/>
<input type="button" onclick="validateToken(); return false" id="validate" value="Validate token"/>
<span id="validate_message">(ignores username and password)</span><br/>
<input type="button" onclick="logOut(); return false" id="logout" value="Log out"/>
<span id="logout_message"></span><br/>
<input type="button" id="login_button" value="Log in"/>
<div id="login_message"></div>
</form>
<pre id="user_json"></pre>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="/ajax.js"></script>
<script type="text/javascript" src="/main.js"></script>
</body>
</html>