s426231/TAS-ALFA
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial login/register frontend project

Browse Source
This commit is contained in:
Szymon 2018-11-17 21:15:55 +01:00
parent b6af8107bc
commit 17e5883e66
9 changed files with 2066 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
admin-zone/login.php
View File

@ -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>

29
css/global.css
View File

@ -1,11 +1,7 @@
.body{
background-color: azure;
}
.navHeader{
position: absolute;
width: 100%;
height: 200px;
height: 500px;
margin-right: 0;
margin-left: 0;
z-index: -1;
@ -13,7 +9,7 @@
.navHeader img {
width: 100%;
height: 200px;
height: 500px;
z-index: -1;
}
@ -65,7 +61,7 @@
}
.footer {
background-color: lightgray;
background-color: #e8ebef;
width: 100%;
}
@ -93,3 +89,22 @@
background-color: #f4b241;
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
View 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);
}

379
css/register.css
View File

@ -1,267 +1,148 @@
*{
margin:0;
padding:0;
#particles-js{
background-color: #b61924;
background-size: cover;
min-width: 547px;
}
h1 {
font-size: 2em;
font-family: "Core Sans N W01 35 Light";
font-weight: normal;
margin: .67em 0;
display: block;
.container {
padding-top: 10%;
min-width: 425px;
}
#registered {
margin-top: 50px;
}
#registered img {
margin-bottom: 0px;
width: 100px;
.registerHeader{
width: 100%;
height: 100px;
}
#registered span {
clear: both;
display: block;
}
img {
margin-bottom: 20px;
}
.avatar {
margin: 10px 0 20px 0;
}
.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;
.elementsOnRegisterHeader {
background-color: #f4c741;
text-align: center;
justify-content: center;
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;
color: black;
}
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;
.elementsOnRegisterHeader h3 {
padding-top: 10%;
}
.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;
.elementsOnRegisterHeader .avatar {
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);
top: 0%;
left: -5%;
width: 30%;
float: left;
z-index: 2;
}
.alert-error {
color: #f00;
background-color: #360e10;
box-shadow: 0 0 0 1px #551e21 inset, 0 5px 10px rgba(0, 0, 0, 0.75);
.registerMain{
width: 100%;
min-height: 225px;
}
.alert:empty{
.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;
}
.alert-success {
color: #21ec0c;
background-color: #15360e;
box-shadow: 0 0 0 1px #2a551e inset, 0 5px 10px rgba(0, 0, 0, 0.75);
.box input:checked ~ .checkmark:after {
display: block;
}
.box .checkmark:after {
left: 5px;
bottom: 0px;
width: 10px;
height: 25px;
border: solid #00a5c6;
border-width: 0 5px 4px 0;
transform: rotate(45deg);
}

BIN
images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

80
index.html Normal file
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

36
register/index.php
View File

@ -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>