main
poni 4 months ago
parent d680d12a1a
commit 43fa4d9d9e

@ -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>

@ -1 +1 @@
[Credits](http://federicoponi.it)
Who wrote this generator is this [human](http://federicoponi.it)

@ -1,2 +1 @@
# Welcome to my garden!
This is what I have in my magic desk
Welcome to my garden!

@ -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);
});

@ -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;
}

Loading…
Cancel
Save