Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Journalism Lab — Builders Track</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:wght@600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: #fafafa; | |
| color: #222; | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .page { | |
| max-width: 640px; | |
| margin: 0 auto; | |
| padding: 4rem 1.5rem 3rem; | |
| } | |
| /* Header */ | |
| .eyebrow { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: #888; | |
| margin-bottom: 0.75rem; | |
| } | |
| h1 { | |
| font-family: 'Source Serif 4', Georgia, serif; | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| color: #111; | |
| margin-bottom: 0.6rem; | |
| } | |
| .intro { | |
| font-size: 1.05rem; | |
| color: #555; | |
| margin-bottom: 3rem; | |
| } | |
| /* Sections */ | |
| section { | |
| margin-bottom: 2.5rem; | |
| } | |
| section h2 { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: #999; | |
| margin-bottom: 1rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 1px solid #e8e8e8; | |
| } | |
| /* Starter kit */ | |
| .kit { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 1.25rem; | |
| padding: 1.25rem 1.5rem; | |
| background: #fff; | |
| border: 1px solid #e4e4e4; | |
| border-radius: 10px; | |
| transition: border-color 0.2s; | |
| } | |
| .kit:hover { border-color: #ccc; } | |
| .kit-icon { | |
| flex-shrink: 0; | |
| width: 44px; | |
| height: 44px; | |
| background: #111; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .kit-icon svg { width: 22px; height: 22px; } | |
| .kit-text h3 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: #111; | |
| margin-bottom: 0.2rem; | |
| } | |
| .kit-text p { | |
| font-size: 0.85rem; | |
| color: #666; | |
| line-height: 1.5; | |
| } | |
| .kit-text a { | |
| display: inline-block; | |
| margin-top: 0.6rem; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: #111; | |
| text-decoration: none; | |
| border-bottom: 1.5px solid #111; | |
| padding-bottom: 1px; | |
| transition: opacity 0.15s; | |
| } | |
| .kit-text a:hover { opacity: 0.6; } | |
| /* Link rows */ | |
| .row { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid #f0f0f0; | |
| text-decoration: none; | |
| color: inherit; | |
| transition: opacity 0.15s; | |
| } | |
| .row:last-child { border-bottom: none; } | |
| .row:hover { opacity: 0.6; } | |
| .row-left { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.5rem; | |
| } | |
| .row-title { | |
| font-size: 0.92rem; | |
| font-weight: 500; | |
| color: #222; | |
| } | |
| .row-desc { | |
| font-size: 0.8rem; | |
| color: #888; | |
| } | |
| .row-meta { | |
| font-size: 0.78rem; | |
| color: #aaa; | |
| white-space: nowrap; | |
| margin-left: 1rem; | |
| } | |
| .tag { | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| padding: 0.15em 0.45em; | |
| border-radius: 3px; | |
| background: #f0f0f0; | |
| color: #777; | |
| vertical-align: 1px; | |
| } | |
| /* Footer */ | |
| footer { | |
| margin-top: 3rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid #eee; | |
| font-size: 0.78rem; | |
| color: #aaa; | |
| } | |
| footer a { | |
| color: #888; | |
| text-decoration: none; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| footer a:hover { color: #555; } | |
| @media (max-width: 520px) { | |
| .page { padding: 2.5rem 1.25rem 2rem; } | |
| h1 { font-size: 1.7rem; } | |
| .kit { flex-direction: column; gap: 0.75rem; padding: 1.25rem; } | |
| .row { flex-direction: column; gap: 0.15rem; } | |
| .row-meta { margin-left: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <p class="eyebrow">CUNY AI Journalism Lab</p> | |
| <h1>Builders Track</h1> | |
| <p class="intro">Course materials and resources for building AI-powered journalism tools.</p> | |
| <!-- Starter Kit --> | |
| <section> | |
| <h2>Starter Kit</h2> | |
| <div class="kit"> | |
| <div class="kit-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/> | |
| </svg> | |
| </div> | |
| <div class="kit-text"> | |
| <h3>My Assistant</h3> | |
| <p>Workspace template for building a personal AI coding assistant with Codex. Includes AGENTS.md, context files, and reusable skills.</p> | |
| <a href="my-assistant.zip" download>Download .zip</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Presentations --> | |
| <section> | |
| <h2>Presentations</h2> | |
| <a class="row" href="Builders-Class-5-Slides.html"> | |
| <div class="row-left"> | |
| <span class="row-title">Class 5 — Your AI Coding Assistant</span> | |
| </div> | |
| <span class="row-meta">Mar 26</span> | |
| </a> | |
| <div class="row-desc" style="padding: 0 0 0.5rem; margin-top: -0.4rem;">Setup, AGENTS.md, context files, building your first skill</div> | |
| <a class="row" href="Builders-Class-6-Slides.html"> | |
| <div class="row-left"> | |
| <span class="row-title">Class 6 — Build, Code & Ship</span> | |
| </div> | |
| <span class="row-meta">Apr 9</span> | |
| </a> | |
| <div class="row-desc" style="padding: 0 0 0; margin-top: -0.4rem;">Codex coding, MCP servers, subagents, capstone integration</div> | |
| </section> | |
| <!-- Resources --> | |
| <section> | |
| <h2>Resources</h2> | |
| <a class="row" href="https://openai.com/index/introducing-codex/" target="_blank" rel="noopener"> | |
| <span class="row-title">Codex Documentation</span> | |
| </a> | |
| <a class="row" href="https://modelcontextprotocol.io/directory" target="_blank" rel="noopener"> | |
| <span class="row-title">MCP Servers Directory</span> | |
| </a> | |
| <a class="row" href="https://code.visualstudio.com/" target="_blank" rel="noopener"> | |
| <span class="row-title">VS Code</span> | |
| </a> | |
| </section> | |
| <footer> | |
| Florent Daudens | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |