Compare commits
No commits in common. "6c6218892b724a9c5d9adf5594584a2ad083fec9" and "f0d683580b9f2b035caea859d3fe7065fc850492" have entirely different histories.
6c6218892b
...
f0d683580b
|
@ -90,14 +90,14 @@
|
||||||
|
|
||||||
dialog {
|
dialog {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: none;
|
border: black solid 2px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%,-50%);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 540px;
|
height: 500px;
|
||||||
background: white;
|
background: white;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -109,60 +109,13 @@
|
||||||
|
|
||||||
dialog input {
|
dialog input {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
margin: 50px;
|
||||||
border: #5b8dff solid 2px;
|
width: calc(100% - 100px);
|
||||||
|
border: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 100000px;
|
border-radius: 100000px;
|
||||||
background-color: #f8f8f8;
|
|
||||||
outline: none;
|
|
||||||
font-family: 'Protest Strike'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog input[type=submit] {
|
|
||||||
border: none;
|
|
||||||
margin: 40px 0px;
|
|
||||||
background-color: #00bfff;
|
|
||||||
color: white;
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog label {
|
|
||||||
display: block;
|
|
||||||
margin: 30px 0px 10px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog div {
|
|
||||||
margin: 10% 10% 0px 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog p {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog img {
|
|
||||||
position: absolute;
|
|
||||||
margin: 10px;
|
|
||||||
right: 0%;
|
|
||||||
height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
padding: 5px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 10%;
|
|
||||||
transition: all ease-in-out 50ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog img:hover {
|
|
||||||
background-color: rgb(0, 0, 0, 0.588);
|
|
||||||
}
|
|
||||||
|
|
||||||
.signup-dialog {
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-dialog {
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
body {
|
body {
|
||||||
background: black;
|
background: black;
|
||||||
|
@ -182,10 +135,6 @@
|
||||||
border: black 2px solid;
|
border: black 2px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog img:hover {
|
|
||||||
background-color: rgb(255, 255, 255, 0.588);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-button {
|
.input-button {
|
||||||
background: white;
|
background: white;
|
||||||
color:black;
|
color:black;
|
||||||
|
@ -248,7 +197,7 @@
|
||||||
Sort Your Finances.
|
Sort Your Finances.
|
||||||
</h2>
|
</h2>
|
||||||
</span>
|
</span>
|
||||||
<input id="show-signup-dialog" class="input-button signup-button" type="button" value="Create account">
|
<input id="show-login-dialog" class="input-button signup-button" type="button" value="Create account">
|
||||||
<div class="horizontal-splitter">
|
<div class="horizontal-splitter">
|
||||||
<div class="side-line">
|
<div class="side-line">
|
||||||
|
|
||||||
|
@ -260,64 +209,30 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input id="show-login-dialog" class="input-button" type="button" value="Login">
|
<input class="input-button" type="button" value="Login">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<dialog id="signup-dialog" class="signup-dialog">
|
<dialog id="signup-dialog">
|
||||||
<img src="x-button.png" class="close-dialog"/>
|
<input type="text" placeholder="Enter your Email">
|
||||||
<div>
|
|
||||||
<form>
|
|
||||||
<p>We just need a few details.</p>
|
|
||||||
|
|
||||||
<label>Name</label>
|
|
||||||
<input type="text" placeholder="Enter your Name">
|
|
||||||
|
|
||||||
<label>Email</label>
|
|
||||||
<input type="text" placeholder="Enter your Email">
|
|
||||||
|
|
||||||
<label>Password</label>
|
|
||||||
<input type="text" placeholder="Enter a Password">
|
|
||||||
|
|
||||||
<input type="submit" value="Start DinoSaving!">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
||||||
<dialog id="login-dialog" class="login-dialog">
|
<dialog id="login-dialog">
|
||||||
<img src="x-button.png" class="close-dialog"/>
|
<input type="text" placeholder="Enter your Username or Email">
|
||||||
<div>
|
|
||||||
<form>
|
|
||||||
<p>Please enter your login details.</p>
|
|
||||||
|
|
||||||
<label>Email</label>
|
|
||||||
<input type="text" placeholder="Enter your Email">
|
|
||||||
|
|
||||||
<label>Password</label>
|
|
||||||
<input type="text" placeholder="Enter your Password">
|
|
||||||
|
|
||||||
<input type="submit" value="Login!">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
</dialog>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
function openCheck(dialog) {
|
||||||
|
if (dialog.open) {
|
||||||
|
console.log("Dialog open");
|
||||||
|
} else {
|
||||||
|
console.log("Dialog closed");
|
||||||
|
}
|
||||||
|
|
||||||
var allCloseButtons = document.querySelectorAll('.close-dialog');
|
return dialog.open;
|
||||||
|
}
|
||||||
allCloseButtons.forEach(function (closeButton) {
|
|
||||||
closeButton.addEventListener('click', function () {
|
|
||||||
var allDialogs = document.querySelectorAll('dialog');
|
|
||||||
|
|
||||||
allDialogs.forEach(function (dialog) {
|
|
||||||
dialog.close();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
var loginDialog = document.getElementById('show-login-dialog');
|
var loginDialog = document.getElementById('show-login-dialog');
|
||||||
|
@ -328,17 +243,7 @@
|
||||||
currentModal.close();
|
currentModal.close();
|
||||||
currentModal.showModal();
|
currentModal.showModal();
|
||||||
|
|
||||||
});
|
openCheck(currentModal);
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
var loginDialog = document.getElementById('show-signup-dialog');
|
|
||||||
|
|
||||||
loginDialog.addEventListener('click', function () {
|
|
||||||
var currentModal = document.getElementById('signup-dialog');
|
|
||||||
|
|
||||||
currentModal.close();
|
|
||||||
currentModal.showModal();
|
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 568 B |
Loading…
Reference in New Issue