diff --git a/app.py b/app.py
index 24007aa..d8a9427 100644
--- a/app.py
+++ b/app.py
@@ -47,7 +47,7 @@ def generate_html():
# Read header content
header_content = read_file(os.path.join(misc_path, 'header.md'))
header_html = markdown.markdown(header_content)
- html_content += f""
+ html_content += f""""""
# Get the files in the garden directory sorted by modification time
files = sorted(
@@ -73,7 +73,7 @@ def generate_html():
html_content += f"{md_html}
"
elif file_extension == 'pdf':
- html_content += f""
+ html_content += f""
elif file_extension in ['png', 'jpg', 'jpeg', 'gif']:
compressed_image_path = os.path.join(compressed_path, f"compressed_{filename}")
@@ -84,7 +84,7 @@ def generate_html():
elif file_extension in ['mp4', 'avi', 'mov', 'mkv']:
compressed_video_path = os.path.join(compressed_path, f"compressed_{filename}")
compress_video(file_path, compressed_video_path)
- html_content += f""
+ html_content += f""
compressed_files_to_keep.add(compressed_video_path)
# Remove compressed files that no longer have a source file in the garden directory
@@ -135,7 +135,6 @@ final_html = f"""
-
{generate_html()}
diff --git a/website/contents/misc/footer.md b/website/contents/misc/footer.md
index aa13dc8..1fe3a60 100644
--- a/website/contents/misc/footer.md
+++ b/website/contents/misc/footer.md
@@ -1 +1 @@
-[Credits](http://federicoponi.it)
\ No newline at end of file
+Who wrote this generator is this [human](http://federicoponi.it)
\ No newline at end of file
diff --git a/website/contents/misc/header.md b/website/contents/misc/header.md
index 55a359d..ebf7287 100644
--- a/website/contents/misc/header.md
+++ b/website/contents/misc/header.md
@@ -1,2 +1 @@
-# Welcome to my garden!
-This is what I have in my magic desk
\ No newline at end of file
+Welcome to my garden!
\ No newline at end of file
diff --git a/website/scripts/script.js b/website/scripts/script.js
index bd40bc4..32ad376 100644
--- a/website/scripts/script.js
+++ b/website/scripts/script.js
@@ -1,25 +1,25 @@
-function randomPos(min, max) {
+function getRandomPosition(min, max) {
return Math.random() * (max - min) + min;
-
}
-let w = document.body.clientWidth
-let y = document.body.clientHeight - document.querySelector('footer').clientHeight
-let x_start = document.querySelector('header').clientHeight
-
-document.querySelectorAll('.draggable').forEach(div => {
+const bodyWidth = document.body.clientWidth;
+const bodyHeight = document.body.clientHeight - document.querySelector('footer').clientHeight;
+const headerHeight = document.querySelector('header').clientHeight;
+let currentZIndex = 1; // Initialize a variable to keep track of the highest z-index
- div.style.left = randomPos(0,w)+'px'
- div.style.top = randomPos(x_start,y)+'px'
+document.querySelectorAll('.draggable').forEach(draggable => {
+ draggable.style.left = `${getRandomPosition(0, bodyWidth)}px`;
+ draggable.style.top = `${getRandomPosition(headerHeight, bodyHeight)}px`;
+ draggable.addEventListener('mousedown', (event) => {
+ draggable.style.zIndex = ++currentZIndex; // Set the z-index to a higher value
- div.onmousedown = function(event) {
- let shiftX = event.clientX - div.getBoundingClientRect().left;
- let shiftY = event.clientY - div.getBoundingClientRect().top;
+ const shiftX = event.clientX - draggable.getBoundingClientRect().left;
+ const shiftY = event.clientY - draggable.getBoundingClientRect().top;
function moveAt(pageX, pageY) {
- div.style.left = pageX - shiftX + 'px';
- div.style.top = pageY - shiftY + 'px';
+ draggable.style.left = `${pageX - shiftX}px`;
+ draggable.style.top = `${pageY - shiftY}px`;
}
function onMouseMove(event) {
@@ -28,19 +28,15 @@ document.querySelectorAll('.draggable').forEach(div => {
document.addEventListener('mousemove', onMouseMove);
- div.onmouseup = function() {
+ draggable.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', onMouseMove);
- div.onmouseup = null;
- };
+ }, { once: true });
- div.ondblclick = function() {
+ draggable.addEventListener('dblclick', () => {
document.removeEventListener('mousemove', onMouseMove);
- };
- };
-
- div.ondragstart = function() {
- return false;
- };
+ }, { once: true });
+ });
-});
\ No newline at end of file
+ draggable.addEventListener('dragstart', () => false);
+});
diff --git a/website/style.css b/website/style.css
index 3d135e6..425d53f 100644
--- a/website/style.css
+++ b/website/style.css
@@ -3,6 +3,7 @@ body, html{
height: 100%;
margin: 0;
padding: 0;
+ font-family: Arial, Helvetica, sans-serif;
}
img{
@@ -16,12 +17,16 @@ img{
height: min-content;
overflow-y: scroll;
max-height: 300px;
-
+
}
.draggable {
position: absolute;
cursor: move;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
footer, header{
@@ -44,4 +49,29 @@ footer{
header h1{
margin-bottom: 0;
-}
\ No newline at end of file
+}
+
+.video, .iframe{
+ padding: 20px 0px 0px;
+ display: flex;
+ border-width: 1.5px 1.5px medium;
+ border-style: solid solid none;
+ border-color: white 1.5px currentcolor;
+}
+
+.iframe iframe{
+ width: 500px;
+ height: 300px;
+}
+
+#content {
+ width: 100%;
+ height: 100%;
+ transform-origin: 0 0;
+
+}
+
+#zoomSlider{
+ position: fixed;
+ z-index: 99999;
+}