templates/template.html
templates/template.htmlBrowse 2 files
4,000 tokens
12,483 bytes
Token encoding: o200k_base
Snapshot 24fd22b
← Back to SKILL.md
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>[PROJECT NAME] Architecture Diagram</title>7 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">8 <style>9 * {10 margin: 0;11 padding: 0;12 box-sizing: border-box;13 }14 15 body {16 font-family: 'JetBrains Mono', monospace;17 background: #020617;18 min-height: 100vh;19 padding: 2rem;20 color: white;21 }22 23 .container {24 max-width: 1200px;25 margin: 0 auto;26 }27 28 .header {29 margin-bottom: 2rem;30 }31 32 .header-row {33 display: flex;34 align-items: center;35 gap: 1rem;36 margin-bottom: 0.5rem;37 }38 39 .pulse-dot {40 width: 12px;41 height: 12px;42 background: #22d3ee;43 border-radius: 50%;44 animation: pulse 2s infinite;45 }46 47 @keyframes pulse {48 0%, 100% { opacity: 1; }49 50% { opacity: 0.5; }50 }51 52 h1 {53 font-size: 1.5rem;54 font-weight: 700;55 letter-spacing: -0.025em;56 }57 58 .subtitle {59 color: #94a3b8;60 font-size: 0.875rem;61 margin-left: 1.75rem;62 }63 64 .diagram-container {65 background: rgba(15, 23, 42, 0.5);66 border-radius: 1rem;67 border: 1px solid #1e293b;68 padding: 1.5rem;69 overflow-x: auto;70 }71 72 svg {73 width: 100%;74 min-width: 900px;75 display: block;76 }77 78 .cards {79 display: grid;80 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));81 gap: 1rem;82 margin-top: 2rem;83 }84 85 .card {86 background: rgba(15, 23, 42, 0.5);87 border-radius: 0.75rem;88 border: 1px solid #1e293b;89 padding: 1.25rem;90 }91 92 .card-header {93 display: flex;94 align-items: center;95 gap: 0.5rem;96 margin-bottom: 0.75rem;97 }98 99 .card-dot {100 width: 8px;101 height: 8px;102 border-radius: 50%;103 }104 105 .card-dot.cyan { background: #22d3ee; }106 .card-dot.emerald { background: #34d399; }107 .card-dot.violet { background: #a78bfa; }108 .card-dot.amber { background: #fbbf24; }109 .card-dot.rose { background: #fb7185; }110 111 .card h3 {112 font-size: 0.875rem;113 font-weight: 600;114 }115 116 .card ul {117 list-style: none;118 color: #94a3b8;119 font-size: 0.75rem;120 }121 122 .card li {123 margin-bottom: 0.375rem;124 }125 126 .footer {127 text-align: center;128 margin-top: 1.5rem;129 color: #475569;130 font-size: 0.75rem;131 }132 </style>133</head>134<body>135 <div class="container">136 <!-- Header -->137 <div class="header">138 <div class="header-row">139 <div class="pulse-dot"></div>140 <h1>[PROJECT NAME] Architecture</h1>141 </div>142 <p class="subtitle">[Subtitle description]</p>143 </div>144 145 <!-- Main Diagram -->146 <div class="diagram-container">147 <svg viewBox="0 0 1000 680">148 <!-- Definitions -->149 <defs>150 <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">151 <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />152 </marker>153 <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">154 <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>155 </pattern>156 </defs>157 158 <!-- Background Grid -->159 <rect width="100%" height="100%" fill="url(#grid)" />160 161 <!-- =================================================================162 COMPONENT EXAMPLES - Copy and customize these patterns163 ================================================================= -->164 165 <!-- External/Generic Component -->166 <rect x="30" y="280" width="100" height="50" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/>167 <text x="80" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Users</text>168 <text x="80" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">Browser/Mobile</text>169 170 <!-- Security Component -->171 <rect x="30" y="80" width="100" height="60" rx="6" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1.5"/>172 <text x="80" y="105" fill="white" font-size="11" font-weight="600" text-anchor="middle">Auth Provider</text>173 <text x="80" y="121" fill="#94a3b8" font-size="9" text-anchor="middle">OAuth 2.0</text>174 175 <!-- Region/Cloud Boundary -->176 <rect x="160" y="40" width="820" height="620" rx="12" fill="rgba(251, 191, 36, 0.05)" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>177 <text x="172" y="58" fill="#fbbf24" font-size="10" font-weight="600">AWS Region: us-west-2</text>178 179 <!-- AWS/Cloud Service -->180 <rect x="200" y="280" width="110" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>181 <text x="255" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">CloudFront</text>182 <text x="255" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">CDN</text>183 184 <!-- Multi-line AWS Component (S3 Buckets example) -->185 <rect x="200" y="380" width="110" height="100" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>186 <text x="255" y="400" fill="white" font-size="11" font-weight="600" text-anchor="middle">S3 Buckets</text>187 <text x="255" y="420" fill="#94a3b8" font-size="8" text-anchor="middle">• bucket-one</text>188 <text x="255" y="434" fill="#94a3b8" font-size="8" text-anchor="middle">• bucket-two</text>189 <text x="255" y="448" fill="#94a3b8" font-size="8" text-anchor="middle">• bucket-three</text>190 <text x="255" y="466" fill="#fbbf24" font-size="7" text-anchor="middle">OAI Protected</text>191 192 <!-- Security Group (dashed boundary) -->193 <rect x="350" y="265" width="120" height="80" rx="8" fill="transparent" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>194 <text x="358" y="279" fill="#fb7185" font-size="8">sg-name :port</text>195 196 <!-- Component inside security group -->197 <rect x="360" y="280" width="100" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>198 <text x="410" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Load Balancer</text>199 <text x="410" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS :443</text>200 201 <!-- Backend Component -->202 <rect x="510" y="280" width="110" height="50" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>203 <text x="565" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Server</text>204 <text x="565" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">FastAPI :8000</text>205 206 <!-- Database Component -->207 <rect x="700" y="280" width="120" height="50" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>208 <text x="760" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Database</text>209 <text x="760" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">PostgreSQL</text>210 211 <!-- Frontend Component -->212 <rect x="200" y="520" width="200" height="110" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/>213 <text x="300" y="545" fill="white" font-size="12" font-weight="600" text-anchor="middle">Frontend</text>214 <text x="300" y="565" fill="#94a3b8" font-size="9" text-anchor="middle">React + TypeScript</text>215 <text x="300" y="580" fill="#94a3b8" font-size="9" text-anchor="middle">Additional detail</text>216 <text x="300" y="595" fill="#94a3b8" font-size="9" text-anchor="middle">More info</text>217 <text x="300" y="615" fill="#22d3ee" font-size="8" text-anchor="middle">domain.example.com</text>218 219 <!-- =================================================================220 ARROW EXAMPLES221 ================================================================= -->222 223 <!-- Standard arrow with label -->224 <line x1="130" y1="305" x2="198" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>225 <text x="164" y="299" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS</text>226 227 <!-- Simple arrow (no label) -->228 <line x1="310" y1="305" x2="358" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>229 230 <!-- Vertical arrow -->231 <line x1="255" y1="330" x2="255" y2="378" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arrowhead)"/>232 <text x="270" y="358" fill="#94a3b8" font-size="9">OAI</text>233 234 <!-- Dashed arrow (for auth/security flows) -->235 <line x1="460" y1="305" x2="508" y2="305" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/>236 <line x1="620" y1="305" x2="698" y2="305" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arrowhead)"/>237 <text x="655" y="299" fill="#94a3b8" font-size="9">TLS</text>238 239 <!-- Curved path for auth flow -->240 <path d="M 80 140 L 80 200 Q 80 220 100 220 L 200 220 Q 220 220 220 240 L 220 278" fill="none" stroke="#fb7185" stroke-width="1.5" stroke-dasharray="5,5"/>241 <text x="150" y="210" fill="#fb7185" font-size="8">JWT + PKCE</text>242 243 <!-- =================================================================244 LEGEND245 ================================================================= -->246 <text x="720" y="70" fill="white" font-size="10" font-weight="600">Legend</text>247 248 <rect x="720" y="82" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/>249 <text x="742" y="90" fill="#94a3b8" font-size="8">Frontend</text>250 251 <rect x="720" y="98" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/>252 <text x="742" y="106" fill="#94a3b8" font-size="8">Backend</text>253 254 <rect x="720" y="114" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/>255 <text x="742" y="122" fill="#94a3b8" font-size="8">Cloud Service</text>256 257 <rect x="720" y="130" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/>258 <text x="742" y="138" fill="#94a3b8" font-size="8">Database</text>259 260 <rect x="720" y="146" width="16" height="10" rx="2" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1"/>261 <text x="742" y="154" fill="#94a3b8" font-size="8">Security</text>262 263 <line x1="720" y1="168" x2="736" y2="168" stroke="#fb7185" stroke-width="1" stroke-dasharray="3,3"/>264 <text x="742" y="171" fill="#94a3b8" font-size="8">Auth Flow</text>265 266 <rect x="720" y="178" width="16" height="10" rx="2" fill="transparent" stroke="#fb7185" stroke-width="1" stroke-dasharray="3,3"/>267 <text x="742" y="186" fill="#94a3b8" font-size="8">Security Group</text>268 </svg>269 </div>270 271 <!-- Info Cards -->272 <div class="cards">273 <div class="card">274 <div class="card-header">275 <div class="card-dot rose"></div>276 <h3>Card Title 1</h3>277 </div>278 <ul>279 <li>• Item one</li>280 <li>• Item two</li>281 <li>• Item three</li>282 <li>• Item four</li>283 </ul>284 </div>285 286 <div class="card">287 <div class="card-header">288 <div class="card-dot amber"></div>289 <h3>Card Title 2</h3>290 </div>291 <ul>292 <li>• Item one</li>293 <li>• Item two</li>294 <li>• Item three</li>295 <li>• Item four</li>296 </ul>297 </div>298 299 <div class="card">300 <div class="card-header">301 <div class="card-dot violet"></div>302 <h3>Card Title 3</h3>303 </div>304 <ul>305 <li>• Item one</li>306 <li>• Item two</li>307 <li>• Item three</li>308 <li>• Item four</li>309 </ul>310 </div>311 </div>312 313 <!-- Footer -->314 <p class="footer">315 [Project Name] • [Additional metadata]316 </p>317 </div>318</body>319</html>320