supleed2/ICAS
1
0
Fork 0
mirror of https://github.com/supleed2/ICAS.git synced 2024-09-19 21:26:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update styling of verify form, make site dark mode

Browse source
This commit is contained in:
Aadi Desai 2023-09-24 01:33:17 +01:00
parent 75f1f7321c
commit 1e3011b6e4
Signed by: supleed2
SSH key fingerprint: SHA256:CkbNRs0yVzXEiUp2zd0PSxsfRUMFF9bLlKXtE1xEbKM
2 changed files with 119 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
html/style.css
View file

@ -19,6 +19,8 @@
width: 100%;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
}
.footer-text {
@ -34,6 +36,38 @@ html,
body {
height: 100%;
width: 100%;
background-color: #333;
color: #fff;
}
a {
color: #a5cff3;
}
a:hover,
a:active {
color: #4dacff;
}
.jumbotron {
margin: 0 0 0 0;
background: #333;
color: #fff;
}
.dropdown-menu {
background-color: #222;
}
.dropdown-menu>li>a {
color: #fff;
background-color: #222;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:active {
color: #fff;
background-color: #555;
}
.carousel-inner,
@ -85,56 +119,3 @@ body {
.row h1 {
font-size: 20pt;
}
.verify-body {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}
.discord-user {
align-self: center;
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
}
#discord-username {
margin-left: 10px;
}
.verify-form {
align-self: center;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100px;
}
.verify-input {
border-radius: 2px;
border: 0;
background-color: #d1f0ff;
box-sizing: border-box;
padding: 4px 20px 0;
}
.verify-submit {
border-radius: 2px;
border: 0;
background-color: #83d8ff;
box-sizing: border-box;
padding: 4px 20px 0;
cursor: pointer;
}
.verify-submit:hover,
.verify-submit:active {
background-color: #72fff3;
}

88
html/verify.html
View file

@ -30,6 +30,89 @@
}
}
</script>
<style>
::-webkit-input-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
::-ms-input-placeholder {
color: #fff;
}
:-moz-placeholder {
color: #fff;
opacity: 1;
}
::-moz-placeholder {
color: #fff;
opacity: 1;
}
.verify-body {
width: 100%;
margin: 0;
padding: 10px 10%;
background: #222;
color: #dddddd;
}
#discord-text {
margin-right: 10px;
}
.discord-user {
align-self: center;
display: flex;
align-items: center;
width: 100%;
text-align: center;
justify-content: center;
}
#discord-username {
margin-left: 10px;
}
.verify-form {
align-self: center;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100px;
}
.verify-input {
width: 40%;
margin: 3px 30%;
padding: 5px;
border: none;
border-radius: 6px;
background-color: #337ab7;
text-align: center;
}
.verify-submit {
width: 20%;
margin: 3px 40%;
padding: 10px;
border: none;
border-radius: 6px;
background-color: #337ab7;
color: #fff;
font-size: 1.5em;
cursor: pointer;
}
.verify-submit:hover,
.verify-submit:active {
background-color: #3d90d9;
}
</style>
</head>
<body onload="setDiscordID()">
@ -110,20 +193,19 @@
</p>
<br>
<div class="discord-user">
<p><b>Verification for:</b></p>
<p id="discord-text"><b>Verification for:</b></p>
<img id="discord-avatar" height="50px" width="50px" src="https://cdn.discordapp.com/embed/avatars/0.png">
<p id="discord-username">Loading...</p>
</div>
<br>
<form class="verify-form" method="post" action="submit">
<input class="verify-input" type="text" name="username" id="username" autocomplete="username"
placeholder="Imperial Short-code" required />
placeholder="Imperial Shortcode (ab1234)" required />
<input class="verify-input" type="password" name="password" id="password" autocomplete="current-password"
placeholder="Password" required />
<input type="hidden" name="discordID" id="discordID" autocomplete="off" value="[[discordID]]" />
<input class="verify-submit" type="submit" value="Let's go!" />
</form>
<br>
</div>
<!-- Footer -->