whops
This commit is contained in:
Dario48true
parent
714fe2a449
commit
20b76c8c87
9 changed files with 285 additions and 726 deletions
|
|
@ -1,53 +1,44 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>/</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/disable_form.js" defer></script>
|
||||
<script src="/bin/crypt.js"></script>
|
||||
</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 id="disable_enter">
|
||||
<input
|
||||
type="text"
|
||||
value="Hello"
|
||||
class="stretch"
|
||||
id="plaintext"
|
||||
/>
|
||||
<input type="text" value="13" class="stretch" id="key" />
|
||||
<button
|
||||
type="button"
|
||||
onclick="document.getElementById('encrypted').value = encrypt(document.getElementById('plaintext').value, document.getElementById('key').value)"
|
||||
>
|
||||
Encrypt
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick="document.getElementById('plaintext').value = decrypt(document.getElementById('encrypted').value, document.getElementById('key').value)"
|
||||
>
|
||||
Decrypt
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
value="Uryyb"
|
||||
class="stretch"
|
||||
id="encrypted"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>/bin/</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/disable_form.js" defer></script>
|
||||
<script src="/bin/crypt.js"></script>
|
||||
</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 id="disable_enter">
|
||||
<input type="text" value="Hello" class="stretch" id="plaintext" />
|
||||
<input type="text" value="13" class="stretch" id="key" />
|
||||
<button
|
||||
type="button"
|
||||
onclick="document.getElementById('encrypted').value = encrypt(document.getElementById('plaintext').value, document.getElementById('key').value)"
|
||||
>
|
||||
Encrypt
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick="document.getElementById('plaintext').value = decrypt(document.getElementById('encrypted').value, document.getElementById('key').value)"
|
||||
>
|
||||
Decrypt
|
||||
</button>
|
||||
<input type="text" value="Uryyb" class="stretch" id="encrypted" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<html style="background-color: black">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>firma_digitale-Dario_Spinnato</title>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,79 +1,12 @@
|
|||
<!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>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>/home/Dario48/Documents/</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<script src="/path.js" defer=""></script>
|
||||
<script src="/disable_form.js" defer=""></script>
|
||||
</head>
|
||||
<body id="body">
|
||||
<div class="border">
|
||||
<div class="column">
|
||||
|
|
|
|||
|
|
@ -1,88 +1,21 @@
|
|||
<!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">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/folder.svg"
|
||||
style="
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>/home/Dario48/Pictures/folder.svg</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/path.js" defer=""></script>
|
||||
<script src="/disable_form.js" defer=""></script>
|
||||
</head>
|
||||
<body id="body">
|
||||
<div class="border">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/folder.svg"
|
||||
style="
|
||||
height=100%;
|
||||
width=100%;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,88 +1,21 @@
|
|||
<!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">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/html.svg"
|
||||
style="
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>/home/Dario48/Pictures/html.svg</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/path.js" defer=""></script>
|
||||
<script src="/disable_form.js" defer=""></script>
|
||||
</head>
|
||||
<body id="body">
|
||||
<div class="border">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/html.svg"
|
||||
style="
|
||||
height=100%;
|
||||
width=100%;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,125 +1,50 @@
|
|||
<!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>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>/home/Dario48/Pictures/</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/path.js" defer=""></script>
|
||||
<script src="/disable_form.js" defer=""></script>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,138 +1,63 @@
|
|||
<!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/" class="stretch" />
|
||||
</form>
|
||||
<nav class="row">
|
||||
<div class="column folder">
|
||||
<a href="Pictures/">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/folder.svg"
|
||||
style="
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
"
|
||||
/>
|
||||
<p style="text-align: center">Pictures</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column folder">
|
||||
<a href="Documents/">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/folder.svg"
|
||||
style="
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
"
|
||||
/>
|
||||
<p style="text-align: center">Documents</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column folder">
|
||||
<a href="compito_online-ricerca_Dario-Spinnato-4Q-RSA-13022025.html">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/html.svg"
|
||||
style="
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
"
|
||||
/>
|
||||
<p style="text-align: center">compito_online-ricerca_Dario-Spinnato-4Q-RSA-13022025.html</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>/home/Dario48/</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/path.js" defer=""></script>
|
||||
<script src="/disable_form.js" defer=""></script>
|
||||
</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/" class="stretch" />
|
||||
</form>
|
||||
<nav class="row">
|
||||
<div class="column folder">
|
||||
<a href="Pictures/">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/folder.svg"
|
||||
style="display: block; margin-left: auto; margin-right: auto"
|
||||
/>
|
||||
<p style="text-align: center">Pictures</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column folder">
|
||||
<a href="Documents/">
|
||||
<img
|
||||
src="/home/Dario48/Pictures/folder.svg"
|
||||
style="display: block; margin-left: auto; margin-right: auto"
|
||||
/>
|
||||
<p style="text-align: center">Documents</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column folder">
|
||||
<a
|
||||
href="compito_online-ricerca_Dario-Spinnato-4Q-RSA-13022025.html"
|
||||
>
|
||||
<img
|
||||
src="/home/Dario48/Pictures/html.svg"
|
||||
style="display: block; margin-left: auto; margin-right: auto"
|
||||
/>
|
||||
<p style="text-align: center">
|
||||
compito_online-ricerca_Dario-Spinnato-4Q-RSA-13022025.html
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
147
home/index.html
147
home/index.html
|
|
@ -1,112 +1,41 @@
|
|||
<!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/" class="stretch" />
|
||||
</form>
|
||||
<nav class="row">
|
||||
<div class="column folder">
|
||||
<a href="Dario48/">
|
||||
<img
|
||||
src="Dario48/Pictures/folder.svg"
|
||||
style="
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
"
|
||||
/>
|
||||
<p style="text-align: center">Dario48</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>/home/</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/path.js" defer=""></script>
|
||||
<script src="/disable_form.js" defer=""></script>
|
||||
</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/" class="stretch" />
|
||||
</form>
|
||||
<nav class="row">
|
||||
<div class="column folder">
|
||||
<a href="Dario48/">
|
||||
<img
|
||||
src="Dario48/Pictures/folder.svg"
|
||||
style="display: block; margin-left: auto; margin-right: auto"
|
||||
/>
|
||||
<p style="text-align: center">Dario48</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
133
index.html
133
index.html
|
|
@ -1,75 +1,64 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>/</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/path.js" defer></script>
|
||||
<script src="/disable_form.js" defer></script>
|
||||
</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="/"
|
||||
class="stretch"
|
||||
id="path disable_enter"
|
||||
/>
|
||||
</form>
|
||||
<nav class="row">
|
||||
<div class="column folder">
|
||||
<a href="bin/">
|
||||
<img
|
||||
src="home/Dario48/Pictures/folder.svg"
|
||||
style="
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
"
|
||||
/>
|
||||
<p style="text-align: center">bin</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column folder">
|
||||
<a href="home/">
|
||||
<img
|
||||
src="home/Dario48/Pictures/folder.svg"
|
||||
style="
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
"
|
||||
/>
|
||||
<p style="text-align: center">home</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column folder">
|
||||
<a href="root/">
|
||||
<img
|
||||
src="home/Dario48/Pictures/folder.svg"
|
||||
style="
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
"
|
||||
/>
|
||||
<p style="text-align: center">root</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>/</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<script src="/path.js" defer></script>
|
||||
<script src="/disable_form.js" defer></script>
|
||||
</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="/"
|
||||
class="stretch"
|
||||
id="path disable_enter"
|
||||
/>
|
||||
</form>
|
||||
<nav class="row">
|
||||
<div class="column folder">
|
||||
<a href="bin/">
|
||||
<img
|
||||
src="home/Dario48/Pictures/folder.svg"
|
||||
style="display: block; margin-left: auto; margin-right: auto"
|
||||
/>
|
||||
<p style="text-align: center">bin</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column folder">
|
||||
<a href="home/">
|
||||
<img
|
||||
src="home/Dario48/Pictures/folder.svg"
|
||||
style="display: block; margin-left: auto; margin-right: auto"
|
||||
/>
|
||||
<p style="text-align: center">home</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column folder">
|
||||
<a href="root/">
|
||||
<img
|
||||
src="home/Dario48/Pictures/folder.svg"
|
||||
style="display: block; margin-left: auto; margin-right: auto"
|
||||
/>
|
||||
<p style="text-align: center">root</p>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue