NaysKutzu/login.html

## login.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

  <title>MythicalSystems | Code-Server</title>
  <link rel="icon" href="https://avatars.githubusercontent.com/u/117385445" />
  <link rel="alternate icon" href="https://avatars.githubusercontent.com/u/117385445" />
  <link rel="manifest" href="{{BASE}}/manifest.json" crossorigin="use-credentials" />
  <link rel="apple-touch-icon" sizes="192x192" href="https://avatars.githubusercontent.com/u/117385445" />
  <link rel="apple-touch-icon" sizes="512x512" href="https://avatars.githubusercontent.com/u/117385445" />
  <meta property="twitter:image" content="https://avatars.githubusercontent.com/u/117385445">
  <meta property="og:image" content="https://avatars.githubusercontent.com/u/117385445">
  <meta name="twitter:site" content="MythicalSystems">
  <meta property="og:site_name" content="MythicalSystems | Code-Server">
  <meta name="twitter:description"
    content="Welcome to the enchanting realm where the magic of our products comes to life! Step into our codeserver, the very heart of innovation, where all our extraordinary creations are brought to existence">
  <meta property="og:description"
    content="Welcome to the enchanting realm where the magic of our products comes to life! Step into our codeserver, the very heart of innovation, where all our extraordinary creations are brought to existence">
  <meta name="twitter:image" content="https://avatars.githubusercontent.com/u/117385445">
  <meta name="twitter:image:src" content="https://avatars.githubusercontent.com/u/117385445">
  <meta property="og:image" content="https://avatars.githubusercontent.com/u/117385445">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <meta name="theme-color" content="#5d207d">
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <meta id="coder-options" data-settings="{{OPTIONS}}" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
  <style>
    html,
    body,
    #root {
      height: 100%;
      width: 100%;
    }

    body {
      background: rgb(32, 32, 32);
      /* Dark background color */
      color: #ddd;
      /* Light text color */
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      overflow: hidden;
    }

    input,
    button {
      font-family: inherit;
      font-size: 1rem;
      line-height: 1rem;
    }

    .-button {
      background-color: rgb(87, 114, 245);
      border-radius: 5px;
      border: none;
      box-sizing: border-box;
      color: white;
      cursor: pointer;
      padding: 18px 20px;
      text-decoration: none;
    }

    .center-container {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
      padding: 20px;
      width: 100%;
    }

    .card-box {
      background-color: rgb(40, 40, 40);
      /* Darker card background color */
      border-radius: 20px;
      /* Rounded corners */
      box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
      max-width: 650px;
      width: 100%;
    }

    .card-box>.header {
      border-bottom: 1px solid #555;
      /* Light border color */
      color: #ddd;
      /* Light text color */
      padding: 30px;
    }

    .card-box>.header>.main {
      margin: 0;
      font-size: 1.5rem;
    }

    .card-box>.header>.sub {
      color: #aaa;
      /* Lighter text color */
      margin-top: 10px;
    }

    .card-box>.content {
      padding: 40px;
    }

    .card-box>.content>.none {
      margin: 2px 0;
    }

    .card-box+.card-box {
      margin-top: 26px;
    }

    canvas {
      top: 0;
      left: 0;
    }
  </style>
  <style>
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #2c3e50;
      /* Set your desired preloader background color here */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }

    #loader {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      /* Set your desired preloader color here */
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite, fadeIn 1s ease-in-out;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    /* Hide preloader after page content has fully loaded */
    body.loaded #preloader {
      opacity: 0;
      pointer-events: none;
    }

    body.loaded #preloader #loader {
      animation: none;
    }

    body {
      min-height: 568px;
      min-width: 320px;
      overflow: auto;
      background-image: url('https://wallpaperaccess.com/full/1102024.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }

    .login-form {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
    }

    .login-form>.field {
      display: flex;
      flex-direction: row;
      width: 100%;
    }

    @media (max-width: 600px) {
      .login-form>.field {
        flex-direction: column;
      }
    }

    .login-form>.error {
      color: red;
      margin-top: 16px;
    }

    .login-form>.field>.password {
      background-color: rgb(50, 50, 50);
      /* Darker input background color */
      border-radius: 5px;
      border: 1px solid #555;
      /* Light border color */
      box-sizing: border-box;
      color: white;
      /* Light text color */
      flex: 1;
      padding: 16px;
    }

    .login-form>.user {
      display: none;
    }

    .login-form>.field>.submit {
      margin-left: 20px;
    }

    @media (max-width: 600px) {
      .login-form>.field>.submit {
        margin-left: 0px;
        margin-top: 16px;
      }
    }

    input {
      -webkit-appearance: none;
    }

    #particles-js {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  </style>

<body>
  <!-- Preloader -->
  <div id="preloader">
    <div id="loader"></div>
  </div>

  <div id="particles-js"></div>
  <div class="center-container">
    <div class="card-box">
      <div class="header">
        <h1 class="main" id="header-text">Welcome to MythicalSystems</h1>
        <div class="sub" id="sub-text">Hello master please put in the password</div>
      </div>
      <div class="content" id="login-form-container">
        <form class="login-form" method="post">
          <input id="href" type="hidden" name="href" value="" />
          <div class="field">
            <input required autofocus class="password" type="password" name="password" autocomplete="current-password"
              onfocus="animateTextbox(true)" onblur="animateTextbox(false)" />
            <input class="submit -button" value="Login" type="submit" />
          </div>
          {{ERROR}}
        </form>
      </div>
    </div>
  </div>
  <script>
    setTimeout(() => {
      const preloader = document.getElementById('preloader');
      preloader.style.opacity = '0';
      setTimeout(() => {
        preloader.style.display = 'none';
      }, 1500);
    }, 5000);

    window.addEventListener('load', function () {
      document.body.classList.add('loaded');
    });

    const el = document.getElementById("href");
    if (el) {
      el.value = location.href;
    }

    anime({
      targets: '.card-box',
      translateY: [-100, 0],
      opacity: [0, 1],
      delay: 300,
      easing: 'easeOutExpo'
    });

    anime({
      targets: '#login-form-container',
      opacity: [0, 1],
      translateY: [20, 0],
      delay: 500,
      duration: 1000,
      easing: 'easeInOutQuart'
    });

    const submitButton = document.querySelector('.submit');
    submitButton.addEventListener('click', () => {
      anime({
        targets: submitButton,
        scale: [1, 1.1, 1],
        easing: 'easeInOutSine',
        duration: 300
      });
    });

    function animateTextbox(isFocused) {
      anime({
        targets: '.password',
        width: isFocused ? ['100%', '120%'] : ['120%', '100%'],
        easing: 'easeInOutQuart',
        duration: 400
      });
    }

    const headerText = document.getElementById('header-text');
    const textToAnimate = headerText.innerText;
    headerText.innerText = '';
    let charIndex = 0;
    let headerTypewriter = setInterval(function () {
      if (textToAnimate[charIndex] === ' ') {
        headerText.innerHTML += '&nbsp;';
      } else {
        headerText.innerText += textToAnimate[charIndex];
      }
      charIndex++;
      if (charIndex >= textToAnimate.length) {
        clearInterval(headerTypewriter);
      }
    }, 100);

    const subText = document.getElementById('sub-text');
    subText.style.opacity = 0;
    subText.style.transform = 'translateY(20px)';
    anime({
      targets: '#sub-text',
      opacity: [0, 1],
      translateY: [20, 0],
      delay: 1200,
      duration: 1000,
      easing: 'easeOutExpo'
    });
    Command: toastr["warning"]("We are still loading our backend", "Please wait")

    toastr.options = {
      "closeButton": true,
      "debug": false,
      "newestOnTop": true,
      "progressBar": true,
      "positionClass": "toast-top-right",
      "preventDuplicates": true,
      "showDuration": "300",
      "hideDuration": "1000",
      "timeOut": "5000",
      "extendedTimeOut": "1000",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    }
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function () { particlesJS('particles-js', { "particles": { "number": { "value": 160, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 1, "random": true, "anim": { "enable": true, "speed": 1, "opacity_min": 0, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 4, "size_min": 0.3, "sync": false } }, "line_linked": { "enable": false, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 1, "direction": "none", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 600 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "bubble" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 0, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 250, "size": 0, "duration": 2, "opacity": 0, "speed": 3 }, "repulse": { "distance": 400, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); });
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

	<title>MythicalSystems \| Code-Server</title>
	<link rel="icon" href="https://avatars.githubusercontent.com/u/117385445" />
	<link rel="alternate icon" href="https://avatars.githubusercontent.com/u/117385445" />
	<link rel="manifest" href="{{BASE}}/manifest.json" crossorigin="use-credentials" />
	<link rel="apple-touch-icon" sizes="192x192" href="https://avatars.githubusercontent.com/u/117385445" />
	<link rel="apple-touch-icon" sizes="512x512" href="https://avatars.githubusercontent.com/u/117385445" />
	<meta property="twitter:image" content="https://avatars.githubusercontent.com/u/117385445">
	<meta property="og:image" content="https://avatars.githubusercontent.com/u/117385445">
	<meta name="twitter:site" content="MythicalSystems">
	<meta property="og:site_name" content="MythicalSystems \| Code-Server">
	<meta name="twitter:description"
	content="Welcome to the enchanting realm where the magic of our products comes to life! Step into our codeserver, the very heart of innovation, where all our extraordinary creations are brought to existence">
	<meta property="og:description"
	content="Welcome to the enchanting realm where the magic of our products comes to life! Step into our codeserver, the very heart of innovation, where all our extraordinary creations are brought to existence">
	<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/117385445">
	<meta name="twitter:image:src" content="https://avatars.githubusercontent.com/u/117385445">
	<meta property="og:image" content="https://avatars.githubusercontent.com/u/117385445">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<meta name="theme-color" content="#5d207d">
	<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
	<meta id="coder-options" data-settings="{{OPTIONS}}" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
	<style>
	html,
	body,
	#root {
	height: 100%;
	width: 100%;
	}

	body {
	background: rgb(32, 32, 32);
	/* Dark background color */
	color: #ddd;
	/* Light text color */
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	overflow: hidden;
	}

	input,
	button {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1rem;
	}

	.-button {
	background-color: rgb(87, 114, 245);
	border-radius: 5px;
	border: none;
	box-sizing: border-box;
	color: white;
	cursor: pointer;
	padding: 18px 20px;
	text-decoration: none;
	}

	.center-container {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	padding: 20px;
	width: 100%;
	}

	.card-box {
	background-color: rgb(40, 40, 40);
	/* Darker card background color */
	border-radius: 20px;
	/* Rounded corners */
	box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
	max-width: 650px;
	width: 100%;
	}

	.card-box>.header {
	border-bottom: 1px solid #555;
	/* Light border color */
	color: #ddd;
	/* Light text color */
	padding: 30px;
	}

	.card-box>.header>.main {
	margin: 0;
	font-size: 1.5rem;
	}

	.card-box>.header>.sub {
	color: #aaa;
	/* Lighter text color */
	margin-top: 10px;
	}

	.card-box>.content {
	padding: 40px;
	}

	.card-box>.content>.none {
	margin: 2px 0;
	}

	.card-box+.card-box {
	margin-top: 26px;
	}

	canvas {
	top: 0;
	left: 0;
	}
	</style>
	<style>
	#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #2c3e50;
	/* Set your desired preloader background color here */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
	}

	#loader {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	/* Set your desired preloader color here */
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite, fadeIn 1s ease-in-out;
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}

	@keyframes fadeIn {
	0% {
	opacity: 0;
	}

	100% {
	opacity: 1;
	}
	}

	/* Hide preloader after page content has fully loaded */
	body.loaded #preloader {
	opacity: 0;
	pointer-events: none;
	}

	body.loaded #preloader #loader {
	animation: none;
	}

	body {
	min-height: 568px;
	min-width: 320px;
	overflow: auto;
	background-image: url('https://wallpaperaccess.com/full/1102024.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	}

	.login-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: center;
	}

	.login-form>.field {
	display: flex;
	flex-direction: row;
	width: 100%;
	}

	@media (max-width: 600px) {
	.login-form>.field {
	flex-direction: column;
	}
	}

	.login-form>.error {
	color: red;
	margin-top: 16px;
	}

	.login-form>.field>.password {
	background-color: rgb(50, 50, 50);
	/* Darker input background color */
	border-radius: 5px;
	border: 1px solid #555;
	/* Light border color */
	box-sizing: border-box;
	color: white;
	/* Light text color */
	flex: 1;
	padding: 16px;
	}

	.login-form>.user {
	display: none;
	}

	.login-form>.field>.submit {
	margin-left: 20px;
	}

	@media (max-width: 600px) {
	.login-form>.field>.submit {
	margin-left: 0px;
	margin-top: 16px;
	}
	}

	input {
	-webkit-appearance: none;
	}

	#particles-js {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	}
	</style>

	<body>
	<!-- Preloader -->
	<div id="preloader">
	<div id="loader"></div>
	</div>

	<div id="particles-js"></div>
	<div class="center-container">
	<div class="card-box">
	<div class="header">
	<h1 class="main" id="header-text">Welcome to MythicalSystems</h1>
	<div class="sub" id="sub-text">Hello master please put in the password</div>
	</div>
	<div class="content" id="login-form-container">
	<form class="login-form" method="post">
	<input id="href" type="hidden" name="href" value="" />
	<div class="field">
	<input required autofocus class="password" type="password" name="password" autocomplete="current-password"
	onfocus="animateTextbox(true)" onblur="animateTextbox(false)" />
	<input class="submit -button" value="Login" type="submit" />
	</div>
	{{ERROR}}
	</form>
	</div>
	</div>
	</div>
	<script>
	setTimeout(() => {
	const preloader = document.getElementById('preloader');
	preloader.style.opacity = '0';
	setTimeout(() => {
	preloader.style.display = 'none';
	}, 1500);
	}, 5000);

	window.addEventListener('load', function () {
	document.body.classList.add('loaded');
	});

	const el = document.getElementById("href");
	if (el) {
	el.value = location.href;
	}

	anime({
	targets: '.card-box',
	translateY: [-100, 0],
	opacity: [0, 1],
	delay: 300,
	easing: 'easeOutExpo'
	});

	anime({
	targets: '#login-form-container',
	opacity: [0, 1],
	translateY: [20, 0],
	delay: 500,
	duration: 1000,
	easing: 'easeInOutQuart'
	});

	const submitButton = document.querySelector('.submit');
	submitButton.addEventListener('click', () => {
	anime({
	targets: submitButton,
	scale: [1, 1.1, 1],
	easing: 'easeInOutSine',
	duration: 300
	});
	});

	function animateTextbox(isFocused) {
	anime({
	targets: '.password',
	width: isFocused ? ['100%', '120%'] : ['120%', '100%'],
	easing: 'easeInOutQuart',
	duration: 400
	});
	}

	const headerText = document.getElementById('header-text');
	const textToAnimate = headerText.innerText;
	headerText.innerText = '';
	let charIndex = 0;
	let headerTypewriter = setInterval(function () {
	if (textToAnimate[charIndex] === ' ') {
	headerText.innerHTML += ' ';
	} else {
	headerText.innerText += textToAnimate[charIndex];
	}
	charIndex++;
	if (charIndex >= textToAnimate.length) {
	clearInterval(headerTypewriter);
	}
	}, 100);

	const subText = document.getElementById('sub-text');
	subText.style.opacity = 0;
	subText.style.transform = 'translateY(20px)';
	anime({
	targets: '#sub-text',
	opacity: [0, 1],
	translateY: [20, 0],
	delay: 1200,
	duration: 1000,
	easing: 'easeOutExpo'
	});
	Command: toastr["warning"]("We are still loading our backend", "Please wait")

	toastr.options = {
	"closeButton": true,
	"debug": false,
	"newestOnTop": true,
	"progressBar": true,
	"positionClass": "toast-top-right",
	"preventDuplicates": true,
	"showDuration": "300",
	"hideDuration": "1000",
	"timeOut": "5000",
	"extendedTimeOut": "1000",
	"showEasing": "swing",
	"hideEasing": "linear",
	"showMethod": "fadeIn",
	"hideMethod": "fadeOut"
	}
	</script>
	<script>
	document.addEventListener('DOMContentLoaded', function () { particlesJS('particles-js', { "particles": { "number": { "value": 160, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 1, "random": true, "anim": { "enable": true, "speed": 1, "opacity_min": 0, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 4, "size_min": 0.3, "sync": false } }, "line_linked": { "enable": false, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 1, "direction": "none", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 600 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "bubble" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 0, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 250, "size": 0, "duration": 2, "opacity": 0, "speed": 3 }, "repulse": { "distance": 400, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); });
	</script>
	</body>

	</html>