400 lines
8.7 KiB
HTML
400 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Войти | Unofficial</title>
|
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
|
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
|
|
<link rel="stylesheet" type="text/css" href="css/animate.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
|
<meta charset="utf-8">
|
|
<style>
|
|
* {
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
margin: 0px;
|
|
background-image: url(/img/background.jpg);
|
|
background-repeat: repeat-y no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.icons>a {
|
|
text-decoration: none;
|
|
color: darkgray;
|
|
}
|
|
|
|
.location>a {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
.location:hover {
|
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.left {
|
|
margin-left: 5%;
|
|
}
|
|
.left>a {
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
@media screen and (min-width: 1001px) {
|
|
.card {
|
|
margin-left: 32%;
|
|
margin-top: 2%;
|
|
padding: 0px;
|
|
background-color: white;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
transition: 0.3s;
|
|
width: 35%;
|
|
border-radius: 5px;
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 1);
|
|
}
|
|
img {
|
|
border: 20px solid white;
|
|
border-radius: 50%;
|
|
margin-top: 8%;
|
|
margin-bottom: -15% !important;
|
|
width: 30%;
|
|
}
|
|
.name {
|
|
text-align: center;
|
|
font-size: 2.8em;
|
|
color: gainsboro;
|
|
margin-top: 15%;
|
|
margin-bottom: auto;
|
|
text-transform: capitalize;
|
|
}
|
|
hr {
|
|
width: 93%;
|
|
height: 2px;
|
|
background-color: gainsboro;
|
|
border: 0px;
|
|
}
|
|
.subtitle {
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
color: darkgray;
|
|
}
|
|
.icons {
|
|
font-size: 18px;
|
|
text-align: center;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
color: darkgray;
|
|
margin-bottom: 40px;
|
|
}
|
|
.location {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 1.5em;
|
|
display: block;
|
|
background-color: cornflowerblue;
|
|
padding: 10px;
|
|
margin-left: 7%;
|
|
margin-right: 7%;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 100px) and (max-width: 728px) and (orientation:portrait) {
|
|
body {
|
|
width: 100%;
|
|
margin: 0px;
|
|
background: url(/img/background.jpg) fixed no;
|
|
overflow-x: hidden;
|
|
}
|
|
hr {
|
|
width: 93%;
|
|
height: 2px;
|
|
background-color: gainsboro;
|
|
border: 0px;
|
|
}
|
|
.card {
|
|
margin-top: 10%;
|
|
margin-left: 2%;
|
|
margin-right: 0px;
|
|
background-color: white;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
transition: 0.3s;
|
|
width: 95%;
|
|
border-radius: 5px;
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 1);
|
|
}
|
|
img {
|
|
border: 15px solid white;
|
|
margin-bottom: -20% !important;
|
|
border-radius: 50%;
|
|
width: 33%;
|
|
}
|
|
.name {
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
text-align: center;
|
|
font-size: 2.5em;
|
|
color: gainsboro;
|
|
margin-top: 16%;
|
|
margin-bottom: auto;
|
|
text-transform: capitalize;
|
|
}
|
|
.subtitle {
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
color: darkgray;
|
|
}
|
|
.icons {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
color: darkgray;
|
|
margin-bottom: 40px;
|
|
}
|
|
.location {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 0.8em;
|
|
display: block;
|
|
background-color: cornflowerblue;
|
|
padding: 10px;
|
|
margin-left: 7%;
|
|
margin-right: 7%;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 100px) and (max-width: 728px) and (orientation:landscape) {
|
|
body {
|
|
width: 100%;
|
|
margin: 0px;
|
|
background: url(/img/background.png) fixed no;
|
|
overflow-x: hidden;
|
|
}
|
|
hr {
|
|
width: 93%;
|
|
height: 2px;
|
|
background-color: gainsboro;
|
|
border: 0px;
|
|
}
|
|
.card {
|
|
margin-top: 6%;
|
|
margin-left: 9%;
|
|
margin-right: 0px;
|
|
background-color: white;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
transition: 0.3s;
|
|
width: 80%;
|
|
border-radius: 5px;
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 1);
|
|
}
|
|
img {
|
|
border: 15px solid white;
|
|
margin-bottom: -15% !important;
|
|
border-radius: 50%;
|
|
width: 25%;
|
|
}
|
|
.name {
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
text-align: center;
|
|
font-size: 2.8em;
|
|
color: gainsboro;
|
|
margin-top: 16%;
|
|
margin-bottom: auto;
|
|
text-transform: capitalize;
|
|
}
|
|
.subtitle {
|
|
text-align: center;
|
|
font-size: 1.9em;
|
|
color: darkgray;
|
|
}
|
|
.icons {
|
|
font-size: 18px;
|
|
text-align: center;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
color: darkgray;
|
|
margin-bottom: 40px;
|
|
}
|
|
.location {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 1.5em;
|
|
display: block;
|
|
background-color: cornflowerblue;
|
|
padding: 10px;
|
|
margin-left: 7%;
|
|
margin-right: 7%;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 728px) and (max-width: 1000px) {
|
|
body {
|
|
width: 100%;
|
|
margin: 0px;
|
|
background: url(/img/background.png) fixed no;
|
|
overflow-x: hidden;
|
|
}
|
|
hr {
|
|
width: 93%;
|
|
height: 2px;
|
|
background-color: gainsboro;
|
|
border: 0px;
|
|
}
|
|
.card {
|
|
margin-top: 4%;
|
|
margin-left: 13%;
|
|
align-content: center;
|
|
background-color: white;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
transition: 0.3s;
|
|
width: 75%;
|
|
border-radius: 5px;
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 1);
|
|
}
|
|
img {
|
|
border: 15px solid white;
|
|
margin-bottom: -18% !important;
|
|
border-radius: 50%;
|
|
width: 30%;
|
|
}
|
|
.name {
|
|
text-align: center;
|
|
font-size: 2.5em;
|
|
color: gainsboro;
|
|
margin-top: 16%;
|
|
margin-bottom: auto;
|
|
text-transform: capitalize;
|
|
}
|
|
.subtitle {
|
|
text-align: center;
|
|
font-size: 2em;
|
|
color: darkgray;
|
|
}
|
|
.icons {
|
|
font-size: 15px;
|
|
text-align: center;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
color: darkgray;
|
|
margin-bottom: 40px;
|
|
}
|
|
.location {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 1.8em;
|
|
display: block;
|
|
background-color: cornflowerblue;
|
|
padding: 10px;
|
|
margin-left: 7%;
|
|
margin-right: 7%;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
.fa-stack:hover {
|
|
transition: 0.9s;
|
|
transform: rotate(360deg);
|
|
}
|
|
|
|
.fa-lg {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.fa-twitter:hover {
|
|
border-radius: 50%;
|
|
color: white;
|
|
background-color: #1da1f2;
|
|
}
|
|
|
|
.fa-facebook:hover {
|
|
border-radius: 50%;
|
|
color: white;
|
|
background-color: #3b5998;
|
|
}
|
|
|
|
.fa-google-plus:hover {
|
|
border-radius: 50%;
|
|
color: white;
|
|
background-color: #dd4b39;
|
|
}
|
|
|
|
.fa-github:hover {
|
|
border-radius: 50%;
|
|
color: white;
|
|
background-color: black;
|
|
}
|
|
|
|
.fa-instagram:hover {
|
|
border-radius: 50%;
|
|
color: white;
|
|
background-color: #5851db;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 1.2em
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="margin-top: 8%;" >
|
|
<div class="card animated fadeIn">
|
|
<form method="POST">
|
|
<hr>
|
|
<div class="name">
|
|
<h1>Войти</h1>
|
|
</div>
|
|
<center><div id="success" class="alert alert-success alert-dismissible" role="alert" style="display:none; width:430px">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
|
|
</button>
|
|
<div class="alert-message"></div>
|
|
</div>
|
|
<div id="error" class="alert alert-danger alert-dismissible" role="alert" style="display:none; width:430px">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
|
|
</button>
|
|
<div class="alert-message"></div>
|
|
</div>
|
|
<form id="register">
|
|
<div class="form-group">
|
|
<label for="username">Имя</label>
|
|
<input type="text" name="username" class="form-control" id="username" placeholder="Имя" style="width:430px; height:34px">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Пароль</label>
|
|
<input type="password" name="password" class="form-control" id="password" placeholder="Пароль" style="width:430px; height:34px">
|
|
</div>
|
|
<br>
|
|
<input type="submit" name="submit" value="Войти" class="btn btn-default">
|
|
|
|
</input>
|
|
<a class="btn btn-default" href="?act=register">Регистрация</a>
|
|
|
|
</form>
|
|
<br><br>
|
|
</center>
|
|
</form>
|
|
</div>
|
|
<footer class="animated fadeIn">
|
|
<p></p>
|
|
</footer>
|
|
</body>
|
|
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
</html> |