timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

animations and more fun

Browse Source
This commit is contained in:
Timothy Pidashev
2022-01-07 23:22:17 -08:00
parent b26b405eca
commit 64718e30e5
8 changed files with 11646 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
css/login.less Normal file
View File

@@ -0,0 +1,260 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@prim: #333333;
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body{
font-family: '', sans-serif;
color: white;
font-weight: 300;
::-webkit-input-placeholder { /* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
}
.wrapper{
background: #333333;
background: -webkit-linear-gradient(top left, #333333 0%, #333333 100%);
background: -moz-linear-gradient(top left, #333333 0%, #333333 100%);
background: -o-linear-gradient(top left, #333333 0%, #333333 100%);
background: linear-gradient(to bottom right, #333333 0%, #333333 100%);
position: relative;
height: 100vh;
// top: 50%;
// left: 0;
// width: 100%;
// height: 400px;
// margin-top: -200px;
overflow: hidden;
&.form-success{
.container{
h1{
transform: translateY(85px);
}
}
}
}
.container{
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
h1{
font-size: 40px;
transition-duration: 1s;
transition-timing-function: ease-in-put;
font-weight: 200;
}
}
form{
padding: 20px 0;
position: relative;
z-index: 2;
input{
display: block;
appearance: none;
outline: 0;
border: 1px solid fade(white, 40%);
background-color: fade(white, 20%);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
transition-duration: 0.25s;
font-weight: 300;
&:hover{
background-color: fade(white, 40%);
}
&:focus{
background-color: white;
width: 300px;
color: @prim;
}
}
button{
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: @prim;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
transition-duration: 0.25s;
&:hover{
background-color: rgb(245, 247, 249);
}
}
}
.bg-bubbles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
li{
position: relative;
// list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: fade(white, 15%);
// bottom: -160px;
// make bottom the edge of the screen
bottom: -600px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
&:nth-child(1){
left: 10%;
}
&:nth-child(2){
left: 20%;
width: 80px;
height: 80px;
animation-delay: 2s;
animation-duration: 17s;
}
&:nth-child(3){
left: 25%;
animation-delay: 4s;
}
&:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-duration: 22s;
background-color: fade(white, 25%);
}
&:nth-child(5){
left: 70%;
}
&:nth-child(6){
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
background-color: fade(white, 20%);
}
&:nth-child(7){
left: 32%;
width: 160px;
height: 160px;
animation-delay: 7s;
}
&:nth-child(8){
left: 55%;
width: 20px;
height: 20px;
animation-delay: 15s;
animation-duration: 40s;
}
&:nth-child(9){
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 40s;
background-color: fade(white, 30%);
}
&:nth-child(10){
left: 90%;
width: 160px;
height: 160px;
animation-delay: 11s;
}
}
}
@-webkit-keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-10000px) rotate(600deg); }
}
@keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-1000px) rotate(600deg); }
}
// animation for square to fade out
@-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}

6
css/styles.css
View File

@@ -168,7 +168,6 @@ html {
}
/* blog */
.blog_row {
display: inline-flex;
flex-direction: row;
@@ -275,6 +274,11 @@ html {
outline: none;
}
.login-form:hover {
background-color: #3a3a3a;
}
@media only screen and (max-width: 1024px) {
.hero__header {
font-size: 12vw;

3
index.html
View File

@@ -23,7 +23,7 @@
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<div class="overlay-content">
<a href="https://gitea.timmypidashev.com">My Gitea instance</a>
<a href="python3.html">Learn Python3</a>
<a href="login.html">Learn Python</a>
</div>
</div>
@@ -130,6 +130,5 @@
offset: 0,
duration: 800
});</script>
</body>
</html>

11339
js/less.js Normal file
View File

File diff suppressed because it is too large Load Diff

0
js/python3/editor.js → js/python/editor.js
View File

6
js/python/login.js Normal file
View File

@@ -0,0 +1,6 @@
$("#login-button").click(function(event){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
});

16
js/python3/login.js
View File

@@ -1,16 +0,0 @@
const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");
loginButton.addEventListener("click", (e) => {
e.preventDefault();
const username = loginForm.username.value;
const password = loginForm.password.value;
if (username === "user" && password === "web_dev") {
alert("You have successfully logged in.");
location.reload();
} else {
loginErrorMsg.style.opacity = 1;
}
})

60
login.html
View File

@@ -1,31 +1,41 @@
<!DOCTYPE html>
<html lang="en"></html>
<!doctype html>
<html lang="en">
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet/less" type="text/css" href="css/login.less" />
</head>
<body>
<section class="centered">
<main id="login-holder">
<div class=>
<h1 id="login-header">Login</h1>
<div id="login-error-msg-holder">
<p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
</div>
<form id="login-form">
<input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">
<input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
<input type="submit" value="Login" id="login-form-submit">
</form>
</div>
</main>
</section>
<script src="js/python3/login.js"></script>
</body>
<div class="wrapper">
<div class="container">
<h1>Login</h1>
<form class="form">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit" id="login-button">Login</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
less = {
env: "production",
};
</script>
<!-- <script src="js/less.js" type="text/javascript"></script> -->
<script src="js/less.js" data-env="production"></script>