Skip to content

Commit 9d692f8

Browse files
h2Entwicklungh2Entwicklung
committed
* better design
1 parent 9c7da9c commit 9d692f8

File tree

4 files changed

+151
-39
lines changed

4 files changed

+151
-39
lines changed

‎public/index.html‎

Lines changed: 68 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,79 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>PDF Upload & Anzeige</title>
7-
6+
<title>LookyLooky</title>
7+
<style>
8+
body, html {
9+
margin: 0;
10+
padding: 0;
11+
height: 100%;
812

13+
}
14+
#slideShowContainer {
15+
height: 90vh;
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
#slideshow {
20+
flex: 1;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: center;
25+
overflow: hidden;
26+
}
27+
#mainImage {
28+
max-width: 100%;
29+
max-height: 80%;
30+
object-fit: contain;
31+
}
32+
#thumbnails {
33+
display: flex;
34+
flex-wrap: nowrap;
35+
justify-content: flex-start;
36+
overflow-x: auto;
37+
max-height: 20%;
38+
width: 100%;
39+
scrollbar-width: thin;
40+
scrollbar-color: #888 #f1f1f1;
41+
}
42+
#thumbnails::-webkit-scrollbar {
43+
height: 8px;
44+
}
45+
#thumbnails::-webkit-scrollbar-thumb {
46+
background: #888;
47+
border-radius: 4px;
48+
}
49+
#thumbnails::-webkit-scrollbar-track {
50+
background: #f1f1f1;
51+
}
52+
.card {
53+
display: flex;
54+
justify-content: center;
55+
align-items: center;
56+
background: white;
57+
padding: 20px;
58+
border-radius: 10px;
59+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Schatten für 3D-Effekt */
60+
max-height: 95vh;
61+
max-width: 90vw;
62+
width: auto;
63+
height: auto;
64+
}
65+
</style>
966
</head>
1067
<body>
1168
<div class="body">
1269
<div class="container mt-5">
13-
<h2 class="text-center mb-4">PDF hochladen & Seiten anzeigen</h2>
70+
<h2 class="text-center mb-4">LookyLooky</h2>
1471

1572
<!-- Slideshow Section -->
16-
<div id="slideShowContainer" class="slideshow">
17-
<div id="slideshow" class="d-flex flex-column align-items-center">
18-
<img id="mainImage" src="" alt="Großes Bild" class="img-fluid mb-3">
73+
<div id="slideShowContainer" class="d-none">
74+
<div id="slideshow">
75+
<div id="navigator"></div>
76+
<img id="mainImage" src="" alt="Start your slideshow by Uploading your first PDF" class="img-fluid mb-3 card">
1977
<hr>
20-
<div id="thumbnails" class="d-flex flex-wrap justify-content-center"></div>
78+
<div id="thumbnails" class="d-flex flex-nowrap"></div>
2179
</div>
2280
</div>
2381

@@ -29,7 +87,8 @@ <h2 class="text-center mb-4">PDF hochladen & Seiten anzeigen</h2>
2987

3088
<!-- Document List -->
3189
<ul id="documentList" class="list-group mb-5"></ul>
32-
<p>Made with Love by <a href="https://h2-invent.com" target="_blank">h2 invent</a> in Lörrach</p>
90+
<p>Made with Love by <a href="https://h2-invent.com" target="_blank">h2 invent</a> in Lörrach</p>
91+
3392
<!-- Upload Modal -->
3493
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
3594
<div class="modal-dialog">
@@ -50,12 +109,5 @@ <h5 class="modal-title" id="uploadModalLabel">PDF hochladen</h5>
50109
</div>
51110
</div>
52111
</div>
53-
54-
<!-- Bootstrap JS and dependencies -->
55-
56-
<!-- Custom JS -->
57-
<script>
58-
59-
</script>
60112
</body>
61-
</html>
113+
</html>

‎public/view.html‎

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,70 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>PDF Upload & Anzeige</title>
7+
<style>
8+
/* Body soll die volle Höhe des Viewports nutzen */
9+
body, html {
10+
margin: 0;
11+
padding: 0;
12+
height: 100vh;
13+
overflow: hidden; /* Verhindert Scrollen */
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
background-color: #f8f9fa; /* Leichter Hintergrund */
18+
}
719

