<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>藤原の个人主页</title>
<style>
/* 基础样式 */
* {
outline: none;
box-sizing: border-box;
}
body {
font-family: "Source Sans Pro", sans-serif;
background-color: #373e57;
color: #ccc8db;
margin: 0;
padding: 0;
}
/* 主容器 */
.container {
background-color: #151728;
display: flex;
max-width: 1600px;
height: 100vh;
overflow: hidden;
margin: 0 auto;
}
/* 左侧边栏 */
.left-side {
width: 260px;
border-right: 1px solid #272a3a;
display: flex;
flex-direction: column;
transition: 0.3s;
background-color: #151728;
overflow: auto;
flex-shrink: 0;
}
/* 右侧边栏 */
.right-side {
width: 280px;
flex-shrink: 0;
margin-left: auto;
overflow: auto;
background-color: #151728;
display: flex;
flex-direction: column;
}
/* 主要内容区域 */
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: #181d2f;
}
/* 响应式设计 - 左侧边栏 */
@media screen and (max-width: 930px) {
.left-side.active {
z-index: 4;
}
.left-side.active > *:not(.logo) {
opacity: 1;
transition: 0.3s 0.2s;
}
.left-side.active .left-side-button svg:first-child {
opacity: 0;
}
.left-side.active .left-side-button svg:last-child {
transform: translate(-50%, -50%);
opacity: 1;
}
.left-side:not(.active) {
width: 56px;
overflow: hidden;
}
.left-side:not(.active) > *:not(.logo):not(.left-side-button) {
opacity: 0;
}
.left-side:not(.active) .logo {
writing-mode: vertical-lr;
transform: rotate(180deg);
transform-origin: bottom;
display: flex;
align-items: center;
margin-top: -10px;
}
}
/* 响应式设计 - 右侧边栏 */
@media screen and (max-width: 1210px) {
.right-side {
position: fixed;
right: 0;
top: 0;
transition: 0.3s;
height: 100%;
transform: translateX(280px);
z-index: 4;
}
.right-side.active {
transform: translatex(0);
}
}
/* 顶部Logo */
.logo {
font-family: "DM Sans", sans-serif;
font-size: 15px;
color: #fff;
font-weight: 600;
text-align: center;
height: 68px;
line-height: 68px;
letter-spacing: 4px;
position: sticky;
top: 0;
background: linear-gradient(to bottom, #151728 0%, #151728 76%, rgba(21, 23, 40, 0) 100%);
}
/* 侧边栏标题 */
.side-title {
font-family: "DM Sans", sans-serif;
color: #5c5e6e;
font-size: 15px;
font-weight: 600;
margin-bottom: 20px;
}
/* 侧边栏内容区域 */
.side-wrapper {
padding: 30px;
}
/* 侧边栏菜单 */
.side-menu {
display: flex;
flex-direction: column;
font-size: 15px;
white-space: nowrap;
}
.side-menu svg {
margin-right: 16px;
width: 16px;
}
.side-menu a {
text-decoration: none;
color: #9c9cab;
display: flex;
align-items: center;
}
.side-menu a:hover {
color: #fff;
}
.side-menu a:not(:last-child) {
margin-bottom: 20px;
}
/* 底部关注区域 */
.follow-me {
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
margin-top: auto;
overflow: hidden;
color: #9c9cab;
padding: 0 20px;
height: 52px;
flex-shrink: 0;
border-top: 1px solid #272a3a;
position: relative;
}
.follow-me svg {
width: 16px;
height: 16px;
margin-right: 8px;
}
.follow-text {
display: flex;
align-items: center;
transition: 0.3s;
}
.follow-me:hover .follow-text {
transform: translateY(100%);
}
.follow-me:hover .developer {
top: 0;
}
.developer {
position: absolute;
color: #fff;
left: 0;
top: -100%;
display: flex;
transition: 0.3s;
padding: 0 20px;
align-items: center;
background-color: #272a3a;
width: 100%;
height: 100%;
}
.developer img {
border-radius: 50%;
width: 26px;
height: 26px;
object-fit: cover;
margin-right: 10px;
}
/* 搜索栏 */
.search-bar {
height: 60px;
background-color: #151728;
z-index: 3;
position: relative;
}
.search-bar input {
height: 100%;
width: 100%;
display: block;
background-color: transparent;
border: none;
padding: 0 54px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3e%3cpath d='M508.9 478.7L360 330a201.6 201.6 0 0045.2-127.3C405.3 90.9 314.4 0 202.7 0S0 91 0 202.7s91 202.6 202.7 202.6c48.2 0 92.4-17 127.3-45.2L478.7 509c4.2 4.1 11 4.1 15 0l15.2-15.1c4.1-4.2 4.1-11 0-15zm-306.2-116c-88.3 0-160-71.8-160-160s71.7-160 160-160 160 71.7 160 160-71.8 160-160 160z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%235C5D71'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 16px;
background-position: 25px 50%;
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 600;
}
.search-bar input::placeholder {
color: #5c5d71;
}
/* 主内容容器 */
.main-container {
padding: 20px;
flex-grow: 1;
overflow: auto;
background-color: #24273b;
}
/* 个人资料区域 */
.profile {
position: relative;
height: 40vh;
min-height: 250px;
max-height: 350px;
z-index: 1;
}
.profile-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 4px;
}
.profile:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
left: 0;
top: 0;
background-image: url("https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
filter: blur(50px);
opacity: 0.7;
}
/* 个人资料菜单 */
.profile-menu {
position: absolute;
bottom: 0;
padding-left: 200px;
background: #151728;
width: 100%;
display: flex;
border-radius: 0 0 4px 4px;
}
.profile-menu-link {
padding: 20px 16px;
color: #5c5e6e;
transition: 0.3s;
cursor: pointer;
}
.profile-menu-link.active, .profile-menu-link:hover {
color: #fff;
background-color: #1b1d2e;
border-bottom: 3px solid #1488fa;
}
/* 头像区域 */
.profile-avatar {
position: absolute;
align-items: center;
display: flex;
z-index: 1;
bottom: 16px;
left: 24px;
}
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #151728;
}
.profile-name {
margin-left: 24px;
margin-bottom: 24px;
font-size: 22px;
color: #fff;
font-weight: 600;
font-family: "DM Sans", sans-serif;
}
/* 时间线布局 */
.timeline {
display: flex;
padding-top: 20px;
position: relative;
z-index: 2;
}
.timeline-left {
width: 310px;
flex-shrink: 0;
}
.timeline-right {
flex-grow: 1;
padding-left: 20px;
}
@media screen and (max-width: 768px) {
.timeline {
flex-wrap: wrap;
flex-direction: column-reverse;
}
.timeline-right {
padding-left: 0;
margin-bottom: 20px;
}
.timeline-left {
width: 100%;
}
}
/* 通用卡片样式 */
.box {
background-color: #151728;
border-radius: 4px;
}
/* 个人简介卡片 */
.intro {
padding: 20px;
}
.intro-title {
font-family: "DM Sans", sans-serif;
color: #5c5e6e;
font-weight: 600;
font-size: 18px;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.intro-menu {
background-color: #8f98a9;
box-shadow: -8px 0 0 0 #8f98a9, 8px 0 0 0 #8f98a9;
width: 5px;
height: 5px;
border: 0;
padding: 0;
border-radius: 50%;
margin-left: auto;
margin-right: 8px;
}
/* 信息项 */
.info {
font-size: 15px;
}
.info-item {
display: flex;
color: #c3c5d5;
}
.info-item + .info-item {
margin-top: 14px;
}
.info-item a {
margin-left: 6px;
color: #1771d6;
text-decoration: none;
}
.info-item svg {
width: 16px;
margin-right: 10px;
}
/* 活动卡片 */
.event {
position: relative;
margin-top: 20px;
padding: 10px;
}
.event-wrapper {
position: relative;
}
.event-img {
max-width: 100%;
display: block;
padding-bottom: 12px;
}
.event-date {
position: absolute;
left: 20px;
top: 15px;
}
.event-month {
background-color: #1687fa;
padding: 7px 20px;
font-weight: 600;
font-family: "DM Sans", sans-serif;
color: #fff;
text-align: center;
border-radius: 4px 4px 0 0;
}
.event-day {
width: 100%;
backdrop-filter: blur(4px);
color: #fff;
font-size: 22px;
font-weight: 600;
font-family: "DM Sans", sans-serif;
background-color: rgba(0, 0, 0, 0.4);
padding: 6px 0;
text-align: center;
}
.event-title {
color: #c3c5d5;
margin-bottom: 5px;
font-family: "DM Sans", sans-serif;
font-weight: 600;
padding: 0 14px;
}
.event-subtitle {
color: #5c5e6e;
font-family: "DM Sans", sans-serif;
font-size: 13px;
font-weight: 500;
padding: 0 14px;
}
/* 页面卡片 */
.pages {
margin-top: 20px;
padding: 20px;
}
/* 用户卡片 */
.user {
display: flex;
align-items: center;
cursor: pointer;
}
.user + .user {
margin-top: 18px;
}
.user-img {
border-radius: 50%;
width: 45px;
height: 45px;
margin-right: 15px;
object-fit: cover;
object-position: center;
}
.username {
font-size: 15px;
font-family: "DM Sans", sans-serif;
}
/* 状态菜单 */
.status-menu {
padding: 20px;
display: flex;
align-items: center;
}
.status-menu-item {
text-decoration: none;
color: #ccc8db;
padding: 10px 14px;
line-height: 0.7;
font-family: "DM Sans", sans-serif;
font-weight: 500;
border-radius: 20px;
}
.status-menu-item.active, .status-menu-item:hover {
background-color: #2e2e40;
color: #fff;
}
.status-menu-item + .status-menu-item {
margin-left: 10px;
}
@media screen and (max-width: 500px) {
.status-menu {
font-size: 14px;
}
.status-menu-item + .status-menu-item {
margin-left: 0;
}
}
.status-img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
margin-right: 20px;
}
.status-main {
padding: 0 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #272a3a;
padding-bottom: 20px;
flex-wrap: wrap;
}
.status-textarea {
flex-grow: 1;
background-color: transparent;
border: none;
resize: none;
margin-top: 15px;
color: #fff;
max-width: calc(100% - 70px);
}
.status-textarea::placeholder {
color: #5c5d71;
}
/* 状态操作按钮 */
.status-actions {
display: flex;
padding: 10px 20px;
}
.status-action {
text-decoration: none;
color: #ccc8db;
margin-right: 20px;
display: flex;
align-items: center;
}
.status-action svg {
width: 16px;
flex-shrink: 0;
margin-right: 8px;
}
@media screen and (max-width: 1320px) {
.status-action {
width: 16px;
overflow: hidden;
color: transparent;
white-space: nowrap;
}
}
.status-share {
background-color: #1b86f9;
border: none;
color: #fff;
border-radius: 4px;
padding: 10px 20px;
margin-left: auto;
box-shadow: 0 0 20px #1b86f9;
cursor: pointer;
}
/* 相册卡片 */
.album {
padding-top: 20px;
margin-top: 20px;
}
.album .status-main {
border: none;
display: flex;
}
.album .intro-menu {
margin-bottom: auto;
margin-top: 5px;
}
.album-detail {
width: calc(100% - 110px);
}
.album-title span {
color: #1771d6;
cursor: pointer;
}
.album-date {
font-size: 15px;
color: #595c6c;
margin-top: 4px;
}
.album-content {
padding: 0 20px 20px;
}
.album-photo {
width: 100%;
object-fit: cover;
object-position: center;
border-radius: 4px;
margin-top: 10px;
}
.album-photos {
display: flex;
margin-top: 20px;
max-height: 30vh;
}
.album-photos > .album-photo {
width: 50%;
}
.album-right {
width: 50%;
margin-left: 10px;
line-height: 0;
display: flex;
flex-direction: column;
}
.album-right .album-photo {
height: calc(50% - 10px);
}
.album-actions {
padding: 0 20px 20px;
}
.album-action {
margin-right: 20px;
text-decoration: none;
color: #a2a4b4;
display: inline-flex;
align-items: center;
font-weight: 600;
}
.album-action:hover {
color: #fff;
}
.album-action svg {
width: 16px;
margin-right: 6px;
}
/* 账户按钮 */
.account-button {
border: 0;
background: 0;
color: #64677a;
padding: 0;
cursor: pointer;
position: relative;
}
.account-button svg {
width: 20px;
}
.account-button:not(.right-side-button) + .account-button:before {
position: absolute;
right: 0px;
top: -2px;
background-color: #1b86f8;
width: 8px;
height: 8px;
border-radius: 50%;
content: "";
border: 2px solid #151728;
}
.account-profile {
width: 28px;
height: 28px;
border-radius: 50%;
margin: 0 10px;
}
.account-user {
display: inline-flex;
align-items: center;
color: #64677a;
font-weight: 600;
}
.account-user span {
font-size: 10px;
font-weight: normal;
}
/* 账户区域 */
.account {
height: 60px;
display: flex;
justify-content: space-evenly;
align-items: center;
position: sticky;
top: 0;
background-color: #151728;
z-index: 3;
flex-shrink: 0;
}
/* 故事区域 */
.stories {
border-bottom: 1px solid #272a3a;
}
.stories .user-img {
border: 2px solid #e2b96c;
}
.stories .album-date {
font-family: "Source Sans Pro", sans-serif;
}
/* 用户状态指示器 */
.user-status {
background-color: #7fd222;
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: auto;
}
.user-status.offline {
background-color: #606a8d;
}
.user-status.idle {
background-color: #dd1c20;
}
/* 联系人区域 */
.contacts .username {
display: flex;
flex: 1;
align-items: center;
}
/* 右侧搜索栏 */
.right-search svg {
width: 16px;
height: 16px;
}
.right-search {
padding-right: 10px;
display: flex;
align-items: center;
border-top: 1px solid #272a3a;
position: sticky;
bottom: 0;
margin-top: auto;
}
.right-search input {
padding-right: 10px;
}
.search-bar-svgs {
color: #656679;
display: flex;
}
.search-bar-svgs svg {
margin-right: 16px;
}
/* 遮罩层 */
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(36, 39, 59, 0.8);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.3s;
}
@media screen and (max-width: 1210px) {
.overlay.active {
z-index: 3;
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
/* 右侧边栏按钮 */
.right-side-button {
position: absolute;
right: 0;
top: 0;
height: 100%;
border: 0;
width: 52px;
background-color: #1e2031;
border-left: 1px solid #272a3a;
color: #fff;
display: none;
cursor: pointer;
}
.right-side-button:before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: #1b86f8;
border: 2px solid #1e2031;
top: 13px;
right: 12px;
}
.right-side-button svg {
width: 22px;
}
@media screen and (max-width: 1210px) {
.right-side-button {
display: block;
}
}
/* 左侧边栏按钮 */
.left-side-button {
display: none;
}
@media screen and (max-width: 930px) {
.left-side-button {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
height: 60px;
background-color: rgba(39, 42, 58, 0.5);
border: 0;
padding: 0;
line-height: 0;
color: #fff;
border-bottom: 1px solid #272a3a;
}
.left-side-button svg {
transition: 0.2s;
width: 24px;
}
.left-side-button svg:last-child {
position: absolute;
left: 50%;
transform: translate(100%, -50%);
top: 50%;
opacity: 0;
}
}
/* 响应式设计 - 个人资料区域 */
@media screen and (max-width: 700px) {
.profile-avatar {
top: -25px;
left: 50%;
transform: translatex(-50%);
align-items: center;
flex-direction: column;
justify-content: center;
}
.profile-img {
height: 100px;
width: 100px;
}
.profile-name {
margin: 5px 0;
}
.profile-menu {
padding-left: 0;
width: 100%;
overflow: auto;
justify-content: center;
}
.profile-menu-link {
padding: 16px;
font-size: 15px;
}
}
/* 响应式设计 - 个人资料菜单 */
@media screen and (max-width: 480px) {
.profile-menu-link:nth-last-child(1),
.profile-menu-link:nth-last-child(2) {
display: none;
}
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 10px;
border-radius: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.01);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.11);
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<!-- 主容器 -->
<div class="container" x-data="{ rightSide: false, leftSide: false }">
<!-- 左侧边栏 - 导航菜单 -->
<div class="left-side" :class="{'active' : leftSide}">
<!-- 左侧边栏切换按钮 -->
<div class="left-side-button" @click="leftSide = !leftSide">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M19 12H5M12 19l-7-7 7-7" />
</svg>
</div>
<!-- Logo -->
<div class="logo">SOCIAL</div>
<!-- 主菜单 -->
<div class="side-wrapper">
<div class="side-title">MENU</div>
<div class="side-menu">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
<path d="M9 22V12h6v10" />
</svg>
Home
</a>
<a href="#">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
</svg>
News
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
Explore
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
</svg>
Files
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<path d="M21 15l-5-5L5 21" />
</svg>
Gallery
</a>
</div>
</div>
<!-- 收藏菜单 -->
<div class="side-wrapper">
<div class="side-title">FAVORITES</div>
<div class="side-menu">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
</svg>
Favorites
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
<path d="M16 2v4M8 2v4M3 10h18" />
</svg>
Events
</a>
</div>
</div>
<!-- 关注我区域 -->
<a href="#" class="follow-me" target="_blank">
<span class="follow-text">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
Follow me
</span>
<span class="developer">
<img src="https://pbs.twimg.com/profile_images/1253782473953157124/x56UURmt_400x400.jpg" />
Developer Info
</span>
</a>
</div>
<!-- 主内容区域 -->
<div class="main">
<!-- 搜索栏 -->
<div class="search-bar">
<input type="text" placeholder="Search" />
<button class="right-side-button" @click="rightSide = !rightSide">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
<!-- 主内容容器 -->
<div class="main-container">
<!-- 个人资料区域 -->
<div class="profile">
<div class="profile-avatar">
<img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="profile-img">
<div class="profile-name">Quan Ha</div>
</div>
<img src="https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="profile-cover">
<div class="profile-menu">
<a class="profile-menu-link active">Timeline</a>
<a class="profile-menu-link">About</a>
<a class="profile-menu-link">Friends</a>
<a class="profile-menu-link">Photos</a>
</div>
</div>
<!-- 时间线布局 -->
<div class="timeline">
<!-- 左侧时间线 - 个人信息和活动 -->
<div class="timeline-left">
<!-- 个人简介卡片 -->
<div class="intro box">
<div class="intro-title">
Introduction
<button class="intro-menu"></button>
</div>
<div class="info">
<div class="info-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.889 503.889" fill="currentColor">
<path d="M453.727 114.266H345.151V70.515c0-20.832-16.948-37.779-37.78-37.779H196.517c-20.832 0-37.78 16.947-37.78 37.779v43.751H50.162C22.502 114.266 0 136.769 0 164.428v256.563c0 27.659 22.502 50.161 50.162 50.161h403.565c27.659 0 50.162-22.502 50.162-50.161V164.428c0-27.659-22.503-50.162-50.162-50.162zm-262.99-43.751a5.786 5.786 0 015.78-5.779h110.854a5.786 5.786 0 015.78 5.779v43.751H190.737zM32 164.428c0-10.015 8.147-18.162 18.162-18.162h403.565c10.014 0 18.162 8.147 18.162 18.162v23.681c0 22.212-14.894 42.061-36.22 48.27l-167.345 48.723a58.482 58.482 0 01-32.76 0L68.22 236.378C46.894 230.169 32 210.321 32 188.109zm421.727 274.725H50.162c-10.014 0-18.162-8.147-18.162-18.161V253.258c8.063 6.232 17.254 10.927 27.274 13.845 184.859 53.822 175.358 52.341 192.67 52.341 17.541 0 7.595 1.544 192.67-52.341 10.021-2.918 19.212-7.613 27.274-13.845v167.733c.001 10.014-8.147 18.162-18.161 18.162z" />
</svg>
Product Designer at <a href="#">Bravebist</a>
</div>
<div class="info-item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
<path d="M9 22V12h6v10" />
</svg>
Live in <a href="#">Hanoi, Vietnam</a>
</div>
<div class="info-item">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M437 75C388.7 26.6 324.4 0 256 0S123.3 26.6 75 75C26.6 123.3 0 187.6 0 256s26.6 132.7 75 181c48.3 48.4 112.6 75 181 75s132.7-26.6 181-75c48.4-48.3 75-112.6 75-181s-26.6-132.7-75-181zM252.4 481.9c-52-.9-103.7-19.5-145.2-55.8L256 277.2l21.7 21.8a165.9 165.9 0 00-35.7 87c-3.5 30.5 0 63.3 10.4 95.9z" />
</svg>
Player name <a href="#">Quan Ha</a>
</div>
</div>
</div>
<!-- 活动卡片 -->
<div class="event box">
<div class="event-wrapper">
<img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" class="event-img" />
<div class="event-date">
<div class="event-month">Jan</div>
<div class="event-day">01</div>
</div>
<div class="event-title">Winter Wonderland</div>
<div class="event-subtitle">01st Jan, 2019 07:00AM</div>
</div>
</div>
<!-- 页面卡片 -->
<div class="pages box">
<div class="intro-title">
Your pages
<button class="intro-menu"></button>
</div>
<div class="user">
<img src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE3Nzg0f" alt="" class="user-img">
<div class="username">Chandelio</div>
</div>
<div class="user">
<img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=d5849d81af587a09dbcf3f11f6fa122f" alt="" class="user-img">
<div class="username">Janet Jolie</div>
</div>
</div>
</div>
<!-- 右侧时间线 - 状态和相册 -->
<div class="timeline-right">
<!-- 状态发布区域 -->
<div class="status box">
<div class="status-menu">
<a class="status-menu-item active" href="#">Status</a>
<a class="status-menu-item" href="#">Photos</a>
<a class="status-menu-item" href="#">Videos</a>
</div>
<div class="status-main">
<img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" class="status-img">
<textarea class="status-textarea" placeholder="Write something to Quan Ha.."></textarea>
</div>
<div class="status-actions">
<a href="#" class="status-action">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 00-3-3.87"></path>
<path d="M16 3.13a4 4 0 010 7.75"></path>
</svg>
People
</a>
<a href="#" class="status-action">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 32c-88.004 0-160 70.557-160 156.801C96 306.4 256 480 256 480s160-173.6 160-291.199C416 102.557 344.004 32 256 32zm0 212.801c-31.996 0-57.144-24.645-57.144-56 0-31.357 25.147-56 57.144-56s57.144 24.643 57.144 56c0 31.355-25.148 56-57.144 56z" fill="#e21b1b" />
</svg>
Check in
</a>
<a href="#" class="status-action">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<circle cx="256" cy="256" r="256" fill="#ffca28" />
<path d="M399.68 208.32c-8.832 0-16-7.168-16-16 0-17.632-14.336-32-32-32s-32 14.368-32 32c0 8.832-7.168 16-16 16s-16-7.168-16-16c0-35.296 28.704-64 64-64s64 28.704 64 64c0 8.864-7.168 16-16 16zM207.68 208.32c-8.832 0-16-7.168-16-16 0-17.632-14.368-32-32-32s-32 14.368-32 32c0 8.832-7.168 16-16 16s-16-7.168-16-16c0-35.296 28.704-64 64-64s64 28.704 64 64c0 8.864-7.168 16-16 16z" fill="#6d4c41" />
<path d="M437.696 294.688c-3.04-4-7.744-6.368-12.736-6.368H86.4c-5.024 0-9.728 2.336-12.736 6.336-3.072 4.032-4.032 9.184-2.688 14.016C94.112 390.88 170.08 448.32 255.648 448.32s161.536-57.44 184.672-139.648c1.376-4.832.416-9.984-2.624-13.984z" fill="#fafafa" />
</svg>
Mood
</a>
<button class="status-share">Share</button>
</div>
</div>
<!-- 相册卡片 -->
<div class="album box">
<div class="status-main">
<img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" class="status-img" />
<div class="album-detail">
<div class="album-title"><strong>Quan Ha</strong> create new <span>album</span></div>
<div class="album-date">6 hours ago</div>
</div>
<button class="intro-menu"></button>
</div>
<div class="album-content">When the bass drops, so do my problems.
<div class="album-photos">
<img src="https://images.unsplash.com/photo-1508179719682-dbc62681c355?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80" alt="" class="album-photo" />
<div class="album-right">
<img src="https://images.unsplash.com/photo-1502872364588-894d7d6ddfab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="" class="album-photo" />
<img src="https://images.unsplash.com/photo-1566737236500-c8ac43014a67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="" class="album-photo" />
</div>
</div>
</div>
<div class="album-actions">
<a href="#" class="album-action">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
</svg>
87
</a>
<a href="#" class="album-action">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
</svg>
20
</a>
<a href="#" class="album-action">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M17 1l4 4-4 4" />
<path d="M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4" />
<path d="M21 13v2a4 4 0 01-4 4H3" />
</svg>
13
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧边栏 - 联系人和故事 -->
<div class="right-side" :class="{ 'active': rightSide }">
<!-- 账户控制区域 -->
<div class="account">
<button class="account-button">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<path d="M22 6l-10 7L2 6" />
</svg>
</button>
<button class="account-button">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
</svg>
</button>
<span class="account-user">Quan Ha
<img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="account-profile" alt="">
<span>▼</span>
</span>
</div>
<!-- 故事区域 -->
<div class="side-wrapper stories">
<div class="side-title">STORIES</div>
<div class="user">
<img src="https://pbs.twimg.com/profile_images/1102351320567164931/ZCkJgJIH.png" alt="" class="user-img">
<div class="username">Lisandro Matos
<div class="album-date">12 hours ago</div>
</div>
</div>
<div class="user">
<img src="https://pbs.twimg.com/profile_images/1153966095444992000/1lpIyHaQ.jpg" alt="" class="user-img">
<div class="username">Gvozden Boskovsky
<div class="album-date">29 minutes ago</div>
</div>
</div>
<div class="user">
<img src="https://images.unsplash.com/photo-1565464027194-7957a2295fb7?ixlib=rb-1.2.1&auto=format&fit=crop&w=3500&q=80" alt="" class="user-img">
<div class="username">Hnek Fortuin
<div class="album-date">3 hours ago</div>
</div>
</div>
</div>
<!-- 联系人区域 -->
<div class="side-wrapper contacts">
<div class="side-title">CONTACTS</div>
<div class="user">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="user-img">
<div class="username">Andrei Mashrin
<div class="user-status"></div>
</div>
</div>
<div class="user">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=046c29138c1335ef8edee7daf521ba50" class="user-img">
<div class="username">Aryn Jacobssen
<div class="user-status offline"></div>
</div>
</div>
<div class="user">
<img src="https://images.unsplash.com/photo-1575084713138-342cae5f8d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=958&q=80" class="user-img">
<div class="username">Carole Landu
<div class="user-status offline"></div>
</div>
</div>
<div class="user">
<img src="https://images.pexels.com/photos/598745/pexels-photo-598745.jpeg?h=350&auto=compress&cs=tinysrgb" class="user-img">
<div class="username">Chineze Afa
<div class="user-status"></div>
</div>
</div>
<div class="user">
<img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" class="user-img">
<div class="username">Mok Kwang
<div class="user-status"></div>
</div>
</div>
</div>
<!-- 右侧搜索栏 -->
<div class="search-bar right-search">
<input type="text" placeholder="Search" />
<div class="search-bar-svgs">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
</svg>
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.34 469.34">
<path d="M456.84 76.17l-64-64.06c-16.13-16.13-44.18-16.17-60.37.04L45.77 301.67a10.73 10.73 0 00-2.7 4.59L.41 455.73a10.68 10.68 0 0013.19 13.2l149.33-42.7c1.73-.5 3.3-1.42 4.58-2.7l289.33-286.98c8.06-8.07 12.5-18.78 12.5-30.19s-4.44-22.12-12.5-30.2zM285.99 89.74L325.25 129l-205 205-14.7-29.44a10.67 10.67 0 00-9.55-5.9H78.92L286 89.75zM26.2 443.14l13.9-48.64 34.74 34.74-48.64 13.9zm123.14-35.18L98.3 422.54l-51.5-51.5L61.38 320H89.4l18.38 36.77a10.67 10.67 0 004.77 4.77l36.78 18.39v28.03zm21.33-17.54v-17.09c0-4.04-2.28-7.72-5.9-9.54l-29.43-14.7 205-205 39.26 39.26-208.93 207.07zm271.11-268.7l-47.03 46.61L301 74.6l46.59-47c8.06-8.07 22.1-8.07 30.16 0l64 64c4.03 4.03 6.25 9.38 6.25 15.08s-2.22 11.05-6.22 15.05z" />
</svg>
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M12 5v14M5 12h14" />
</svg>
</div>
</div>
</div>
<!-- 遮罩层 - 用于移动端侧边栏弹出时覆盖主内容 -->
<div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
</div>
<!-- Alpine.js 用于交互功能 -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</body>
</html>
index.html
style.css
index.js