Skip to content

Commit 94209fa

Browse files
niyamaxniyamax
committed
Widget added
1 parent 923d50e commit 94209fa

File tree

5 files changed

+734
-1
lines changed

5 files changed

+734
-1
lines changed

‎src/App.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import React from 'react'
22
import GitSequencer from './components/GitSequencer'
3+
import EmbedWidget from './components/EmbedWidget'
34

45
function App() {
6+
// Check if this is an embed route
7+
const isEmbed = window.location.pathname.startsWith('/embed/')
8+
9+
if (isEmbed) {
10+
return <EmbedWidget />
11+
}
12+
513
return (
614
<div className="app-container">
715
<GitSequencer />

‎src/components/EmbedWidget.css‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
/* ===== EMBED WIDGET ===== */
2+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
3+
4+
.embed-widget {
5+
width: 100%;
6+
height: auto;
7+
background: var(--bg, #0d0d0d);
8+
color: var(--text, #aaaaaa);
9+
font-family: 'JetBrains Mono', monospace;
10+
font-size: 12px;
11+
display: flex;
12+
flex-direction: column;
13+
padding: 12px;
14+
box-sizing: border-box;
15+
overflow: hidden;
16+
}
17+
18+
/* Header */
19+
.embed-header {
20+
display: flex;
21+
align-items: center;
22+
gap: 6px;
23+
margin-bottom: 10px;
24+
flex-shrink: 0;
25+
}
26+
27+
.embed-brand {
28+
display: flex;
29+
align-items: center;
30+
gap: 4px;
31+
}
32+
33+
.embed-favicon {
34+
width: 12px;
35+
height: 12px;
36+
margin-right: -2px;
37+
margin-left: -4px;
38+
}
39+
40+
.embed-title {
41+
color: var(--accent, #f23400);
42+
font-weight: 700;
43+
font-size: 14px;
44+
margin-top: 1px;
45+
}
46+
47+
.embed-username {
48+
color: var(--text, #aaaaaa);
49+
font-weight: 500;
50+
font-size: 12px;
51+
border-radius: 4px;
52+
}
53+
54+
/* Loading & Error States */
55+
.embed-loading,
56+
.embed-error {
57+
flex: 1;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
color: var(--text-dim, #555555);
62+
font-size: 12px;
63+
}
64+
65+
.embed-error {
66+
color: var(--error, #f23400);
67+
}
68+
69+
/* Graph */
70+
.embed-graph {
71+
overflow-x: auto;
72+
overflow-y: hidden;
73+
margin-bottom: 8px;
74+
scrollbar-width: thin;
75+
scrollbar-color: #444 transparent;
76+
}
77+
78+
.embed-graph::-webkit-scrollbar {
79+
height: 2px;
80+
}
81+
82+
.embed-graph::-webkit-scrollbar-track {
83+
background: transparent;
84+
}
85+
86+
.embed-graph::-webkit-scrollbar-thumb {
87+
background-color: #444;
88+
border-radius: 2px;
89+
}
90+
91+
.embed-graph-grid {
92+
display: flex;
93+
gap: 2px;
94+
height: 100%;
95+
min-width: max-content;
96+
}
97+
98+
.embed-week-col {
99+
display: flex;
100+
flex-direction: column;
101+
gap: 2px;
102+
flex-shrink: 0;
103+
}
104+
105+
.embed-day-cell {
106+
width: 8px;
107+
height: 8px;
108+
background: var(--level-0, #1a1a1a);
109+
border-radius: 1px;
110+
transition: background 0.1s, box-shadow 0.1s;
111+
}
112+
113+
.embed-day-cell.playing {
114+
background: var(--text-bright, #ffffff) !important;
115+
box-shadow: 0 0 6px var(--text-bright, #ffffff);
116+
}
117+
118+
.embed-day-cell.level-1 {
119+
background: var(--level-1, #0e4429);
120+
}
121+
122+
.embed-day-cell.level-2 {
123+
background: var(--level-2, #006d32);
124+
}
125+
126+
.embed-day-cell.level-3 {
127+
background: var(--level-3, #26a641);
128+
}
129+
130+
.embed-day-cell.level-4 {
131+
background: var(--level-4, #39d353);
132+
}
133+
134+
/* Controls */
135+
.embed-controls {
136+
display: flex;
137+
flex-direction: column;
138+
gap: 8px;
139+
flex-shrink: 0;
140+
}
141+
142+
.embed-ctrl-btn {
143+
width: 100%;
144+
padding: 0.5rem 0.8rem;
145+
background: transparent;
146+
border: 1px solid var(--text-dim, #555555);
147+
color: var(--text, #aaaaaa);
148+
font-family: inherit;
149+
font-size: 0.85rem;
150+
cursor: pointer;
151+
border-radius: 4px;
152+
transition: all 0.15s;
153+
display: flex;
154+
align-items: center;
155+
justify-content: center;
156+
gap: 0.4rem;
157+
}
158+
159+
.embed-ctrl-btn:hover:not(:disabled) {
160+
border-color: var(--text, #aaaaaa);
161+
color: var(--text-bright, #ffffff);
162+
}
163+
164+
.embed-ctrl-btn:disabled {
165+
opacity: 0.3;
166+
cursor: not-allowed;
167+
}
168+
169+
.embed-ctrl-btn.active {
170+
background: var(--success, #4ec9b0);
171+
border-color: var(--success, #4ec9b0);
172+
color: #000;
173+
}
174+
175+
.embed-link {
176+
color: var(--text, #555555);
177+
font-size: 0.75rem;
178+
text-decoration: none;
179+
display: flex;
180+
align-items: center;
181+
justify-content: center;
182+
gap: 4px;
183+
transition: color 0.15s;
184+
}
185+
186+
.embed-link:hover {
187+
color: var(--accent, #f23400);
188+
}
189+
190+
/* Responsive */
191+
@media (max-width: 400px) {
192+
.embed-widget {
193+
padding: 8px;
194+
}
195+
196+
.embed-favicon {
197+
width: 14px;
198+
height: 14px;
199+
}
200+
201+
.embed-title {
202+
font-size: 11px;
203+
}
204+
205+
.embed-dot {
206+
width: 2px;
207+
height: 2px;
208+
}
209+
210+
.embed-username {
211+
font-size: 11px;
212+
}
213+
214+
.embed-day-cell {
215+
width: 6px;
216+
height: 6px;
217+
}
218+
219+
.embed-ctrl-btn {
220+
padding: 0.4rem 0.6rem;
221+
font-size: 0.8rem;
222+
}
223+
224+
.embed-link {
225+
font-size: 0.7rem;
226+
}
227+
}

0 commit comments

Comments
 (0)