repo_card.html
html
sha256:8a1389ae62d0a688d5e027763249bd8faedfc39ab00857d65da6620d1ab8a689
Merge 'feat/9a-4-f7-overseer-provenance' into 'dev' — propo…
Human
3 days ago
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <link rel="preconnect" href="https://fonts.bunny.net" crossorigin> |
| 6 | <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet"> |
| 7 | <style> |
| 8 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| 9 | html, body { |
| 10 | width: 1200px; |
| 11 | height: 630px; |
| 12 | overflow: hidden; |
| 13 | font-family: Inter, system-ui, -apple-system, sans-serif; |
| 14 | background: #0d1117; |
| 15 | color: #e2e8f0; |
| 16 | } |
| 17 | .card { |
| 18 | width: 1200px; |
| 19 | height: 630px; |
| 20 | display: flex; |
| 21 | flex-direction: column; |
| 22 | background: linear-gradient(145deg, #0d1117 0%, #161b22 55%, #1c1c2e 100%); |
| 23 | border: 1px solid rgba(99, 102, 241, 0.18); |
| 24 | } |
| 25 | .header { |
| 26 | display: flex; |
| 27 | align-items: center; |
| 28 | justify-content: space-between; |
| 29 | padding: 28px 48px 20px; |
| 30 | border-bottom: 1px solid rgba(99, 102, 241, 0.12); |
| 31 | } |
| 32 | .brand { |
| 33 | display: flex; |
| 34 | align-items: center; |
| 35 | gap: 14px; |
| 36 | } |
| 37 | .brand-text { |
| 38 | font-size: 28px; |
| 39 | font-weight: 600; |
| 40 | color: #60a5fa; |
| 41 | letter-spacing: -0.02em; |
| 42 | } |
| 43 | .domain-badge { |
| 44 | font-size: 18px; |
| 45 | font-weight: 500; |
| 46 | padding: 6px 16px; |
| 47 | border-radius: 999px; |
| 48 | background: rgba(96, 165, 250, 0.12); |
| 49 | color: #93c5fd; |
| 50 | border: 1px solid rgba(96, 165, 250, 0.25); |
| 51 | text-transform: uppercase; |
| 52 | letter-spacing: 0.06em; |
| 53 | } |
| 54 | .body { |
| 55 | flex: 1; |
| 56 | display: flex; |
| 57 | gap: 32px; |
| 58 | padding: 40px 48px 36px; |
| 59 | align-items: flex-start; |
| 60 | } |
| 61 | .avatar { |
| 62 | width: 96px; |
| 63 | height: 96px; |
| 64 | border-radius: 50%; |
| 65 | flex-shrink: 0; |
| 66 | border: 2px solid rgba(96, 165, 250, 0.35); |
| 67 | object-fit: cover; |
| 68 | background: #161b22; |
| 69 | } |
| 70 | .content { |
| 71 | flex: 1; |
| 72 | min-width: 0; |
| 73 | display: flex; |
| 74 | flex-direction: column; |
| 75 | gap: 16px; |
| 76 | } |
| 77 | .repo-title { |
| 78 | font-size: 44px; |
| 79 | font-weight: 700; |
| 80 | line-height: 1.15; |
| 81 | letter-spacing: -0.03em; |
| 82 | white-space: nowrap; |
| 83 | overflow: hidden; |
| 84 | text-overflow: ellipsis; |
| 85 | background: linear-gradient(90deg, #e2e8f0, #93c5fd); |
| 86 | -webkit-background-clip: text; |
| 87 | -webkit-text-fill-color: transparent; |
| 88 | background-clip: text; |
| 89 | } |
| 90 | .description { |
| 91 | font-size: 26px; |
| 92 | line-height: 1.45; |
| 93 | color: #a8b8cc; |
| 94 | display: -webkit-box; |
| 95 | -webkit-line-clamp: 2; |
| 96 | -webkit-box-orient: vertical; |
| 97 | overflow: hidden; |
| 98 | max-height: 76px; |
| 99 | } |
| 100 | .stats { |
| 101 | display: flex; |
| 102 | gap: 36px; |
| 103 | margin-top: auto; |
| 104 | padding: 28px 48px 40px; |
| 105 | border-top: 1px solid rgba(99, 102, 241, 0.1); |
| 106 | } |
| 107 | .stat { |
| 108 | display: flex; |
| 109 | flex-direction: column; |
| 110 | gap: 4px; |
| 111 | } |
| 112 | .stat-value { |
| 113 | font-size: 32px; |
| 114 | font-weight: 700; |
| 115 | color: #e2e8f0; |
| 116 | font-variant-numeric: tabular-nums; |
| 117 | } |
| 118 | .stat-label { |
| 119 | font-size: 18px; |
| 120 | color: #6b7fa0; |
| 121 | font-weight: 500; |
| 122 | } |
| 123 | </style> |
| 124 | </head> |
| 125 | <body> |
| 126 | <div class="card"> |
| 127 | <div class="header"> |
| 128 | <div class="brand"> |
| 129 | <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 20 20" aria-hidden="true"> |
| 130 | <line x1="10" y1="4.5" x2="4" y2="15.5" stroke="#60a5fa" stroke-width="1.2" stroke-linecap="round"/> |
| 131 | <line x1="10" y1="4.5" x2="16" y2="15.5" stroke="#60a5fa" stroke-width="1.2" stroke-linecap="round"/> |
| 132 | <circle cx="10" cy="4.5" r="4" fill="#60a5fa"/> |
| 133 | <circle cx="4" cy="15.5" r="3.5" fill="#60a5fa"/> |
| 134 | <circle cx="16" cy="15.5" r="3.5" fill="#60a5fa"/> |
| 135 | </svg> |
| 136 | <span class="brand-text">MuseHub</span> |
| 137 | </div> |
| 138 | {% if domain_label %} |
| 139 | <span class="domain-badge">{{ domain_label }}</span> |
| 140 | {% endif %} |
| 141 | </div> |
| 142 | <div class="body"> |
| 143 | <img class="avatar" src="data:image/png;base64,{{ avatar_png_b64 }}" alt="" width="96" height="96"> |
| 144 | <div class="content"> |
| 145 | <h1 class="repo-title">{{ repo_title }}</h1> |
| 146 | <p class="description">{{ description }}</p> |
| 147 | </div> |
| 148 | </div> |
| 149 | <div class="stats"> |
| 150 | <div class="stat"> |
| 151 | <span class="stat-value">{{ total_commits }}</span> |
| 152 | <span class="stat-label">commits</span> |
| 153 | </div> |
| 154 | <div class="stat"> |
| 155 | <span class="stat-value">{{ fork_count }}</span> |
| 156 | <span class="stat-label">forks</span> |
| 157 | </div> |
| 158 | <div class="stat"> |
| 159 | <span class="stat-value">{{ open_issue_count }}</span> |
| 160 | <span class="stat-label">issues open</span> |
| 161 | </div> |
| 162 | </div> |
| 163 | </div> |
| 164 | </body> |
| 165 | </html> |
File History
2 commits
sha256:8a1389ae62d0a688d5e027763249bd8faedfc39ab00857d65da6620d1ab8a689
Merge 'feat/9a-4-f7-overseer-provenance' into 'dev' — propo…
Human
3 days ago
sha256:bee12c5cbde2334f98421c6c209d768fa6b8004d6705c9ea798ce6c1651bc11f
Merge 'infra/database-phase3-4-cleanup' into 'dev' — propos…
Human
4 days ago