Maas2-group
/
Maas-Model-platform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
							<!DOCTYPE html>

<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>在线学习平台 - 视频播放</title>
<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", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
<style>
        body {
            font-family: 'Lexend', "Noto Sans SC", sans-serif;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #334155;
        }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800">
<div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
<div class="flex items-center gap-8">
<div class="flex items-center gap-3">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-symbols-outlined text-xl">school</span>
</div>
<h2 class="text-lg font-bold tracking-tight">智学在线</h2>
</div>
<nav class="hidden md:flex items-center gap-6">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">首页</a>
<a class="text-sm font-medium text-primary" href="#">我的课程</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">发现</a>
</nav>
</div>
<div class="flex items-center gap-4 flex-1 justify-end max-w-md">
<div class="relative w-full hidden sm:block">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
<input class="w-full pl-10 pr-4 py-2 bg-slate-100 dark:bg-slate-800 border-none rounded-lg text-sm focus:ring-2 focus:ring-primary/50" placeholder="搜索课程、讲师..." type="text"/>
</div>
<div class="flex items-center gap-3">
<button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full">
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400">notifications</span>
</button>
<div class="size-9 rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden border border-slate-200 dark:border-slate-700">
<img class="w-full h-full object-cover" data-alt="User profile avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAYXm6R9vcxMCVDj_4TgQnPP2sYT7GrRbB89STEg85fCjgmyJ4Mk4VcxvdKfg7EKBLuobtGT0RQWKXDvZaeHRmbg0RbNUwECIEEWf5CvcSNh1vnU9NCHqUrTWZFSzIAKrDuU_YvE5VzvvXkf_MsqAAFmxGNG_Mwgxhpw96gFYgSiwHEnirme2oXlICVmbsHp6WTLzAK3kmYpyqrpZ7vnIv72aqp31S_PaMcxoZnLHLmr8V_gBKG9f_Lleh-1EB3r08d8UIqpXf7yZo"/>
</div>
</div>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 py-6">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Left Column: Video Player & Info -->
<div class="lg:col-span-8 flex flex-col gap-6">
<!-- Video Player Component -->
<div class="relative group aspect-video bg-black rounded-xl overflow-hidden shadow-2xl border border-slate-200 dark:border-slate-800">
<div class="absolute inset-0 flex items-center justify-center">
<img class="w-full h-full object-cover opacity-60" data-alt="Course video thumbnail showing UI design work" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnqIYgKMVvoJYXjz_G7ChDOnVuKfWOArRmXcXvyu3QVd33cFYX7Iyj8TYDK6BVoP2ZjmEfM1BT6iFp-4uNPeSpdCE0C5TtK5_Twam128cDoOnXSv5iRT66nCpAwilDhNqOdsKTCvxZbMHV9LjSdcBXtnklQO62u23NmT2WReqkae_jZBG-UF62Pb5SP9t33_KN3tj1Dn9a9O9aG0keM0XmlwEI4hn1PyWiE-uAMua0p05K90ITJpb01amSyAAzZe6I5p4b6Uy6H-E"/>
<button class="relative z-10 size-20 rounded-full bg-primary flex items-center justify-center text-white shadow-lg hover:scale-105 transition-transform">
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1">play_arrow</span>
</button>
</div>
<!-- Player Controls Overlay (Simulated) -->
<div class="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
<div class="flex flex-col gap-3">
<div class="relative h-1.5 w-full bg-white/20 rounded-full overflow-hidden">
<div class="absolute top-0 left-0 h-full w-1/3 bg-primary"></div>
<div class="absolute top-1/2 left-1/3 -translate-y-1/2 size-3 bg-white rounded-full shadow-md"></div>
</div>
<div class="flex items-center justify-between text-white">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">play_arrow</span>
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">skip_next</span>
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors">volume_up</span>
<span class="text-xs font-medium">12:45 / 35:20</span>
</div>
<div class="flex items-center gap-4">
<span class="text-xs px-2 py-0.5 bg-white/10 rounded border border-white/20">1080P</span>
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors text-lg">settings</span>
<span class="material-symbols-outlined cursor-pointer hover:text-primary transition-colors text-lg">fullscreen</span>
</div>
</div>
</div>
</div>
</div>
<!-- Course Info -->
<div class="bg-white dark:bg-slate-900 rounded-xl p-6 shadow-sm border border-slate-200 dark:border-slate-800">
<div class="flex flex-wrap justify-between items-start gap-4 mb-6">
<div class="flex-1 min-w-[300px]">
<h1 class="text-2xl font-bold mb-2">第 04 课：设计规范的建立与组件库应用</h1>
<div class="flex items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">visibility</span> 12,450 观看</span>
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">calendar_today</span> 2023-11-20 发布</span>
<span class="px-2 py-0.5 bg-primary/10 text-primary rounded text-xs font-semibold">高级课程</span>
</div>
</div>
<div class="flex items-center gap-2">
<button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
<span class="material-symbols-outlined text-lg">thumb_up</span> 点赞
                            </button>
