Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -448,4 +448,114 @@ mat-icon.mat-icon {
.level-3 { background-color: #f57c00; color: #fff8e1; }
.level-4 { background-color: #ef6c00; color: #fff3e0; }
.level-5 { background-color: #c62828; color: #ffebee; }
}
}
/* ── Activity Intelligence Panel ── */
.intelligence-panel {
background: #f8fffe;
border: 1px solid #c8e6c9;
border-radius: 8px;
padding: 12px 16px;
margin: 10px 0 16px;
display: flex;
flex-direction: column;
gap: 10px;
}

.intel-row {
display: flex;
align-items: center;
gap: 10px;
}

.intel-label {
font-size: 11px;
font-weight: 700;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
width: 70px;
flex-shrink: 0;
}

.intel-useful-badge {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 10px;
}

.u-high { background: #c8e6c9; color: #1b5e20; }
.u-med { background: #fff9c4; color: #f57f17; }
.u-low { background: #ffe0b2; color: #e65100; }
.u-vlow { background: #ffcdd2; color: #b71c1c; }

.intel-diff-row {
display: flex;
flex-direction: column;
gap: 5px;
}

.intel-bar-item {
display: flex;
align-items: center;
gap: 8px;
}

.intel-bar-label {
font-size: 10px;
color: #888;
width: 64px;
flex-shrink: 0;
}

.intel-bar-track {
flex: 1;
height: 6px;
background: #e8f5e9;
border-radius: 3px;
overflow: hidden;
}

.intel-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s;
}

.bar-low { background: #66bb6a; }
.bar-med { background: #ffa726; }
.bar-high { background: #ef5350; }
.bar-vhigh { background: #b71c1c; }

.intel-bar-val {
font-size: 10px;
color: #888;
width: 52px;
flex-shrink: 0;
}

.intel-tools-row {
display: flex;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}

.intel-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

.intel-chip {
font-size: 10px;
background: #e3f2fd;
color: #1565c0;
border: 1px solid #90caf9;
border-radius: 12px;
padding: 3px 10px;
text-decoration: none;
transition: background 0.15s;
}

.intel-chip:hover { background: #bbdefb; }
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,57 @@ <h1>
<span class="uuid-label">id: </span><span class="uuid-value">{{ currentActivity.uuid }}</span>
</div>
</div>
<!-- Activity Intelligence Panel -->
<div class="intelligence-panel" *ngIf="currentActivity.difficultyOfImplementation">
<div class="intel-row" *ngIf="currentActivity.usefulness">
<span class="intel-label">Usefulness</span>
<span class="intel-useful-badge" [class]="getUsefulnessClass(currentActivity.usefulness!)">
{{ currentActivity.usefulness }}/4
</span>
</div>
<div class="intel-row">
<span class="intel-label">Difficulty</span>
<div class="intel-diff-row">
<div class="intel-bar-item">
<span class="intel-bar-label">Knowledge</span>
<div class="intel-bar-track">
<div class="intel-bar-fill"
[class]="getDifficultyBarClass(currentActivity.difficultyOfImplementation!.knowledge)"
[style.width]="getDifficultyWidth(currentActivity.difficultyOfImplementation!.knowledge)"></div>
</div>
<span class="intel-bar-val">{{ currentActivity.difficultyOfImplementation!.knowledge }}/4</span>
</div>
<div class="intel-bar-item">
<span class="intel-bar-label">Time</span>
<div class="intel-bar-track">
<div class="intel-bar-fill"
[class]="getDifficultyBarClass(currentActivity.difficultyOfImplementation!.time)"
[style.width]="getDifficultyWidth(currentActivity.difficultyOfImplementation!.time)"></div>
</div>
<span class="intel-bar-val">{{ currentActivity.difficultyOfImplementation!.time }}/4</span>
</div>
<div class="intel-bar-item">
<span class="intel-bar-label">Resources</span>
<div class="intel-bar-track">
<div class="intel-bar-fill"
[class]="getDifficultyBarClass(currentActivity.difficultyOfImplementation!.resources)"
[style.width]="getDifficultyWidth(currentActivity.difficultyOfImplementation!.resources)"></div>
</div>
<span class="intel-bar-val">{{ currentActivity.difficultyOfImplementation!.resources }}/4</span>
</div>
</div>
</div>
<div class="intel-tools-row" *ngIf="currentActivity.implementation?.length">
<span class="intel-label">Top Tools</span>
<div class="intel-chips">
<a *ngFor="let tool of currentActivity.implementation!.slice(0, 4)"
class="intel-chip"
[href]="tool.url || '#'"
target="_blank">{{ tool.name }}</a>
</div>
</div>
</div>

<mat-accordion class="activity-details" multi="true">
<mat-expansion-panel *ngIf="currentActivity.description?.hasContent()" [expanded]="true">
<mat-expansion-panel-header>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,22 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
this.closeRequested.emit();
}

getUsefulnessClass(val: number): string {
const classes: Record<number, string> = { 4: 'u-high', 3: 'u-med', 2: 'u-low', 1: 'u-vlow' };
return classes[val] || 'u-med';
}

getDifficultyWidth(val: number): string {
return `${(val / 4) * 100}%`;
}

getDifficultyBarClass(val: number): string {
if (val <= 1) return 'bar-low';
if (val === 2) return 'bar-med';
if (val === 3) return 'bar-high';
return 'bar-vhigh';
}

// Check if screen is narrow and update property
private checkWidthForActivityPanel(): void {
let elemtn: HTMLElement | null = document.querySelector('app-activity-description');
Expand Down
144 changes: 144 additions & 0 deletions src/app/pages/about-us/about-us.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
.about-page {
max-width: 960px;
padding: 24px 28px;
}

/* Hero */
.hero-section {
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8ff 100%);
border: 1px solid #c8e6c9;
border-radius: 12px;
padding: 36px 32px;
margin-bottom: 24px;
}

.hero-badge {
display: inline-block;
background: #2e7d32;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 10px;
margin-bottom: 12px;
}

.hero-title {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 10px;
}

.hero-subtitle {
font-size: 15px;
color: #555;
line-height: 1.6;
max-width: 680px;
margin: 0 0 24px;
}

.hero-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.hero-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s, transform 0.1s;
}

.hero-btn:hover { opacity: 0.88; transform: translateY(-1px); }

.hero-btn-primary {
background: #2e7d32;
color: #fff;
}

.hero-btn-secondary {
background: #fff;
color: #2e7d32;
border: 1px solid #a5d6a7;
}

.btn-icon { font-size: 14px; }

/* Quick Links Grid */
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 20px;
}

.link-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}

.link-card:hover {
border-color: #a5d6a7;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.link-card-icon { font-size: 24px; flex-shrink: 0; }

.link-card-title {
font-size: 13px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 2px;
}

.link-card-desc {
font-size: 11px;
color: #888;
}

/* Contribute Callout */
.contribute-callout {
display: flex;
align-items: center;
gap: 12px;
background: #fff8e1;
border: 1px solid #ffe082;
border-radius: 8px;
padding: 14px 18px;
font-size: 13px;
color: #5d4037;
margin-bottom: 28px;
}

.callout-icon { font-size: 22px; flex-shrink: 0; }

.contribute-callout a {
color: #2e7d32;
font-weight: 600;
text-decoration: none;
}

.contribute-callout a:hover { text-decoration: underline; }

/* README section */
.readme-section {
border-top: 1px solid #e0e0e0;
padding-top: 20px;
}
Loading