File size: 6,189 Bytes
3a08226 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#020617">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Arch Launcher</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
arch: {
bg: '#0f172a',
fg: '#e2e8f0',
primary: '#06b6d4', // cyan-500
secondary: '#64748b', // slate-500
accent: '#22d3ee', // cyan-400
muted: '#334155', // slate-700
}
},
fontFamily: {
mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;700&display=swap');
</style>
</head>
<body class="bg-arch-bg text-arch-fg font-mono antialiased overflow-hidden h-screen w-screen selection:bg-arch-primary selection:text-black">
<!-- Top Status Bar -->
<arch-status-bar></arch-status-bar>
<!-- Main Content Area -->
<main id="main-screen" class="h-full w-full flex flex-col relative transition-transform duration-300 ease-out">
<!-- System Info Widget (Neofetch Style) -->
<section class="px-6 pt-20 pb-4">
<div class="border-l-2 border-arch-primary pl-4 space-y-1 text-xs sm:text-sm">
<div class="flex items-center gap-2 text-arch-primary font-bold">
<i data-feather="smartphone" class="w-4 h-4"></i>
<span>user@s23-ultra</span>
</div>
<div class="grid grid-cols-[80px_1fr] gap-x-4 text-arch-secondary">
<span class="text-arch-muted">OS:</span>
<span>Arch Linux Mobile (Android 14)</span>
<span class="text-arch-muted">Host:</span>
<span>SM-S918B</span>
<span class="text-arch-muted">Kernel:</span>
<span>6.1.25-android</span>
<span class="text-arch-muted">Uptime:</span>
<span id="uptime">3 days, 4 hrs</span>
<span class="text-arch-muted">Shell:</span>
<span>zsh 5.9</span>
<span class="text-arch-muted">Server:</span>
<span id="server-status" class="text-arch-accent animate-pulse">● checking...</span>
</div>
<div class="pt-2 flex gap-1">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="w-3 h-3 rounded-full bg-arch-primary"></span>
<span class="w-3 h-3 rounded-full bg-blue-500"></span>
<span class="w-3 h-3 rounded-full bg-purple-500"></span>
</div>
</div>
</section>
<!-- Favorites Grid -->
<section class="flex-1 px-6 py-4">
<div class="flex items-center gap-2 mb-4 text-xs text-arch-secondary uppercase tracking-widest border-b border-arch-muted pb-2">
<i data-feather="star" class="w-3 h-3"></i>
<span>~/favorites</span>
</div>
<arch-app-grid id="favorites-grid" class="grid grid-cols-4 gap-4"></arch-app-grid>
</section>
<!-- Bottom Dock -->
<section class="px-6 pb-8 pt-4 bg-gradient-to-t from-arch-bg to-transparent">
<div class="flex justify-around items-center bg-arch-muted/30 backdrop-blur-md rounded-2xl p-4 border border-arch-muted/50">
<arch-app-icon name="Phone" icon="phone" package="com.android.dialer"></arch-app-icon>
<arch-app-icon name="Messages" icon="message-square" package="com.google.android.apps.messaging"></arch-app-icon>
<arch-app-icon name="Browser" icon="globe" package="org.mozilla.firefox"></arch-app-icon>
<arch-app-icon name="Camera" icon="camera" package="com.sec.android.app.camera"></arch-app-icon>
</div>
</section>
<!-- Swipe Up Indicator -->
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 opacity-50 animate-bounce">
<div class="w-12 h-1 bg-arch-muted rounded-full"></div>
<span class="text-[10px] text-arch-secondary uppercase">App Drawer</span>
</div>
</main>
<!-- App Drawer (Hidden by default) -->
<arch-app-drawer id="app-drawer" class="fixed inset-0 translate-y-full transition-transform duration-300 ease-out z-50 bg-arch-bg"></arch-app-drawer>
<!-- Quick Settings / Server Panel -->
<arch-server-panel id="server-panel" class="fixed inset-0 -translate-x-full transition-transform duration-300 ease-out z-50 bg-arch-bg/95 backdrop-blur-xl"></arch-server-panel>
<!-- Scripts -->
<script src="components/arch-status-bar.js"></script>
<script src="components/arch-app-icon.js"></script>
<script src="components/arch-app-grid.js"></script>
<script src="components/arch-app-drawer.js"></script>
<script src="components/arch-server-panel.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html> |