initial login/register frontend project
This commit is contained in:
Szymon
parent
b6af8107bc
commit
17e5883e66
@ -1,14 +0,0 @@
|
|||||||
<?php
|
|
||||||
include "logincheck.php";
|
|
||||||
?>
|
|
||||||
<html>
|
|
||||||
<body>
|
|
||||||
<form action="" method="POST" style="text-align:center;">
|
|
||||||
|
|
||||||
<p>Login: <input type="text" placeholder="Login" id="user" name="user"></p>
|
|
||||||
<p>Hasło: <input type="text" placeholder="Hasło" id="password" name="password"></p>
|
|
||||||
<input type="submit" value="Login" name="submitas" />
|
|
||||||
<span><?php echo $error; ?></span>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
@ -1,11 +1,7 @@
|
|||||||
.body{
|
|
||||||
background-color: azure;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navHeader{
|
.navHeader{
|
||||||
position:absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 500px;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
@ -13,7 +9,7 @@
|
|||||||
|
|
||||||
.navHeader img {
|
.navHeader img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 500px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,7 +61,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
background-color: lightgray;
|
background-color: #e8ebef;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -93,3 +89,22 @@
|
|||||||
background-color: #f4b241;
|
background-color: #f4b241;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background-color: #f4c242;
|
||||||
|
border: 1px solid #f4b241;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: gray;
|
||||||
|
padding: 12px 22px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background-color: #f4b241;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
153
css/login.css
Normal file
153
css/login.css
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
#particles-js{
|
||||||
|
background-color: #b61924;
|
||||||
|
background-size: cover;
|
||||||
|
min-width: 547px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding-top: 10%;
|
||||||
|
min-width: 425px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginHeader{
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnLoginHeader {
|
||||||
|
background-color: #f4c741;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnLoginHeader h3 {
|
||||||
|
padding-top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnLoginHeader .avatar {
|
||||||
|
position: relative;
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
width: 30%;
|
||||||
|
float: left;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginMain{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 225px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnLoginMain {
|
||||||
|
position: relative;
|
||||||
|
background-color: #f9fbff;
|
||||||
|
padding-top: 16px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnLoginMain .inputmain input {
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0%;
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
margin-top: 25px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginFooter {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginFooter span {
|
||||||
|
align-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnLoginFooter {
|
||||||
|
background-color: #e8ebef;
|
||||||
|
border-top: 2px solid light gray;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button2 {
|
||||||
|
background-color: #f4c242;
|
||||||
|
border: 1px solid orangered;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: gray;
|
||||||
|
padding: 12px 32px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button2:hover {
|
||||||
|
background-color: #f4b241;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 25px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: auto;
|
||||||
|
font-size: 15px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
background-color: #eee;
|
||||||
|
border: 2px solid lightgray;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box:hover input ~ .checkmark {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box input:checked ~ .checkmark {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box input:checked ~ .checkmark:after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box .checkmark:after {
|
||||||
|
left: 5px;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 10px;
|
||||||
|
height: 25px;
|
||||||
|
border: solid #f4c741;
|
||||||
|
border-width: 0 5px 4px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
393
css/register.css
393
css/register.css
@ -1,267 +1,148 @@
|
|||||||
*{
|
#particles-js{
|
||||||
margin:0;
|
background-color: #b61924;
|
||||||
padding:0;
|
background-size: cover;
|
||||||
|
min-width: 547px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.container {
|
||||||
font-size: 2em;
|
padding-top: 10%;
|
||||||
font-family: "Core Sans N W01 35 Light";
|
min-width: 425px;
|
||||||
font-weight: normal;
|
|
||||||
margin: .67em 0;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#registered {
|
.registerHeader{
|
||||||
margin-top: 50px;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
#registered img {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#registered span {
|
.elementsOnRegisterHeader {
|
||||||
clear: both;
|
background-color: #f4c741;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnRegisterHeader h3 {
|
||||||
|
padding-top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnRegisterHeader .avatar {
|
||||||
|
position: relative;
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
width: 30%;
|
||||||
|
float: left;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.registerMain{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 225px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnRegisterMain {
|
||||||
|
position: relative;
|
||||||
|
background-color: #f9fbff;
|
||||||
|
padding-top: 16px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnRegisterMain .inputmain input {
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0%;
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 15px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.registerFooter {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elementsOnRegisterFooter {
|
||||||
|
background-color: #e8ebef;
|
||||||
|
border-top: 2px solid light gray;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-right: 30px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button2 {
|
||||||
|
background-color: #f4c242;
|
||||||
|
border: 1px solid orangered;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: gray;
|
||||||
|
padding: 12px 32px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button2:hover {
|
||||||
|
background-color: #f4b241;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 25px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: auto;
|
||||||
|
font-size: 15px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
background-color: #eee;
|
||||||
|
border: 2px solid lightgray;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box:hover input ~ .checkmark {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box input:checked ~ .checkmark {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box input:checked ~ .checkmark:after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
.box .checkmark:after {
|
||||||
margin-bottom: 20px;
|
left: 5px;
|
||||||
}
|
bottom: 0px;
|
||||||
|
width: 10px;
|
||||||
.avatar {
|
height: 25px;
|
||||||
margin: 10px 0 20px 0;
|
border: solid #00a5c6;
|
||||||
}
|
border-width: 0 5px 4px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
.module{
|
|
||||||
position:relative;
|
|
||||||
top:10%;
|
|
||||||
height:65%;
|
|
||||||
width:450px;
|
|
||||||
margin-left:auto;
|
|
||||||
margin-right:auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user {
|
|
||||||
color: #66d8fc;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.userlist {
|
|
||||||
float:left;
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.userlist span {
|
|
||||||
color: #0590fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome{
|
|
||||||
position:relative;
|
|
||||||
top:30%;
|
|
||||||
height:65%;
|
|
||||||
width:900px;
|
|
||||||
margin-left:auto;
|
|
||||||
margin-right:auto;
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background: #19547c;
|
|
||||||
}
|
|
||||||
::selection {
|
|
||||||
background: #19547c;
|
|
||||||
}
|
|
||||||
input::-moz-selection {
|
|
||||||
background: #037db6;
|
|
||||||
}
|
|
||||||
input::selection {
|
|
||||||
background: #037db6;
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
color: #fff;
|
|
||||||
background-color:#f0f0f0;
|
|
||||||
font-family:helvetica;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.body-content{
|
|
||||||
position:relative;
|
|
||||||
top:20px;
|
|
||||||
height:700px;
|
|
||||||
width:800px;
|
|
||||||
margin-left:auto;
|
|
||||||
margin-right:auto;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
select,
|
|
||||||
textarea,
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"],
|
|
||||||
input[type="email"]
|
|
||||||
{
|
|
||||||
height:30px;
|
|
||||||
width:100%;;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 34px;
|
|
||||||
padding: 0 10px;
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
select,
|
|
||||||
textarea,
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"],
|
|
||||||
input[type="email"] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
-webkit-transition: background-position 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
|
||||||
transition: background-position 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
|
||||||
}
|
|
||||||
select:hover,
|
|
||||||
textarea:hover,
|
|
||||||
input[type="text"]:hover,
|
|
||||||
input[type="password"]:hover,
|
|
||||||
input[type="email"]:hover {
|
|
||||||
border-color: rgba(255, 255, 255, 0.5);
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
}
|
|
||||||
select:focus,
|
|
||||||
textarea:focus,
|
|
||||||
input[type="text"]:focus,
|
|
||||||
input[type="password"]:focus,
|
|
||||||
input[type="email"]:focus {
|
|
||||||
border: 2px solid;
|
|
||||||
border-color: #1e5f99;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 3px 0;
|
|
||||||
padding: 6px 20px;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
height: 34px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.15);
|
|
||||||
color: #00aeff;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
||||||
box-shadow: 0 0 rgba(0, 0, 0, 0);
|
|
||||||
border-radius: 2px;
|
|
||||||
-webkit-transition: background-color 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
|
|
||||||
transition: background-color 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
|
|
||||||
}
|
|
||||||
.btn.active,
|
|
||||||
.btn:active {
|
|
||||||
padding: 7px 19px 5px 21px;
|
|
||||||
}
|
|
||||||
.btn.disabled:active,
|
|
||||||
.btn[disabled]:active,
|
|
||||||
.btn.disabled.active,
|
|
||||||
.btn[disabled].active {
|
|
||||||
padding: 6px 20px !important;
|
|
||||||
}
|
|
||||||
.btn:hover,
|
|
||||||
.btn:focus {
|
|
||||||
background-color: rgba(0, 0, 0, 0.25);
|
|
||||||
color: #ffffff;
|
|
||||||
border-color: rgba(255, 255, 255, 0.3);
|
|
||||||
box-shadow: 0 0 rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
.btn:active,
|
|
||||||
.btn.active {
|
|
||||||
background-color: rgba(0, 0, 0, 0.15);
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
border-color: rgba(255, 255, 255, 0.07);
|
|
||||||
box-shadow: inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
background-color: #098cc8;
|
|
||||||
color: #ffffff;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
box-shadow: 0 0 rgba(0, 0, 0, 0);
|
|
||||||
border-radius: 2px;
|
|
||||||
-webkit-transition: background-color 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
|
|
||||||
transition: background-color 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
|
|
||||||
background-image: -webkit-linear-gradient(top, #0f9ada, #0076ad);
|
|
||||||
background-image: linear-gradient(to bottom, #0f9ada, #0076ad);
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
|
|
||||||
}
|
|
||||||
.btn-primary:hover,
|
|
||||||
.btn-primary:focus {
|
|
||||||
background-color: #21b0f1;
|
|
||||||
color: #ffffff;
|
|
||||||
border-color: transparent;
|
|
||||||
box-shadow: 0 0 rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
.btn-primary:active,
|
|
||||||
.btn-primary.active {
|
|
||||||
background-color: #006899;
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
border-color: transparent;
|
|
||||||
box-shadow: inset 1.5px 1.5px 3px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.btn-primary:hover,
|
|
||||||
.btn-primary:focus {
|
|
||||||
background-image: -webkit-linear-gradient(top, #37c0ff, #0097dd);
|
|
||||||
background-image: linear-gradient(to bottom, #37c0ff, #0097dd);
|
|
||||||
}
|
|
||||||
.btn-primary:active,
|
|
||||||
.btn-primary.active {
|
|
||||||
background-image: -webkit-linear-gradient(top, #006ea1, #00608d);
|
|
||||||
background-image: linear-gradient(to bottom, #000000, #ffffff);
|
|
||||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
|
|
||||||
}
|
|
||||||
.btn-block {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 4px 20px 4px 20px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
text-shadow: none;
|
|
||||||
position: relative;
|
|
||||||
background-color: #272e3b;
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
border: 1px solid #000;
|
|
||||||
box-shadow: 0 0 0 1px #363d49 inset, 0 5px 10px rgba(0, 0, 0, 0.75);
|
|
||||||
}
|
|
||||||
.alert-error {
|
|
||||||
color: #f00;
|
|
||||||
background-color: #360e10;
|
|
||||||
box-shadow: 0 0 0 1px #551e21 inset, 0 5px 10px rgba(0, 0, 0, 0.75);
|
|
||||||
}
|
|
||||||
.alert:empty{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.alert-success {
|
|
||||||
color: #21ec0c;
|
|
||||||
background-color: #15360e;
|
|
||||||
box-shadow: 0 0 0 1px #2a551e inset, 0 5px 10px rgba(0, 0, 0, 0.75);
|
|
||||||
}
|
}
|
||||||
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
80
index.html
Normal file
80
index.html
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<title>Projekt blogowy</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
|
||||||
|
<!-- bootstrap -->
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/global.css">
|
||||||
|
|
||||||
|
<!-- bootstrap js -->
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="body">
|
||||||
|
<header>
|
||||||
|
<div class="navHeader">
|
||||||
|
<img src="../images/artist-camera-dslr-22185.jpg" alt="Bloggero - najlepszy serwis blogowy!">
|
||||||
|
</div>
|
||||||
|
<div class="row elementsOnHeader">
|
||||||
|
<div class="col-md-2 login">
|
||||||
|
<a href="admin-zone/login.php" class="button" role="button">Zarządzaj blogiem</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 register"r>
|
||||||
|
<h1>Centrum Blogów</h1>
|
||||||
|
<a href="register/index.php" class="button" role="button">Zacznij swą blogową przygodę</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 search" style="align-item: right">
|
||||||
|
<input type="text" placeholder="Szukaj">
|
||||||
|
<input type="submit">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="row mainrow">
|
||||||
|
<div class="col-md-12"><h2>Najnowsze wpisy:</h2></div>
|
||||||
|
<div class="col-md-4 mininote">
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<a href="http://lipsum.com"><img src="http://placehold.it/200x200"></a>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="http://lipsum.com" style="font-size: 10px">Czytaj więcej</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mininote">
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<a href="http://lipsum.com"><img src="http://placehold.it/200x200"></a>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="http://lipsum.com" style="font-size: 10px">Czytaj więcej</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mininote">
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<a href="http://lipsum.com"><img src="http://placehold.it/200x200"></a>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="http://lipsum.com" style="font-size: 10px">Czytaj więcej</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mininote">
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<a href="http://lipsum.com"><img src="http://placehold.it/200x200"></a>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="http://lipsum.com" style="font-size: 10px">Czytaj więcej</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mininote">
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<a href="http://lipsum.com"><img src="http://placehold.it/200x200"></a>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="http://lipsum.com" style="font-size: 10px">Czytaj więcej</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 mininote">
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<a href="http://lipsum.com"><img src="http://placehold.it/200x200"></a>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="http://lipsum.com" style="font-size: 10px">Czytaj więcej</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row footer">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<p>Grupa Alfa 2018</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
132
js/app.js
Normal file
132
js/app.js
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
/* -----------------------------------------------
|
||||||
|
/* How to use? : Check the GitHub README
|
||||||
|
/* ----------------------------------------------- */
|
||||||
|
|
||||||
|
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
|
||||||
|
|
||||||
|
particlesJS.load('particles-js', 'particles.json', function() {
|
||||||
|
console.log('particles.js loaded - callback');
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Otherwise just put the config content (json): */
|
||||||
|
|
||||||
|
particlesJS('particles-js',
|
||||||
|
|
||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"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": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 5,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 6,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 400,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true,
|
||||||
|
"config_demo": {
|
||||||
|
"hide_card": false,
|
||||||
|
"background_color": "#b61924",
|
||||||
|
"background_image": "",
|
||||||
|
"background_position": "50% 50%",
|
||||||
|
"background_repeat": "no-repeat",
|
||||||
|
"background_size": "cover"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
1541
js/particles.js
Normal file
1541
js/particles.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,36 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/register.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href=" ../css/global.css" type="text/css">
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
|
|
||||||
<!-- bootstrap -->
|
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="indexstyle.css">
|
|
||||||
|
|
||||||
<!-- bootstrap js -->
|
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="body-content">
|
|
||||||
<div class="module">
|
|
||||||
<h1>Rejestracja nowego użytkownika</h1>
|
|
||||||
<form class="form" action="registration.php" method="post" enctype="multipart/form-data" autocomplete="off">
|
|
||||||
<div class="alert alert-error"></div>
|
|
||||||
<input type="text" placeholder="User Name" name="username" required />
|
|
||||||
<input type="email" placeholder="Email" name="email" required />
|
|
||||||
<input type="password" placeholder="Password" name="password" autocomplete="new-password" required />
|
|
||||||
<input type="password" placeholder="Confirm Password" name="confirmpassword" autocomplete="new-password" required />
|
|
||||||
<div class="avatar"><label>Select your avatar: </label><input type="file" name="avatar" accept="image/*" required /></div>
|
|
||||||
<input type="submit" value="Register" name="register" class="btn btn-block btn-primary" />
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user