Skip to content

Commit 0ed4a7b

Browse files
harish876harish876
committed
arch diagram added
1 parent 7a93171 commit 0ed4a7b

8 files changed

Lines changed: 1331 additions & 38 deletions

File tree

‎ecosystem/ai-tools/beacon/components/DataFlowDiagram.module.css‎

Lines changed: 397 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,397 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
/* Base card */
21+
.cardBase {
22+
border-radius: 0.75rem;
23+
border: 1px solid rgba(255, 255, 255, 0.05);
24+
background: rgba(255, 255, 255, 0.05);
25+
backdrop-filter: blur(4px);
26+
box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
27+
font-size: 0.875rem;
28+
color: white;
29+
}
30+
31+
@media (min-width: 768px) {
32+
.cardBase {
33+
font-size: 1rem;
34+
}
35+
}
36+
37+
/* Arrow */
38+
.arrow {
39+
position: relative;
40+
display: flex;
41+
justify-content: center;
42+
padding: 0.25rem 0;
43+
}
44+
45+
.arrowLabel {
46+
position: absolute;
47+
left: 50%;
48+
top: 50%;
49+
transform: translateY(-50%);
50+
margin-left: 1.5rem;
51+
font-size: 10px;
52+
text-transform: uppercase;
53+
letter-spacing: 0.1em;
54+
color: rgba(34, 211, 238, 0.8);
55+
white-space: nowrap;
56+
}
57+
58+
.arrowSvg {
59+
color: rgba(34, 211, 238, 0.7);
60+
}
61+
62+
/* Frame */
63+
.frame {
64+
position: relative;
65+
overflow: hidden;
66+
border-radius: 1.5rem;
67+
border: 1px solid rgba(255, 255, 255, 0.1);
68+
padding: 2.5rem 2rem 4rem;
69+
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75);
70+
background: #0f0f1a;
71+
min-height: 720px;
72+
}
73+
74+
.frameCompact {
75+
min-height: 480px;
76+
padding: 2.5rem 2rem 3rem;
77+
}
78+
79+
@media (min-width: 768px) {
80+
.frame {
81+
padding: 3rem 3rem 5rem;
82+
}
83+
.frameCompact {
84+
padding: 3rem 3rem 4rem;
85+
}
86+
}
87+
88+
/* Section */
89+
.section {
90+
border-radius: 1rem;
91+
border: 1px solid rgba(255, 255, 255, 0.1);
92+
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
93+
padding: 1.5rem;
94+
margin-bottom: 0;
95+
transition: box-shadow 0.3s;
96+
}
97+
98+
.sectionActive {
99+
box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.6), 0 0 20px rgba(34, 211, 238, 0.3);
100+
outline: 2px solid rgba(34, 211, 238, 0.6);
101+
outline-offset: 2px;
102+
}
103+
104+
.sectionHeader {
105+
margin-bottom: 1rem;
106+
display: flex;
107+
align-items: center;
108+
justify-content: space-between;
109+
font-size: 0.75rem;
110+
text-transform: uppercase;
111+
letter-spacing: 0.16em;
112+
color: rgba(148, 163, 184, 0.8);
113+
}
114+
115+
/* Grid layouts */
116+
.grid3 {
117+
display: grid;
118+
grid-template-columns: repeat(3, 1fr);
119+
gap: 0.75rem;
120+
}
121+
122+
.grid2 {
123+
display: grid;
124+
grid-template-columns: 1fr 1fr;
125+
gap: 0.75rem;
126+
}
127+
128+
.gridExec {
129+
display: grid;
130+
grid-template-columns: minmax(0, 0.2fr) minmax(0, 1fr);
131+
gap: 0.75rem;
132+
}
133+
134+
.gridConsensus {
135+
display: grid;
136+
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
137+
gap: 0.75rem;
138+
}
139+
140+
.flexCol {
141+
display: flex;
142+
flex-direction: column;
143+
gap: 0;
144+
}
145+
146+
.flexColGap {
147+
display: flex;
148+
flex-direction: column;
149+
gap: 0.5rem;
150+
}
151+
152+
.flexCenter {
153+
display: flex;
154+
flex-direction: column;
155+
align-items: center;
156+
justify-content: center;
157+
gap: 0.5rem;
158+
text-align: center;
159+
}
160+
161+
/* Card variants */
162+
.cardSky {
163+
background: rgba(14, 165, 233, 0.12);
164+
}
165+
166+
.cardIndigo {
167+
background: rgba(99, 102, 241, 0.12);
168+
}
169+
170+
.cardEmerald {
171+
background: rgba(16, 185, 129, 0.12);
172+
}
173+
174+
.cardTeal {
175+
background: rgba(20, 184, 166, 0.12);
176+
}
177+
178+
.cardCyan {
179+
background: rgba(6, 182, 212, 0.2);
180+
}
181+
182+
.cardSlate {
183+
background: rgba(71, 85, 105, 0.2);
184+
}
185+
186+
.cardRose {
187+
background: rgba(244, 63, 94, 0.12);
188+
}
189+
190+
.cardEmeraldLight {
191+
background: rgba(16, 185, 129, 0.08);
192+
}
193+
194+
.cardTealLight {
195+
background: rgba(20, 184, 166, 0.15);
196+
}
197+
198+
.cardSlateDark {
199+
background: rgba(15, 23, 42, 0.6);
200+
}
201+
202+
.cardSlateDarker {
203+
background: rgba(15, 23, 42, 0.7);
204+
}
205+
206+
.cardCyanBold {
207+
background: rgba(6, 182, 212, 0.25);
208+
}
209+
210+
/* Text colors */
211+
.textSky {
212+
color: rgba(186, 230, 253, 0.9);
213+
}
214+
215+
.textSkyLight {
216+
color: rgb(240, 249, 255);
217+
}
218+
219+
.textIndigo {
220+
color: rgba(199, 210, 254, 0.9);
221+
}
222+
223+
.textIndigoLight {
224+
color: rgb(238, 242, 255);
225+
}
226+
227+
.textEmerald {
228+
color: rgba(167, 243, 208, 0.9);
229+
}
230+
231+
.textEmeraldLight {
232+
color: rgb(236, 253, 245);
233+
}
234+
235+
.textTeal {
236+
color: rgba(153, 246, 228, 0.9);
237+
}
238+
239+
.textTealLight {
240+
color: rgb(240, 253, 250);
241+
}
242+
243+
.textCyan {
244+
color: rgb(103, 232, 249);
245+
}
246+
247+
.textCyanLight {
248+
color: rgb(236, 254, 255);
249+
}
250+
251+
.textSlate {
252+
color: rgb(226, 232, 240);
253+
}
254+
255+
.textRose {
256+
color: rgb(255, 228, 230);
257+
}
258+
259+
.textRoseMuted {
260+
font-size: 0.75rem;
261+
color: rgba(254, 205, 211, 0.8);
262+
}
263+
264+
.textSkyMuted {
265+
color: rgba(186, 230, 253, 0.9);
266+
}
267+
268+
.textEmeraldMuted {
269+
color: rgba(167, 243, 208, 0.9);
270+
}
271+
272+
/* Small cards */
273+
.smallCard {
274+
padding: 0.5rem 0.75rem;
275+
border-radius: 0.375rem;
276+
font-size: 0.875rem;
277+
}
278+
279+
.executorCard {
280+
border-radius: 0.5rem;
281+
padding: 0.625rem 0.75rem;
282+
display: flex;
283+
align-items: center;
284+
gap: 0.5rem;
285+
font-size: 0.875rem;
286+
}
287+
288+
.executorCardTeal {
289+
background: rgba(20, 184, 166, 0.12);
290+
color: rgb(204, 251, 241);
291+
border: 1px solid rgba(45, 212, 191, 0.15);
292+
}
293+
294+
.executorCardIndigo {
295+
background: rgba(99, 102, 241, 0.12);
296+
color: rgb(224, 231, 255);
297+
border: 1px solid rgba(129, 140, 248, 0.15);
298+
}
299+
300+
.executorCardEmerald {
301+
background: rgba(16, 185, 129, 0.12);
302+
color: rgb(209, 250, 229);
303+
border: 1px solid rgba(52, 211, 153, 0.15);
304+
}
305+
306+
.iconSm {
307+
width: 1.25rem;
308+
height: 1.25rem;
309+
flex-shrink: 0;
310+
}
311+
312+
.iconTeal {
313+
color: rgb(45, 212, 191);
314+
}
315+
316+
.iconIndigo {
317+
color: rgb(129, 140, 248);
318+
}
319+
320+
.iconEmerald {
321+
color: rgb(52, 211, 153);
322+
}
323+
324+
.iconCyan {
325+
color: rgb(34, 211, 238);
326+
}
327+
328+
.iconSlate {
329+
width: 2rem;
330+
height: 2rem;
331+
color: rgb(148, 163, 184);
332+
}
333+
334+
/* Network block */
335+
.networkBlock {
336+
min-height: 140px;
337+
padding: 1rem 0;
338+
grid-row: span 2;
339+
}
340+
341+
.networkBlockCompact {
342+
min-height: 100px;
343+
padding: 0.5rem 0;
344+
}
345+
346+
/* RDBC block */
347+
.rdbcBlock {
348+
min-height: 72px;
349+
padding: 1.25rem 0;
350+
}
351+
352+
.rdbcBlockCompact {
353+
min-height: 56px;
354+
padding: 0.75rem 0;
355+
}
356+
357+
/* Spacing */
358+
.mb2 {
359+
margin-bottom: 0.5rem;
360+
}
361+
362+
.mt5 {
363+
margin-top: 1.25rem;
364+
}
365+
366+
.gap5 {
367+
gap: 1.25rem;
368+
}
369+
370+
/* Wrapper */
371+
.wrapper {
372+
position: relative;
373+
margin-left: auto;
374+
margin-right: auto;
375+
width: 100%;
376+
max-width: 900px;
377+
font-family: system-ui, -apple-system, sans-serif;
378+
}
379+
380+
.wrapperCompact {
381+
max-width: 1100px;
382+
}
383+
384+
/* Fit viewport */
385+
.fitWrapper {
386+
max-height: calc(100vh - 200px);
387+
display: flex;
388+
align-items: center;
389+
justify-content: center;
390+
overflow: hidden;
391+
}
392+
393+
.fitInner {
394+
transform-origin: top;
395+
width: 100%;
396+
flex-shrink: 0;
397+
}

0 commit comments

Comments
 (0)