interstellar_development/foss_alternatives
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Preperation for the licence

Browse source
This commit is contained in:
Sage The DM 2024-06-19 08:58:57 +02:00
parent 3217e2126a
commit bbb39ad5d9
46 changed files with 354 additions and 975 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
general_purpose/template.html → Template/template.html
View file

@ -1,26 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header-folder.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -65,12 +54,6 @@
<li>Entry 4</li> <li>Entry 4</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

4
burger.js Normal file
View file

@ -0,0 +1,4 @@
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}

23
games.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternatives</title> <title>FOSS Alternatives</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="header.js" type="text/javascript" defer></script>
<script src="burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="games.html">Games</a></li>
<li><a href="general.html">General</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="media.html">Multimedia</a></li>
<li><a href="os.html">OS</a></li>
<li><a href="social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<nav> <nav>
<ul class="folder-list"> <ul class="folder-list">
@ -45,11 +34,5 @@
</ul> </ul>
</nav> </nav>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
games/fps.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game List</title> <title>Game List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>Game List</h1> <h1>Game List</h1>
<h2>Fully Free</h2> <h2>Fully Free</h2>
@ -38,11 +27,5 @@
<li>Doom</li> <li>Doom</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
games/general.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game List</title> <title>Game List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>Game List</h1> <h1>Game List</h1>
<h2>Fully Free</h2> <h2>Fully Free</h2>
@ -37,11 +26,5 @@
<li>Daggerfall Unity</li> <li>Daggerfall Unity</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
games/platformer.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game List</title> <title>Game List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>Game List</h1> <h1>Game List</h1>
<h2>Fully Free</h2> <h2>Fully Free</h2>
@ -35,11 +24,5 @@
<li>Daggerfall Unity</li> <li>Daggerfall Unity</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
games/sandbox.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game List</title> <title>Game List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>Game List</h1> <h1>Game List</h1>
<h2>Fully Free</h2> <h2>Fully Free</h2>
@ -36,11 +25,5 @@
<li>Daggerfall Unity</li> <li>Daggerfall Unity</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
games/strategy.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game List</title> <title>Game List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>Game List</h1> <h1>Game List</h1>
<h2>Fully Free</h2> <h2>Fully Free</h2>
@ -37,11 +26,5 @@
<li>OpenRA</li> <li>OpenRA</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
games/vehicle.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game List</title> <title>Game List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>Game List</h1> <h1>Game List</h1>
<h2>Fully Free</h2> <h2>Fully Free</h2>
@ -33,11 +22,5 @@
<ul class="non-free-assets"> <ul class="non-free-assets">
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

26
general.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternatives</title> <title>FOSS Alternatives</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="header.js" type="text/javascript" defer></script>
<script src="burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="games.html">Games</a></li>
<li><a href="general.html">General</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="media.html">Multimedia</a></li>
<li><a href="os.html">OS</a></li>
<li><a href="social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<nav> <nav>
<ul class="folder-list"> <ul class="folder-list">
@ -51,17 +40,8 @@
<li class="folder-list-item"> <li class="folder-list-item">
<a class="folder-link" href="general_purpose/programming.html">Programming</a> <a class="folder-link" href="general_purpose/programming.html">Programming</a>
</li> </li>
<li class="folder-list-item">
<a class="folder-link" href="general_purpose/template.html">template</a>
</li>
</ul> </ul>
</nav> </nav>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
general_purpose/3d_modeling.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
@ -28,11 +17,5 @@
<li>Blender</li> <li>Blender</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
general_purpose/cad.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
@ -32,11 +21,5 @@
<li>OpenSCAD</li> <li>OpenSCAD</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
general_purpose/disk_cleaner.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
@ -28,11 +17,5 @@
<li>Bleachbit</li> <li>Bleachbit</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
general_purpose/notes.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
@ -32,11 +21,5 @@
<li>Joplin</li> <li>Joplin</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
general_purpose/office_programs.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
@ -33,11 +22,5 @@
<li>Collabora Online</li> <li>Collabora Online</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
general_purpose/password_manager.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -32,12 +21,6 @@
<li>Proton Pass</li> <li>Proton Pass</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
general_purpose/pdf_viewer.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -28,12 +17,6 @@
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
general_purpose/privacy_vpn.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>Mullvad VPN</li> <li>Mullvad VPN</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
general_purpose/programming.html
View file

