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; display: none;
} }
#changepass:target { #changepass:target {
display:block; display: block;
}
body {
background-image: url(/img/dolphins.png);
background-repeat: repeat;
} }
</style> </style>
<link rel="stylesheet" href="/css/columns.css">
<link rel="stylesheet" href="/css/haiku.css">
</head> </head>
<body> <body>
<a href="#redeem">Redeem invite code</a> <a href="#gencode">Generate invite code</a> <a href="#changepass">Change password</a> <div style="display: inline-block;">
<div id="redeem"> <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"> <form action="/redeemcode.cgi" method="post">
Invite code: <input type="text" name="key"><br> Invite code <input type="text" name="key"><br>
Username: <input type="text" name="username"><br> Username <input type="text" name="username"><br>
Password: <input type="password" name="password"><br> Password <input type="password" name="password"><br>
Email: <input type="text" name="email"><br> Email <input type="text" name="email"><br>
<input type="submit" value="Redeem"> <br><input type="submit" value="Redeem">
</form> </form>
</div> </div>
<div id="gencode"> <div id="gencode">
<form action="/gencode.cgi" method="post"> <form action="/gencode.cgi" method="post">
Username: <input type="text" name="username"><br> Username <input type="text" name="username"><br>
Password: <input type="password" name="password"><br> Password <input type="password" name="password"><br>
<input type="submit" value="Generate code"> <br><input type="submit" value="Generate code">
</form> </form>
</div> </div>
<div id="changepass"> <div id="changepass">
<form action="/changepass.cgi" method="post"> <form action="/changepass.cgi" method="post">
Username: <input type="text" name="username"><br> Username <input type="text" name="username"><br>
Password: <input type="password" name="password"><br> Password <input type="password" name="password"><br>
New Password: <input type="password" name="newpass"><br> New Password <input type="password" name="newpass"><br>
<input type="submit" value="Change password"> <br><input type="submit" value="Change password">
</form> </form>
</div> </div>
</div>
</div>
</body> </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%);
}