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

Account settings front alpha v0.1, login+register placeholder change

Browse Source
This commit is contained in:
Szymon 2018-12-09 20:57:56 +01:00
parent e08edcf254
commit c206292155
8 changed files with 370 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
workplan.txt

52
admin-zone/acc_settings.php
View File

@ -25,27 +25,27 @@ if(isset($_POST['password_change'])){
$_SESSION['user']=$user; $_SESSION['user']=$user;
$_SESSION['password']=$newpassword; $_SESSION['password']=$newpassword;
$_SESSION['loggedIn']=1; $_SESSION['loggedIn']=1;
$_SESSION['message'] = "Hasło zostało zmienione!"; $_SESSION['message'] = "Hasło zostało zmienione!<br>";
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
mysqli_close($mysqli); mysqli_close($mysqli);
} }
else { else {
$_SESSION['message'] = "Błędne hasło!"; $_SESSION['message'] = "Błędne hasło!<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Potwierdź hasło ponownie"; $_SESSION['message'] = "Potwierdź hasło ponownie<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Nowe hasło nie może być takie samo jak obecne"; $_SESSION['message'] = "Nowe hasło nie może być takie samo jak obecne<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Należy wypełnić wszystkie wmagane pola"; $_SESSION['message'] = "Należy wypełnić wszystkie wmagane pola<br>";
} }
} }
@ -61,24 +61,24 @@ if(isset($_POST['email_change'])){
$_SESSION['message'] = "email został zmieniony!"; $_SESSION['message'] = "email został zmieniony!";
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
mysqli_close($mysqli); mysqli_close($mysqli);
} }
else { else {
$_SESSION['message'] = "Błędne hasło!"; $_SESSION['message'] = "Błędne hasło!<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Potwierdź email ponownie"; $_SESSION['message'] = "Potwierdź email ponownie<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Nowy email nie może być taki sam jak obecny"; $_SESSION['message'] = "Nowy email nie może być taki sam jak obecny<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Należy wypełnić wszystkie wmagane pola"; $_SESSION['message'] = "Należy wypełnić wszystkie wmagane pola<br>";
} }
} }
@ -92,19 +92,19 @@ if(isset($_POST['avatar_change'])){
if($currentavatar != $avatar_path){ if($currentavatar != $avatar_path){
unlink($currentavatar); unlink($currentavatar);
} }
$_SESSION['message'] = "avatar został zmieniony!"; $_SESSION['message'] = "avatar został zmieniony!<br>";
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
mysqli_close($mysqli); mysqli_close($mysqli);
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Plik musi byc graficzny\n"; $_SESSION['message'] = "Plik musi byc graficzny<br>";
} }
} }
@ -118,11 +118,11 @@ if(isset($_POST['aboutshort_change'])){
header('Location: account_settings.php'); header('Location: account_settings.php');
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Brak zmian"; $_SESSION['message'] = "Brak zmian<br>";
} }
} }
@ -136,11 +136,11 @@ if(isset($_POST['aboutme_change'])){
header('Location: account_settings.php'); header('Location: account_settings.php');
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Brak zmian"; $_SESSION['message'] = "Brak zmian<br>";
} }
} }
@ -154,11 +154,11 @@ if(isset($_POST['aboutblog_change'])){
header('Location: account_settings.php'); header('Location: account_settings.php');
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Brak zmian"; $_SESSION['message'] = "Brak zmian<br>";
} }
} }
@ -172,11 +172,11 @@ if(isset($_POST['face_change'])){
$_SESSION['message'] = "Zmiany zostały zatwierdzone!"; $_SESSION['message'] = "Zmiany zostały zatwierdzone!";
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Brak zmian"; $_SESSION['message'] = "Brak zmian<br>";
} }
} }
} }
@ -187,14 +187,14 @@ if(isset($_POST['twit_change'])){
if($twit != $newtwit) { if($twit != $newtwit) {
$sql = "UPDATE user SET TW='$newtwit' WHERE password='$password' AND username='$user'"; $sql = "UPDATE user SET TW='$newtwit' WHERE password='$password' AND username='$user'";
if($mysqli->query($sql) === true){ if($mysqli->query($sql) === true){
$_SESSION['message'] = "Zmiany zostały zatwierdzone!"; $_SESSION['message'] = "Zmiany zostały zatwierdzone!<br>";
} }
else{ else{
$_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później."; $_SESSION['message'] = "Coś poszło nie tak, spróbuj ponownie później.<br>";
} }
} }
else{ else{
$_SESSION['message'] = "Brak zmian"; $_SESSION['message'] = "Brak zmian<br>";
} }
} }
} }

