TobiasH/fotobox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Tobias Hopp
2023-05-24 00:23:46 +02:00
commit 7f52850b2e
30 changed files with 5785 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
html/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Photobox</title>
<meta name="viewport" content="width=device-width">
<script src="../src/web/socket.io.min.js"></script>
<script src="../dist/photobox.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="preload" as="image" href="../images/broken.png">
<link rel="preload" as="image" href="../images/lock.png">
<link rel="preload" as="image" href="../images/buzzer_blue.png">
<link rel="preload" as="image" href="../images/buzzer_red.png">
<link rel="stylesheet" href="https://fonts.gaminggeneration.de/Roboto.css">
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="modalClose" class="close">&times;</span>
<h1 id="modalTitle"></h1>
<p id="modalText"></p>
</div>
</div>
<div id="flash"></div>
<div id="titleBox">
<h1>Fotobox</h1>
</div>
<div id="imageBox"><img id="imageElement"></div>
<p id="countdown"></p>
<div id="buttonBox">
<h2>Foto machen</h2>
<img id="capture" src="../images/buzzer_red.png" class="button">
<br><br>
<h2>Foto löschen</h2>
<img id="delete" src="../images/buzzer_blue.png" class="button">
</div>
<div id="lastImages">
</div>
</body>
</html>

176
html/style.css Normal file
View File

@ -0,0 +1,176 @@
body {
margin: 0;
padding: 0;
background-color: #2c2d42;
font-size: 1.1em;
font-family: Roboto, sans-serif;
}
#flash {
display: none;
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: #FFFFFF;
z-index: 9999;
}
#titleBox {
text-align: center;
font-size: 2.2em;
margin-top: -2.8%;
color: #FFFFFF;
font-family: Rachana, serif;
}
#imageBox {
display: block;
position: fixed;
top:10%;
left:1%;
right:20%;
bottom: 10%;
text-align: center;
}
#buttonBox {
display: block;
position: fixed;
top: 8%;
right: 1%;
left: 79%;
width: 20%;
height: 85%;
text-align: center;
}
#buttonBox h2 {
margin-left: -5%;
color: white;
margin-bottom: -2%;
}
#imageElement {
width: 90%;
height: 85%;
box-shadow: 8px 8px #1B1B23;
margin-top: -0.5%;
border: 1px solid gray;
}
#lastImages {
position: fixed;
bottom: 0;
left: 0;
right: 2%;
width: 98%;
overflow: hidden;
height: 17%;
display: grid;
text-align: center;
grid-template-columns: repeat(7, calc(100% / 7));
grid-template-rows: 100%;
grid-column-gap: 2%;
direction: rtl;
}
.lastImage {
width: 100%;
height: 100%;
position: relative;
}
.slowFadeInAnimation {
animation: fadeIn 1s linear forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.lastImageImg {
width: 100%;
height: 79%;
display: block;
}
.lastImageLock {
position: absolute;
width: 10%;
top: 65%;
left: 92%;
}
#countdown {
display: inline;
position: fixed;
top:10%;
left:1%;
right:20%;
bottom: 10%;
text-align: center;
font-size: 10em;
z-index: 99;
color: white;
font-weight: 600;
}
.button {
width: 80%;
}
/* Modal */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
text-align: center;
font-size: 1.3em;
font-family: "Roboto Light", sans-serif;;
border-radius: 15px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}