readme

3 months ago · 43fa4d9d9e
parent d680d12a1a
commit 43fa4d9d9e
5 changed files with 58 additions and 34 deletions
--- 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"<header>{header_html}</header>"
+    html_content += f"""<header>{header_html}</header>"""
    
    # Get the files in the garden directory sorted by modification time
    files = sorted(
@ -73,7 +73,7 @@ def generate_html():
            html_content += f"<div class='draggable text'>{md_html}</div>"
        
        elif file_extension == 'pdf':
-            html_content += f"<div class='draggable'><iframe src='./contents/garden/{filename}'></iframe></div>"
+            html_content += f"<div class='draggable iframe'><iframe src='./contents/garden/{filename}'></iframe></div>"
        
        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"<div class='draggable'><video controls src='./contents/garden/compressed/compressed_{filename}'></video></div>"
+            html_content += f"<div class='draggable video'><video controls src='./contents/garden/compressed/compressed_{filename}'></video></div>"
            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"""
    </style>
 </head>
 <body>
-    <button onclick="toggleView()">Toggle View</button>
    {generate_html()}
    <script src="scripts/script.js"></script>
 </body>
--- a/website/contents/misc/footer.md
+++ b/website/contents/misc/footer.md
@ -1 +1 @@
-[Credits](http://federicoponi.it)
+Who wrote this generator is this [human](http://federicoponi.it)
--- 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
+Welcome to my garden!
--- 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 });

+    });

-});
+    draggable.addEventListener('dragstart', () => false);
+});
--- 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;
-}
+}
+
+.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;
+}