163 lines
6.1 KiB
HTML
163 lines
6.1 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Cici 的个人网站</title>
|
||
<link rel="stylesheet" href="/styles.css" />
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<a class="brand" href="#home" data-route="home" aria-label="回到首页">
|
||
<span class="brand-mark">C</span>
|
||
<span>Cici 的个人网站</span>
|
||
</a>
|
||
<nav class="nav" aria-label="主要导航">
|
||
<a href="#home" data-route="home">自我介绍</a>
|
||
<a href="#gallery" data-route="gallery">个人相册</a>
|
||
<a href="#diary" data-route="diary">日记本</a>
|
||
<button class="text-button" id="loginOpenButton" type="button">主人登录</button>
|
||
<button class="text-button hidden" id="logoutButton" type="button">退出</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="page active" id="homePage" data-page="home">
|
||
<div class="hero">
|
||
<article class="profile-card">
|
||
<p class="eyebrow">About Me</p>
|
||
<div class="profile-main">
|
||
<div class="avatar-preview" id="avatarPreview" aria-label="头像预览">
|
||
<span>C</span>
|
||
</div>
|
||
<div>
|
||
<h1 id="profileName">你好，我是 CICI</h1>
|
||
<p id="profileBio">
|
||
我是一名小学生女孩，喜欢画画、看书、拍照、记录生活。我的风格是甜甜的、
|
||
酷酷的，心里装着亮晶晶的快乐。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<form class="owner-panel hidden" id="profileForm">
|
||
<div class="section-title compact">
|
||
<p class="eyebrow">Owner</p>
|
||
<h2>编辑自我介绍</h2>
|
||
</div>
|
||
<label>
|
||
昵称
|
||
<input id="nameInput" type="text" maxlength="18" placeholder="比如：CICI" />
|
||
</label>
|
||
<label>
|
||
自我介绍
|
||
<textarea id="bioInput" maxlength="220" placeholder="写一段介绍自己的话"></textarea>
|
||
</label>
|
||
<label class="file-picker">
|
||
上传头像
|
||
<input id="avatarInput" type="file" accept="image/*" />
|
||
</label>
|
||
<button class="button primary" type="submit">保存自我介绍</button>
|
||
</form>
|
||
|
||
<section class="home-gallery">
|
||
<div class="home-gallery-header">
|
||
<div>
|
||
<p class="eyebrow">Gallery</p>
|
||
<h2>相册精选</h2>
|
||
</div>
|
||
<a class="button secondary" href="#gallery" data-route="gallery">查看全部</a>
|
||
</div>
|
||
<div class="gallery-grid home-gallery-grid" id="homeGalleryGrid" aria-live="polite"></div>
|
||
</section>
|
||
</section>
|
||
|
||
<section class="page band gallery-band" id="galleryPage" data-page="gallery">
|
||
<div class="section-title">
|
||
<p class="eyebrow">Gallery</p>
|
||
<h2>个人相册</h2>
|
||
</div>
|
||
|
||
<form class="owner-panel hidden folder-form" id="folderForm">
|
||
<label>
|
||
新建文件夹
|
||
<input id="folderNameInput" type="text" maxlength="24" placeholder="比如：旅行、学校、画画作品" />
|
||
</label>
|
||
<button class="button primary" type="submit">创建文件夹</button>
|
||
</form>
|
||
|
||
<div class="folder-tabs" id="folderTabs" aria-label="相册文件夹"></div>
|
||
|
||
<form class="owner-panel hidden" id="galleryForm">
|
||
<label>
|
||
上传到文件夹
|
||
<select id="uploadFolderSelect"></select>
|
||
</label>
|
||
<label class="file-picker">
|
||
选择照片
|
||
<input id="galleryInput" type="file" accept="image/*" multiple />
|
||
</label>
|
||
<button class="button primary" type="submit">上传到相册</button>
|
||
<p class="upload-status" id="galleryStatus" aria-live="polite"></p>
|
||
</form>
|
||
|
||
<div class="gallery-grid" id="galleryGrid" aria-live="polite"></div>
|
||
</section>
|
||
|
||
<section class="page band diary-band" id="diaryPage" data-page="diary">
|
||
<div class="section-title">
|
||
<p class="eyebrow">Diary</p>
|
||
<h2>日记本</h2>
|
||
</div>
|
||
|
||
<form class="owner-panel hidden diary-form" id="diaryForm">
|
||
<label>
|
||
今天的标题
|
||
<input id="diaryTitle" type="text" maxlength="24" placeholder="比如：开心的一天" />
|
||
</label>
|
||
<label>
|
||
今天发生了什么
|
||
<textarea id="diaryText" maxlength="360" placeholder="把今天的小心情写下来吧"></textarea>
|
||
</label>
|
||
<label class="file-picker">
|
||
上传日记图片
|
||
<input id="diaryImageInput" type="file" accept="image/*" />
|
||
</label>
|
||
<button class="button primary" type="submit">保存日记</button>
|
||
</form>
|
||
|
||
<div class="diary-list" id="diaryList" aria-live="polite"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<dialog class="login-dialog" id="loginDialog">
|
||
<form id="loginForm" method="dialog">
|
||
<h2>主人登录</h2>
|
||
<p>登录之后才能编辑自我介绍、管理相册和写日记。</p>
|
||
<label>
|
||
主人密码
|
||
<input id="passwordInput" type="password" autocomplete="current-password" />
|
||
</label>
|
||
<p class="form-message" id="loginMessage" aria-live="polite"></p>
|
||
<div class="dialog-actions">
|
||
<button class="button secondary" id="loginCancelButton" type="button">取消</button>
|
||
<button class="button primary" type="submit">登录</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog class="image-dialog" id="imageDialog">
|
||
<button class="dialog-close" id="imageCloseButton" type="button" aria-label="关闭大图">×</button>
|
||
<img id="imagePreview" alt="相册大图" />
|
||
</dialog>
|
||
|
||
<footer class="footer">
|
||
<span>Cici 的个人网站</span>
|
||
<span>欢迎来到我的小世界</span>
|
||
</footer>
|
||
|
||
<script src="/script.js"></script>
|
||
</body>
|
||
</html>
|