mirror of
https://github.com/timmypidashev/web.git
synced 2026-04-14 11:03:50 +00:00
just some more work done
This commit is contained in:
Timothy Pidashev
39
code.html
39
code.html
@@ -1,39 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<title>Editor</title>
|
|
||||||
<style type="text/css" media="screen">
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#editor {
|
|
||||||
margin: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<pre id="editor">function foo(items) {
|
|
||||||
var i;
|
|
||||||
for (i = 0; i < items.length; i++) {
|
|
||||||
alert("Ace Rocks " + items[i]);
|
|
||||||
}
|
|
||||||
}</pre>
|
|
||||||
|
|
||||||
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script>
|
|
||||||
var editor = ace.edit("editor");
|
|
||||||
editor.setTheme("ace/theme/twilight");
|
|
||||||
editor.session.setMode("ace/mode/javascript");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -198,7 +198,7 @@ html {
|
|||||||
.blog:hover {
|
.blog:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog__image {
|
.blog__image {
|
||||||
margin-left: 2vw;
|
margin-left: 2vw;
|
||||||
@@ -206,6 +206,75 @@ html {
|
|||||||
width: 10vw;
|
width: 10vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Login */
|
||||||
|
#login-holder {
|
||||||
|
width: 50%;
|
||||||
|
height: 70%;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: grey;
|
||||||
|
border-radius: 7px;
|
||||||
|
box-shadow: 0px 0px 5px 2px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-error-msg-holder {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-error-msg {
|
||||||
|
width: 23%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #8a0000;
|
||||||
|
border: 1px solid #8a0000;
|
||||||
|
background-color: #e58f8f;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#error-msg-second-line {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-form {
|
||||||
|
align-self: flex-start;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-field::placeholder {
|
||||||
|
color: #3a3a3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form-field {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #3a3a3a;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 3px;
|
||||||
|
outline: none;
|
||||||
|
padding: 0px 0px 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login-form-submit {
|
||||||
|
width: 100%;
|
||||||
|
padding: 7px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #3a3a3a;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1024px) {
|
@media only screen and (max-width: 1024px) {
|
||||||
.hero__header {
|
.hero__header {
|
||||||
font-size: 12vw;
|
font-size: 12vw;
|
||||||
|
|||||||
@@ -22,7 +22,8 @@
|
|||||||
<div id="myNav" class="overlay">
|
<div id="myNav" class="overlay">
|
||||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
|
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
|
||||||
<div class="overlay-content">
|
<div class="overlay-content">
|
||||||
<a href="code.html">Write some code</a>
|
<a href="https://gitea.timmypidashev.com">My Gitea instance</a>
|
||||||
|
<a href="python3.html">Learn Python3</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
0
js/python3/editor.js
Normal file
0
js/python3/editor.js
Normal file
16
js/python3/login.js
Normal file
16
js/python3/login.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
|
})
|
||||||
31
login.html
Normal file
31
login.html
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en"></html>
|
||||||
|
<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" />
|
||||||
|
</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>
|
||||||
Reference in New Issue
Block a user