cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 Wiki Activity

Fiddling with login CSS.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4395 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-08-12 11:54:27 +00:00
parent 6ed2c702d8
commit 07b1a0e403
1 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
core/auth.html
View File

@ -2,11 +2,6 @@
<html> <html>
<head> <head>
<title>Tilde Friends Sign-in</title> <title>Tilde Friends Sign-in</title>
<script>
function showHideConfirm() {
document.getElementById("confirmPassword").style.display = document.getElementById("register").checked ? "block" : "none";
}
</script>
<link type="text/css" rel="stylesheet" href="/static/style.css"> <link type="text/css" rel="stylesheet" href="/static/style.css">
<link type="image/png" rel="shortcut icon" href="/static/favicon.png"> <link type="image/png" rel="shortcut icon" href="/static/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -47,7 +42,7 @@
display: none; display: none;
} }
[name="tab"]+label { [name="tab"]+label {
background-color: #657b83; background-color: #586e75;
padding: 1em; padding: 1em;
display: inline-block; display: inline-block;
flex: 1 0; flex: 1 0;
@ -59,6 +54,7 @@
} }
[name="tab"]:checked+label { [name="tab"]:checked+label {
background-color: #93a1a1; background-color: #93a1a1;
border: 2px solid #eee8d5;
} }
.error { .error {
color: #f00; color: #f00;
@ -66,8 +62,21 @@
margin: 4px; margin: 4px;
padding: 8px; padding: 8px;
} }
form label {
padding-top: 1em;
font-weight: bold;
}
form input {
font-size: x-large;
padding: 4px;
}
input[type="submit"] {
margin-top: 1em;
margin-bottom: 1em;
padding: 1em;
}
</style> </style>
<div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: column; max-width: 1280px; margin: auto">
<h1 ?hidden=${this.name}>Welcome.</h1> <h1 ?hidden=${this.name}>Welcome.</h1>
<h1 ?hidden=${this.name === undefined}>Welcome, ${this.name}.</h1> <h1 ?hidden=${this.name === undefined}>Welcome, ${this.name}.</h1>
@ -86,16 +95,22 @@
<div id="error" ?hidden=${this.error === undefined} class="error"> <div id="error" ?hidden=${this.error === undefined} class="error">
${this.error} ${this.error}
</div> </div>
<form method="POST"> <form method="POST" style="display: flex; flex-direction: column">
<div><label for="name">Name:</label> <input type="text" id="name" name="name" value=""></div> <label for="name">Name:</label>
<div><label for="password">Password:</label> <input type="password" id="password" name="password" value=""></div> <input type="text" id="name" name="name"></input>
<div ?hidden=${this.tab != 'register'} id="confirmPassword"><label for="confirm">Confirm:</label> <input type="password" id="confirm" name="confirm" value=""></div>
<div><input id="loginButton" type="submit" name="submit" value="Login"></div> <label for="password">Password:</label>
<input type="password" id="password" name="password"></input>
<label ?hidden=${this.tab != 'register'} for="confirm">Confirm Password:</label>
<input ?hidden=${this.tab != 'register'} type="password" id="confirm" name="confirm"></input>
<input id="loginButton" type="submit" name="submit" value="Login"></input>
<input type="hidden" name="register" value="${this.tab == 'register' ? 1 : 0}"></input> <input type="hidden" name="register" value="${this.tab == 'register' ? 1 : 0}"></input>
</form> </form>
</div> </div>
<div ?hidden=${this.tab != 'guest'}> <div ?hidden=${this.tab != 'guest'}>
<form method="POST"> <form method="POST" style="display: flex; flex-direction: column">
<input type="submit" id="guestButton" name="guestButton" value="Proceed as Guest"></input> <input type="submit" id="guestButton" name="guestButton" value="Proceed as Guest"></input>
</form> </form>
</div> </div>
@ -105,9 +120,7 @@
</div> </div>
<h2>Code of Conduct</h2> <h2>Code of Conduct</h2>
<div> <textarea readonly rows="20" cols="80" style="resize: none">${this.code_of_conduct}</textarea>
<textarea readonly rows="20" cols="80">${this.code_of_conduct}</textarea>
</div>
</div> </div>
`; `;
} }