<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POSTCRAFT - 社交媒体管理工具</title>
<style>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
:root {
--black: #000000;
--white: #ffffff;
--gray-100: #f4f6f9;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--shadow-brutal: 8px 8px 0px 0px rgba(0, 0, 0, 1);
--shadow-brutal-sm: 4px 4px 0px 0px rgba(0, 0, 0, 1);
--border-brutal: 4px solid var(--black);
--border-brutal-sm: 2px solid var(--black);
--border-radius: 12px;
--instagram-gradient: linear-gradient(to bottom right, #833ab4, #fd1d1d, #fcb045);
--twitter-gradient: #1da1f2;
--linkedin-gradient: #0077b5;
--audio-gradient: linear-gradient(to bottom right, #f472b6, #fb923c);
--video-gradient: linear-gradient(to bottom right, #3b82f6, #8b5cf6);
--image-gradient: linear-gradient(to bottom right, #10b981, #14b8a6);
--text-gradient: linear-gradient(to bottom right, #f59e0b, #d97706);
}
body {
background: linear-gradient(to bottom right, #ede9fe, #dbeafe);
min-height: 100vh;
padding: 16px;
}
.container {
min-height: 100vh;
}
/* 玻璃态容器 */
.glass-container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.3);
border: var(--border-brutal);
border-radius: 24px;
box-shadow: var(--shadow-brutal);
overflow: hidden;
}
/* 头部 */
.header {
border-bottom: var(--border-brutal);
padding: 24px;
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.logo {
font-size: 32px;
font-weight: 900;
letter-spacing: -0.5px;
}
.mobile-menu {
display: block;
}
.desktop-buttons {
display: none;
}
/* 主容器 */
.main-container {
display: flex;
flex-direction: column;
height: calc(100vh - 80px);
}
/* 侧边栏 */
.sidebar {
display: none;
border-right: var(--border-brutal);
background-color: rgba(255, 255, 255, 0.4);
padding: 16px;
width: 280px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
}
.nav-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
padding: 12px;
border-radius: var(--border-radius);
text-decoration: none;
color: var(--black);
}
.nav-item.active {
background-color: var(--black);
color: var(--white);
}
.nav-item:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 20px;
font-weight: 900;
margin-bottom: 16px;
}
.platform-buttons {
display: flex;
flex-direction: column;
gap: 8px;
}
/* 主内容 */
.main-content {
flex: 1;
overflow: auto;
padding: 24px;
}
.section {
margin-bottom: 40px;
}
/* 社交媒体卡片 */
.social-cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.social-card, .add-platform-card {
border: var(--border-brutal);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-brutal);
}
.social-card-header {
padding: 16px;
color: var(--white);
display: flex;
justify-content: space-between;
align-items: center;
}
.instagram .social-card-header {
background: var(--instagram-gradient);
}
.twitter .social-card-header {
background: var(--twitter-gradient);
}
.linkedin .social-card-header {
background: var(--linkedin-gradient);
}
.status-badge {
font-size: 12px;
font-weight: 700;
background-color: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 100px;
}
.platform-name {
font-size: 20px;
font-weight: 700;
margin-top: 8px;
padding: 0 16px;
color: var(--white);
}
.username {
font-size: 14px;
opacity: 0.9;
padding: 0 16px;
margin-bottom: 16px;
color: var(--white);
}
.social-card-stats {
display: flex;
justify-content: space-between;
padding: 16px;
background-color: var(--white);
}
.stat {
text-align: center;
}
.stat-value {
font-weight: 700;
}
.stat-label {
font-size: 14px;
color: var(--gray-600);
}
.add-platform-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 120px;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
border-style: dashed;
}
.add-platform-card:hover {
background-color: rgba(255, 255, 255, 0.7);
}
/* 内容创建器 */
.content-creator {
margin-top: 16px;
}
.tabs {
width: 100%;
}
.tab-list {
display: flex;
background-color: rgba(255, 255, 255, 0.5);
border: var(--border-brutal-sm);
border-radius: var(--border-radius);
padding: 4px;
margin-bottom: 16px;
}
.tab-trigger {
flex: 1;
padding: 8px 16px;
font-weight: 700;
border-radius: 8px;
background: none;
border: none;
cursor: pointer;
}
.tab-trigger.active {
background-color: var(--black);
color: var(--white);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.content-editor {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.editor-main {
border: var(--border-brutal);
border-radius: var(--border-radius);
padding: 24px;
box-shadow: var(--shadow-brutal);
}
.content-textarea {
width: 100%;
min-height: 150px;
border: var(--border-brutal-sm);
border-radius: var(--border-radius);
padding: 16px;
font-size: 18px;
margin-bottom: 16px;
resize: vertical;
}
.editor-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.post-settings, .story-settings, .video-settings {
margin-top: 16px;
}
.post-settings h3, .story-settings h3, .video-settings h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
.settings-tabs {
margin-top: 16px;
}
.settings-tab-list {
display: flex;
background-color: rgba(255, 255, 255, 0.5);
border: var(--border-brutal-sm);
border-radius: var(--border-radius);
padding: 4px;
margin-bottom: 16px;
}
.settings-tab-trigger {
flex: 1;
padding: 8px 16px;
font-weight: 700;
border-radius: 8px;
background: none;
border: none;
cursor: pointer;
}
.settings-tab-trigger.active {
background-color: var(--black);
color: var(--white);
}
.settings-tab-content {
display: none;
}
.settings-tab-content.active {
display: block;
}
.slider-control {
margin-bottom: 16px;
}
.slider-control label {
display: block;
font-weight: 700;
margin-bottom: 8px;
}
.slider {
width: 100%;
height: 8px;
-webkit-appearance: none;
appearance: none;
background: var(--gray-200);
border-radius: 4px;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--black);
cursor: pointer;
}
.hashtags-textarea {
width: 100%;
min-height: 100px;
border: var(--border-brutal-sm);
border-radius: var(--border-radius);
padding: 16px;
resize: vertical;
}
.switch-control {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.switch-control label {
font-weight: 700;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--gray-300);
transition: .4s;
border-radius: 34px;
height: 100%;
}
.switch .slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
.switch input:checked + .slider {
background-color: var(--black);
}
.switch input:checked + .slider:before {
transform: translateX(26px);
}
.story-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.thumbnail-upload label, .video-title label {
display: block;
font-weight: 700;
margin-bottom: 8px;
}
.upload-area {
border: 2px dashed var(--black);
border-radius: var(--border-radius);
padding: 32px;
text-align: center;
}
.upload-area i {
display: block;
margin: 0 auto 8px;
opacity: 0.5;
}
.underline {
text-decoration: underline;
cursor: pointer;
}
.title-textarea {
width: 100%;
min-height: 60px;
border: var(--border-brutal-sm);
border-radius: var(--border-radius);
padding: 16px;
resize: vertical;
}
.platforms-panel {
display: none;
}
.platforms-card {
border: var(--border-brutal);
border-radius: var(--border-radius);
padding: 24px;
box-shadow: var(--shadow-brutal);
margin-bottom: 24px;
}
.platforms-card h3 {
font-size: 18px;
font-weight: 900;
margin-bottom: 16px;
}
.platform-switches {
display: flex;
flex-direction: column;
gap: 12px;
}
.platform-switch {
display: flex;
justify-content: space-between;
align-items: center;
}
.platform-info {
display: flex;
align-items: center;
gap: 8px;
}
.platform-info label {
font-weight: 700;
}
.btn-publish {
width: 100%;
height: 56px;
background-color: var(--black);
color: var(--white);
border: var(--border-brutal-sm);
border-radius: var(--border-radius);
font-weight: 700;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: var(--shadow-brutal-sm);
}
.btn-publish:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* 工作室卡片 */
.studio-cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.studio-card {
border: var(--border-brutal);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-brutal);
cursor: pointer;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease;
}
.studio-card:hover {
transform: translateY(-4px);
}
.studio-card-header {
padding: 24px;
color: var(--white);
}
.audio-studio .studio-card-header {
background: var(--audio-gradient);
}
.video-studio .studio-card-header {
background: var(--video-gradient);
}
.image-studio .studio-card-header {
background: var(--image-gradient);
}
.text-studio .studio-card-header {
background: var(--text-gradient);
}
.studio-card-header i {
width: 40px;
height: 40px;
}
.studio-card-header h3 {
font-size: 20px;
font-weight: 700;
margin-top: 16px;
}
.studio-card-content {
padding: 16px;
background-color: var(--white);
}
/* 按钮样式 */
.btn {
padding: 10px 16px;
border-radius: var(--border-radius);
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background-color: var(--black);
color: var(--white);
border: var(--border-brutal-sm);
box-shadow: var(--shadow-brutal-sm);
}
.btn-primary:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.btn-outline {
background-color: transparent;
border: var(--border-brutal-sm);
box-shadow: var(--shadow-brutal-sm);
}
.btn-outline:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.btn-icon {
padding: 8px;
width: 40px;
height: 40px;
}
.btn-platform {
width: 100%;
justify-content: flex-start;
}
/* 移动导航 */
.mobile-nav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
display: none;
}
.mobile-nav {
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100vh;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
z-index: 999;
display: flex;
flex-direction: column;
transition: left 0.3s ease;
border-right: var(--border-brutal);
}
.mobile-nav.active {
left: 0;
}
.mobile-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
border-bottom: var(--border-brutal);
}
.mobile-nav-logo {
font-size: 24px;
font-weight: 900;
}
.mobile-nav-close {
background: none;
border: none;
cursor: pointer;
}
.mobile-nav-content {
flex: 1;
overflow: auto;
padding: 16px;
}
.mobile-nav-menu {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
}
.mobile-platforms-section {
margin-top: 16px;
}
.mobile-nav-footer {
padding: 16px;
border-top: var(--border-brutal);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* 响应式样式 */
@media (min-width: 640px) {
body {
padding: 16px;
}
.social-cards {
grid-template-columns: repeat(2, 1fr);
}
.studio-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.mobile-menu {
display: none;
}
.desktop-buttons {
display: flex;
align-items: center;
gap: 12px;
}
.main-container {
flex-direction: row;
}
.sidebar {
display: block;
}
.content-editor {
grid-template-columns: 1fr 300px;
}
.platforms-panel {
display: block;
}
}
@media (min-width: 1024px) {
body {
padding: 32px;
}
.social-cards {
grid-template-columns: repeat(3, 1fr);
}
.studio-cards {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
</head>
<body>
<div class="container">
<!-- 玻璃态容器 -->
<div class="glass-container">
<!-- 头部 -->
<header class="header">
<div class="header-content">
<h1 class="logo">POSTCRAFT</h1>
<!-- 移动端菜单 -->
<div class="mobile-menu">
<button class="btn btn-outline btn-icon" id="mobile-menu-btn">
<i data-lucide="menu"></i>
</button>
</div>
<!-- 桌面端按钮 -->
<div class="desktop-buttons">
<button class="btn btn-primary">连接账号</button>
<button class="btn btn-outline">设置</button>
</div>
</div>
</header>
<div class="main-container">
<!-- 侧边栏 - 仅桌面端 -->
<div class="sidebar">
<nav class="sidebar-nav">
<a href="#" class="nav-item active">仪表盘</a>
<a href="#" class="nav-item">数据分析</a>
<a href="#" class="nav-item">日历</a>
<a href="#" class="nav-item">消息</a>
</nav>
<div class="platforms-section">
<h2 class="section-title">平台</h2>
<div class="platform-buttons">
<button class="btn btn-outline btn-platform">
<i data-lucide="instagram"></i> Instagram
</button>
<button class="btn btn-outline btn-platform">
<i data-lucide="twitter"></i> Twitter
</button>
<button class="btn btn-outline btn-platform">
<i data-lucide="linkedin"></i> LinkedIn
</button>
<button class="btn btn-outline btn-platform">
<i data-lucide="youtube"></i> YouTube
</button>
</div>
</div>
</div>
<!-- 主内容 -->
<div class="main-content">
<!-- 已连接账号 -->
<div class="section">
<h2 class="section-title">已连接账号</h2>
<div class="social-cards">
<div class="social-card instagram">
<div class="social-card-header">
<i data-lucide="instagram"></i>
<span class="status-badge">已连接</span>
</div>
<h3 class="platform-name">Instagram</h3>
<p class="username">@你的品牌</p>
<div class="social-card-stats">
<div class="stat">
<p class="stat-value">1,234</p>
<p class="stat-label">粉丝</p>
</div>
<div class="stat">
<p class="stat-value">56</p>
<p class="stat-label">帖子</p>
</div>
<div class="stat">
<p class="stat-value">7.8%</p>
<p class="stat-label">互动率</p>
</div>
</div>
</div>
<div class="social-card twitter">
<div class="social-card-header">
<i data-lucide="twitter"></i>
<span class="status-badge">已连接</span>
</div>
<h3 class="platform-name">Twitter</h3>
<p class="username">@你的品牌</p>
<div class="social-card-stats">
<div class="stat">
<p class="stat-value">2,468</p>
<p class="stat-label">粉丝</p>
</div>
<div class="stat">
<p class="stat-value">128</p>
<p class="stat-label">帖子</p>
</div>
<div class="stat">
<p class="stat-value">5.2%</p>
<p class="stat-label">互动率</p>
</div>
</div>
</div>
<div class="social-card linkedin">
<div class="social-card-header">
<i data-lucide="linkedin"></i>
<span class="status-badge">已连接</span>
</div>
<h3 class="platform-name">LinkedIn</h3>
<p class="username">你的品牌</p>
<div class="social-card-stats">
<div class="stat">
<p class="stat-value">846</p>
<p class="stat-label">粉丝</p>
</div>
<div class="stat">
<p class="stat-value">32</p>
<p class="stat-label">帖子</p>
</div>
<div class="stat">
<p class="stat-value">4.5%</p>
<p class="stat-label">互动率</p>
</div>
</div>
</div>
<div class="add-platform-card">
<i data-lucide="plus"></i>
<span>添加平台</span>
</div>
</div>
</div>
<!-- 创建内容 -->
<div class="section">
<h2 class="section-title">创建内容</h2>
<div class="content-creator">
<div class="tabs">
<div class="tab-list">
<button class="tab-trigger active" data-tab="post">帖子</button>
<button class="tab-trigger" data-tab="story">故事</button>
<button class="tab-trigger" data-tab="video">视频</button>
</div>
<div class="tab-content active" id="post-tab">
<div class="content-editor">
<div class="editor-main">
<textarea placeholder="在此处编写您的帖子内容..." class="content-textarea"></textarea>
<div class="editor-buttons">
<button class="btn btn-outline">
<i data-lucide="image"></i> 添加媒体
</button>
<button class="btn btn-outline">
<i data-lucide="calendar"></i> 安排发布
</button>
</div>
<div class="post-settings">
<h3>帖子设置</h3>
<div class="settings-tabs">
<div class="settings-tab-list">
<button class="settings-tab-trigger active" data-settings-tab="filters">滤镜</button>
<button class="settings-tab-trigger" data-settings-tab="hashtags">话题标签</button>
<button class="settings-tab-trigger" data-settings-tab="advanced">高级</button>
</div>
<div class="settings-tab-content active" id="filters-tab">
<div class="slider-control">
<label>亮度</label>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
<div class="slider-control">
<label>对比度</label>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
<div class="slider-control">
<label>饱和度</label>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
</div>
<div class="settings-tab-content" id="hashtags-tab">
<textarea placeholder="在此处添加话题标签..." class="hashtags-textarea"></textarea>
</div>
<div class="settings-tab-content" id="advanced-tab">
<div class="switch-control">
<label>隐藏点赞数</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="switch-control">
<label>关闭评论</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="switch-control">
<label>替代文本</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="platforms-panel">
<div class="platforms-card">
<h3>平台</h3>
<div class="platform-switches">
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="instagram"></i>
<label>Instagram</label>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="twitter"></i>
<label>Twitter</label>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="linkedin"></i>
<label>LinkedIn</label>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="youtube"></i>
<label>YouTube</label>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
<button class="btn btn-publish">
<i data-lucide="send"></i> 立即发布
</button>
</div>
</div>
</div>
<div class="tab-content" id="story-tab">
<!-- 故事内容创建器 -->
<div class="content-editor">
<div class="editor-main">
<textarea placeholder="在此处编写您的故事内容..." class="content-textarea"></textarea>
<div class="editor-buttons">
<button class="btn btn-outline">
<i data-lucide="image"></i> 添加媒体
</button>
<button class="btn btn-outline">
<i data-lucide="calendar"></i> 安排发布
</button>
</div>
<div class="story-settings">
<h3>故事设置</h3>
<div class="story-buttons">
<button class="btn btn-outline">添加贴纸</button>
<button class="btn btn-outline">添加文本</button>
<button class="btn btn-outline">添加音乐</button>
<button class="btn btn-outline">添加投票</button>
</div>
</div>
</div>
<div class="platforms-panel">
<!-- 与帖子相同的平台面板 -->
<div class="platforms-card">
<h3>平台</h3>
<div class="platform-switches">
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="instagram"></i>
<label>Instagram</label>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="twitter"></i>
<label>Twitter</label>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="linkedin"></i>
<label>LinkedIn</label>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="youtube"></i>
<label>YouTube</label>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
<button class="btn btn-publish">
<i data-lucide="send"></i> 立即发布
</button>
</div>
</div>
</div>
<div class="tab-content" id="video-tab">
<!-- 视频内容创建器 -->
<div class="content-editor">
<div class="editor-main">
<textarea placeholder="在此处编写您的视频描述..." class="content-textarea"></textarea>
<div class="editor-buttons">
<button class="btn btn-outline">
<i data-lucide="image"></i> 添加媒体
</button>
<button class="btn btn-outline">
<i data-lucide="calendar"></i> 安排发布
</button>
</div>
<div class="video-settings">
<h3>视频设置</h3>
<div class="thumbnail-upload">
<label>缩略图</label>
<div class="upload-area">
<i data-lucide="image"></i>
<p>拖放您的缩略图或 <span class="underline">浏览</span></p>
</div>
</div>
<div class="video-title">
<label>标题</label>
<textarea placeholder="添加视频标题..." class="title-textarea"></textarea>
</div>
</div>
</div>
<div class="platforms-panel">
<!-- 与帖子相同的平台面板 -->
<div class="platforms-card">
<h3>平台</h3>
<div class="platform-switches">
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="instagram"></i>
<label>Instagram</label>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="twitter"></i>
<label>Twitter</label>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="linkedin"></i>
<label>LinkedIn</label>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="platform-switch">
<div class="platform-info">
<i data-lucide="youtube"></i>
<label>YouTube</label>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
<button class="btn btn-publish">
<i data-lucide="send"></i> 立即发布
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 内容工作室 -->
<div class="section">
<h2 class="section-title">内容工作室</h2>
<div class="studio-cards">
<a href="#" class="studio-card audio-studio">
<div class="studio-card-header">
<i data-lucide="music"></i>
<h3>音频工作室</h3>
</div>
<div class="studio-card-content">
<p>使用AI辅助混音、母带处理和编辑音频内容</p>
</div>
</a>
<a href="#" class="studio-card video-studio">
<div class="studio-card-header">
<i data-lucide="video"></i>
<h3>视频工作室</h3>
</div>
<div class="studio-card-content">
<p>使用AI工具编辑、剪辑和增强视频内容</p>
</div>
</a>
<a href="#" class="studio-card image-studio">
<div class="studio-card-header">
<i data-lucide="image"></i>
<h3>图像工作室</h3>
</div>
<div class="studio-card-content">
<p>使用AI驱动的功能编辑和增强图像</p>
</div>
</a>
<a href="#" class="studio-card text-studio">
<div class="studio-card-header">
<i data-lucide="file-text"></i>
<h3>文本工作室</h3>
</div>
<div class="studio-card-content">
<p>使用AI辅助创建和优化文本内容</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 移动端导航菜单 -->
<div class="mobile-nav-overlay" id="mobile-nav-overlay"></div>
<div class="mobile-nav" id="mobile-nav">
<div class="mobile-nav-header">
<h2 class="mobile-nav-logo">POSTCRAFT</h2>
<button class="mobile-nav-close" id="mobile-nav-close">
<i data-lucide="x"></i>
</button>
</div>
<div class="mobile-nav-content">
<nav class="mobile-nav-menu">
<a href="#" class="nav-item active">仪表盘</a>
<a href="#" class="nav-item">数据分析</a>
<a href="#" class="nav-item">日历</a>
<a href="#" class="nav-item">消息</a>
</nav>
<div class="mobile-platforms-section">
<h2 class="section-title">平台</h2>
<div class="platform-buttons">
<button class="btn btn-outline btn-platform">
<i data-lucide="instagram"></i> Instagram
</button>
<button class="btn btn-outline btn-platform">
<i data-lucide="twitter"></i> Twitter
</button>
<button class="btn btn-outline btn-platform">
<i data-lucide="linkedin"></i> LinkedIn
</button>
<button class="btn btn-outline btn-platform">
<i data-lucide="youtube"></i> YouTube
</button>
</div>
</div>
</div>
<div class="mobile-nav-footer">
<button class="btn btn-primary">连接账号</button>
<button class="btn btn-outline">设置</button>
</div>
</div>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
// 初始化Lucide图标
document.addEventListener('DOMContentLoaded', () => {
// 初始化Lucide图标
lucide.createIcons();
// 初始化移动导航
initMobileNav();
// 初始化标签页
initTabs();
// 初始化设置标签页
initSettingsTabs();
// 初始化平台切换
initPlatformSwitches();
// 初始化发布按钮
initPublishButtons();
// 初始化文件上传
initFileUploads();
});
// 移动导航功能
function initMobileNav() {
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileNav = document.getElementById('mobile-nav');
const mobileNavOverlay = document.getElementById('mobile-nav-overlay');
const mobileNavClose = document.getElementById('mobile-nav-close');
if (mobileMenuBtn && mobileNav && mobileNavOverlay && mobileNavClose) {
mobileMenuBtn.addEventListener('click', () => {
mobileNav.classList.add('active');
mobileNavOverlay.style.display = 'block';
document.body.style.overflow = 'hidden';
});
const closeNav = () => {
mobileNav.classList.remove('active');
mobileNavOverlay.style.display = 'none';
document.body.style.overflow = '';
};
mobileNavClose.addEventListener('click', closeNav);
mobileNavOverlay.addEventListener('click', closeNav);
}
}
// 标签页功能
function initTabs() {
const tabTriggers = document.querySelectorAll('.tab-trigger');
tabTriggers.forEach(trigger => {
trigger.addEventListener('click', () => {
// 获取目标标签页
const targetTab = trigger.getAttribute('data-tab');
// 移除所有标签触发器的活动状态
document.querySelectorAll('.tab-trigger').forEach(t => {
t.classList.remove('active');
});
// 隐藏所有标签内容
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// 激活当前标签触发器
trigger.classList.add('active');
// 显示目标标签内容
const targetContent = document.getElementById(`${targetTab}-tab`);
if (targetContent) {
targetContent.classList.add('active');
}
});
});
}
// 设置标签页功能
function initSettingsTabs() {
const settingsTabTriggers = document.querySelectorAll('.settings-tab-trigger');
settingsTabTriggers.forEach(trigger => {
trigger.addEventListener('click', () => {
// 获取目标设置标签页
const targetTab = trigger.getAttribute('data-settings-tab');
// 获取父级标签容器
const parentTabContent = trigger.closest('.tab-content');
if (!parentTabContent) return;
// 移除所有设置标签触发器的活动状态
parentTabContent.querySelectorAll('.settings-tab-trigger').forEach(t => {
t.classList.remove('active');
});
// 隐藏所有设置标签内容
parentTabContent.querySelectorAll('.settings-tab-content').forEach(content => {
content.classList.remove('active');
});
// 激活当前设置标签触发器
trigger.classList.add('active');
// 显示目标设置标签内容
const targetContent = document.getElementById(`${targetTab}-tab`);
if (targetContent) {
targetContent.classList.add('active');
}
});
});
}
// 平台切换功能
function initPlatformSwitches() {
const platformSwitches = document.querySelectorAll('.platform-switch input[type="checkbox"]');
platformSwitches.forEach(switchInput => {
switchInput.addEventListener('change', () => {
// 在这里可以添加平台切换的逻辑
const platformName = switchInput.closest('.platform-switch').querySelector('label').textContent;
console.log(`${platformName} 平台状态: ${switchInput.checked ? '已启用' : '已禁用'}`);
});
});
}
// 发布按钮功能
function initPublishButtons() {
const publishButtons = document.querySelectorAll('.btn-publish');
publishButtons.forEach(button => {
button.addEventListener('click', () => {
// 获取当前活动的标签页
const activeTab = document.querySelector('.tab-content.active');
if (!activeTab) return;
// 获取内容
const textarea = activeTab.querySelector('.content-textarea');
if (!textarea) return;
const content = textarea.value.trim();
if (!content) {
alert('请输入内容后再发布');
return;
}
// 获取选中的平台
const selectedPlatforms = [];
activeTab.querySelectorAll('.platform-switch input[type="checkbox"]:checked').forEach(checkbox => {
const platformName = checkbox.closest('.platform-switch').querySelector('label').textContent;
selectedPlatforms.push(platformName);
});
if (selectedPlatforms.length === 0) {
alert('请至少选择一个平台进行发布');
return;
}
// 模拟发布过程
button.disabled = true;
const originalHTML = button.innerHTML;
button.innerHTML = '<i data-lucide="loader-2"></i> 发布中...';
lucide.createIcons();
setTimeout(() => {
alert(`内容已成功发布到以下平台: ${selectedPlatforms.join(', ')}`);
textarea.value = '';
button.disabled = false;
button.innerHTML = originalHTML;
lucide.createIcons();
}, 2000);
});
});
}
// 文件上传功能
function initFileUploads() {
const uploadAreas = document.querySelectorAll('.upload-area');
uploadAreas.forEach(area => {
area.addEventListener('click', () => {
// 创建一个隐藏的文件输入
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.display = 'none';
// 添加到DOM并触发点击
document.body.appendChild(fileInput);
fileInput.click();
// 处理文件选择
fileInput.addEventListener('change', () => {
if (fileInput.files && fileInput.files[0]) {
const file = fileInput.files[0];
// 在这里可以处理文件上传逻辑
// 例如，显示文件名或预览图像
const fileName = file.name;
area.innerHTML = `
<i data-lucide="check"></i>
<p>已选择文件: ${fileName}</p>
`;
lucide.createIcons();
}
// 清理DOM
document.body.removeChild(fileInput);
});
});
// 拖放功能
area.addEventListener('dragover', (e) => {
e.preventDefault();
area.style.backgroundColor = 'rgba(0, 0, 0, 0.05)';
});
area.addEventListener('dragleave', () => {
area.style.backgroundColor = '';
});
area.addEventListener('drop', (e) => {
e.preventDefault();
area.style.backgroundColor = '';
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
const file = e.dataTransfer.files[0];
// 在这里可以处理文件上传逻辑
const fileName = file.name;
area.innerHTML = `
<i data-lucide="check"></i>
<p>已选择文件: ${fileName}</p>
`;
lucide.createIcons();
}
});
});
}
// 添加平台卡片功能
document.addEventListener('DOMContentLoaded', () => {
const addPlatformCard = document.querySelector('.add-platform-card');
if (addPlatformCard) {
addPlatformCard.addEventListener('click', () => {
// 在实际应用中，这里会打开一个添加平台的模态框
alert('此功能将打开添加新平台的界面');
});
}
// 为工作室卡片添加点击事件
const studioCards = document.querySelectorAll('.studio-card');
studioCards.forEach(card => {
card.addEventListener('click', (e) => {
e.preventDefault();
const studioType = card.classList.contains('audio-studio') ? '音频' :
card.classList.contains('video-studio') ? '视频' :
card.classList.contains('image-studio') ? '图像' :
card.classList.contains('text-studio') ? '文本' : '';
alert(`您将进入${studioType}工作室`);
});
});
});
// 滑块值显示功能
document.addEventListener('DOMContentLoaded', () => {
const sliders = document.querySelectorAll('input[type="range"]');
sliders.forEach(slider => {
// 创建一个显示值的元素
const valueDisplay = document.createElement('span');
valueDisplay.className = 'slider-value';
valueDisplay.style.marginLeft = '8px';
valueDisplay.textContent = `${slider.value}%`;
// 将显示值元素添加到滑块后面
const parent = slider.parentElement;
if (parent) {
parent.style.display = 'flex';
parent.style.alignItems = 'center';
parent.appendChild(valueDisplay);
}
// 更新显示值
slider.addEventListener('input', () => {
valueDisplay.textContent = `${slider.value}%`;
});
});
});
</script>
</body>
</html>
index.html
style.css
index.js