@ -5,34 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General List</title> <title>General List</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
<li>VS Codium</li> <li>VS Codium</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

30
header-folder.js Normal file
View file

@ -0,0 +1,30 @@
class Header extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<style>
</style>
<header>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
`;
}
}
customElements.define('header-component', Header);
customElements.define('header-component', Header);

29
header.js Normal file
View file

@ -0,0 +1,29 @@
class Header extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<style>
</style>
<header>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="games.html">Games</a></li>
<li><a href="general.html">General</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="media.html">Multimedia</a></li>
<li><a href="os.html">OS</a></li>
<li><a href="social-media.html">Social media</a></li>
</ul>
</div>
</header>
`;
}
}
customElements.define('header-component', Header);

23
index.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternatives</title> <title>FOSS Alternatives</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="header.js" type="text/javascript" defer></script>
<script src="burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="games.html">Games</a></li>
<li><a href="general.html">General</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="media.html">Multimedia</a></li>
<li><a href="os.html">OS</a></li>
<li><a href="social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>foss-alternatives</h1> <h1>foss-alternatives</h1>
<p class="text"> <p class="text">
@ -163,11 +152,5 @@
<br> <br>
</p> </p>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
internet_tools/browsers.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -47,12 +36,6 @@
<li>vivaldi</li> <li>vivaldi</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
internet_tools/mail_clients.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>SeaMonkey</li> <li>SeaMonkey</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

24
internet_tools/search_engines.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
<script src="../header.js" type="text/javascript" defer></script>
<script src="../burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="../index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
@ -51,12 +40,5 @@
<li>Vivaldi</li> <li>Vivaldi</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

102
list.css
View file