122
admin-zone/account_settings.php
View File

@ -15,11 +15,13 @@ include "acc_settings.php";
<!-- JS STYLE AND BS --> <!-- JS STYLE AND BS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/style2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<link rel="Shortcut icon" href="../blog-post/img/name-label.png"/>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/style2.css">
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
@ -36,93 +38,128 @@ include "acc_settings.php";
</div> </div>
</div> </div>
</nav> </nav>
</div>
<div class="container-fluid"> <div class="container-fluid">
<div clas="flex-row"> <div class="tabs">
<button class="tabbutton" onclick="openTab(event, 'passwordrow')">Hasło</button>
<button class="tabbutton" onclick="openTab(event, 'mailrow')">E-mail</button>
<button class="tabbutton" onclick="openTab(event, 'avatarrow')">Avatar</button>
<button class="tabbutton" onclick="openTab(event, 'aboutshortrow')">Krótko o mnie</button>
<button class="tabbutton" onclick="openTab(event, 'aboutmerow')">O mnie</button>
<button class="tabbutton" onclick="openTab(event, 'aboutblogrow')">Opis bloga</button>
<button class="tabbutton" onclick="openTab(event, 'socialrow')">Social media</button>
</div>
<div id="passwordrow" class="flex-row tabcontent">
<div class="flex-column"> <div class="flex-column">
<form class="form" action="" method="POST"> <form class="form" action="" method="POST">
<p>Zmiana hasła</p> <p>Zmiana hasła</p>
<input type="password" class="form-control" placeholder="Hasło" id="password" name="password" required /> <div class="inputbox">
<input type="password" class="form-control" placeholder="Nowe hasło" id="newpassword" name="newpassword" required /> <input type="password" class="form-control" id="password" name="password" required />
<input type="password" class="form-control" placeholder="Potwierdź nowe hasło" id="confirmpassword" name="confirmpassword" required /> <label>Hasło</label>
<span><?php echo $_SESSION['message']; ?></span><br> </div>
<input type="submit" class="btn" value="Zmień Hasło" name="password_change" /> <div class="inputbox">
<input type="password" class="form-control" id="newpassword" name="newpassword" required />
<label>Nowe Hasło</label>
</div>
<div class="inputbox">
<input type="password" class="form-control" id="confirmpassword" name="confirmpassword" required />
<label>Potwierdź Nowe Hasło</label>
</div>
<span><?php echo $_SESSION['message']; ?></span>
<input type="submit" class="button" value="Zmień Hasło" name="password_change" />
</form> </form>
</div> </div>
</div> </div>
<div clas="flex-row"> <div id="mailrow" class="flex-row tabcontent">
<div class="flex-column"> <div class="flex-column">
<form class="form" action="" method="POST"> <form class="form" action="" method="POST">
<p>Zmiana adresu e-mail</p> <p>Zmiana adresu e-mail</p>
<input type="password" class="form-control" placeholder="Hasło" id="password" name="password" required /> <div class="inputbox">
<input type="email" class="form-control" placeholder="email" id="newemail" name="newemail" required /> <input type="password" class="form-control" id="password" name="password" required />
<input type="email" class="form-control" placeholder="Potwierdź email" id="confirmemail" name="confirmemail" required /> <label>Hasło</label>
<span><?php echo $_SESSION['message']; ?></span><br> </div>
<input type="submit" class="btn" value="Zmień email" name="email_change" /> <div class="inputbox">
<input type="email" class="form-control" id="newemail" name="newemail" required />
<label>E-mail</label>
</div>
<div class="inputbox">
<input type="email" class="form-control" id="confirmemail" name="confirmemail" required />
<label>Potwierdź e-mail</label>
</div>
<span><?php echo $_SESSION['message']; ?></span>
<input type="submit" class="button" value="Zmień email" name="email_change" />
</form> </form>
</div> </div>
</div> </div>
<div clas="flex-row"> <div id="avatarrow" class="flex-row tabcontent">
<div class="flex-column"> <div class="flex-column">
<form class="form" action="" method="POST" enctype="multipart/form-data"> <form class="form" action="" method="POST" enctype="multipart/form-data">
<p>Zmiana avatara</p> <p>Zmiana avatara</p>
<label>Wybierz nowy avatar: </label> <label>Wybierz nowy avatar: </label>
<input type="file" name="avatar" accept="image/*" required /> <input class="avatarchange" type="file" name="avatar" accept="image/*" required />
<span><?php echo $_SESSION['message']; ?></span><br> <span><?php echo $_SESSION['message']; ?></span>
<input type="submit" class="btn" value="Zmień avatar" name="avatar_change" /> <input type="submit" class="button" value="Zmień avatar" name="avatar_change"/>
</form> </form>
</div> </div>
</div> </div>
<div clas="flex-row"> <div id="aboutshortrow" class="flex-row tabcontent">
<div class="flex-column"> <div class="flex-column">
<form class="form" action="" method="POST"> <form class="form" action="" method="POST">
<p>Krótko o mnie</p> <p>Krótko o mnie</p>
<textarea name="aboutshort" rows="10" cols="80"><?php echo $about_short; ?></textarea><br> <textarea name="aboutshort" rows="10" cols="80"><?php echo $about_short; ?></textarea><br>
<span><?php echo $_SESSION['message']; ?></span><br> <span><?php echo $_SESSION['message']; ?></span>
<input type="submit" class="btn" value="Zatwierdź" name="aboutshort_change" /> <input type="submit" class="button" value="Zatwierdź" name="aboutshort_change" />
</form> </form>
</div> </div>
</div> </div>
<div clas="flex-row"> <div id="aboutmerow" class="flex-row tabcontent">
<div class="flex-column"> <div class="flex-column">
<form class="form" action="" method="POST"> <form class="form" action="" method="POST">
<p>O mnie</p> <p>O mnie</p>
<textarea name="aboutme" rows="10" cols="80"><?php echo $about_me; ?></textarea><br> <textarea name="aboutme" rows="10" cols="80"><?php echo $about_me; ?></textarea><br>
<span><?php echo $_SESSION['message']; ?></span><br> <span><?php echo $_SESSION['message']; ?></span>
<input type="submit" class="btn" value="Zatwierdź" name="aboutme_change" /> <input type="submit" class="button" value="Zatwierdź" name="aboutme_change" />
</form> </form>
</div> </div>
</div> </div>
<div clas="flex-row"> <div id="aboutblogrow" class="flex-row tabcontent">
<div class="flex-column"> <div class="flex-column">
<form class="form" action="" method="POST"> <form class="form" action="" method="POST">
<p>Opis Bloga</p> <p>Opis Bloga</p>
<textarea name="aboutblog" maxlength="50" rows="10" cols="80"><?php echo $about_blog; ?></textarea><br> <textarea name="aboutblog" maxlength="50" rows="10" cols="80"><?php echo $about_blog; ?></textarea><br>
<span><?php echo $_SESSION['message']; ?></span><br> <span><?php echo $_SESSION['message']; ?></span><br>
<input type="submit" class="btn" value="Zatwierdź" name="aboutblog_change" /> <input type="submit" class="button" value="Zatwierdź" name="aboutblog_change" />
</form> </form>
</div> </div>
</div> </div>
<div clas="flex-row"> <div id="socialrow" class="flex-row tabcontent">
<div class="flex-column"> <div class="flex-column">
<form class="form" action="" method="POST"> <form class="form" action="" method="POST">
<p>Social Media</p> <p>Social Media</p>
<input type="text" class="form-control" placeholder="facebook" id="FB" name="FB" required /> <div class="inputbox">
<span><?php echo $_SESSION['message']; ?></span><br> <input type="text" class="form-control" id="FB" name="FB" required />
<input type="submit" class="btn" value="Zatwierdź" name="face_change" /> <label>Facebook</label>
</div>
<span><?php echo $_SESSION['message']; ?></span>
<input type="submit" class="button" value="Zatwierdź" name="face_change" />
</form> </form>
<form class="form" action="" method="POST"> <form class="form" action="" method="POST">
<input type="text" class="form-control" placeholder="twitter" id="TW" name="TW" required /> <div class="inputbox">
<span><?php echo $_SESSION['message']; ?></span><br> <input type="text" class="form-control" id="TW" name="TW" required />
<input type="submit" class="btn" value="Zatwierdź" name="twit_change" /> <label>Twitter</label>
</div>
<span><?php echo $_SESSION['message']; ?></span>
<input type="submit" class="button" value="Zatwierdź" name="twit_change" />
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN --> <!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery Custom Scroller CDN --> <!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
@ -143,6 +180,21 @@ include "acc_settings.php";
}); });
}); });
</script> </script>
<a href="logout.php">Logout</a> <script>
function openTab(event, contentID) {
var tab = document.getElementsByClassName("tabcontent");
for(var i=0; i<tab.length; i++) {
tab[i].style.display = "none";
}
var btn = document.getElementsByClassName("tabbutton");
for(var i=0; i<btn.length; i++) {
btn[i].className = btn[i].className.replace(" active", "");
}
document.getElementById(contentID).style.display = "block";
event.currentTarget.className += " active";
}
</script>
</body> </body>
</html> </html>

