mirror of
https://github.com/timmypidashev/web.git
synced 2026-04-14 11:03:50 +00:00
hopefully deployment is better than dev
This commit is contained in:
Timothy Pidashev
32
assignments.html
Normal file
32
assignments.html
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Assignments</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet/less" type="text/css" href="css/assignments.less" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="hero__header" data-aos="zoom-out">Assignments</h1>
|
||||||
|
<div class="assignment">
|
||||||
|
<button data-aos="zoom-in">Test</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="js/less.js" data-env="production"></script>
|
||||||
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||||||
|
<script>AOS.init(
|
||||||
|
{
|
||||||
|
once: false,
|
||||||
|
mirror: true,
|
||||||
|
anchorPlacement: 'top-bottom',
|
||||||
|
offset: 0,
|
||||||
|
duration: 800
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
108
css/assignments.less
Normal file
108
css/assignments.less
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.assignment{
|
||||||
|
padding: 20px 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
button{
|
||||||
|
appearance: none;
|
||||||
|
outline: 0;
|
||||||
|
// make backgournd color a gradient
|
||||||
|
background: #50a3a2;
|
||||||
|
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
|
||||||
|
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
|
||||||
|
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
|
||||||
|
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
|
||||||
|
|
||||||
|
border: 0;
|
||||||
|
padding: 10px 15px;
|
||||||
|
color: @prim;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 600px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
background-color: rgb(245, 247, 249);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -61,6 +61,30 @@ background: linear-gradient(to bottom right, #333333 0%, #333333 100%);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// add shake
|
||||||
|
&.form-error{
|
||||||
|
// add animation to container
|
||||||
|
.container{
|
||||||
|
h1{
|
||||||
|
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
|
||||||
|
@keyframes shake {
|
||||||
|
10%, 90% {
|
||||||
|
transform: translate3d(-1px, 0, 0);
|
||||||
|
}
|
||||||
|
20%, 80% {
|
||||||
|
transform: translate3d(2px, 0, 0);
|
||||||
|
}
|
||||||
|
30%, 50%, 70% {
|
||||||
|
transform: translate3d(-4px, 0, 0);
|
||||||
|
}
|
||||||
|
40%, 60% {
|
||||||
|
transform: translate3d(4px, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container{
|
.container{
|
||||||
@@ -134,6 +158,23 @@ form{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// // fade the form on success
|
||||||
|
// .form-success{
|
||||||
|
// .container{
|
||||||
|
// h1{
|
||||||
|
// transform: translateY(0px);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // form error shake animation
|
||||||
|
// .form-error{
|
||||||
|
// .container{
|
||||||
|
// h1{
|
||||||
|
// animation: formError 0.5s;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.bg-bubbles{
|
.bg-bubbles{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -254,12 +295,15 @@ form{
|
|||||||
90% { transform: translateY(-1100px) rotate(600deg); }
|
90% { transform: translateY(-1100px) rotate(600deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
// animation for square to fade out
|
// form error shake animation
|
||||||
// @-webkit-keyframes fade {
|
@-webkit-keyframes formError {
|
||||||
// 0% { opacity: 1; }
|
0% { transform: translateY(0); }
|
||||||
// 100% { opacity: 0; }
|
100% { transform: translateY(-10px) rotate(5deg); }
|
||||||
// }
|
100% { transform: translateY(0) rotate(-5deg); }
|
||||||
// @keyframes fade {
|
}
|
||||||
// 0% { opacity: 1; }
|
@keyframes formError {
|
||||||
// 100% { opacity: 0; }
|
0% { transform: translateY(0); }
|
||||||
// }
|
100% { transform: translateY(-10px) rotate(5deg); }
|
||||||
|
100% { transform: translateY(0) rotate(-5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
hi
|
|
||||||
@@ -1,15 +1,9 @@
|
|||||||
// Below function Executes on click of login button.
|
function login(username, password) {
|
||||||
function validate(){
|
if (username == 'student' && password == 'student.23264') {
|
||||||
var username = document.getElementById("username").value;
|
setTimeout(function() { // delay the location.replace for one second for login animation
|
||||||
var password = document.getElementById("password").value;
|
location.replace('assignments.html');
|
||||||
if ( username == "student" && password == "student.23264"){
|
}, 1000);
|
||||||
// window.location = "editor.html"; // Redirecting to other page.
|
} else {
|
||||||
// properly redirect to editor.html
|
|
||||||
window.location.replace("https://timmypidashev.com/editor.html");
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
else{
|
}
|
||||||
alert("Username/Password is incorrect");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
54
login.html
54
login.html
@@ -5,6 +5,8 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet/less" type="text/css" href="css/login.less" />
|
<link rel="stylesheet/less" type="text/css" href="css/login.less" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
@@ -12,9 +14,9 @@
|
|||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
|
|
||||||
<form class="form">
|
<form class="form">
|
||||||
<input id="username" type="text" placeholder="Username">
|
<input data-aos="fade-right" id="username" type="text" placeholder="Username">
|
||||||
<input id="password" type="password" placeholder="Password">
|
<input data-aos="fade-left" id="password" type="password" placeholder="Password">
|
||||||
<button type="submit" id="login-button" onclick="validate()">Login</button>
|
<button data-aos="zoom-out" type="button" id="login-button">Login</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -31,7 +33,47 @@
|
|||||||
<li></li>
|
<li></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="js/less.js" data-env="production"></script>
|
||||||
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||||||
|
<script>AOS.init(
|
||||||
|
{
|
||||||
|
once: false,
|
||||||
|
mirror: true,
|
||||||
|
anchorPlacement: 'top-bottom',
|
||||||
|
offset: 0,
|
||||||
|
duration: 800
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="js/python/login.js"></script>
|
||||||
|
<script>
|
||||||
|
$("#login-button").click(function(event){
|
||||||
|
// check if username and password are filled in
|
||||||
|
if($("#username").val() == "student" && $("#password").val() == "student.23264"){
|
||||||
|
// if the username and password are correct, redirect to the admin page
|
||||||
|
setTimeout(function() { // delay the location.replace for one second for login animation
|
||||||
|
location.replace('assignments.html');
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
// if the username and password are incorrect, add a shake animation to the form
|
||||||
|
$(".wrapper").addClass("form-error");
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
$('form').fadeOut(500);
|
||||||
|
$('.wrapper').addClass('form-success');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- <script>
|
||||||
|
function validate() {
|
||||||
|
var username = document.getElementById("username").value;
|
||||||
|
var password = document.getElementById("password").value;
|
||||||
|
if (username == "" || password == "") {
|
||||||
|
alert("Please fill in all fields");
|
||||||
|
} else {
|
||||||
|
login(username, password);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script> -->
|
||||||
</body>
|
</body>
|
||||||
<script src="js/less.js" data-env="production"></script>
|
</html>
|
||||||
<!-- add login function -->
|
|
||||||
<script src="js/python/login.js"></script>
|
|
||||||
Reference in New Issue
Block a user