playwright-director 0.2.0

package/templates/site/src/pages/index.astro

@@ -0,0 +1,5 @@
+---
+import TutorialsHome from '../components/TutorialsHome.astro';
+---
+
+<TutorialsHome />

package/templates/site/src/styles/tutorials.css

@@ -0,0 +1,303 @@
+/* Tutorial video gallery styles */
+:root {
+	--color-primary: #6366f1;
+	--color-primary-dark: #4f46e5;
+	--color-bg: #f8fafc;
+	--color-bg-card: #ffffff;
+	--color-text: #1e293b;
+	--color-text-muted: #64748b;
+	--color-border: #e2e8f0;
+	--color-pro: #f59e0b;
+	--font-family: system-ui, -apple-system, sans-serif;
+	--radius: 0.75rem;
+	--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+	--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		--color-bg: #0f172a;
+		--color-bg-card: #1e293b;
+		--color-text: #e2e8f0;
+		--color-text-muted: #94a3b8;
+		--color-border: #334155;
+		--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+		--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
+	}
+}
+
+:root[data-theme='dark'] {
+	--color-bg: #0f172a;
+	--color-bg-card: #1e293b;
+	--color-text: #e2e8f0;
+	--color-text-muted: #94a3b8;
+	--color-border: #334155;
+	--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+	--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+	background: var(--color-bg);
+	color: var(--color-text);
+	line-height: 1.6;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Header */
+header {
+	background: var(--color-bg-card);
+	border-bottom: 1px solid var(--color-border);
+	position: sticky;
+	top: 0;
+	z-index: 100;
+}
+
+.header-content {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 1rem 2rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.logo {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	text-decoration: none;
+	color: var(--color-text);
+	font-weight: 600;
+	font-size: 1.1rem;
+}
+
+.logo-icon {
+	font-size: 1.5rem;
+}
+
+.logo-img {
+	height: 32px;
+	width: auto;
+}
+
+/* Main content */
+main {
+	flex: 1;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 2rem;
+	width: 100%;
+}
+
+/* Hero section */
+.hero {
+	text-align: center;
+	padding: 3rem 1rem;
+}
+
+.hero h1 {
+	font-size: 2.5rem;
+	margin-bottom: 0.5rem;
+	color: var(--color-text);
+}
+
+.hero p {
+	font-size: 1.25rem;
+	color: var(--color-text-muted);
+}
+
+/* Category sections */
+.category {
+	margin-bottom: 3rem;
+}
+
+.category-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: 1.5rem;
+	padding-bottom: 0.5rem;
+	border-bottom: 2px solid var(--color-border);
+}
+
+.category-header h2 {
+	font-size: 1.25rem;
+	font-weight: 600;
+}
+
+.category-icon {
+	font-size: 1.25rem;
+}
+
+/* Video grid */
+.video-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+	gap: 1.5rem;
+}
+
+/* Video card */
+.video-card {
+	background: var(--color-bg-card);
+	border-radius: var(--radius);
+	overflow: hidden;
+	box-shadow: var(--shadow);
+	transition: all 0.3s ease;
+	cursor: pointer;
+}
+
+.video-card:hover {
+	transform: translateY(-4px);
+	box-shadow: var(--shadow-hover);
+}
+
+.video-thumbnail {
+	position: relative;
+	aspect-ratio: 16 / 9;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.video-thumbnail img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.play-button {
+	position: absolute;
+	width: 60px;
+	height: 60px;
+	background: rgba(255, 255, 255, 0.95);
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5rem;
+	transition: transform 0.2s;
+}
+
+.video-card:hover .play-button {
+	transform: scale(1.1);
+}
+
+.video-info {
+	padding: 1rem;
+}
+
+.video-title {
+	font-weight: 600;
+	margin-bottom: 0.25rem;
+	font-size: 1rem;
+}
+
+.video-meta {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	color: var(--color-text-muted);
+	font-size: 0.875rem;
+}
+
+.video-duration {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+/* Video modal */
+.video-modal {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.95);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+	padding: 2rem;
+}
+
+.video-modal video {
+	max-width: 100%;
+	max-height: 70vh;
+	border-radius: var(--radius);
+}
+
+.video-modal-close {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+	background: white;
+	border: none;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	font-size: 1.5rem;
+	cursor: pointer;
+	z-index: 10;
+}
+
+.video-modal-close:hover {
+	background: #f0f0f0;
+}
+
+/* Footer */
+footer {
+	background: var(--color-bg-card);
+	border-top: 1px solid var(--color-border);
+	padding: 1.5rem;
+}
+
+.footer-content {
+	max-width: 1200px;
+	margin: 0 auto;
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
+	color: var(--color-text-muted);
+	font-size: 0.875rem;
+}
+
+.footer-content a {
+	color: var(--color-text-muted);
+	text-decoration: none;
+}
+
+.footer-content a:hover {
+	color: var(--color-primary);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.hero h1 {
+		font-size: 1.75rem;
+	}
+
+	.hero p {
+		font-size: 1rem;
+	}
+
+	.video-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.header-content {
+		padding: 1rem;
+	}
+
+	main {
+		padding: 1rem;
+	}
+}