Account settings front alpha v0.1, login+register placeholder change
This commit is contained in:
parent
e08edcf254
commit
c206292155
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
workplan.txt
|
@ -25,27 +25,27 @@ if(isset($_POST['password_change'])){
|
||||
$_SESSION['user']=$user;
|
||||
$_SESSION['password']=$newpassword;
|
||||
$_SESSION['loggedIn']=1;
|
||||
$_SESSION['message'] = "Hasło zostało zmienione!";
|
||||
$_SESSION['message'] = "Hasło zostało zmienione!<br>";
|
||||
}
|
||||
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);
|
||||
}
|
||||
else {
|
||||
$_SESSION['message'] = "Błędne hasło!";
|
||||
$_SESSION['message'] = "Błędne hasło!<br>";
|
||||
}
|
||||
}
|
||||
else{
|
||||
$_SESSION['message'] = "Potwierdź hasło ponownie";
|
||||
$_SESSION['message'] = "Potwierdź hasło ponownie<br>";
|
||||
}
|
||||
}
|
||||
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{
|
||||
$_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!";
|
||||
}
|
||||
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);
|
||||
}
|
||||
else {
|
||||
$_SESSION['message'] = "Błędne hasło!";
|
||||
$_SESSION['message'] = "Błędne hasło!<br>";
|
||||
}
|
||||
}
|
||||
else{
|
||||
$_SESSION['message'] = "Potwierdź email ponownie";
|
||||
$_SESSION['message'] = "Potwierdź email ponownie<br>";
|
||||
}
|
||||
}
|
||||
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{
|
||||
$_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){
|
||||
unlink($currentavatar);
|
||||
}
|
||||
$_SESSION['message'] = "avatar został zmieniony!";
|
||||
$_SESSION['message'] = "avatar został zmieniony!<br>";
|
||||
}
|
||||
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);
|
||||
}
|
||||
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{
|
||||
$_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');
|
||||
}
|
||||
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{
|
||||
$_SESSION['message'] = "Brak zmian";
|
||||
$_SESSION['message'] = "Brak zmian<br>";
|
||||
}
|
||||
}
|
||||
|
||||
@ -136,11 +136,11 @@ if(isset($_POST['aboutme_change'])){
|
||||
header('Location: account_settings.php');
|
||||
}
|
||||
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{
|
||||
$_SESSION['message'] = "Brak zmian";
|
||||
$_SESSION['message'] = "Brak zmian<br>";
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,11 +154,11 @@ if(isset($_POST['aboutblog_change'])){
|
||||
header('Location: account_settings.php');
|
||||
}
|
||||
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{
|
||||
$_SESSION['message'] = "Brak zmian";
|
||||
$_SESSION['message'] = "Brak zmian<br>";
|
||||
}
|
||||
}
|
||||
|
||||
@ -172,11 +172,11 @@ if(isset($_POST['face_change'])){
|
||||
$_SESSION['message'] = "Zmiany zostały zatwierdzone!";
|
||||
}
|
||||
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{
|
||||
$_SESSION['message'] = "Brak zmian";
|
||||
$_SESSION['message'] = "Brak zmian<br>";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -187,14 +187,14 @@ if(isset($_POST['twit_change'])){
|
||||
if($twit != $newtwit) {
|
||||
$sql = "UPDATE user SET TW='$newtwit' WHERE password='$password' AND username='$user'";
|
||||
if($mysqli->query($sql) === true){
|
||||
$_SESSION['message'] = "Zmiany zostały zatwierdzone!";
|
||||
$_SESSION['message'] = "Zmiany zostały zatwierdzone!<br>";
|
||||
}
|
||||
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{
|
||||
$_SESSION['message'] = "Brak zmian";
|
||||
$_SESSION['message'] = "Brak zmian<br>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -15,11 +15,13 @@ include "acc_settings.php";
|
||||
|
||||
<!-- JS STYLE AND BS -->
|
||||
<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://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="Shortcut icon" href="../blog-post/img/name-label.png"/>
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<link rel="stylesheet" href="./css/style2.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
@ -36,113 +38,163 @@ include "acc_settings.php";
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div clas="flex-row">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Zmiana hasła</p>
|
||||
<input type="password" class="form-control" placeholder="Hasło" id="password" name="password" required />
|
||||
<input type="password" class="form-control" placeholder="Nowe hasło" id="newpassword" name="newpassword" required />
|
||||
<input type="password" class="form-control" placeholder="Potwierdź nowe hasło" id="confirmpassword" name="confirmpassword" required />
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="btn" value="Zmień Hasło" name="password_change" />
|
||||
</form>
|
||||
<div class="container-fluid">
|
||||
<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>
|
||||
<div clas="flex-row">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Zmiana adresu e-mail</p>
|
||||
<input type="password" class="form-control" placeholder="Hasło" id="password" name="password" required />
|
||||
<input type="email" class="form-control" placeholder="email" id="newemail" name="newemail" required />
|
||||
<input type="email" class="form-control" placeholder="Potwierdź email" id="confirmemail" name="confirmemail" required />
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="btn" value="Zmień email" name="email_change" />
|
||||
</form>
|
||||
<div id="passwordrow" class="flex-row tabcontent">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Zmiana hasła</p>
|
||||
<div class="inputbox">
|
||||
<input type="password" class="form-control" id="password" name="password" required />
|
||||
<label>Hasło</label>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div clas="flex-row">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST" enctype="multipart/form-data">
|
||||
<p>Zmiana avatara</p>
|
||||
<label>Wybierz nowy avatar: </label>
|
||||
<input type="file" name="avatar" accept="image/*" required />
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="btn" value="Zmień avatar" name="avatar_change" />
|
||||
</form>
|
||||
<div id="mailrow" class="flex-row tabcontent">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Zmiana adresu e-mail</p>
|
||||
<div class="inputbox">
|
||||
<input type="password" class="form-control" id="password" name="password" required />
|
||||
<label>Hasło</label>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div clas="flex-row">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Krótko o mnie</p>
|
||||
<textarea name="aboutshort" rows="10" cols="80"><?php echo $about_short; ?></textarea><br>
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="btn" value="Zatwierdź" name="aboutshort_change" />
|
||||
</form>
|
||||
<div id="avatarrow" class="flex-row tabcontent">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST" enctype="multipart/form-data">
|
||||
<p>Zmiana avatara</p>
|
||||
<label>Wybierz nowy avatar: </label>
|
||||
<input class="avatarchange" type="file" name="avatar" accept="image/*" required />
|
||||
<span><?php echo $_SESSION['message']; ?></span>
|
||||
<input type="submit" class="button" value="Zmień avatar" name="avatar_change"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div clas="flex-row">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>O mnie</p>
|
||||
<textarea name="aboutme" rows="10" cols="80"><?php echo $about_me; ?></textarea><br>
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="btn" value="Zatwierdź" name="aboutme_change" />
|
||||
</form>
|
||||
<div id="aboutshortrow" class="flex-row tabcontent">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Krótko o mnie</p>
|
||||
<textarea name="aboutshort" rows="10" cols="80"><?php echo $about_short; ?></textarea><br>
|
||||
<span><?php echo $_SESSION['message']; ?></span>
|
||||
<input type="submit" class="button" value="Zatwierdź" name="aboutshort_change" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div clas="flex-row">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Opis Bloga</p>
|
||||
<textarea name="aboutblog" maxlength="50" rows="10" cols="80"><?php echo $about_blog; ?></textarea><br>
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="btn" value="Zatwierdź" name="aboutblog_change" />
|
||||
</form>
|
||||
<div id="aboutmerow" class="flex-row tabcontent">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>O mnie</p>
|
||||
<textarea name="aboutme" rows="10" cols="80"><?php echo $about_me; ?></textarea><br>
|
||||
<span><?php echo $_SESSION['message']; ?></span>
|
||||
<input type="submit" class="button" value="Zatwierdź" name="aboutme_change" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div clas="flex-row">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Social Media</p>
|
||||
<input type="text" class="form-control" placeholder="facebook" id="FB" name="FB" required />
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="btn" value="Zatwierdź" name="face_change" />
|
||||
</form>
|
||||
<form class="form" action="" method="POST">
|
||||
<input type="text" class="form-control" placeholder="twitter" id="TW" name="TW" required />
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="btn" value="Zatwierdź" name="twit_change" />
|
||||
</form>
|
||||
<div id="aboutblogrow" class="flex-row tabcontent">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Opis Bloga</p>
|
||||
<textarea name="aboutblog" maxlength="50" rows="10" cols="80"><?php echo $about_blog; ?></textarea><br>
|
||||
<span><?php echo $_SESSION['message']; ?></span><br>
|
||||
<input type="submit" class="button" value="Zatwierdź" name="aboutblog_change" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="socialrow" class="flex-row tabcontent">
|
||||
<div class="flex-column">
|
||||
<form class="form" action="" method="POST">
|
||||
<p>Social Media</p>
|
||||
<div class="inputbox">
|
||||
<input type="text" class="form-control" id="FB" name="FB" required />
|
||||
<label>Facebook</label>
|
||||
</div>
|
||||
<span><?php echo $_SESSION['message']; ?></span>
|
||||
<input type="submit" class="button" value="Zatwierdź" name="face_change" />
|
||||
</form>
|
||||
<form class="form" action="" method="POST">
|
||||
<div class="inputbox">
|
||||
<input type="text" class="form-control" id="TW" name="TW" required />
|
||||
<label>Twitter</label>
|
||||
</div>
|
||||
<span><?php echo $_SESSION['message']; ?></span>
|
||||
<input type="submit" class="button" value="Zatwierdź" name="twit_change" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
|
||||
<!-- Bootstrap Js CDN -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<!-- 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 type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$("#sidebar").mCustomScrollbar({
|
||||
theme: "minimal"
|
||||
});
|
||||
|
||||
$('#sidebarCollapse').on('click', function () {
|
||||
$('#sidebar, #content').toggleClass('active');
|
||||
$('.collapse.in').toggleClass('in');
|
||||
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
$('#dodajemy').click(function(){
|
||||
$("#zawartosc").load('index.php');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<a href="logout.php">Logout</a>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
|
||||
|
||||
<!-- Bootstrap Js CDN -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- 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 type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$("#sidebar").mCustomScrollbar({
|
||||
theme: "minimal"
|
||||
});
|
||||
|
||||
$('#sidebarCollapse').on('click', function () {
|
||||
$('#sidebar, #content').toggleClass('active');
|
||||
$('.collapse.in').toggleClass('in');
|
||||
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
$('#dodajemy').click(function(){
|
||||
$("#zawartosc").load('index.php');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<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>
|
||||
</html>
|
@ -176,3 +176,117 @@ a.article, a.article:hover {
|
||||
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;
|
||||
}
|
@ -5,8 +5,9 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<link rel="stylesheet" href="../css/global.css">
|
||||
<link rel="stylesheet" href="../css/login.css" type="text/css">
|
||||
<link rel="Shortcut icon" href="../blog-post/img/name-label.png"/>
|
||||
<link rel="stylesheet" href="../css/global.css"/>
|
||||
<link rel="stylesheet" href="../css/login.css" type="text/css"/>
|
||||
|
||||
<!-- bootstrap -->
|
||||
<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="offset-3 col-6 offset-3 elementsOnLoginMain">
|
||||
<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 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 class="checkbox">
|
||||
<label class="box">Zapamiętaj
|
||||
@ -55,7 +58,6 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../js/particles.js"></script>
|
||||
<script src="../js/app.js"></script>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
#particles-js{
|
||||
background-color: #b61924;
|
||||
background-size: cover;
|
||||
min-width: 547px;
|
||||
background-color: #b61924;
|
||||
background-size: cover;
|
||||
min-width: 547px;
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -49,6 +49,15 @@
|
||||
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 {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
@ -61,6 +70,24 @@
|
||||
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 {
|
||||
width: 100%;
|
||||
}
|
||||
@ -79,24 +106,6 @@
|
||||
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;
|
||||
|
@ -50,6 +50,15 @@
|
||||
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 {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
@ -57,11 +66,29 @@
|
||||
border-radius: 0%;
|
||||
border-bottom: 1px solid black;
|
||||
padding: 10px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 25px;
|
||||
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 {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -4,6 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<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/register.css" type="text/css">
|
||||
|
||||
@ -30,19 +31,23 @@
|
||||
<div class="row registerMain">
|
||||
<div class="offset-3 col-6 offset-3 elementsOnRegisterMain">
|
||||
<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 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 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 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 class="form-group avatar">
|
||||
<label>Select your avatar: </label>
|
||||
<label>Wybierz swój avatar: </label>
|
||||
<input type="file" name="avatar" accept="image/*" required />
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user