Commit 4bea3031 authored by Corentin Mors's avatar Corentin Mors
Browse files

Add style for login page

parent b5360957
......@@ -21,9 +21,10 @@ html, input {
}
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #fff;
background: rgb(17, 47, 65);
}
ul {
......@@ -31,6 +32,13 @@ ul {
word-wrap: break-word;
}
.container{
text-align: center;
position: relative;
margin: 0 auto;
margin-top: 40vh;
}
.container-main{
width: 74vw;
display: inline-block;
......@@ -46,6 +54,81 @@ ul {
height: 100vh;
}
/* Room form */
.room-form .input-form {
position: relative;
z-index: 1;
display: inline-block;
margin: 1em;
max-width: 350px;
width: calc(100% - 2em);
vertical-align: top;
}
.room-form input {
width: 100%;
background: transparent;
color: #7A7593;
position: relative;
display: block;
float: right;
padding: 0.8em;
border: none;
border-radius: 0;
font-size: 1.2em;
}
.room-form label {
position: absolute;
width: 100%;
height: 100%;
color: #7A7593;
text-align: left;
cursor: text;
}
.room-form .label-content {
position: relative;
display: block;
padding: 1.6em 0;
width: 100%;
padding: 3em .2em;
width: 100%;
font-size: 1.3em;
}
.room-form .graphic {
-webkit-transform: scale3d(1, -1, 1);
transform: scale3d(1, -1, 1);
-webkit-transition: stroke-dashoffset 0.3s;
transition: stroke-dashoffset 0.3s;
pointer-events: none;
stroke: #7A7593;
stroke-width: 4px;
stroke-dasharray: 962;
stroke-dashoffset: 558;
position: absolute;
top: 0;
left: 0;
fill: none;
}
.room-form button{
margin: 1em;
height: 4em;
background: #162630;
border: none;
border-radius: 5px;
color: #fff;
width: 100px;
font-size: 1em;
font-weight: bold;
color: #DEDEDE;
}
/* Pages */
.pages {
......
......@@ -3,14 +3,43 @@
{% block content %}
<div class="container">
<form method="POST" action="">
<label for="room-name">Room:</label>
<input id="room-name" type="text" name="room">
<label for="room-name">Username:</label>
<input id="user-name" type="text" name="username">
<label for="room-password">Password:</label>
<input id="room-password" type="text" name="password">
<button type="submit">Join</button>
<h1>onMap - Instant location sharing</h1>
<br>
<form class="room-form" method="POST" action="">
<span class="input-form">
<input id="room-name" type="text" name="room">
<label for="room-name">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"></path>
</svg>
<span class="label-content">Room name</span>
</label>
</span>
<span class="input-form">
<input id="user-name" type="text" name="username">
<label for="user-name">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"></path>
</svg>
<span class="label-content">Username</span>
</label>
</span>
<span class="input-form">
<input id="room-password" type="password" name="password">
<label for="room-password">
<svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
<path d="m0,0l404,0l0,77l-404,0l0,-77z"></path>
</svg>
<span class="label-content">Password</span>
</label>
</span>
<button type="submit">Join ></button>
</form>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment