max aesthetic

This commit is contained in:
XeonSquared 2019-01-31 07:37:02 +11:00
parent ce59bbe64c
commit 2c6c54d211
3 changed files with 107 additions and 24 deletions

View File

@ -16,34 +16,44 @@
display: none;
}
#changepass:target {
display:block;
display: block;
}
body {
background-image: url(/img/dolphins.png);
background-repeat: repeat;
}
</style>
<link rel="stylesheet" href="/css/columns.css">
<link rel="stylesheet" href="/css/haiku.css">
</head>
<body>
<a href="#redeem">Redeem invite code</a> <a href="#gencode">Generate invite code</a> <a href="#changepass">Change password</a>
<div id="redeem">
<div style="display: inline-block;">
<b class="twrapper"><a class="title" href="#redeem"><img class="wbutton wlbutton" src="/img/close.png">Redeem invite code<img class="wbutton wrbutton" src="/img/minimise.png"></a><a class="title" href="#gencode"><img class="wbutton wlbutton" src="/img/close.png">Generate invite code<img class="wbutton wrbutton" src="/img/minimise.png"></a><a class="title" href="#changepass"><img class="wbutton wlbutton" src="/img/close.png">Change password<img class="wbutton wrbutton" src="/img/minimise.png"></a></b>
<div class="wrapper">
<div id="redeem" >
<form action="/redeemcode.cgi" method="post">
Invite code: <input type="text" name="key"><br>
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Redeem">
Invite code <input type="text" name="key"><br>
Username <input type="text" name="username"><br>
Password <input type="password" name="password"><br>
Email <input type="text" name="email"><br>
<br><input type="submit" value="Redeem">
</form>
</div>
<div id="gencode">
<form action="/gencode.cgi" method="post">
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Generate code">
Username <input type="text" name="username"><br>
Password <input type="password" name="password"><br>
<br><input type="submit" value="Generate code">
</form>
</div>
<div id="changepass">
<form action="/changepass.cgi" method="post">
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
New Password: <input type="password" name="newpass"><br>
<input type="submit" value="Change password">
Username <input type="text" name="username"><br>
Password <input type="password" name="password"><br>
New Password <input type="password" name="newpass"><br>
<br><input type="submit" value="Change password">
</form>
</div>
</div>
</div>
</body>

28
static/css/columns.css Normal file
View File

@ -0,0 +1,28 @@
.centre-column {
width: 90%;
text-align: left;
}
.centre-column, .cwrapper {
margin: 0px auto;
overflow: hidden;
}
@media screen and (min-width: 801px) {
.left-column, .right-column {
width: 49%;
text-align: left;
padding-bottom: 32767;
margin-bottom: -32767px;
}
.left-column {
float: left;
}
.right-column {
float: right;
}
}
@media screen and (min-width: 1024px) {
body {
width: 80%;
padding-left: 10%;
}
}

45
static/css/haiku.css Normal file
View File

@ -0,0 +1,45 @@
.title {
border-top: 1px solid #9d9d9d;
border-right: 1px solid #9d9d9d;
background: linear-gradient(#ffefb4, #ffcb00);
padding: 2px;
display: inline-block;
border-bottom: 0px;
line-height: 1.5em;
font-size: 1em;
text-decoration: none;
color: black;
}
.twrapper {
border-left: 1px solid #9d9d9d;
display: inline-block;
}
.wrapper {
border: 1px solid #9d9d9d;
min-height: 400px;
background: #d8d8d8;
box-sizing: border-box;
padding: 1em
}
.wbutton {
display: inline-block;
vertical-align: middle;
padding: 4px;
}
.wlbutton {
padding-right: 16px;
}
.wrbutton {
padding-left: 16px;
}
input {
width: 100%;
border: 1px solid black;
padding: 0.3em;
}
input[type=text], input[type=password] {
background: #ffffff;
}
input[type=submit] {
background: linear-gradient(#e9e9e9 0%, #e9e9e9 50%, #dddddd 50.01%, #dddddd 100%);
}