@ -3,33 +3,31 @@
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: "Roboto", Arial, sans-serif;
transition: 1s; transition: all 0.3s ease; /* Smooth transitions */
} }
/* Body styles */ /* Body styles */
body { body {
background-color: #f5f5f5; background-color: #f9f9f9;
background-image: url("assets/");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
margin: 0;
padding: 0;
} }
/* Header styles */ /* Header styles */
header { header {
background-color: rgba(0, 0, 0, 0.7); background-color: #2c3e50;
padding: 10px; padding: 15px 0;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1000; z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} }
.header-content { .header-content {
@ -38,19 +36,20 @@ header {
align-items: center; align-items: center;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px;
} }
.project-name { .project-name {
color: white; color: #ffffff;
font-size: 1.5em; font-size: 1.8em;
text-decoration: none; /* Ensure no underline */ font-weight: bold;
} }
.burger-menu { .burger-menu {
background: none; background: none;
border: none; border: none;
color: white; color: #ffffff;
font-size: 1.5em; font-size: 1.8em;
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
@ -59,70 +58,74 @@ header {
list-style: none; list-style: none;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center;
flex-grow: 1; flex-grow: 1;
margin: 0;
} }
header li { header li {
margin: 0 10px; margin: 15px;
} }
header a { header a {
color: white; color: #ffffff;
text-decoration: none; /* Ensure no underline */ text-decoration: none;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
header a:hover { header a:hover {
background-color: rgba(255, 255, 255, 0.2); background-color: #34495e;
} }
/* Article styles */ /* Article styles */
article { article {
margin-top: 100px; margin-top: 80px;
margin-bottom: 50px; margin-bottom: 50px;
padding: 20px; padding: 20px;
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;
background: rgba(255, 255, 255, 0.9); background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
text-align: center; text-align: left;
} }
h1 { h1 {
color: #333; color: #333333;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 2em; font-size: 2.5em;
} }
p.text { p.text {
color: #666; color: #555555;
line-height: 1.2; line-height: 1.6;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1em; font-size: 1.1em;
} }
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
button { button {
padding: 10px 20px; padding: 12px 24px;
margin: 2em; margin: 1em 0;
border: none; border: none;
background-color: #333; background-color: #3498db;
color: white; color: #ffffff;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button:hover { button:hover {
background-color: #555; background-color: #2980b9;
} }
.flex { .flex {
@ -131,30 +134,31 @@ button:hover {
} }
nav { nav {
margin-top: 20px; margin: 20px;
} }
.folder-list { .folder-list {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.folder-list-item { .folder-list-item {
margin-bottom: 10px; margin-bottom: 10px;
} }
.folder-link { .folder-link {
text-decoration: none; text-decoration: none;
color: #eee8e8; color: #ffffff;
font-weight: bold; font-weight: bold;
display: block; display: block;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background: linear-gradient(to right, #000000, #707070); /* Gradient background */ background-color: #2c3e50;
transition: background-color 0.3s ease;
} }
.folder-link:hover { .folder-link:hover {
background: linear-gradient(to right, #707070, #000000); /* Gradient change on hover */ background-color: #34495e;
} }
.folder-link:active { .folder-link:active {
@ -170,20 +174,22 @@ nav {
.menu { .menu {
display: none; display: none;
flex-direction: column; flex-direction: column;
background-color: rgba(0, 0, 0, 0.7); background-color: #2c3e50;
position: absolute; position: absolute;
top: 100%; /* Adjusted position */ top: 100%; /* Adjusted position */
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
padding: 0;
} }
.menu.active { .menu.active {
display: flex; display: flex;
padding: 10px;
} }
header { header {
padding: 5px; padding: 10px 0;
height: auto; height: auto;
} }
@ -191,26 +197,28 @@ nav {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 10px;
} }
.project-name { .project-name {
font-size: 1.2em; font-size: 1.5em;
} }
header li { header li {
margin: 0; margin: 0;
width: 100%; padding: 10px;
} }
header a { header a {
padding: 10px;
width: 100%; width: 100%;
display: block; padding: 12px 0;
text-align: center; /* Center align the menu items */
} }
article { article {
margin-top: 190px; margin-top: 140px; /* Increase margin-top for better readability */
padding-top: 20px; padding-top: 20px;
margin-bottom: 20px; /* Adjust margin-bottom for consistency */
} }
} }

23
media.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternatives</title> <title>FOSS Alternatives</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="header.js" type="text/javascript" defer></script>
<script src="burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="games.html">Games</a></li>
<li><a href="general.html">General</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="media.html">Multimedia</a></li>
<li><a href="os.html">OS</a></li>
<li><a href="social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<nav> <nav>
<ul class="folder-list"> <ul class="folder-list">
@ -55,11 +44,5 @@
</ul> </ul>
</nav> </nav>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/audio_editors.html
View file

@ -5,34 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
<li>Audacity</li> <li>Audacity</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/image_editing.html
View file

@ -5,34 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
<li>GIMP</li> <li>GIMP</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/media_player.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>MPV</li> <li>MPV</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/multimedia_frontend.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>Jellyfin</li> <li>Jellyfin</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/painting.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>Inkscape</li> <li>Inkscape</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/photo_editing.html
View file

@ -5,34 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
<li>GIMP</li> <li>GIMP</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/photo_processing.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>RawTherapee</li> <li>RawTherapee</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/recording.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>ShareX</li> <li>ShareX</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
multimedia/video_editors.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>Shotcut</li> <li>Shotcut</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
operating_systems/desktop.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>GNU/Linux Based</h1> <h1>GNU/Linux Based</h1>
<h1>5/5</h1> <h1>5/5</h1>
@ -55,12 +44,6 @@
<li>Bliss OS</li> <li>Bliss OS</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
operating_systems/mobile.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>AOSP Base</h1> <h1>AOSP Base</h1>
<h1>5/5</h1> <h1>5/5</h1>
@ -54,12 +43,6 @@
<li>postmarketOS</li> <li>postmarketOS</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
os.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternatives</title> <title>FOSS Alternatives</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="header.js" type="text/javascript" defer></script>
<script src="burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="games.html">Games</a></li>
<li><a href="general.html">General</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="media.html">Multimedia</a></li>
<li><a href="os.html">OS</a></li>
<li><a href="social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<nav> <nav>
<ul class="folder-list"> <ul class="folder-list">
@ -33,11 +22,5 @@
</ul> </ul>
</nav> </nav>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

23
social-media.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternatives</title> <title>FOSS Alternatives</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="header.js" type="text/javascript" defer></script>
<script src="burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="games.html">Games</a></li>
<li><a href="general.html">General</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="media.html">Multimedia</a></li>
<li><a href="os.html">OS</a></li>
<li><a href="social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<nav> <nav>
<ul class="folder-list"> <ul class="folder-list">
@ -39,11 +28,5 @@
</ul> </ul>
</nav> </nav>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
social_platforms/irc_clients.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -31,12 +20,6 @@
<li>KiwiIRC</li> <li>KiwiIRC</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
social_platforms/matrix_clients.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -35,12 +24,6 @@
<li>Cinny</li> <li>Cinny</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

39
social_platforms/other_platforms.html
View file

@ -1,27 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button> <article>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
<li>Mastodon</li> <li>Mastodon</li>
@ -36,12 +25,6 @@
<li>Friendica</li> <li>Friendica</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

27
social_platforms/signal_clients.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternative</title> <title>FOSS Alternative</title>
<link rel="stylesheet" href="../list.css"> <link rel="stylesheet" href="../list.css">
</head> <script src="../header.js" type="text/javascript" defer></script>
<body> <script src="../burger.js" type="text/javascript" defer></script>
<header> </head>
<div class="header-content"> <body>
<div class="project-name"><a href="../index.html">FOSS alternative</a></div> <header-component></header-component>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="../games.html">Games</a></li>
<li><a href="../general.html">General</a></li>
<li><a href="../tools.html">Tools</a></li>
<li><a href="../media.html">Multimedia</a></li>
<li><a href="../os.html">OS</a></li>
<li><a href="../social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<h1>5/5</h1> <h1>5/5</h1>
<ul class="fiveStar"> <ul class="fiveStar">
@ -35,12 +24,6 @@
<li>Session</li> <li>Session</li>
</ul> </ul>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

99
styles.css
View file

@ -3,33 +3,31 @@
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: "Roboto", Arial, sans-serif;
transition: 1s; transition: all 0.3s ease; /* Smooth transitions */
} }
/* Body styles */ /* Body styles */
body { body {
background-color: #f5f5f5; background-color: #f9f9f9;
background-image: url("assets/");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
margin: 0;
padding: 0;
} }
/* Header styles */ /* Header styles */
header { header {
background-color: rgba(0, 0, 0, 0.7); background-color: #2c3e50;
padding: 10px; padding: 15px 0;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1000; z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} }
.header-content { .header-content {
@ -38,18 +36,20 @@ header {
align-items: center; align-items: center;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px;
} }
.project-name { .project-name {
color: white; color: #ffffff;
font-size: 1.5em; font-size: 1.8em;
font-weight: bold;
} }
.burger-menu { .burger-menu {
background: none; background: none;
border: none; border: none;
color: white; color: #ffffff;
font-size: 1.5em; font-size: 1.8em;
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
@ -58,15 +58,17 @@ header {
list-style: none; list-style: none;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center;
flex-grow: 1; flex-grow: 1;
margin: 0;
} }
header li { header li {
margin: 0 10px; margin: 15px;
} }
header a { header a {
color: white; color: #ffffff;
text-decoration: none; text-decoration: none;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
@ -74,54 +76,56 @@ header a {
} }
header a:hover { header a:hover {
background-color: rgba(255, 255, 255, 0.2); background-color: #34495e;
} }
/* Article styles */ /* Article styles */
article { article {
margin-top: 100px; margin-top: 80px;
margin-bottom: 50px; margin-bottom: 50px;
padding: 20px; padding: 20px;
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;
background: rgba(255, 255, 255, 0.9); background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
text-align: center; text-align: left;
} }
h1 { h1 {
color: #333; color: #333333;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 2em; font-size: 2.5em;
} }
p.text { p.text {
color: #666; color: #555555;
line-height: 1.2; line-height: 1.6;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1em; font-size: 1.1em;
} }
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
button { button {
padding: 10px 20px; padding: 12px 24px;
margin: 2em; margin: 1em 0;
border: none; border: none;
background-color: #333; background-color: #3498db;
color: white; color: #ffffff;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button:hover { button:hover {
background-color: #555; background-color: #2980b9;
} }
.flex { .flex {
@ -130,30 +134,31 @@ button:hover {
} }
nav { nav {
margin-top: 20px; margin: 20px;
} }
.folder-list { .folder-list {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.folder-list-item { .folder-list-item {
margin-bottom: 10px; margin-bottom: 10px;
} }
.folder-link { .folder-link {
text-decoration: none; text-decoration: none;
color: #eee8e8; color: #ffffff;
font-weight: bold; font-weight: bold;
display: block; display: block;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background: linear-gradient(to right, #000000, #707070); /* Gradient background */ background-color: #2c3e50;
transition: background-color 0.3s ease;
} }
.folder-link:hover { .folder-link:hover {
background: linear-gradient(to right, #707070, #000000); /* Gradient change on hover */ background-color: #34495e;
} }
.folder-link:active { .folder-link:active {
@ -169,20 +174,22 @@ nav {
.menu { .menu {
display: none; display: none;
flex-direction: column; flex-direction: column;
background-color: rgba(0, 0, 0, 0.7); background-color: #2c3e50;
position: absolute; position: absolute;
top: 100%; /* Adjusted position */ top: 100%; /* Adjusted position */
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
padding: 0;
} }
.menu.active { .menu.active {
display: flex; display: flex;
padding: 10px;
} }
header { header {
padding: 5px; padding: 10px 0;
height: auto; height: auto;
} }
@ -190,25 +197,27 @@ nav {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 10px;
} }
.project-name { .project-name {
font-size: 1.2em; font-size: 1.5em;
} }
header li { header li {
margin: 0; margin: 0;
width: 100%; padding: 10px;
} }
header a { header a {
padding: 10px;
width: 100%; width: 100%;
display: block; padding: 12px 0;
text-align: center; /* Center align the menu items */
} }
article { article {
margin-top: 190px; margin-top: 140px; /* Increase margin-top for better readability */
padding-top: 20px; padding-top: 20px;
margin-bottom: 20px; /* Adjust margin-bottom for consistency */
} }
} }

23
tools.html
View file

@ -5,22 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS Alternatives</title> <title>FOSS Alternatives</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="header.js" type="text/javascript" defer></script>
<script src="burger.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FOSS alternative</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="games.html">Games</a></li>
<li><a href="general.html">General</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="media.html">Multimedia</a></li>
<li><a href="os.html">OS</a></li>
<li><a href="social-media.html">Social media</a></li>
</ul>
</div>
</header>
<article> <article>
<nav> <nav>
<ul class="folder-list"> <ul class="folder-list">
@ -36,11 +25,5 @@
</ul> </ul>
</nav> </nav>
</article> </article>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>