mobile ui rework: iOS-style home screen
Rename Android UI to Mobile; add notch, signal/wifi/battery status icons, glossy monochrome glass app icons, 2x2 clock widget, frosted floating dock, and dot page indicators. Remove lock-screen clock, theme chip, navbar, and search bar.
This commit is contained in:
dvorakmortonxd
parent
7446f6a0dc
commit
784334d4be
4 changed files with 334 additions and 207 deletions
|
|
@ -1,90 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { APPS, APP_BY_ID } from "./apps";
|
||||
import Clock from "./Clock";
|
||||
import { useTheme } from "./useTheme";
|
||||
import { WALLPAPER } from "../data";
|
||||
|
||||
const DOCK_IDS = ["projects", "services", "socials", "contributions"];
|
||||
|
||||
export default function AndroidHome() {
|
||||
const { theme, toggle } = useTheme();
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const openApp = openId ? APP_BY_ID[openId] : null;
|
||||
|
||||
const renderIcon = (appId: string, inDock = false) => {
|
||||
const app = APP_BY_ID[appId];
|
||||
if (!app) return null;
|
||||
return (
|
||||
<button
|
||||
key={app.id}
|
||||
type="button"
|
||||
className={"android-app" + (inDock ? " in-dock" : "")}
|
||||
onClick={() => setOpenId(app.id)}
|
||||
>
|
||||
<span className="android-app-icon" style={{ background: app.color }}>
|
||||
{app.icon}
|
||||
</span>
|
||||
{!inDock && <span className="android-app-label">{app.title}</span>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="android-root">
|
||||
{openApp ? (
|
||||
<div className="android-app-view">
|
||||
<header className="android-appbar">
|
||||
<button
|
||||
type="button"
|
||||
className="android-back"
|
||||
onClick={() => setOpenId(null)}
|
||||
aria-label="Back"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<span className="android-appbar-title">{openApp.title}</span>
|
||||
</header>
|
||||
<div className="android-app-body app-surface">{openApp.content}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="android-home" style={{ backgroundImage: `url('${WALLPAPER}')` }}>
|
||||
<div className="android-statusbar">
|
||||
<span className="android-status-time">
|
||||
<Clock />
|
||||
</span>
|
||||
<span className="android-status-icons" aria-hidden="true">
|
||||
ᯤ ▮
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="android-theme-chip"
|
||||
onClick={toggle}
|
||||
aria-label={`Switch to ${theme === "skeuo" ? "gruvbox" : "Desktop"} theme`}
|
||||
>
|
||||
<span aria-hidden="true">🎨</span>
|
||||
<span>{theme === "skeuo" ? "Gruvbox" : "Desktop"}</span>
|
||||
</button>
|
||||
|
||||
<div className="android-glance">
|
||||
<div className="android-glance-time">
|
||||
<Clock />
|
||||
</div>
|
||||
<div className="android-glance-sub">dvorakmortonxd.dev</div>
|
||||
</div>
|
||||
|
||||
<div className="android-grid">{APPS.map((app) => renderIcon(app.id))}</div>
|
||||
|
||||
<div className="android-dock">{DOCK_IDS.map((id) => renderIcon(id, true))}</div>
|
||||
|
||||
<div className="android-navbar">
|
||||
<span className="android-navbar-pill" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
132
src/app/components/MobileHome.tsx
Normal file
132
src/app/components/MobileHome.tsx
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useSyncExternalStore } from "react";
|
||||
import { APPS, APP_BY_ID } from "./apps";
|
||||
import Clock from "./Clock";
|
||||
import { WALLPAPER } from "../data";
|
||||
|
||||
const DOCK_IDS = ["projects", "services", "socials", "contributions"];
|
||||
|
||||
function subscribe(callback: () => void) {
|
||||
const id = window.setInterval(callback, 1000);
|
||||
return () => window.clearInterval(id);
|
||||
}
|
||||
|
||||
function HomeWidget() {
|
||||
const date = useSyncExternalStore(
|
||||
subscribe,
|
||||
() =>
|
||||
new Date().toLocaleDateString([], {
|
||||
weekday: "long",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
}),
|
||||
() => ""
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mobile-widget">
|
||||
<div className="mobile-widget-time">
|
||||
<Clock />
|
||||
</div>
|
||||
<div className="mobile-widget-date" suppressHydrationWarning>
|
||||
{date}
|
||||
</div>
|
||||
<div className="mobile-widget-foot">dvorakmortonxd.dev</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MobileHome() {
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const openApp = openId ? APP_BY_ID[openId] : null;
|
||||
|
||||
const renderIcon = (appId: string, inDock = false) => {
|
||||
const app = APP_BY_ID[appId];
|
||||
if (!app) return null;
|
||||
return (
|
||||
<button
|
||||
key={app.id}
|
||||
type="button"
|
||||
className={"mobile-app" + (inDock ? " in-dock" : "")}
|
||||
onClick={() => setOpenId(app.id)}
|
||||
>
|
||||
<span className="mobile-app-icon">
|
||||
<span className="mobile-app-glyph">{app.icon}</span>
|
||||
</span>
|
||||
{!inDock && <span className="mobile-app-label">{app.title}</span>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mobile-root">
|
||||
{openApp ? (
|
||||
<div className="mobile-app-view">
|
||||
<header className="mobile-appbar">
|
||||
<button
|
||||
type="button"
|
||||
className="mobile-back"
|
||||
onClick={() => setOpenId(null)}
|
||||
aria-label="Back"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<span className="mobile-appbar-title">{openApp.title}</span>
|
||||
</header>
|
||||
<div className="mobile-app-body app-surface">{openApp.content}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mobile-home" style={{ backgroundImage: `url('${WALLPAPER}')` }}>
|
||||
<div className="mobile-notch" aria-hidden="true" />
|
||||
|
||||
<div className="mobile-statusbar">
|
||||
<span className="mobile-status-time">
|
||||
<Clock />
|
||||
</span>
|
||||
<span className="mobile-status-icons" aria-hidden="true">
|
||||
<svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor">
|
||||
<rect x="0" y="7" width="3" height="4" rx="1" />
|
||||
<rect x="4.5" y="5" width="3" height="6" rx="1" />
|
||||
<rect x="9" y="2.5" width="3" height="8.5" rx="1" />
|
||||
<rect x="13.5" y="0" width="3" height="11" rx="1" />
|
||||
</svg>
|
||||
<svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor">
|
||||
<path d="M8 2.2c2.3 0 4.4.9 6 2.4l-1.2 1.3A6.9 6.9 0 0 0 8 4.2a6.9 6.9 0 0 0-4.8 1.7L2 4.6A8.5 8.5 0 0 1 8 2.2Z" />
|
||||
<path d="M8 5.6c1.5 0 2.8.6 3.8 1.6l-1.2 1.3A3.7 3.7 0 0 0 8 7.6c-1 0-1.9.4-2.6 1l-1.2-1.4A5.7 5.7 0 0 1 8 5.6Z" />
|
||||
<path d="M8 9a1.4 1.4 0 1 1 0 2.8A1.4 1.4 0 0 1 8 9Z" />
|
||||
</svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" aria-hidden="true">
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="21"
|
||||
height="11"
|
||||
rx="3.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
opacity="0.5"
|
||||
/>
|
||||
<rect x="2" y="2" width="14" height="8" rx="2" fill="currentColor" />
|
||||
<path d="M23 4v4a2 2 0 0 0 0-4Z" fill="currentColor" opacity="0.5" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mobile-grid">
|
||||
<HomeWidget />
|
||||
{APPS.map((app) => renderIcon(app.id))}
|
||||
</div>
|
||||
|
||||
<div className="mobile-dock">{DOCK_IDS.map((id) => renderIcon(id, true))}</div>
|
||||
|
||||
<div className="mobile-pagedots" aria-hidden="true">
|
||||
<span className="active" />
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
import { useTheme } from "./useTheme";
|
||||
import TerminalLayout from "./TerminalLayout";
|
||||
import WindowsDesktop from "./WindowsDesktop";
|
||||
import AndroidHome from "./AndroidHome";
|
||||
import MobileHome from "./MobileHome";
|
||||
|
||||
export default function ThemeRoot() {
|
||||
const { theme } = useTheme();
|
||||
|
|
@ -18,7 +18,7 @@ export default function ThemeRoot() {
|
|||
<WindowsDesktop />
|
||||
</div>
|
||||
<div className="skeuo-mobile-root">
|
||||
<AndroidHome />
|
||||
<MobileHome />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue