Skip to content

Commit 0cfb74b

Browse files
usmannasirusmannasir
committed
feature: new login page
1 parent f56b8e3 commit 0cfb74b

File tree

5 files changed

+268
-104
lines changed

5 files changed

+268
-104
lines changed

‎baseTemplate/static/baseTemplate/assets/finalLoginPageCSS/allCss.css‎

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ pre,pre code{white-space:pre-wrap}.clear,.form-row:after,.row:after{clear:both}.
5555
.search-choice-close:before,
5656
.ui-icon-closethick:before,
5757
.ui-dialog-titlebar-close:before,
58-
.icon-clock-os:before,
58+
.icon-clock-os:before,
5959
.icon-close:before {
6060
content: "\f00d";
6161
}
@@ -1533,3 +1533,113 @@ pre,pre code{white-space:pre-wrap}.clear,.form-row:after,.row:after{clear:both}.
15331533
.icon-meanpath:before {
15341534
content: "\f20c";
15351535
}
1536+
1537+
/*customized mzou*/
1538+
.text-white {
1539+
color: #FFFFFF;
1540+
}
1541+
.mt-5 {
1542+
margin-top: 5px;
1543+
}
1544+
.mt-10 {
1545+
margin-top: 10px;
1546+
}
1547+
.mt-20 {
1548+
margin-top: 20px;
1549+
}
1550+
.mt-30 {
1551+
margin-top: 30px;
1552+
}
1553+
.mr-10 {
1554+
margin-right: 10px;
1555+
}
1556+
.mb-10 {
1557+
margin-bottom: 10px;
1558+
}
1559+
.mb-20 {
1560+
margin-bottom: 20px;
1561+
}
1562+
.mb-30 {
1563+
margin-bottom: 30px;
1564+
}
1565+
.ml-10 {
1566+
margin-left: 10px;
1567+
}
1568+
.my-10 {
1569+
margin-top: 10px;
1570+
margin-bottom: 10px;
1571+
}
1572+
.my-20 {
1573+
margin-top: 20px;
1574+
margin-bottom: 20px;
1575+
}
1576+
.my-30 {
1577+
margin-top: 30px;
1578+
margin-bottom: 30px;
1579+
}
1580+
1581+
.mx-5 {
1582+
margin-left: 5px;
1583+
margin-right: 5px;
1584+
}
1585+
.mx-10 {
1586+
margin-left: 10px;
1587+
margin-right: 10px;
1588+
}
1589+
.mx-20 {
1590+
margin-left: 20px;
1591+
margin-right: 20px;
1592+
}
1593+
.mx-30 {
1594+
margin-left: 30px;
1595+
margin-right: 30px;
1596+
}
1597+
.text-bold {
1598+
font-weight: 600;
1599+
}
1600+
.rounded {
1601+
border-radius: 3px;
1602+
}
1603+
1604+
.btn-outline-light {
1605+
color: #f8f9fa;
1606+
background-color: transparent;
1607+
background-image: none;
1608+
border-color: #f8f9fa;
1609+
}
1610+
.btn-outline-light:hover {
1611+
color: #212529;
1612+
background-color: #f8f9fa;
1613+
border-color: #f8f9fa;
1614+
text-decoration: none;
1615+
}
1616+
1617+
.flex {
1618+
display: flex;
1619+
}
1620+
.flex-wrap {
1621+
flex-wrap: wrap;
1622+
}
1623+
@media (max-width: 992px) {
1624+
.hidden-md {
1625+
display: none;
1626+
}
1627+
}
1628+
.img-thumbnail {
1629+
padding: .25rem;
1630+
background-color: #fff;
1631+
border: 1px solid #dee2e6;
1632+
border-radius: .25rem;
1633+
max-width: 100%;
1634+
height: auto;
1635+
}
1636+
1637+
img {
1638+
vertical-align: middle;
1639+
border-style: none;
1640+
}
1641+
1642+
@media (max-width: 720px) {
1643+
.text-center-sm {
1644+
text-align: center;
1645+
}

‎loginSystem/templates/loginSystem/login.html‎

Lines changed: 116 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,14 @@
9191

9292
<!-- JS Ends -->
9393

94+
<style type="text/css">
95+
96+
html, body {
97+
height: 100%;
98+
background: #ffffff;
99+
}
100+
101+
</style>
94102

95103
</head>
96104
<body>
@@ -102,123 +110,128 @@
102110
</div>
103111
</div>
104112

105-
<style type="text/css">
106-
107-
html, body {
108-
height: 100%;
109-
background: #fafafa;
110-
}
111-
112-
</style>
113-
114-
<div class="center-vertical">
115-
<div class="center-content row">
116-
117-
<div class="col-md-8 col-lg-6 clearfix center-margin">
118-
<div class="row">
119-
<div class="col-md-5">
120-
<h3 class="text-transform-upr font-size-17">CyberPanel <span class="opacity-80">v 1.9</span></h3>
121-
<p class="font-gray">Web Hosting Control Panel</p>
122-
<div class="divider"></div>
123-
<ul class="reset-ul">
124-
<li class="pad10A font-size-16">
125-
<i class="glyph-icon icon-camera mrg10R font-green"></i>
126-
LiteSpeed
127-
</li>
128-
<li class="pad10A font-size-16">
129-
<i class="glyph-icon icon-cog mrg10R font-red"></i>
130-
Multiple PHPs
131-
</li>
132-
<li class="pad10A font-size-16">
133-
<i class="glyph-icon icon-bullhorn mrg10R font-orange"></i>
134-
Request throttling.
135-
</li>
136-
</ul>
137-
<div class="divider"></div>
138-
<br>
139-
</div>
113+
<div class>
114+
<div class="col-md-6 col-sm-12 hidden-md" style="background: #00007A;">
115+
<div class="row panel-body style=" padding-bottom: 0px;>
116+
<div class="col-lg-6 col-md-12 panel-body">
117+
<h2 class="text-transform-upr text-white my-30 text-bold">WEB HOSTING CONTROL PANEL
118+
</br/>FOR EVERYONE
119+
120+
</h2>
121+
<h4 class="text-white">Powered By OpenLiteSpeed/LiteSpeed Enterprise. Built For Speed, Security and
122+
Reliability.</h4>
123+
</div>
124+
<div class="col-lg-6 col-md-12 text-center panel-body">
125+
<img class="" src="/static/images/cyberpanel-banner-graphics.png" alt="" width="96%">
126+
</div>
127+
</div>
128+
<div class="row panel-body">
129+
<div class="row panel-body">
130+
<ul class="reset-ul">
131+
<li class="row my-30">
132+
<div class="col-lg-3 col-md-12 text-center">
133+
<img class="img-thumbnail mb-20" src="/static/images/new-design-list-websites-square.png" alt=""
134+
width="150">
135+
</div>
136+
<div class="col-lg-6 col-md-12 mb-20">
137+
<h3 class="text-white mb-5">
138+
Change Logs
139+
</h3>
140+
<p class="text-white mt-10">
141+
Learn about new releases and features.
142+
</p>
143+
</div>
144+
<div class="col-lg-3 col-md-12 text-center">
145+
<a href="https://go.cyberpanel.net/updates"
146+
target='_blank'>
147+
<button type="button" class="btn btn-outline-light mb-30 rounded mt-5">
148+
Learn More
149+
</button>
150+
</a>
151+
</div>
152+
</li>
153+
</ul>
154+
</div>
155+
</div>
156+
</div>
140157

141-
<div ng-app="loginSystem" ng-controller="loginSystem" class="col-md-7">
142-
143-
<form id="loginForm" action="/">
144-
<div class="content-box">
145-
<h3 class="content-box-header content-box-header-alt bg-default">
146-
<span class="icon-separator">
147-
<i class="glyph-icon icon-cog"></i>
148-
</span>
149-
<span class="header-wrapper">
150-
Administrative area
151-
<small>Provide username and password to login.</small>
152-
</span>
153-
</h3>
154-
<div class="content-box-wrapper">
155-
<div class="form-group">
156-
157-
<div class="input-group">
158-
<input ng-model="username" type="text" class="form-control" name="username"
159-
placeholder="Enter username" required>
160-
<span class="input-group-addon bg-blue">
158+
<div ng-app="loginSystem" ng-controller="loginSystem" class="col-md-6 col-sm-12" style="background: #ffffff;">
159+
<br/>
160+
<div>
161+
<form id="loginForm" action="/" class="col-md-8 col-md-offset-2">
162+
<h1 class="text-transform-upr text-center panel-body text-bold"
163+
style="padding-bottom: 0px; color: #33CCCC;">
164+
<img class="center-block text-center my-20" src="{% static 'images/cyber-panel-logo.svg' %}">
165+
CyberPanel
166+
<span class="opacity-80">v 1.9</span>
167+
</h1>
168+
<h4 class="text-muted text-center mb-10">Web Hosting Control Panel</h4>
169+
<div class="">
170+
<div class="mx-30">
171+
<div class="content-box-wrapper panel-body my-10 mx-30">
172+
<div class="form-group">
173+
<div class="input-group">
174+
<input ng-model="username" type="text" class="form-control" name="username"
175+
placeholder="Enter username" required style="height: 45px;">
176+
<span class="input-group-addon bg-blue">
161177
<i class="glyph-icon icon-envelope-o"></i>
162-
</span>
163-
</div>
164-
</div>
165-
<div class="form-group">
166-
<div class="input-group">
167-
<input ng-keypress="initiateLogin($event)" ng-model="password" type="password"
168-
class="form-control" id="password" placeholder="Password" required name="password">
169-
<span class="input-group-addon bg-blue">
178+
</span>
179+
</div>
180+
</div>
181+
<div class="form-group">
182+
<div class="input-group">
183+
<input ng-keypress="initiateLogin($event)" ng-model="password" type="password"
184+
class="form-control" id="password" placeholder="Password" required
185+
name="password">
186+
<span class="input-group-addon bg-blue">
170187
<i class="glyph-icon icon-unlock-alt"></i>
171188
</span>
172-
</div>
173-
<img id="verifyingLogin" class="center-block"
174-
src="{% static 'images/loading.gif' %}">
175-
</div>
176-
177-
<div class="form-group">
178-
<div class="input-group">
179-
<select ng-model="languageSelection" ng-init="languageSelection='english'"
180-
class="form-control">
181-
<option value="english">English</option>
182-
<option>Chinese</option>
183-
<option>Italian</option>
184-
<option>French</option>
185-
<option>Bulgarian</option>
186-
<option>Portuguese</option>
187-
<option>Japanese</option>
188-
<option>Bosnian</option>
189-
<option>Greek</option>
190-
<option>Russian</option>
191-
<option>Turkish</option>
192-
<option>Spanish</option>
193-
<option>Polish</option>
194-
<option>Vietnamese</option>
195-
<option>German</option>
196-
</select>
197-
</div>
198-
</div>
199-
200-
201-
<button type="button" ng-click="verifyLoginCredentials()"
202-
class="btn btn-success btn-block">Sign In
203-
</button>
189+
</div>
190+
<img id="verifyingLogin" class="center-block"
191+
src="{% static 'images/loading.gif' %}">
192+
</div>
193+
194+
195+
<div class="form-group">
196+
<div class="input-group">
197+
<select ng-model="languageSelection" ng-init="languageSelection='english'"
198+
class="form-control">
199+
<option value="english">English</option>
200+
<option>Chinese</option>
201+
<option>Italian</option>
202+
<option>French</option>
203+
<option>Bulgarian</option>
204+
<option>Portuguese</option>
205+
<option>Japanese</option>
206+
<option>Bosnian</option>
207+
<option>Greek</option>
208+
<option>Russian</option>
209+
<option>Turkish</option>
210+
<option>Spanish</option>
211+
<option>Polish</option>
212+
<option>Vietnamese</option>
213+
<option>German</option>
214+
</select>
204215
</div>
205216
</div>
206-
</form>
207-
<div id="loginFailed" class="alert alert-danger">
208-
<p>Could Not Login, Error message: {$ errorMessage $}</p>
209-
</div>
210-
</div>
211217

212218

219+
<button type="button" ng-click="verifyLoginCredentials()"
220+
class="btn btn-success btn-block">Sign In
221+
</button>
222+
</div>
223+
</div>
213224
</div>
225+
</form>
226+
<div id="loginFailed" class="alert alert-danger">
227+
<p>Could Not Login, Error message: {$ errorMessage $}</p>
214228
</div>
215-
216229
</div>
217230
</div>
218-
231+
</div>
219232
<script src="https://code.angularjs.org/1.6.5/angular.min.js"></script>
220233
<script src="https://code.angularjs.org/1.6.5/angular-route.min.js"></script>
221234
<script src="{% static 'loginSystem/login-systen.js' %}"></script>
222235

223236
</body>
224-
</html>
237+
</html>

0 commit comments

Comments
 (0)