114
admin-zone/css/style2.css
View File

@ -176,3 +176,117 @@ a.article, a.article:hover {
display: none; display: none;
} }
} }
/* ---------------------------------------------------
ACCOUNT SETTINGS
----------------------------------------------------- */
.tabs {
overflow: hidden;
background-color: #e8ebef;
}
.tabs button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tabs button:hover,.tabs button:focus {
background-color: #f4c741;
}
.tabs button.active {
background-color: #f9fbff;
}
.tabcontent {
display: none;
background-color: #f9fbff;
padding: 6px 12px;
border-top: none;
animation: fadeEffect 1s;
}
.tabcontent p {
color: black;
margin-top: 2%;
}
.tabcontent textarea {
margin-top: 2%;
margin-bottom: 2%;
}
.tabcontent .avatarchange {
margin-bottom: 2%;
}
.tabcontent .inputbox input {
background: transparent;
border: none;
border-radius: 0%;
border-bottom: 1px solid black;
padding: 10px;
margin-bottom: 30px;
margin-top: 25px;
outline: none;
}
.tabcontent .inputbox {
position: relative;
}
.tabcontent .inputbox label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: darkgrey;
pointer-events: none;
transition: .5s;
}
.inputbox .form-control, .form-control:focus{
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: solid lightblue;
}
.tabcontent .inputbox input:focus ~ label,
.tabcontent .inputbox input:valid ~ label {
top: -18px;
color: #f4c741;
font-size: 12px;
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
.button {
background-color: #e8ebef;
border: 1px solid #e8ebef;
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%;
}
.button:hover, .button:focus {
background-color: #f4c741;
}

12
admin-zone/login.php
View File

@ -5,8 +5,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../css/global.css"> <link rel="Shortcut icon" href="../blog-post/img/name-label.png"/>
<link rel="stylesheet" href="../css/login.css" type="text/css"> <link rel="stylesheet" href="../css/global.css"/>
<link rel="stylesheet" href="../css/login.css" type="text/css"/>
<!-- bootstrap --> <!-- 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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
@ -31,10 +32,12 @@
<div class="row loginMain"> <div class="row loginMain">
<div class="offset-3 col-6 offset-3 elementsOnLoginMain"> <div class="offset-3 col-6 offset-3 elementsOnLoginMain">
<div class="form-group inputmain"> <div class="form-group inputmain">
<input type="text" class="form-control" placeholder="Login" id="user" name="user" required> <input type="text" class="form-control" id="user" name="user" required>
<label>Login</label>
</div> </div>
<div class="form-group inputmain"> <div class="form-group inputmain">
<input type="password" class="form-control" placeholder="Hasło" id="password" name="password" required> <input type="password" class="form-control" id="password" name="password" required>
<label>Hasło</label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label class="box">Zapamiętaj <label class="box">Zapamiętaj
@ -55,7 +58,6 @@
</form> </form>
</div> </div>
</div> </div>
<script src="../js/particles.js"></script> <script src="../js/particles.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>

45
css/login.css
View File

@ -49,6 +49,15 @@
padding-left: 30px; padding-left: 30px;
} }
.elementsOnLoginMain .inputmain{
position: relative;
}
.elementsOnLoginMain .inputmain .form-control, .elementsOnLoginMain .inputmain .form-control:focus{
-webkit-box-shadow: none;
box-shadow: none;
}
.elementsOnLoginMain .inputmain input { .elementsOnLoginMain .inputmain input {
width: 100%; width: 100%;
background: transparent; background: transparent;
@ -61,6 +70,24 @@
outline: none; outline: none;
} }
.elementsOnLoginMain .inputmain label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: darkgrey;
pointer-events: none;
transition: .5s;
}
.elementsOnLoginMain .inputmain input:focus ~ label,
.elementsOnLoginMain .inputmain input:valid ~ label {
top: -26px;
color: #f4c741;
font-size: 12px;
}
.loginFooter { .loginFooter {
width: 100%; width: 100%;
} }
@ -79,24 +106,6 @@
padding-left: 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 { .box {
display: block; display: block;
position: relative; position: relative;

31
css/register.css
View File

@ -50,6 +50,15 @@
padding-left: 30px; padding-left: 30px;
} }
.elementsOnRegisterMain .inputmain{
position: relative;
}
.elementsOnRegisterMain .inputmain .form-control, .elementsOnRegisterMain .inputmain .form-control:focus{
-webkit-box-shadow: none;
box-shadow: none;
}
.elementsOnRegisterMain .inputmain input { .elementsOnRegisterMain .inputmain input {
width: 100%; width: 100%;
background: transparent; background: transparent;
@ -57,11 +66,29 @@
border-radius: 0%; border-radius: 0%;
border-bottom: 1px solid black; border-bottom: 1px solid black;
padding: 10px; padding: 10px;
margin-bottom: 5px; margin-bottom: 30px;
margin-top: 15px; margin-top: 25px;
outline: none; outline: none;
} }
.elementsOnRegisterMain .inputmain label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: darkgrey;
pointer-events: none;
transition: .5s;
}
.elementsOnRegisterMain .inputmain input:focus ~ label,
.elementsOnRegisterMain .inputmain input:valid ~ label {
top: -26px;
color: #f4c741;
font-size: 12px;
}
.registerFooter { .registerFooter {
width: 100%; width: 100%;
} }

