mrumel/Fax-Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added footer, updated toast

Browse source
This commit is contained in:
= 2020-08-20 13:35:32 -04:00
parent f27ef1218b
commit a89b697fc5
7 changed files with 54 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

8
css/index.css
View file

@ -3,11 +3,17 @@ html body #mainContent {
} }
#uploadSquare { #uploadSquare {
color: white;
background: gray; background: gray;
height: 250px; height: 250px;
padding: 1em;
border-radius: .5em; border-radius: .5em;
}
#footerContent a {
padding: .5rem;
font-size: 16px;
color: white; color: white;
text-decoration: none;
} }
.successGlow { .successGlow {

2
css/index.css.map
View file

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAAA,AAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;EACnB,MAAM,EAAE,KAAK;CAAG;;AAGpB,AAAA,aAAa,CAAC;EACV,UAAU,EAAE,IAAI;EAEhB,MAAM,EAAE,KAAK;EAEb,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,IAAI;EAEnB,KAAK,EAAE,KAAK;CAAG;;AAGnB,AAAA,YAAY,CAAC;EACT,SAAS,EAAE,cAAc;EACzB,yBAAyB,EAAE,CAAC;CAAG;;AAEnC,UAAU,CAAV,WAAU;EACN,GAAG;IACC,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAc;;EAEjD,GAAG;IACC,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAc;;;;AAGrD,AAAA,YAAY,CAAC;EACT,SAAS,EAAE,cAAc;EACzB,yBAAyB,EAAE,CAAC;CAAG;;AAEnC,UAAU,CAAV,WAAU;EACN,EAAE;IACE,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE,sBAAsB;;EAEtC,GAAG;IACC,SAAS,EAAE,oBAAoB;;EAEnC,GAAG;IACC,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE,sBAAsB;;EAEtC,GAAG;IACC,SAAS,EAAE,oBAAoB;;EAEnC,IAAI;IACA,SAAS,EAAE,mBAAmB", "mappings": "AAAA,AAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;EACnB,MAAM,EAAE,KAAK;CAAG;;AAGpB,AAAA,aAAa,CAAC;EACV,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,IAAI;EAEhB,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAAG;;AAE1B,AACI,cADU,CACV,CAAC,CAAC;EACE,OAAO,EAAE,KAAK;EACd,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;CAAG;;AAGhC,AAAA,YAAY,CAAC;EACT,SAAS,EAAE,cAAc;EACzB,yBAAyB,EAAE,CAAC;CAAG;;AAEnC,UAAU,CAAV,WAAU;EACN,GAAG;IACC,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAc;;EAEjD,GAAG;IACC,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAc;;;;AAGrD,AAAA,YAAY,CAAC;EACT,SAAS,EAAE,cAAc;EACzB,yBAAyB,EAAE,CAAC;CAAG;;AAEnC,UAAU,CAAV,WAAU;EACN,EAAE;IACE,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE,sBAAsB;;EAEtC,GAAG;IACC,SAAS,EAAE,oBAAoB;;EAEnC,GAAG;IACC,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE,sBAAsB;;EAEtC,GAAG;IACC,SAAS,EAAE,oBAAoB;;EAEnC,IAAI;IACA,SAAS,EAAE,mBAAmB",
"sources": [ "sources": [
"index.sass" "index.sass"
], ],

18
css/index.sass
View file

@ -3,14 +3,18 @@ html body #mainContent
#uploadSquare #uploadSquare
background: gray
height: 250px
padding: 1em
border-radius: .5em
color: white color: white
background: gray
height: 250px
border-radius: .5em
#footerContent
a
padding: .5rem
font-size: 16px
color: white
text-decoration: none
.successGlow .successGlow

2
failureToast.html
View file

@ -1,4 +1,4 @@
<div id="failureToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; bottom: 0px; left: 10px; width: 300px" data-delay="5000"> <div id="failureToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; bottom: 0px; left: 10px; width: 300px; display: none" data-delay="5000">
<div class="toast-header"> <div class="toast-header">
<strong class="mr-auto">Upload has Failed</strong> <strong class="mr-auto">Upload has Failed</strong>
<small>Just Now</small> <small>Just Now</small>

28
index.php
View file

@ -12,6 +12,8 @@
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script> <script src="js/index.js"></script>
@ -25,10 +27,30 @@
<h5>An internet portal to my printer</h5> <h5>An internet portal to my printer</h5>
</div> </div>
<div class="flex-grow-1 d-flex flex-column align-items-center justify-content-center mb-3"> <div class="flex-grow-1 d-flex flex-column align-items-center justify-content-center">
<div id="uploadSquare" class="container d-flex flex-column align-items-center justify-content-center"> <div class="container flex-grow-1 d-flex flex-column align-items-center justify-content-center">
<h5>Drag or Click Here to Upload Files</h5> <div id="uploadSquare" class=" d-flex flex-column align-items-center justify-content-center p-5">
<h5>Drag or Click Here to Upload Files</h5>
</div>
</div> </div>
<footer class="container bg-secondary d-flex">
<div id="footerContent" class="d-flex justify-content-between flex-grow-1">
<a href="https://github.com/Maxunm/Fax-Me">
<span class="d-flex align-items-center">
<span class="material-icons">home</span>
<span>Back to website</span>
</span>
</a>
<a href="https://www.rumel.io/">
<span class="d-flex align-items-center">
<span class="material-icons">code</span>
<span>Repository</span>
</span>
</a>
</div>
</footer>
</div> </div>
</div> </div>
<?php <?php

8
js/index.js
View file

@ -21,12 +21,20 @@ function glowSuccess() {
setTimeout(function() { setTimeout(function() {
document.getElementById('uploadSquare').classList.remove('successGlow'); document.getElementById('uploadSquare').classList.remove('successGlow');
}, 1500); }, 1500);
setTimeout(function() {
document.getElementById('successToast').style.display = "none";
}, 5500);
document.getElementById('uploadSquare').classList.add('successGlow'); document.getElementById('uploadSquare').classList.add('successGlow');
document.getElementById('successToast').style.display = "block";
} }
function glowFailure() { function glowFailure() {
setTimeout(function() { setTimeout(function() {
document.getElementById('uploadSquare').classList.remove('failureGlow'); document.getElementById('uploadSquare').classList.remove('failureGlow');
}, 1000); }, 1000);
setTimeout(function() {
document.getElementById('failureToast').style.display = "none";
}, 5500);
document.getElementById('uploadSquare').classList.add('failureGlow'); document.getElementById('uploadSquare').classList.add('failureGlow');
document.getElementById('failureToast').style.display = "block";
} }

2
successToast.html
View file

@ -1,4 +1,4 @@
<div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; bottom: 0px; left: 10px; width: 300px" data-delay="5000"> <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; bottom: 0px; left: 10px; width: 300px; display: none" data-delay="5000">
<div class="toast-header"> <div class="toast-header">
<strong class="mr-auto">Upload Successful</strong> <strong class="mr-auto">Upload Successful</strong>
<small>Just Now</small> <small>Just Now</small>