<button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-sm font-medium">
<span class="material-symbols-outlined text-lg">bookmark</span> 收藏
                            </button>
<button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors text-sm font-medium">
<span class="material-symbols-outlined text-lg">share</span> 分享
                            </button>
</div>
</div>
<!-- Tabs Component -->
<div class="border-b border-slate-200 dark:border-slate-800 mb-6">
<div class="flex gap-8">
<button class="pb-4 border-b-2 border-primary text-primary font-bold text-sm">课程介绍</button>
<button class="pb-4 border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 font-medium text-sm transition-colors">课件下载</button>
<button class="pb-4 border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 font-medium text-sm transition-colors">学员评论 (128)</button>
<button class="pb-4 border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 font-medium text-sm transition-colors">提问回答</button>
</div>
</div>
<!-- Tab Content -->
<div class="space-y-4">
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
                            在本节课程中，我们将深入探讨如何在大型 UI 项目中建立统一的设计规范。你将学习到：
                        </p>
<ul class="list-disc list-inside text-slate-700 dark:text-slate-300 space-y-2 ml-2">
<li>原子设计理论 (Atomic Design) 在实际项目中的应用</li>
<li>颜色系统、排版规范与网格系统的定义</li>
<li>如何利用 Figma 组件库实现高效的设计同步</li>
<li>与前端开发工程师对接设计规范的最佳实践</li>
</ul>
</div>
</div>
</div>
<!-- Right Column: Course Playlist -->
<div class="lg:col-span-4 flex flex-col gap-6">
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 flex flex-col max-h-[calc(100vh-120px)] sticky top-24">
<div class="p-5 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-slate-50/50 dark:bg-slate-800/50 rounded-t-xl">
<div>
<h3 class="font-bold text-lg">课程列表</h3>
<p class="text-xs text-slate-500">共 12 节课 · 已完成 3 节</p>
</div>
<span class="material-symbols-outlined text-slate-400">format_list_bulleted</span>
</div>
<div class="flex-1 overflow-y-auto custom-scrollbar p-3 space-y-2">
<!-- Playlist Item (Completed) -->
<div class="group flex items-start gap-3 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
<div class="relative size-20 shrink-0 rounded-md overflow-hidden">
<img class="w-full h-full object-cover" data-alt="UI lesson preview thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDF4etBB6xrJhgWUC90oTIyc08frqkGYcCFuzPPJQqiGIm7WoCXnUYcJ6cmOa6jl6SEhEaNoqG6c8NgHiSdHGmUtBgjlPZGiQj8GXSsJaea9rEvOsAe25sjEIETrIzYa9pUJ4os8kHYmvKnlXOuJd7ihdkdwNkY4ufjoAayY65JUdqpiEg4kvX0ISJ9dZc9dRyv5JjmK8VLBUcf5qv29wgKsNT7UVu9Dz5fjSSjx8LWBCMptPEkJiDQGCl4_sxnIQimtPJjZyEuX0M"/>
<div class="absolute inset-0 bg-black/40 flex items-center justify-center">
<span class="material-symbols-outlined text-white text-xl">check_circle</span>
</div>
</div>
<div class="flex flex-col justify-between py-0.5">
<p class="text-sm font-semibold line-clamp-2 text-slate-500">01 课程导论：UI 设计师的未来之路</p>
<p class="text-[11px] text-slate-400">12:40</p>
</div>
</div>
<!-- Playlist Item (Completed) -->
<div class="group flex items-start gap-3 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
<div class="relative size-20 shrink-0 rounded-md overflow-hidden">
<img class="w-full h-full object-cover" data-alt="UI lesson preview thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDy4sz7ij_whV3wobHM1YHf1jwgzkpvhh13wb_8qwNmcnQF9uNM9HHHgPS0ZtdjAyoy94R8mO1bKKUrmxasZkqpK4lfqHpXnH4UICRrrYAu9RiIYwxgLHAKNTBD9XeZNgrKBqwCB0-3WSH9uN8X7OBiZXTEGYgfCJEnptAt3FjG4CqdtsLvizYdZ3WFHoBYtyhllJ-7dA416TJn1kf7C8ho7xuF0Ht1-uRr7TRJcRUsXmt4JkJAPnVughP9sDoBg6io1ckA4HwfigI"/>
<div class="absolute inset-0 bg-black/40 flex items-center justify-center">
<span class="material-symbols-outlined text-white text-xl">check_circle</span>
</div>
</div>
<div class="flex flex-col justify-between py-0.5">
<p class="text-sm font-semibold line-clamp-2 text-slate-500">02 设计思维：从需求到原型的转换</p>
<p class="text-[11px] text-slate-400">45:15</p>
</div>
</div>
<!-- Playlist Item (Current) -->
<div class="group flex items-start gap-3 p-3 rounded-lg bg-primary/5 border border-primary/20 transition-colors cursor-pointer">
<div class="relative size-20 shrink-0 rounded-md overflow-hidden ring-2 ring-primary">
<img class="w-full h-full object-cover" data-alt="Current playing lesson thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBGrsug3_xls9ATN9S23Rd-YMpCo3XwUPc8dwP8y5SnQIi7VSawBPFqJzQ3aBMdHQ5Vl8r7LMb-hfFsU6AuA60tKnt8cx-0XG4bPZf7X0EHB6J6gZj6159tfYctHPwvYRFk1A01fNmSg-ECy1G9yxPu_aAJcTTO53tsv2yv6a34E9fY30EAuyWK0DZi1H54jjnQVFHOuARYFn_kHiTTwj9NbcV07zfKrpjrUYYoiS-NA_KQ5FdlLwlVx6NctB1LUkqua1WfGho3aa8"/>
<div class="absolute inset-0 bg-primary/20 flex items-center justify-center">
<div class="flex gap-1 items-end">
<div class="w-1 bg-white h-2"></div>
<div class="w-1 bg-white h-4"></div>
<div class="w-1 bg-white h-3"></div>
</div>
</div>
</div>
<div class="flex flex-col justify-between py-0.5">
<div class="flex flex-col">
<span class="text-[10px] text-primary font-bold uppercase tracking-wider mb-1">正在播放</span>
<p class="text-sm font-bold line-clamp-2 text-primary">04 设计规范的建立与组件库应用</p>
</div>
<p class="text-[11px] text-primary/70">35:20</p>
</div>
</div>
<!-- Playlist Item (Locked/Upcoming) -->
<div class="group flex items-start gap-3 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
<div class="relative size-20 shrink-0 rounded-md overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Upcoming lesson thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPybU-UlsdkCunSlJqzalN5ORjelzq3tjfObmyODzE6oI7RhJ0AJSB3N1Co0zPCrwhTLiLx_HSo7P2LoAYbtFA9Gpvcz-_GYmRJAT3KkyfMqcUtnCnHOpVMs6QOoq3yHP3ZfWntBUFgxqd2ptrsLbSVfrQcN6kWPdHt_8-LkuKTH9te6gk8N7yypW0Y2iLtaFcac9By10alv_ehCn7nSCugYxSdUFaxi09AnM2u4M7eXyjDA2KgLe37uF92nweeUibfcmrrowH6Sg"/>
<div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"></div>
</div>
<div class="flex flex-col justify-between py-0.5">
<p class="text-sm font-semibold line-clamp-2">05 进阶动效：让你的 UI 动起来</p>
<p class="text-[11px] text-slate-400">28:10</p>
</div>
</div>
<!-- More items... -->
<div class="group flex items-start gap-3 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
<div class="relative size-20 shrink-0 rounded-md overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Upcoming lesson thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAznBLKryh0DfFC74wX5RWwlPcqjF1SrxlWnTX8GK4RbZ-sYW2kACAfqSCN9i8ntxIFNfyOKrpKllCKt53n9apqLnY6shcwav1HjTTfLSdw5MksVVhq3cv-BIe0nK2ihfi0cAM53w7rWR68VXBXCzUmaxW7SQXAr720Qh9OOXizmk6zZCVFzJnPcQA0M4zWIV3Cw7kRk6fZFqgqOBOo48-FJQdUkY9etFssSQC0U2q0xPouWuaXLaI9SNoBjWj0kQY-9XxGnn0FAdk"/>
</div>
<div class="flex flex-col justify-between py-0.5">
<p class="text-sm font-semibold line-clamp-2">06 多终端适配：响应式设计核心要点</p>
<p class="text-[11px] text-slate-400">42:30</p>
</div>
</div>
<div class="group flex items-start gap-3 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer">
<div class="relative size-20 shrink-0 rounded-md overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Upcoming lesson thumbnail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZAhLlj9X3wH3uHRfz5Bu7aoks2AE1w7Zpmkglq51jVa8OCXyVArPSaWg5yGRYy21-YBZrFXqEkKrTwOXfPpVsZvULxEfyomRPip3F1aELjdA4RoeexnbI1k5yBTy3YiE77Z1k-Ib_XmxD0v3xzRKlkgS3bvd0S04fY0ASoWShCUXsIoi0owaKdEU5vDlIpiPpZu00oKbOLOKnjVO0RKBmOFkQbq0JqMZ221kbpbBXwhNmDhlzmRTsLAmoXDpsuPOuRfDqOvRHzRg"/>
</div>
<div class="flex flex-col justify-between py-0.5">
<p class="text-sm font-semibold line-clamp-2">07 设计评判与复盘：提升审美上限</p>
<p class="text-[11px] text-slate-400">25:15</p>
</div>
</div>
</div>
<div class="p-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/30 rounded-b-xl">
<button class="w-full py-2 bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors">
                            查看全部 12 个章节
                        </button>
