Skip to content

Instantly share code, notes, and snippets.

@zaaakher

zaaakher/login.html Secret

Last active July 30, 2023 18:59
Show Gist options
  • Save zaaakher/c4b57c964825c6a6997900c2c040d43a to your computer and use it in GitHub Desktop.
Save zaaakher/c4b57c964825c6a6997900c2c040d43a to your computer and use it in GitHub Desktop.
Download ZIP
Cyberpanel Login Page (Sikka Software)
Raw
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.justify-content-between {
justify-content: space-between;
}
.col-login {
height: 100vh;
display: flex;
flex-direction: column;
}
.col-login-left {
background: rgb(51, 204, 204);
background: -moz-linear-gradient(0deg, rgba(51, 204, 204, 1) 0%, rgba(0, 0, 122, 1) 100%);
background: -webkit-linear-gradient(0deg, rgba(51, 204, 204, 1) 0%, rgba(0, 0, 122, 1) 100%);
background: linear-gradient(0deg, rgba(51, 204, 204, 1) 0%, rgba(0, 0, 122, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#33cccc", endColorstr="#00007a", GradientType=1);
justify-content: space-between;
}
.form-group .input-group select.form-control,
.form-group .input-group input.form-control,
button.btn.btn-login {
height: 45px;
}
button.btn.btn-login {
background-color: rgb(51, 204, 204);
box-shadow: 0 0px 0px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
button.btn.btn-login:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.form-group .input-group select.form-control:focus,
.form-group .input-group input.form-control:focus,
button.btn.btn-login {
border: 1px solid rgb(51, 204, 204);
}
.col-login-right {
background: #ffffff;
justify-content: center;
}
.col-login-right .login-wrapper {
display: flex;
flex-direction: column;
justify-content: space-around;
}
a.login-changelogs {
border-top: 1px solid #fff;
}
.login-changelogs .card {
padding: 1em;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.login-changelogs .card:hover {
color: rgb(51, 204, 204);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16), 0 10px 10px rgba(0, 0, 0, 0.18);
}
.card-body {
padding-left: 15px;
}
.object-fit {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 6px;
}
h4.card-learnmore {
margin-top: 15px;
position: relative;
color: rgb(51, 204, 204);
font-weight: 500;
font-size: 1.2em;
}
h4.card-learnmore span {
display: inline;
padding-bottom: 4px;
border-bottom: 1px solid rgb(51, 204, 204);
}
.alert.alert-danger {
text-align: center;
margin: 1em 2em 1em 2em;
padding-top: 1em;
padding-bottom: 1em;
border: 1px solid red;
}
/* Loading Spinner */
.spinner {
margin: 0;
width: 70px;
height: 18px;
margin: -35px 0 0 -9px;
position: absolute;
top: 50%;
left: 50%;
text-align: center
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.spinner .bounce1 {
-webkit-animation-delay: -.32s;
animation-delay: -.32s
}
.spinner .bounce2 {
-webkit-animation-delay: -.16s;
animation-delay: -.16s
}
@-webkit-keyframes bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0.0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0)
}
40% {
transform: scale(1.0);
-webkit-transform: scale(1.0)
}
}
</style>
<meta charset="UTF-8">
<!--[if IE]>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<title>C01 Login | Sikka Software</title>
<meta name="description" content="Login to your CypberPanel account">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Favicons -->
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'baseTemplate/assets/finalLoginPageCSS/allCss.css' %}">
<!-- HELPERS -->
<!-- ELEMENTS -->
<!-- ICONS -->
<!-- Admin theme -->
<!-- Components theme -->
<!-- JS Core -->
<script type="text/javascript" src="{% static 'baseTemplate/assets/js-core/jquery-core.min.js' %}"></script>
<script type="text/javascript">
$(window).load(function () {
setTimeout(function () {
$('#loading').fadeOut(400, "linear");
}, 300);
});
</script>
<!-- JS Ends -->
<style type="text/css">
html,
body {
height: 100%;
background: #ffffff;
}
</style>
<style>
{{ cosmetic.MainDashboardCSS | safe }}
</style>
</head>
<body>
<div id="loading">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div class>
<div ng-app="loginSystem" ng-controller="loginSystem" class="col-md-12 col-sm-12 col-login col-login-right" style="">
<div class="login-wrapper" style="display:flex; align-items:center;">
<form id="loginForm" action="/" class="col-md-4">
<h1 class="text-transform-upr text-center panel-body text-bold"
style="padding-bottom: 0px; color: #5C5CFC; font-family:monospace;">
<img class="center-block text-center my-20" src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/sikka/brand/black-horizontal-en.png">
C01
</h1>
<h4 class="text-muted text-center mb-10">Web Hosting for Clients</h4>
<div class="">
<div class="mx-30">
<div class="content-box-wrapper panel-body my-10 mx-30">
<div class="form-group">
<div class="input-group">
<input ng-model="username" type="text" class="form-control" name="username"
placeholder="Enter username" required style="height: 45px;">
<span class="input-group-addon bg-blue">
<i class="glyph-icon icon-envelope-o"></i>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input ng-keypress="initiateLogin($event)" ng-model="password" type="password"
class="form-control" id="password" placeholder="Password" required
name="password" style="height: 45px;">
<span class="input-group-addon bg-blue">
<i class="glyph-icon icon-unlock-alt"></i>
</span>
</div>
<img id="verifyingLogin" class="center-block" src="{% static 'baseTemplate/images/loading.gif' %}">
</div>
<div ng-hide="verifyCode" class="form-group">
<div class="input-group">
<input ng-model="twofa" type="text" class="form-control" name="twofa"
placeholder="Enter code from Google Authenticator" required
style="height: 45px;">
<span class="input-group-addon bg-blue">
<i class="glyph-icon icon-unlock-alt"></i>
</span>
</div>
</div>
<button type="button" style="background-color: #5C5CFC;" ng-click="verifyLoginCredentials()"
class="btn btn-success btn-block btn-login">Sign In
</button>
</div>
</div>
</div>
</form>
<div id="loginFailed" class="alert alert-danger">
<p>Could Not Login, Error message: {$ errorMessage $}</p>
</div>
</div>
</div>
</div>
<script src="https://code.angularjs.org/1.6.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
<script src="{% static 'loginSystem/login-system.js' %}"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment