Fabio/mac_folder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Fabio 2025-12-28 11:38:21 +01:00
commit efc0c2f2c7
8 changed files with 128 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
.gitignore vendored Normal file
View file

@ -0,0 +1,41 @@
# Node
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Build output
dist/
build/
out/
.tmp/
.temp/
# Capacitor / Cordova
android/
ios/
www/
# Environment files
.env
.env.*
!.env.example
# System files
.DS_Store
Thumbs.db
# Editor folders
.vscode/
.idea/
# Logs
*.log
# Cache
.cache/
.parcel-cache/
.next/
.nuxt/
.svelte-kit/

2
README.md Normal file
View file

@ -0,0 +1,2 @@
npx http-server .

19
app.js Normal file
View file

@ -0,0 +1,19 @@
async function loadApps() {
const container = document.getElementById("folder");
const apps = await fetch("apps.json").then(r => r.json());
apps.forEach(app => {
const div = document.createElement("div");
div.className = "app-icon";
div.onclick = () => window.open(app.url, "_blank", "noopener,noreferrer");
div.innerHTML = `
<img src="${app.icon}" alt="${app.name}">
<span>${app.name}</span>
`;
container.appendChild(div);
});
}
loadApps();

12
apps.json Normal file
View file

@ -0,0 +1,12 @@
[
{
"name": "Google",
"icon": "icons/google.png",
"url": "https://google.com"
},
{
"name": "GitHub",
"icon": "icons/github.png",
"url": "https://github.com"
}
]

BIN
icons/github.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
icons/google.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

12
index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Folder style macOS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="folder" id="folder"></div>
<script src="app.js"></script>
</body>
</html>

42
style.css Normal file
View file

@ -0,0 +1,42 @@
body {
background: #1e1e1e;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color: #f5f5f5;
}
.folder {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
gap: 24px;
padding: 32px;
justify-content: center;
}
.app-icon {
text-align: center;
cursor: pointer;
user-select: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.app-icon img {
width: 72px;
height: 72px;
border-radius: 20px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
.app-icon span {
display: block;
margin-top: 8px;
font-size: 13px;
color: #ddd;
}
.app-icon:hover {
transform: scale(1.08);
}
.app-icon:active {
transform: scale(0.97);
}