Dario48/pages
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added more functionality to the images

Browse source
This commit is contained in:
Dario48true 2025-02-15 15:07:10 +01:00
parent fcd31e9f15
commit 2374c5203e
3 changed files with 343 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

109
home/Dario48/Pictures/folder.html Normal file
View file

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

109
home/Dario48/Pictures/html.html Normal file
View file

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

125
home/Dario48/Pictures/index.html Normal file
View file

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