Skip to content

Commit

Permalink
tiddy CSS & templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@benpaddlejones
benpaddlejones committed Sep 24, 2024
1 parent 3f8a151 commit 6c74072
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 115 deletions.
Binary file modified databaseFiles/database.db
View file
Binary file not shown.
58 changes: 1 addition & 57 deletions static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,30 +48,7 @@ nav h1 {
.disclaimer{
margin:50px 0 50px 0;
}
.input__field:focus-.input__label{
color: var(--primary);
}
.input__field:focus {
outline: 1.5px solid var(--primary);
}
.input__field__user:focus {
outline: 1.5px solid var(--primary);
}
.input__field__user:focus-.input__label{
color: var(--primary);
}
.input__icon{
position: absolute;
right:0.5rem;
bottom: -0.2rem;
width: 1.75rem;
height: 1.75rem;
transform: translate(-25%, -25%);
transform-origin: center;
cursor: pointer;
}
.box{
background: var(--box-background);
padding: 1.5rem;
max-width: fit-content;
width: 100%;
Expand All @@ -80,65 +57,32 @@ nav h1 {
}
.input__wrapper{
position:relative;
padding: 3rem 0 0;
padding: 1rem 0 0;
}
.input__field {
font-size: 1rem;
border-radius: 0.25rem;
color: var(--secondary);
padding: 0.5rem;
border: 1px solid #000;
padding-right: 2rem;
background: transparent;
transition: all 0.2s;
width:100%;
}
.input__field__user {
border: 1px solid #000;
font-size: 1rem;
border-radius: 0.25rem;
color: var(--secondary);
padding: 0.5rem;
padding-right: 2rem;
background: transparent;
transition: all 0.2s;
}
.input__field:placeholder-shown
~.input__label {
font-size: 1rem;
cursor: text;
color: var(--secondary);
top: 1.5rem;
}
label,
.input__field:focus~.input__label{
position: absolute;
top: 0.075rem;
padding: 1 0.05rem;
background-color: var(--box-background);
display: block;
font-size: 1.5rem;
left: 0.5rem;
color: var(--secondary);
transition: 0.3s;
}
.input__field__user:placeholder-shown
~.input__label {
font-size: 1rem;
cursor: text;
color: var(--secondary);
top: 1.5rem;
}
label,
.input__field__user:focus~.input__label{
position: absolute;
top: 0.075rem;
padding: 1 0.05rem;
background-color: var(--box-background);
display: block;
font-size: 1.5rem;
left: 0.5rem;
color: var(--secondary);
transition: 0.3s;
}
.container {
Expand Down
11 changes: 3 additions & 8 deletions templates/home.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div class="jumbotron">
<h1 class="display-4">Welcome User!</h1>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" href="/logout" role="button">Logout</a>
</p>
</div>
<h1>Welcome User!</h1>
<div class="input__wrapper">
<a class="btn" href="/logout" role="button">Logout</a>
</div>
{% endblock %}
20 changes: 12 additions & 8 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
{% extends 'layout.html' %}
{% block content %}
<h1>Login</h1>
<form action="/" method="post" class="box">
<input type="text" name="username" id="username" placeholder="Username" required/>
<br>
<input type="password" name="password" id="password" placeholder="Password" required/>
<br>
<input type="submit" class="button" value="Log In"/>
</form>
<h1>Login</h1>
<form action="/" method="post" class="box">
<div class="input__wrapper">
<input type="text" name="username" id="username" placeholder="Username" class="input__field" required/>
</div>
<div class="input__wrapper">
<input type="password" name="password" id="password" placeholder="Password" class="input__field" required/>
</div>
<div class="input__wrapper">
<input type="submit" class="btn" value="Log In" />
</div>
</form>
{% endblock %}
58 changes: 16 additions & 42 deletions templates/signup.html
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,23 @@
{% extends 'layout.html' %}
{% block content %}
<style>
body{
background: coral;
}
.myblock{
border:1px solid black;
border-radius: 4%;
background: rgba(0,0,0,0.5);
margin-top:20%;
padding:3%;
}
.h1{
margin-bottom:5% ;
color:coral;
}
.mybtn{
background: rgba(0,0,0,0.5);
}

</style>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12"></div>
<div class="col-lg-6 col-md-6 col-sm-12 myblock">
<h1 class="h1">Signup Form</h1>
<form action="/signup" method="POST" class="form-group">
<div class="form-group">
<input type="text" name="username" placeholder="Username" class="form-control">
</div>
<div class="form-group">
<input type="email" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-dark mybtn">Submit</button>
<a href="/login" class="btn btn-block btn-dark mybtn link">Login</a>
</div>
</form>
</div>
<div class="col-lg-3 col-md-3 col-sm-12"></div>
<h1>Signup Form</h1>
<form action="/signup" method="POST" class="form-group">
<div class="input__wrapper">
<input type="text" name="username" placeholder="Username" class="form-control">
</div>
<div class="input__wrapper">
<input type="email" name="email" placeholder="Email" class="form-control">
</div>
</div>
<div class="input__wrapper">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<div class="input__wrapper">
<button type="submit" class="btn">Submit</button>
<a href="/login" class="btn">Login</a>
</div>
</form>



{% endblock %}

0 comments on commit 6c74072

Please sign in to comment.