task-manager-api/index.html at main · cloudy-fix/task-manager-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Task Manager API | Live Project</title>
  <meta name="description" content="A production-style task and project management API using FastAPI, PostgreSQL, JWT authentication, Docker, migrations, and background jobs.">
  <meta name="theme-color" content="#0d9488">
  <link rel="stylesheet" href="assets/site.css">
</head>
<body>
  <header class="shell topbar">
    <a class="brand" href="./" aria-label="Project home">
      <span class="brand-mark" aria-hidden="true"></span>
      <span id="brand-title">Task Manager API</span>
    </a>
    <nav class="top-actions" aria-label="Project links">
      <a class="ghost-button" id="repo-link" href="#">Repository</a>
      <a class="ghost-button" id="architecture-link" href="#">Architecture</a>
      <a class="ghost-button" id="portfolio-link" href="#">Portfolio Hub</a>
    </nav>
  </header>

  <main class="shell">
    <section class="hero" aria-labelledby="project-title">
      <div>
        <p class="eyebrow" id="category">Live Project</p>
        <h1 id="project-title">Task Manager API</h1>
        <p class="mission" id="mission">Loading project workspace...</p>
        <div class="hero-actions">
          <a class="button" id="repo-link-2" href="#">Open Source Repo</a>
          <a class="ghost-button" href="#workspace">Use Live Workspace</a>
        </div>
        <div class="metric-grid" id="metric-grid" aria-label="Project metrics"></div>
      </div>

      <div class="visual" aria-label="Production glass model">
        <div class="glass-base" aria-hidden="true"></div>
        <div class="glass-stack" aria-hidden="true">
          <span class="glass-layer one"></span>
          <span class="glass-layer two"></span>
          <span class="glass-layer three"></span>
        </div>
        <div class="runtime-card">
          <strong>Production project surface</strong>
          <span id="runtime-note">Loading runtime details...</span>
        </div>
      </div>
    </section>

    <section id="workspace" aria-labelledby="workspace-title">
      <div class="section-head">
        <div>
          <p class="eyebrow">Individual Repository Link</p>
          <h2 id="workspace-title">Live Project Workspace</h2>
        </div>
        <p>This page is tailored to the actual repository workflow, with browser-side controls where a static host can run them and direct links to the production source.</p>
      </div>
      <div class="workspace">
        <div id="demo-root"></div>
        <aside id="side-root"></aside>
      </div>
    </section>

    <section aria-labelledby="system-title">
      <div class="section-head">
        <div>
          <p class="eyebrow">Stack and System Map</p>
          <h2 id="system-title">Production Readiness</h2>
        </div>
        <p>The repository keeps the implementation, architecture, operations guide, workflow diagram, and security notes together for interview review.</p>
      </div>
      <div class="workspace">
        <article class="panel">
          <h3>Technology Stack</h3>
          <div class="stack-list" id="stack-list"></div>
        </article>
        <article class="panel">
          <h3>Runtime Components</h3>
          <div class="status-list" id="component-list"></div>
        </article>
      </div>
    </section>

    <section class="dark-band" aria-labelledby="docs-title">
      <div class="section-head">
        <div>
          <p class="eyebrow">Review Pack</p>
          <h2 id="docs-title">Architecture, Workflow, Operations</h2>
        </div>
        <p>Use these links to inspect the exact project files behind this live page.</p>
      </div>
      <div class="doc-grid" id="doc-grid"></div>
    </section>
  </main>

  <footer class="shell footer">
    <span>Live project page for <strong id="footer-repo">repository</strong>. Updated for production review in <span id="footer-date">2026</span>.</span>
  </footer>

  <script src="assets/project.js"></script>
</body>
</html>