15
register/index.php
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="Shortcut icon" href="../blog-post/img/name-label.png"/>
<link rel="stylesheet" href="../css/global.css"> <link rel="stylesheet" href="../css/global.css">
<link rel="stylesheet" href="../css/register.css" type="text/css"> <link rel="stylesheet" href="../css/register.css" type="text/css">
@ -30,19 +31,23 @@
<div class="row registerMain"> <div class="row registerMain">
<div class="offset-3 col-6 offset-3 elementsOnRegisterMain"> <div class="offset-3 col-6 offset-3 elementsOnRegisterMain">
<div class="form-group inputmain"> <div class="form-group inputmain">
<input type="text" placeholder="Login" name="username" required /> <input class="form-control" type="text" name="username" required />
<label>Login</label>
</div> </div>
<div class="form-group inputmain"> <div class="form-group inputmain">
<input type="email" placeholder="Email" name="email" required /> <input class="form-control" type="email" name="email" required />
<label>E-mail</label>
</div> </div>
<div class="form-group inputmain"> <div class="form-group inputmain">
<input type="password" placeholder="Password" name="password" autocomplete="new-password" required /> <input class="form-control" type="password" name="password" autocomplete="new-password" required />
<label>Hasło</label>
</div> </div>
<div class="form-group inputmain"> <div class="form-group inputmain">
<input type="password" placeholder="Confirm Password" name="confirmpassword" autocomplete="new-password" required /> <input class="form-control" type="password" name="confirmpassword" autocomplete="new-password" required />
<label>Potwierdź Hasło</label>
</div> </div>
<div class="form-group avatar"> <div class="form-group avatar">
<label>Select your avatar: </label> <label>Wybierz swój avatar: </label>
<input type="file" name="avatar" accept="image/*" required /> <input type="file" name="avatar" accept="image/*" required />
</div> </div>
</div> </div>