399 lines
23 KiB
HTML
399 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="zh-CN"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>个人 | The Digital Atelier</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary-fixed-variant": "#003ea7",
|
|
"on-surface": "#2d2e2e",
|
|
"surface-tint": "#006e28",
|
|
"primary": "#006e28",
|
|
"on-secondary-container": "#fefcff",
|
|
"inverse-surface": "#2f3031",
|
|
"surface-container-high": "#f5f5f5",
|
|
"on-surface-variant": "#5a5a5a",
|
|
"on-tertiary": "#ffffff",
|
|
"on-background": "#1b1c1c",
|
|
"on-tertiary-container": "#2d2e2e",
|
|
"surface-container-low": "#fafafa",
|
|
"on-primary": "#ffffff",
|
|
"surface": "#ffffff",
|
|
"primary-container": "#31aa4d",
|
|
"tertiary-fixed-dim": "#c7c6c6",
|
|
"error-container": "#ffdad6",
|
|
"secondary-container": "#286af9",
|
|
"surface-bright": "#faf9f9",
|
|
"surface-container-highest": "#e3e2e2",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-fixed": "#002107",
|
|
"secondary": "#0051d5",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"error": "#ba1a1a",
|
|
"on-primary-fixed-variant": "#00531c",
|
|
"tertiary": "#5e5e5e",
|
|
"on-primary-container": "#003610",
|
|
"on-secondary-fixed": "#00174b",
|
|
"secondary-fixed": "#dbe1ff",
|
|
"inverse-on-surface": "#f2f0f0",
|
|
"tertiary-fixed": "#e3e2e2",
|
|
"outline": "#d1d5db",
|
|
"surface-container": "#f7f7f7",
|
|
"on-error": "#ffffff",
|
|
"inverse-primary": "#69de7a",
|
|
"background": "#ffffff",
|
|
"surface-variant": "#f3f4f6",
|
|
"primary-fixed-dim": "#69de7a",
|
|
"surface-dim": "#dbdad9",
|
|
"tertiary-container": "#959595",
|
|
"secondary-fixed-dim": "#b4c5ff",
|
|
"on-tertiary-fixed": "#1b1c1c",
|
|
"on-tertiary-fixed-variant": "#464747",
|
|
"primary-fixed": "#86fb93",
|
|
"outline-variant": "#bdcab9",
|
|
"wolai-selected": "#fce4e4"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "4px",
|
|
"lg": "6px",
|
|
"xl": "8px",
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Inter", "sans-serif"],
|
|
"body": ["Inter", "sans-serif"],
|
|
"label": ["Inter", "sans-serif"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; color: #37352f; }
|
|
.material-symbols-outlined { font-size: 18px; vertical-align: middle; }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
.sidebar-item:hover .item-actions { opacity: 1; }
|
|
.triangle-toggle { transition: transform 0.2s; cursor: pointer; font-size: 14px !important; }
|
|
.triangle-toggle.open { transform: rotate(90deg); }
|
|
.block-spacing { margin-bottom: 2px; }
|
|
|
|
/* Sidebar View Switching */
|
|
.view-content { display: none; }
|
|
.view-active { display: block; }
|
|
.tab-active { color: #2d2e2e; font-weight: 600; border-bottom: 2px solid #006e28; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-white text-on-surface font-body">
|
|
<div class="flex h-screen overflow-hidden">
|
|
<!-- SideNavBar -->
|
|
<aside class="flex flex-col h-full bg-[#f7f7f5] dark:bg-stone-950 w-60 border-r border-stone-200/50 z-30 select-none">
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-2 mb-2 cursor-pointer transition-colors pt-2"><div class="flex flex-col w-full">
|
|
<!-- Workspace Header -->
|
|
<div class="flex items-center gap-2 px-3 py-2 cursor-pointer group">
|
|
<div class="w-8 h-8 rounded bg-[#d3544e] flex items-center justify-center shrink-0 text-white font-medium text-lg">L</div>
|
|
<span class="text-[17px] font-bold text-stone-800 truncate">liaibo的个人空间</span>
|
|
<span class="material-symbols-outlined text-stone-600 text-[20px] ml-auto">expand_more</span>
|
|
</div>
|
|
<!-- Toolbar Icons -->
|
|
<div class="flex items-center px-4 py-3 text-stone-600 w-full bg-[#f7f7f5]">
|
|
<div class="flex items-center justify-between w-full">
|
|
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">search</span>
|
|
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">account_tree</span>
|
|
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">bolt</span>
|
|
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">help</span>
|
|
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">inventory_2</span>
|
|
<span class="material-symbols-outlined text-[24px] cursor-pointer hover:bg-stone-200/50 rounded-sm p-0.5">more_horiz</span>
|
|
</div>
|
|
</div>
|
|
</div></div>
|
|
<!-- Main Tabs -->
|
|
<nav class="flex-1 overflow-y-auto no-scrollbar px-2 space-y-0.5">
|
|
<div class="mt-2">
|
|
<!-- Starred Section -->
|
|
<div class="flex items-center gap-1 px-3 py-1 text-stone-400 group cursor-pointer hover:bg-stone-200/50">
|
|
<span class="material-symbols-outlined text-[16px] text-orange-400">star</span>
|
|
<span class="text-[13px] font-medium text-stone-500">星标置顶</span>
|
|
<span class="material-symbols-outlined text-[16px] ml-0.5">expand_more</span>
|
|
</div>
|
|
<div class="px-1 space-y-[1px] mt-1 mb-6">
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="text-stone-300 font-bold ml-1">·</span>
|
|
<span class="material-symbols-outlined text-stone-500 text-[18px]">sticky_note_2</span>
|
|
<span class="text-[14px]">记录</span>
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="w-5 h-5 flex items-center justify-center overflow-hidden rounded-[2px]">
|
|
<img alt="calendar" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPgwtm4gouecfvHJ5gaIuLbl9hm82rutzZUhlxiM8_jyV_QiMLixw_ZWHlStFPooQgE6NpMVdOKuuV3LrNJbAuLGA_WBjHnfhP0NhZxpuysUjt_unG-_rzrfEWr-kspQ2pzJqK9nROJOz0DkSHoP6F-Y5y94TegpSKGg8Q3sWp-g3qDNQzBV5pK7h6jU26EIY9UtZDzCOM0Vel8YpfBIRKt-BbyFvvaJiITXMNKHJNHr2bf6Ciry1Ms1mj-mdZ18bjVgp7eojOfyc"/>
|
|
</span>
|
|
<span class="text-[14px]">日报</span>
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-green-600 text-[20px]">account_balance_wallet</span>
|
|
<span class="text-[14px]">阳阳钱包</span>
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="w-5 h-5 flex items-center justify-center overflow-hidden rounded-[2px]">
|
|
<img alt="calendar" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_jLmyrcqa9V9ShAaaFQtg4-H2_dirQ6z7nw_0a0sJvU8dbeLxV1uHAlwUxg8cyvojv7beX8Y9faeT4SOHn0EBMsv5XUiOsAh735lJcVuY-Tlkwv3zH8BavU-fEnHpCvtSounrGJ1uooJInzjY37ypbdeHhkQbeGMBbzupSc_dQXzISN2XG31ug4s3_9u4fDfVxKg0J92Ap-50Kc7STQgQDe5m1rZo71_1I7oP5en9N3gLgWlaRCtq5o7dHzwB5WbZpJhYVTQZC4M"/>
|
|
</span>
|
|
<span class="text-[14px]">My LifeOS</span>
|
|
</a>
|
|
</div>
|
|
<!-- Section with Tabs Toggle -->
|
|
<div class="flex items-center justify-between px-3 py-1 mt-4">
|
|
<div class="flex gap-4">
|
|
<button class="text-[13px] font-medium text-stone-400 hover:text-stone-700 transition-colors tab-active cursor-pointer pb-0.5" id="tab-pages" onclick="switchSidebarView('pages')">我的页面</button>
|
|
<button class="flex items-center gap-1 text-[13px] font-medium text-stone-400 hover:text-stone-700 transition-colors cursor-pointer pb-0.5" id="tab-files" onclick="switchSidebarView('files')">
|
|
<span class="material-symbols-outlined text-[16px]">folder_open</span>
|
|
Explorer
|
|
</button>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[16px] text-stone-400 ml-0.5 cursor-pointer">expand_more</span>
|
|
</div>
|
|
<!-- View: Page View (Default Wolai) -->
|
|
<div class="view-content view-active px-1 space-y-[1px] mt-2" id="view-pages">
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-stone-800 text-[20px] font-bold">content_cut</span>
|
|
<span class="text-[14px]">剪藏</span>
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-stone-800 text-[20px] font-variation-fill">home</span>
|
|
<span class="text-[14px]">个人</span>
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-stone-800 text-[20px]">domain</span>
|
|
<span class="text-[14px]">知识</span>
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-stone-800 text-[20px]">grid_view</span>
|
|
<span class="text-[14px]">项目</span>
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="material-symbols-outlined text-stone-800 text-[20px] font-variation-fill">book</span>
|
|
<span class="text-[14px]">工作资料</span>
|
|
</a>
|
|
<a class="flex items-center gap-2 px-3 py-1.5 text-stone-700 hover:bg-stone-200/60 rounded" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 text-[14px]">chevron_right</span>
|
|
<span class="w-5 h-5 flex items-center justify-center overflow-hidden rounded-[2px]">
|
|
<img alt="calendar" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPR9Mr19xWn9DuKwKZpoJ1tqeR0Y4FE1fMyBlvjZEYCkYOh1NowiLbxo7fSRF1cQBgV51cEwjMIB3HrjmsNtmvzYRdtnHDOse0Z77UzXg7ksBGpKrzJ48KxQ5wi-IKKzzqmc19EDDYRU997VaWrFWJdS2hI5MXjDqAOW9W1d8UfA2QRBmTtYhPfZr9dQb6jSnVaMxjNTchVEKJic6g8FSLbirEusH-O88rEdVehgQiLSu0NtV_QusN_BD98oEBqQt9L6VAiVy0byc"/>
|
|
</span>
|
|
<span class="text-[14px]">日常</span>
|
|
</a>
|
|
</div>
|
|
<!-- View: File View (VS Code Style) -->
|
|
<div class="view-content px-1 mt-2 mb-4" id="view-files">
|
|
<!-- Folder: Public -->
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
|
|
<span class="material-symbols-outlined text-[16px] text-stone-400">expand_more</span>
|
|
<span class="material-symbols-outlined text-[18px] text-amber-500">folder</span>
|
|
<span class="text-[13px] font-medium">public</span>
|
|
</div>
|
|
<div class="ml-4 border-l border-stone-200 pl-1">
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
|
|
<span class="material-symbols-outlined text-[18px] text-blue-400">html</span>
|
|
<span class="text-[13px]">index.html</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
|
|
<span class="material-symbols-outlined text-[18px] text-indigo-400">image</span>
|
|
<span class="text-[13px]">favicon.ico</span>
|
|
</div>
|
|
</div>
|
|
<!-- Folder: Src -->
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600 mt-1">
|
|
<span class="material-symbols-outlined text-[16px] text-stone-400">expand_more</span>
|
|
<span class="material-symbols-outlined text-[18px] text-amber-500">folder</span>
|
|
<span class="text-[13px] font-medium">src</span>
|
|
</div>
|
|
<div class="ml-4 border-l border-stone-200 pl-1">
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
|
|
<span class="material-symbols-outlined text-[18px] text-sky-500">javascript</span>
|
|
<span class="text-[13px]">App.js</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
|
|
<span class="material-symbols-outlined text-[18px] text-blue-500">css</span>
|
|
<span class="text-[13px]">styles.css</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
|
|
<span class="material-symbols-outlined text-[16px] text-stone-400">chevron_right</span>
|
|
<span class="material-symbols-outlined text-[18px] text-amber-500">folder</span>
|
|
<span class="text-[13px]">assets</span>
|
|
</div>
|
|
</div>
|
|
<!-- Root Files -->
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600 mt-1">
|
|
<span class="material-symbols-outlined text-[18px] text-stone-400">description</span>
|
|
<span class="text-[13px]">README.md</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 px-3 py-0.5 hover:bg-stone-200/50 cursor-pointer rounded text-stone-600">
|
|
<span class="material-symbols-outlined text-[18px] text-amber-600">settings</span>
|
|
<span class="text-[13px]">package.json</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Footer -->
|
|
<div class="mt-auto border-t border-stone-200">
|
|
<div class="flex w-full border-t border-stone-200 bg-[#f7f7f5]">
|
|
<button class="flex-1 flex items-center justify-center gap-2 py-3 border-r border-stone-200 hover:bg-stone-200/30 text-stone-600 transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">delete</span>
|
|
<span class="text-[14px]">垃圾箱</span>
|
|
</button>
|
|
<button class="flex-1 flex items-center justify-center gap-2 py-3 hover:bg-stone-200/30 text-stone-600 transition-colors">
|
|
<span class="w-4 h-4">
|
|
<svg fill="none" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L3 7V17L12 22L21 17V7L12 2Z" fill="#fcd34d" fill-opacity="0.6" stroke="#f59e0b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
|
<path d="M3 7L12 12L21 7" stroke="#f59e0b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
|
<path d="M12 22V12" stroke="#f59e0b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
|
</svg>
|
|
</span>
|
|
<span class="text-[14px]">模板中心</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 overflow-y-auto bg-white relative">
|
|
<!-- TopAppBar -->
|
|
<header class="flex justify-between items-center px-4 h-[44px] w-full sticky top-0 bg-white/90 backdrop-blur-sm z-40">
|
|
<div class="flex items-center gap-1.5 text-stone-500">
|
|
<span class="material-symbols-outlined hover:bg-stone-100 p-1 rounded cursor-pointer" data-icon="menu">menu</span>
|
|
<div class="flex items-center text-[13px] font-normal px-1">
|
|
<span class="hover:bg-stone-100 px-1.5 py-0.5 rounded cursor-pointer">The Digital Atelier</span>
|
|
<span class="mx-0.5 text-stone-300">/</span>
|
|
<span class="hover:bg-stone-100 px-1.5 py-0.5 rounded cursor-pointer text-stone-900 font-medium flex items-center gap-1">
|
|
<span class="material-symbols-outlined text-[16px]" data-icon="home">home</span>
|
|
个人
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-0.5">
|
|
<div class="flex items-center px-2 py-1 bg-green-50 text-green-700 rounded-full text-[11px] font-medium mr-2 gap-1 border border-green-100">
|
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
|
|
Public
|
|
</div>
|
|
<div class="flex items-center gap-0.5 text-stone-500">
|
|
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer" data-icon="star">star</span>
|
|
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer" data-icon="history">history</span>
|
|
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer text-green-600" data-icon="auto_awesome">auto_awesome</span>
|
|
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer" data-icon="search">search</span>
|
|
<span class="material-symbols-outlined hover:bg-stone-100 p-1.5 rounded cursor-pointer" data-icon="more_horiz">more_horiz</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Document Canvas -->
|
|
<article class="max-w-4xl mx-auto pt-[80px] pb-40 px-12 md:px-24">
|
|
<!-- Page Icon & Title -->
|
|
<div class="mb-8">
|
|
<div class="group relative inline-block mb-4">
|
|
<span class="material-symbols-outlined text-[72px] text-stone-800 cursor-default" data-icon="home">home</span>
|
|
</div>
|
|
<h1 class="text-4xl font-bold text-stone-900 tracking-tight leading-tight mb-2">个人</h1>
|
|
<div class="flex items-center gap-4 text-stone-400 text-[13px] border-b border-stone-100 pb-6 mb-8">
|
|
<span class="flex items-center gap-1.5 hover:text-stone-600 cursor-pointer"><span class="material-symbols-outlined text-[16px]" data-icon="face">face</span> 个人空间</span>
|
|
<span class="flex items-center gap-1.5"><span class="material-symbols-outlined text-[16px]" data-icon="calendar_today">calendar_today</span> 2024年5月20日</span>
|
|
</div>
|
|
</div>
|
|
<!-- Vertical Sub-page Links with Wolai Spacing -->
|
|
<section class="mb-10 space-y-[2px]">
|
|
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
|
|
<span class="material-symbols-outlined text-stone-400 group-hover:text-primary" data-icon="description">description</span>
|
|
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">我的文件</span>
|
|
</a>
|
|
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
|
|
<span class="material-symbols-outlined text-red-400" data-icon="filter_vintage">filter_vintage</span>
|
|
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">灵感库</span>
|
|
</a>
|
|
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
|
|
<span class="material-symbols-outlined text-amber-500" data-icon="sensor_door">sensor_door</span>
|
|
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">工作台</span>
|
|
</a>
|
|
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
|
|
<span class="material-symbols-outlined text-blue-500" data-icon="lock">lock</span>
|
|
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">私人保险箱</span>
|
|
</a>
|
|
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
|
|
<span class="material-symbols-outlined text-green-500" data-icon="book">book</span>
|
|
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">阅读清单</span>
|
|
</a>
|
|
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
|
|
<span class="material-symbols-outlined text-rose-500" data-icon="favorite">favorite</span>
|
|
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">健康追踪</span>
|
|
</a>
|
|
<a class="group flex items-center gap-2 py-1 px-1 -ml-1 hover:bg-stone-100 rounded transition-colors text-stone-700" href="#">
|
|
<span class="material-symbols-outlined text-indigo-400" data-icon="laptop_mac">laptop_mac</span>
|
|
<span class="text-[15px] font-normal underline decoration-stone-200 underline-offset-4">项目管理</span>
|
|
</a>
|
|
</section>
|
|
<!-- Editorial Content Blocks -->
|
|
<div class="space-y-6">
|
|
<p class="text-[16px] text-stone-800 leading-[1.8]">
|
|
欢迎来到你的数字工作室。这里是你整理思绪、捕获灵感并将其转化为现实的私人圣殿。每一个方块都承载着无限的可能性。
|
|
</p>
|
|
<div class="p-6 bg-[#f7f7f5] rounded-lg border-l-4 border-stone-300">
|
|
<div class="flex items-start gap-4">
|
|
<span class="material-symbols-outlined text-primary mt-0.5" data-icon="lightbulb">lightbulb</span>
|
|
<div class="space-y-2">
|
|
<h3 class="font-bold text-stone-800 text-[15px]">设计原则</h3>
|
|
<p class="text-[14px] text-stone-600 leading-relaxed">
|
|
我们追求的是“垂直节奏”。在你的数字化工坊中，呼吸感和平衡比任何繁杂的装饰都更为重要。请在此处记录你的第一条笔记。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-4 border-t border-stone-100">
|
|
<div class="text-stone-300 text-[15px] cursor-text select-none py-1 hover:bg-stone-50 rounded px-1 -mx-1">
|
|
输入 '/' 以插入块
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Floating Action Buttons -->
|
|
<div class="fixed bottom-6 right-6 flex flex-col gap-2 z-50">
|
|
<button class="bg-white border border-stone-200 text-stone-500 rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-stone-50 transition-all">
|
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
|
</button>
|
|
<button class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hover:opacity-90 transition-all scale-100 active:scale-95">
|
|
<span class="material-symbols-outlined" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
function switchSidebarView(view) {
|
|
const pagesView = document.getElementById('view-pages');
|
|
const filesView = document.getElementById('view-files');
|
|
const pagesTab = document.getElementById('tab-pages');
|
|
const filesTab = document.getElementById('tab-files');
|
|
|
|
if (view === 'pages') {
|
|
pagesView.classList.add('view-active');
|
|
filesView.classList.remove('view-active');
|
|
pagesTab.classList.add('tab-active');
|
|
filesTab.classList.remove('tab-active');
|
|
} else {
|
|
filesView.classList.add('view-active');
|
|
pagesView.classList.remove('view-active');
|
|
filesTab.classList.add('tab-active');
|
|
pagesTab.classList.remove('tab-active');
|
|
}
|
|
}
|
|
</script>
|
|
</body></html> |