From 2374c5203ea0d19f5d4e5e27312dfeb0f5d4cf67 Mon Sep 17 00:00:00 2001
From: Dario48true <fonziarnaldo@gmail.com>
Date: Sat, 15 Feb 2025 15:07:10 +0100
Subject: [PATCH] added more functionality to the images

---
 home/Dario48/Pictures/folder.html | 109 ++++++++++++++++++++++++++
 home/Dario48/Pictures/html.html   | 109 ++++++++++++++++++++++++++
 home/Dario48/Pictures/index.html  | 125 ++++++++++++++++++++++++++++++
 3 files changed, 343 insertions(+)
 create mode 100644 home/Dario48/Pictures/folder.html
 create mode 100644 home/Dario48/Pictures/html.html
 create mode 100644 home/Dario48/Pictures/index.html
diff --git a/home/Dario48/Pictures/folder.html b/home/Dario48/Pictures/folder.html
new file mode 100644
index 0000000..cf2ecad
--- /dev/null
+++ b/home/Dario48/Pictures/folder.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html>
+	<head>
+		<title>/</title>
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+				background-color: #161925;
+			}
+			::selection{
+				background-color: #00D3A7;
+				color: #fefefe;
+			}
+			html,
+			body {
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+			.stretch {
+				width: calc(50vw - 4px);
+				color: #C3C7D1;
+				margin-top: 0;
+			}
+
+			.column {
+				flex-direction: column;
+			}
+
+			.row {
+				display: flex;
+				justify-content: space-between;
+				flex-direction: row;
+			}
+
+			.border {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 50vw; /* 50% of the viewport's width */
+				height: 50vh; /* 50% of the viewport's height */
+				border: 2px solid white;
+				flex-direction: row; /* Stack children horizontaly */
+				justify-content: center; /* Align children to the top */
+				align-items: flex-start;
+			}
+			button {
+				background-color: #c6262e;
+				color=black;
+				border: 1px solid white;
+				cursor: pointer;
+				margin-left: auto;
+			}
+
+			button:hover {
+				background-color: #ed5353;
+			}
+
+			a {
+				text-decoration: none;
+				color: #C3C7D1;
+			}
+
+			img {
+				width: max(min(90%, 100px), 50px);
+				aspect-ratio: 1/1;
+			}
+
+			.folder {
+				width: 25%;
+			}
+		</style>
+	</head>
+	<body id="body">
+		<div class="border">
+			<div class="column">
+				<div class="stretch row">
+					Dario48's website
+					<div style="aspect-ratio: 1 / 1">
+						<button
+							type="button"
+							onclick="document.getElementById('body').remove();"
+						>
+							X
+						</button>
+					</div>
+				</div>
+				<form>
+					<input type="text" value="/home/Dario48/Pictures/folder.svg" class="stretch" />
+				</form>
+				<nav class="row">
+					<div class="column folder">
+							<img
+								src="/home/Dario48/Pictures/folder.svg"
+								style="
+									display: block;
+									margin-left: auto;
+									margin-right: auto;
+								"
+							/>
+					</div>
+				</nav>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/home/Dario48/Pictures/html.html b/home/Dario48/Pictures/html.html
new file mode 100644
index 0000000..0b6b6fe
--- /dev/null
+++ b/home/Dario48/Pictures/html.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html>
+	<head>
+		<title>/</title>
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+				background-color: #161925;
+			}
+			::selection{
+				background-color: #00D3A7;
+				color: #fefefe;
+			}
+			html,
+			body {
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+			.stretch {
+				width: calc(50vw - 4px);
+				color: #C3C7D1;
+				margin-top: 0;
+			}
+
+			.column {
+				flex-direction: column;
+			}
+
+			.row {
+				display: flex;
+				justify-content: space-between;
+				flex-direction: row;
+			}
+
+			.border {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 50vw; /* 50% of the viewport's width */
+				height: 50vh; /* 50% of the viewport's height */
+				border: 2px solid white;
+				flex-direction: row; /* Stack children horizontaly */
+				justify-content: center; /* Align children to the top */
+				align-items: flex-start;
+			}
+			button {
+				background-color: #c6262e;
+				color=black;
+				border: 1px solid white;
+				cursor: pointer;
+				margin-left: auto;
+			}
+
+			button:hover {
+				background-color: #ed5353;
+			}
+
+			a {
+				text-decoration: none;
+				color: #C3C7D1;
+			}
+
+			img {
+				width: max(min(90%, 100px), 50px);
+				aspect-ratio: 1/1;
+			}
+
+			.folder {
+				width: 25%;
+			}
+		</style>
+	</head>
+	<body id="body">
+		<div class="border">
+			<div class="column">
+				<div class="stretch row">
+					Dario48's website
+					<div style="aspect-ratio: 1 / 1">
+						<button
+							type="button"
+							onclick="document.getElementById('body').remove();"
+						>
+							X
+						</button>
+					</div>
+				</div>
+				<form>
+					<input type="text" value="/home/Dario48/Pictures/html.svg" class="stretch" />
+				</form>
+				<nav class="row">
+					<div class="column folder">
+							<img
+								src="/home/Dario48/Pictures/html.svg"
+								style="
+									display: block;
+									margin-left: auto;
+									margin-right: auto;
+								"
+							/>
+					</div>
+				</nav>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/home/Dario48/Pictures/index.html b/home/Dario48/Pictures/index.html
new file mode 100644
index 0000000..2c6cc7c
--- /dev/null
+++ b/home/Dario48/Pictures/index.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<html>
+	<head>
+		<title>/</title>
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+				background-color: #161925;
+			}
+			::selection{
+				background-color: #00D3A7;
+				color: #fefefe;
+			}
+			html,
+			body {
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+			.stretch {
+				width: calc(50vw - 4px);
+				color: #C3C7D1;
+				margin-top: 0;
+			}
+
+			.column {
+				flex-direction: column;
+			}
+
+			.row {
+				display: flex;
+				justify-content: space-between;
+				flex-direction: row;
+			}
+
+			.border {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 50vw; /* 50% of the viewport's width */
+				height: 50vh; /* 50% of the viewport's height */
+				border: 2px solid white;
+				flex-direction: row; /* Stack children horizontaly */
+				justify-content: center; /* Align children to the top */
+				align-items: flex-start;
+			}
+			button {
+				background-color: #c6262e;
+				color=black;
+				border: 1px solid white;
+				cursor: pointer;
+				margin-left: auto;
+			}
+
+			button:hover {
+				background-color: #ed5353;
+			}
+
+			a {
+				text-decoration: none;
+				color: #C3C7D1;
+			}
+
+			img {
+				width: max(min(90%, 100px), 50px);
+				aspect-ratio: 1/1;
+			}
+
+			.folder {
+				width: 25%;
+			}
+		</style>
+	</head>
+	<body id="body">
+		<div class="border">
+			<div class="column">
+				<div class="stretch row">
+					Dario48's website
+					<div style="aspect-ratio: 1 / 1">
+						<button
+							type="button"
+							onclick="document.getElementById('body').remove();"
+						>
+							X
+						</button>
+					</div>
+				</div>
+				<form>
+					<input type="text" value="/home/Dario48/Pictures/" class="stretch" />
+				</form>
+				<nav class="row">
+					<div class="column folder">
+						<a href="folder.html">
+							<img
+								src="/home/Dario48/Pictures/folder.svg"
+								style="
+									display: block;
+									margin-left: auto;
+									margin-right: auto;
+								"
+							/>
+							<p style="text-align: center">folder,svg</p>
+						</a>
+					</div>
+					<div class="column folder">
+						<a href="html.html">
+							<img
+								src="/home/Dario48/Pictures/html.svg"
+								style="
+									display: block;
+									margin-left: auto;
+									margin-right: auto;
+								"
+							/>
+							<p style="text-align: center">html.svg</p>
+						</a>
+					</div>
+				</nav>
+			</div>
+		</div>
+	</body>
+</html>
