File size: 7,172 Bytes
3a08226 6d0320a | 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 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <!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">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<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>
<!-- Settings Panel -->
<arch-settings-panel id="settings-panel" class="fixed inset-0 translate-y-full transition-transform duration-300 ease-out z-50 bg-arch-bg"></arch-settings-panel>
<!-- Notification Shade -->
<arch-notifications id="notification-shade" class="fixed inset-0 -translate-y-full transition-transform duration-300 ease-out z-50 bg-arch-bg/95 backdrop-blur-xl"></arch-notifications>
<!-- Toast Container -->
<div id="toast-container" class="fixed top-24 left-1/2 -translate-x-1/2 z-50 pointer-events-none"></div>
<!-- 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="components/arch-settings-panel.js"></script>
<script src="components/arch-notifications.js"></script>
<script src="js/worker-bridge.js"></script>
<script src="js/gesture-controller.js"></script>
<script src="js/android-bridge.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>
|