20+
/* Hauptcontainer der Slideshow */
21+
#slideShowContainer {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
width: 100%;
26+
height: 100vh; /* Genau 100% der Höhe des Viewports */
27+
}
28+
29+
/* Card-Container mit Schatten */
30+
.card {
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
background: white;
35+
padding: 20px;
36+
border-radius: 10px;
37+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Schatten für 3D-Effekt */
38+
max-height: 95vh;
39+
max-width: 90vw;
40+
width: auto;
41+
height: auto;
42+
}
43+
44+
/* Container für das Hauptbild */
45+
#mainImageContainer {
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
max-height: 100vh; /* Hauptbild darf nicht größer als der Bildschirm sein */
50+
max-width: 90vw; /* Damit es nicht zu breit wird */
51+
overflow: hidden; /* Kein Scrollen */
52+
}
53+
54+
/* Das Hauptbild selbst */
55+
#mainImage {
56+
max-height: 90vh; /* Maximale Höhe */
57+
max-width: 100%; /* Breite bleibt innerhalb der Card */
58+
width: auto;
59+
height: auto;
60+
object-fit: contain; /* Verhindert Verzerrungen */
61+
}
62+
</style>
863
</head>
964
<body>
10-
<div class="body">
11-
<div class="container">
12-
<h2>PDF anzeigen</h2>
13-
<div id="slideShowContainer" class="slideshow">
14-
<div id="slideshow" class="d-flex flex-column align-items-center">
15-
<img id="mainImage" src="" alt="Großes Bild">
1665

17-
</div>
66+
<div id="slideShowContainer">
67+
<div class="card">
68+
<div id="mainImageContainer">
69+
<img id="mainImage" src="" alt="Großes Bild">
1870
</div>
19-
2071
</div>
2172
</div>
2273

‎src/pdfProcessor.mjs‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,21 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
88

99
const MAX_UPLOADS = 3;
1010
let activeUploads = 0;
11-
11+
let init = false;
12+
let uploadIds = null;
1213
export async function processPDF(file, encryptionKey, socket) {
14+
if (init == false){
15+
socket.on("saved", async (data) => {
16+
uploadIds[data.page] = data.id;
17+
18+
if (!uploadIds.includes(null)) {
19+
await saveDocumentToLocalStorage(file.name, encryptionKey, uploadIds);
20+
loadDocumentPreviews();
21+
activeUploads--;
22+
}
23+
});
24+
init = true;
25+
}
1326
if (activeUploads >= MAX_UPLOADS) {
1427
alert("Es können maximal drei Dokumente gleichzeitig hochgeladen werden.");
1528
return;
@@ -26,16 +39,10 @@ export async function processPDF(file, encryptionKey, socket) {
2639
console.log("📄 PDF geladen:", pdf);
2740

2841
const previewContainer = document.getElementById("previewContainer");
29-
const uploadIds = new Array(pdf.numPages).fill(null);
30-
socket.on("saved", async (data) => {
31-
uploadIds[data.page] = data.id;
32-
33-
if (!uploadIds.includes(null)) {
34-
await saveDocumentToLocalStorage(file.name, encryptionKey, uploadIds);
35-
loadDocumentPreviews();
36-
activeUploads--;
37-
}
38-
});
42+
previewContainer.innerHTML='';
43+
uploadIds = new Array(pdf.numPages).fill(null);
44+
45+
3946
for (let i = 1; i <= pdf.numPages; i++) {
4047
const page = await pdf.getPage(i);
4148
const canvas = document.createElement("canvas");

‎src/startSlideshow.mjs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import {socket} from "./index.mjs";
44

55
const mainImage = document.getElementById("mainImage");
66
const thumbnailsContainer = document.getElementById("thumbnails");
7+
const slideShowContainer = document.getElementById('slideShowContainer');
8+
79
let encryptionKeySlideshow = null;
810
export async function loadSlideshow(id) {
911
const { filename, exportedKey, uploadIds } = findDataById(id);
10-
12+
slideShowContainer.classList.remove('d-none');
1113
thumbnailsContainer.innerHTML = ""; // Reset Thumbnails
1214
encryptionKeySlideshow = exportedKey;
1315
socket.emit("startSlideshow", { docId: id });
@@ -50,10 +52,10 @@ export async function loadSlideshow(id) {
5052
navContainer.classList.add("d-flex", "justify-content-center", "mb-2");
5153
navContainer.appendChild(prevButton);
5254
navContainer.appendChild(nextButton);
55+
const navigatorContainer = document.getElementById("navigator");
56+
navigatorContainer.innerHTML='';
57+
navigatorContainer.insertAdjacentElement('afterbegin',navContainer)
5358

54-
// Navigation über das Hauptbild einfügen
55-
const slideshowContainer = document.getElementById("slideshow");
56-
slideshowContainer.insertBefore(navContainer, mainImage);
5759

5860
// Thumbnail-Bilder laden
5961
for (let i = 0; i < totalImages; i++) {

0 commit comments

Comments
 (0)