Maas2-group
/
Maas-Model-platform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
							<!DOCTYPE html>

<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#137fec",
                        "background-light": "#f6f7f8",
                        "background-dark": "#101922",
                    },
                    fontFamily: {
                        "display": ["Lexend", "Noto Sans SC", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
<style>
        body {
            font-family: 'Lexend', sans-serif;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100">
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<!-- Header Component -->
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-primary/10 bg-white dark:bg-slate-900 px-6 md:px-20 py-4 sticky top-0 z-50">
<div class="flex items-center gap-4">
<div class="size-8 text-primary">
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M8.57829 8.57829C5.52816 11.6284 3.451 15.5145 2.60947 19.7452C1.76794 23.9758 2.19984 28.361 3.85056 32.3462C5.50128 36.3314 8.29667 39.7376 11.8832 42.134C15.4698 44.5305 19.6865 45.8096 24 45.8096C28.3135 45.8096 32.5302 44.5305 36.1168 42.134C39.7033 39.7375 42.4987 36.3314 44.1494 32.3462C45.8002 28.361 46.2321 23.9758 45.3905 19.7452C44.549 15.5145 42.4718 11.6284 39.4217 8.57829L24 24L8.57829 8.57829Z" fill="currentColor"></path>
</svg>
</div>
<h2 class="text-slate-900 dark:text-slate-100 text-xl font-bold leading-tight tracking-tight">编辑课程</h2>
</div>
<div class="flex gap-3">
<button class="flex min-w-[84px] cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-primary/10 text-primary text-sm font-bold hover:bg-primary/20 transition-colors">
<span>预览</span>
</button>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-primary text-white text-sm font-bold hover:opacity-90 transition-opacity shadow-lg shadow-primary/20">
<span>保存更改</span>
</button>
</div>
</header>
<main class="flex flex-1 justify-center py-8 px-4">
<div class="layout-content-container flex flex-col max-w-[800px] flex-1 gap-8">
<!-- Section 1: Basic Info -->
<section class="bg-white dark:bg-slate-900 rounded-xl p-6 shadow-sm border border-primary/5">
<div class="flex items-center gap-2 mb-6">
<span class="material-symbols-outlined text-primary">info</span>
<h2 class="text-slate-900 dark:text-slate-100 text-xl font-bold leading-tight">基本信息</h2>
</div>
<div class="space-y-6">
<!-- Course Name -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">课程名称</label>
<input class="w-full rounded-lg border border-primary/20 bg-background-light dark:bg-slate-800 p-3 text-slate-900 dark:text-slate-100 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="输入课程标题" type="text" value="现代UI设计实战指南"/>
</div>
<!-- Course Intro -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">课程简介</label>
<textarea class="w-full rounded-lg border border-primary/20 bg-background-light dark:bg-slate-800 p-3 text-slate-900 dark:text-slate-100 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="简要描述您的课程内容..." rows="3">本课程将带你深入了解UI设计的核心原则，从基础理论到实战项目。课程涵盖色彩学、排版、交互设计以及最新的UI设计工具使用技巧。</textarea>
</div>
<!-- Cover Image -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">课程封面</label>
<div class="relative group aspect-video w-full max-w-md overflow-hidden rounded-xl border border-primary/10 bg-slate-100 dark:bg-slate-800">
<div class="absolute inset-0 bg-cover bg-center" data-alt="Modern abstract UI design interface showcase" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCd3GIjR7pwNa0raLrVIrRDpPunO0MPulN7JvE2-auksaDK7pK4l5iE1t77mt2Bn4I8y8WPzH79OSJn_Y-s7FtzeVKUIBSZFH_243Hi_5QX0T7co874pT0Yam2CwjnDCcjzJ1czdw3l48h8wx7c4u9b8s54a7wGZijZ9gti0bz3P8i-ba2uY_wqrNuwxDSXa2mUWSFQj98nlabgxp9AAlYjkhyta_cPOX63iOdyA1wGPYNX8vnmEQoKznhOu29n58EMMX23ZqahPJs');"></div>
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<button class="bg-white text-slate-900 px-4 py-2 rounded-lg font-bold text-sm flex items-center gap-2">
<span class="material-symbols-outlined text-sm">photo_camera</span>
                                            修改封面
                                        </button>
</div>
</div>
</div>
<!-- Permissions -->
<div class="flex flex-col gap-2 pt-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">访问权限</label>
<div class="flex gap-4">
<label class="flex-1 cursor-pointer">
<input checked="" class="hidden peer" name="perm" type="radio"/>
<div class="p-4 border border-primary/20 rounded-lg peer-checked:bg-primary/5 peer-checked:border-primary transition-all flex items-center gap-3">
<span class="material-symbols-outlined text-primary">public</span>
<div class="text-left">
<p class="text-sm font-bold">公开</p>
<p class="text-xs text-slate-500">所有人可见</p>
</div>
</div>
</label>
<label class="flex-1 cursor-pointer">
<input class="hidden peer" name="perm" type="radio"/>
<div class="p-4 border border-primary/20 rounded-lg peer-checked:bg-primary/5 peer-checked:border-primary transition-all flex items-center gap-3">
<span class="material-symbols-outlined text-slate-400">lock</span>
<div class="text-left">
<p class="text-sm font-bold">私有</p>
<p class="text-xs text-slate-500">仅受邀者可见</p>
</div>
</div>
</label>
</div>
</div>
</div>
</section>
<!-- Section 2: Video Management -->
<section class="bg-white dark:bg-slate-900 rounded-xl p-6 shadow-sm border border-primary/5">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary">video_library</span>
<h2 class="text-slate-900 dark:text-slate-100 text-xl font-bold leading-tight">视频管理</h2>
</div>
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-bold hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined text-[20px]">upload</span>
                                上传视频
                            </button>
</div>
<!-- Video List -->
<div class="space-y-3">
<!-- Video Item 1 -->
<div class="flex items-center gap-4 p-3 rounded-lg border border-primary/10 hover:border-primary/30 bg-background-light/50 dark:bg-slate-800/50 group">
<div class="cursor-grab text-slate-400 hover:text-primary">
<span class="material-symbols-outlined">drag_indicator</span>
</div>
<div class="h-14 w-24 rounded overflow-hidden flex-shrink-0 bg-slate-200">
<div class="w-full h-full bg-cover bg-center" data-alt="Office workspace video thumbnail" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCu51va9pfh3yua75pnNlwlxvzHuLH8_djMb7jQqBYQiXZyHck2hKcSSAR94BC2egnSJccZcYC4XuG0cwRYZQ8D7iZDe4GkywRUZ9KTHwtQ_ybUYQqpFaXThBnTRM40A4XFi_8-16lq3lpNZalYOF69gR3X_Us2R7sKSAaxPsNMATvOIZ5xE9gJHbxctWzrR-hfcx2HWNc_yKVxui2qytqWjrRIY4nOBzwQYm6wJHy9kyX-vWCy-GhRMLICBbhOdbAndeBJKquUo9s');"></div>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-bold text-slate-900 dark:text-slate-100 truncate">01. 课程导论与环境搭建</h4>
<p class="text-xs text-slate-500">时长: 12:45 • 大小: 45MB</p>
</div>
<button class="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-all">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
<!-- Video Item 2 -->
<div class="flex items-center gap-4 p-3 rounded-lg border border-primary/10 hover:border-primary/30 bg-background-light/50 dark:bg-slate-800/50 group">
<div class="cursor-grab text-slate-400 hover:text-primary">
<span class="material-symbols-outlined">drag_indicator</span>
</div>
<div class="h-14 w-24 rounded overflow-hidden flex-shrink-0 bg-slate-200">
<div class="w-full h-full bg-cover bg-center" data-alt="Color palette video thumbnail" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCVQ5Frwlz5fmVmHsbqMwdab4QTi13gT4pA5Bd8xgDRkyrbM-UK2MSZrjZ0gTaZXaULIY1ZdUrKymvyOmnKB3mIeLvMnePpD9igLem28-jVtyptikAtxKEzt9WWH-4XajhF0xERCD1COvXO81RRFIjbuum6j5fwYJI57hC0RnbS8qN9X5cXQHBfz_zSbHuP6ir4gCET21vDMsySH1-2vgDSmzTyjLpn2vRiCqu6hmRNOp7OiWCpQYONvXIKzHmC_geC7JTCKg2G_kg');"></div>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-bold text-slate-900 dark:text-slate-100 truncate">02. 现代设计趋势分析</h4>
<p class="text-xs text-slate-500">时长: 24:12 • 大小: 128MB</p>
</div>
<button class="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-all">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
<!-- Video Item 3 -->
<div class="flex items-center gap-4 p-3 rounded-lg border border-primary/10 hover:border-primary/30 bg-background-light/50 dark:bg-slate-800/50 group">
<div class="cursor-grab text-slate-400 hover:text-primary">
<span class="material-symbols-outlined">drag_indicator</span>
</div>
<div class="h-14 w-24 rounded overflow-hidden flex-shrink-0 bg-slate-200">
<div class="w-full h-full bg-cover bg-center" data-alt="Hardware and computer components thumbnail" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBTaNUUHCVUF4Bpr230RCjyi4zj7hvSmRwdg9QIAzcR6L7-UtpnWFLAsfMtLdQ36zvBaYKW_qOaAqz_xGtoMm3dUhvxfzkoUXp5YdYf_yLIKoi6zfm4MG8p1q9ZmIefxp-i6NLKBg7Lbwae9RXbmoRcHKUoNsVBTJGnrU5l79Q2PtbIN_zUtHJyBZzKQQpl8Kokd2dJc1bflkFdjAP3GiFvRX5i0R4Oo5ScJMtBXRwTRn6x175ykATI8S-yiFt8jRXtl2A1Mkt3IgQ');"></div>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-bold text-slate-900 dark:text-slate-100 truncate">03. 工具篇：Figma实操技巧</h4>
<p class="text-xs text-slate-500">时长: 45:30 • 大小: 256MB</p>
</div>
<button class="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-all">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
<!-- Empty State Placeholder (dashed) -->
<div class="border-2 border-dashed border-primary/10 rounded-lg p-8 flex flex-col items-center justify-center text-slate-400">
<span class="material-symbols-outlined text-4xl mb-2">add_circle_outline</span>
<p class="text-sm">拖拽视频到此处快速上传</p>
</div>
</div>
</section>
<!-- Danger Zone -->
<section class="bg-red-50 dark:bg-red-900/10 rounded-xl p-6 border border-red-100 dark:border-red-900/30">
<div class="flex items-center justify-between">
<div>
<h3 class="text-red-600 dark:text-red-400 font-bold">删除课程</h3>
<p class="text-sm text-red-500/70">课程一旦删除将无法找回，请谨慎操作。</p>
</div>
<button class="px-4 py-2 border border-red-200 text-red-600 rounded-lg text-sm font-bold hover:bg-red-600 hover:text-white transition-all">
                                立即删除
                            </button>
</div>
</section>
</div>
</main>
<!-- Bottom sticky bar for mobile -->
<div class="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-t border-primary/10 flex gap-4">
<button class="flex-1 py-3 bg-primary text-white rounded-lg font-bold shadow-lg shadow-primary/20">保存</button>
</div>
</div>
</div>
</body></html>