Maas2-group
/
Maas-Model-platform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!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@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>
<title>创建课程 - 在线学习平台</title>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen">
<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 class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-6 py-4 lg:px-40">
<div class="flex items-center gap-4">
<div class="size-8 flex items-center justify-center rounded-lg bg-primary text-white">
<span class="material-symbols-outlined text-2xl">menu_book</span>
</div>
<h2 class="text-slate-900 dark:text-slate-100 text-xl font-bold leading-tight tracking-[-0.015em]">创建新课程</h2>
</div>
<div class="flex gap-2">
<button class="flex items-center justify-center rounded-lg h-10 w-10 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 transition-colors">
<span class="material-symbols-outlined">more_horiz</span>
</button>
</div>
</header>
<main class="px-6 lg:px-40 flex flex-1 justify-center py-8">
<div class="layout-content-container flex flex-col max-w-[960px] flex-1 gap-8 bg-white dark:bg-slate-900 p-8 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800">
<div class="space-y-6">
<!-- Course Name -->
<div class="flex flex-col gap-2">
<label class="text-slate-900 dark:text-slate-100 text-base font-semibold">课程名称</label>
<input class="form-input w-full rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:border-primary focus:ring-2 focus:ring-primary/20 h-12 px-4 text-base transition-all" placeholder="例如：高级UI设计实战指南" type="text" value=""/>
</div>
<!-- Course Cover -->
<div class="flex flex-col gap-2">
<label class="text-slate-900 dark:text-slate-100 text-base font-semibold">课程封面</label>
<div class="group relative w-full aspect-video rounded-xl overflow-hidden border-2 border-dashed border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 flex flex-col items-center justify-center cursor-pointer hover:border-primary transition-colors">
<div class="absolute inset-0 bg-cover bg-center opacity-40 group-hover:opacity-60 transition-opacity" data-alt="Abstract blue digital learning background pattern" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDulOIkDXxOFcmqfp8dn3k36RSlf-iYI3A05hkBF0w81-qFhXE70QZpwPIymp0t94eJfOn9HhsulqfJp-QI0gCiZgWS_c9x1BUhBjB83bgrHTMLxSXvAT1NOoElrTW9QpOubdbIO_XIuR1SGwNkM-NhLRo2MiCq4qmH5ag3Rnxaxjv0NSF3Z_oZfnYXlFXVhtsH7fu7fO6iMk1Z0CXOHxaEq-13RMwVGdxzeSdl2ibKDQEMdI3QUgHtL1FEP1AZ2aJEj8ws8shksz0");'></div>
<div class="relative z-10 flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-4xl text-slate-400 group-hover:text-primary transition-colors">add_photo_alternate</span>
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">点击或拖拽上传封面图</span>
<span class="text-xs text-slate-400">建议尺寸 16:9, 小于 5MB</span>
</div>
</div>
</div>
<!-- Course Introduction -->
<div class="flex flex-col gap-2">
<label class="text-slate-900 dark:text-slate-100 text-base font-semibold">课程简介</label>
<textarea class="form-input w-full rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:border-primary focus:ring-2 focus:ring-primary/20 min-h-[160px] p-4 text-base transition-all resize-none" placeholder="请详细描述课程的目标、内容以及学生能学到的技能..."></textarea>
</div>
<!-- Permissions Toggle -->
<div class="flex items-center justify-between p-4 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700">
<div class="flex flex-col gap-0.5">
<p class="text-slate-900 dark:text-slate-100 font-semibold">课程可见性</p>
<p class="text-sm text-slate-500 dark:text-slate-400">开启后学生可以在平台上搜索并加入该课程</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox" value=""/>
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
</label>
</div>
</div>
<!-- Action Buttons -->
<div class="flex items-center justify-end gap-4 pt-4 border-t border-slate-100 dark:border-slate-800">
<button class="px-6 py-2.5 rounded-lg text-slate-600 dark:text-slate-300 font-bold hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
                            取消
                        </button>
<button class="px-8 py-2.5 rounded-lg bg-primary text-white font-bold shadow-md hover:bg-primary/90 transition-all flex items-center gap-2">
<span>立即创建</span>
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
</main>
<footer class="px-6 lg:px-40 py-8 text-center text-slate-400 text-sm">
<p>© 2024 在线学习平台. 保留所有权利.</p>
</footer>
</div>
</div>
</body></html>