</div>
</div>
<!-- Instructor Info -->
<div class="bg-white dark:bg-slate-900 rounded-xl p-5 shadow-sm border border-slate-200 dark:border-slate-800 flex items-center gap-4">
<div class="size-12 rounded-full overflow-hidden border-2 border-primary/20">
<img class="w-full h-full object-cover" data-alt="Course instructor photo" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzN6ROOfLqkK3YNOOAn2MeYBWPnzh6LGVlKvEoiGs7_g7E3m63nM1BuoPhzdLa9PbpwGmzLJVNgq4s2q9-cKOy3efZaDW4YbX3O4Q_XEBBvN94LfeyoIC-32ExrOINzfcHlQdpSXaGT0m5p0pB49e9ks0EKMiLQOipTYTSrIA9-16wHocJ5Oy49rqni1sURF2dJ2-dQ-M4lTwWq4n0ftj3qP_q3MPATAFGg8TH-llaZM2fn9WjUIq2kqhDDu-YRmn1JTIOWBbETOc"/>
</div>
<div class="flex-1">
<h4 class="font-bold text-sm">王老师 (Arvin Wang)</h4>
<p class="text-xs text-slate-500">资深 UI/UX 设计专家, 10年行业经验</p>
</div>
<button class="px-3 py-1.5 bg-primary/10 text-primary text-xs font-bold rounded-lg hover:bg-primary/20 transition-colors">关注</button>
</div>
</div>
</div>
</main>
<!-- Footer for context -->
<footer class="mt-12 py-8 border-t border-slate-200 dark:border-slate-800">
<div class="max-w-7xl mx-auto px-4 text-center">
<p class="text-sm text-slate-500 dark:text-slate-400">© 2023 智学在线 (SmartLearn UI). 专业级 UI 设计教育平台</p>
</div>
</footer>
</body></html>