a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: integrate Wokwi elements for Arduino boards in LandingPage

pull/47/head
David Montero Crespo 2026-03-12 02:34:56 -03:00
parent f678c19318
commit b63a068307
2 changed files with 53 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/pages/LandingPage.css
View File

@ -505,6 +505,49 @@
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
/* Wokwi element board wrappers */
/* Elements have fixed mm dimensions; we scale them to fit the card.
At 96dpi: Uno ≈274×202px, Nano ≈170×67px, Mega ≈388×192px.
transform: scale() is visual only, so wrapper clips to the scaled size. */
.board-element-wrap {
overflow: hidden;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
flex-shrink: 0;
}
/* Uno: 274×202px → scale 0.73 → 200×147px */
.board-element-uno {
width: 200px;
height: 147px;
}
.board-element-uno > wokwi-arduino-uno {
display: block;
transform: scale(0.73);
transform-origin: top left;
}
/* Nano: 170×67px → scale 1.18 → 200×79px */
.board-element-nano {
width: 200px;
height: 79px;
}
.board-element-nano > wokwi-arduino-nano {
display: block;
transform: scale(1.18);
transform-origin: top left;
}
/* Mega: 388×192px → scale 0.515 → 200×99px */
.board-element-mega {
width: 200px;
height: 99px;
}
.board-element-mega > wokwi-arduino-mega {
display: block;
transform: scale(0.515);
transform-origin: top left;
}
.board-info {
display: flex;
flex-direction: column;

63
frontend/src/pages/LandingPage.tsx
View File

@ -1,6 +1,7 @@
import { useState, useRef, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuthStore } from '../store/useAuthStore';
import '@wokwi/elements';
import './LandingPage.css';
const GITHUB_URL = 'https://github.com/davidmonterocrespo24/velxio';
@ -244,39 +245,6 @@ const CircuitSchematic = () => (
);
/* ── Board SVGs ───────────────────────────────────────── */
const BoardUno = () => (
<svg viewBox="0 0 120 80" className="board-svg">
<rect x="2" y="2" width="116" height="76" rx="4" fill="#006633" stroke="#004d26" strokeWidth="1.5" />
<rect x="42" y="22" width="36" height="36" rx="2" fill="#1a1a1a" stroke="#333" strokeWidth="1" />
<rect x="0" y="28" width="14" height="24" rx="2" fill="#555" stroke="#444" strokeWidth="1" />
<circle cx="108" cy="20" r="7" fill="#333" stroke="#222" strokeWidth="1" />
{[0,1,2,3,4,5,6,7,8,9,11,12,13].map((i) => (
<rect key={i} x={20 + i * 6.5} y="4" width="3" height="6" rx="0.5" fill="#d4a017" />
))}
{[0,1,2,3,4,5].map((i) => (
<rect key={i} x={40 + i * 8} y="70" width="3" height="6" rx="0.5" fill="#d4a017" />
))}
<circle cx="90" cy="12" r="2.5" fill="#00ff88" opacity="0.9" />
<text x="60" y="77" textAnchor="middle" fill="#00aa55" fontSize="5" fontFamily="monospace">Arduino Uno</text>
</svg>
);
const BoardNano = () => (
<svg viewBox="0 0 120 50" className="board-svg">
<rect x="2" y="2" width="116" height="46" rx="3" fill="#003399" stroke="#002277" strokeWidth="1.5" />
<rect x="44" y="12" width="24" height="24" rx="1.5" fill="#1a1a1a" stroke="#333" strokeWidth="1" />
<rect x="50" y="0" width="20" height="8" rx="2" fill="#555" stroke="#444" strokeWidth="1" />
{[0,1,2,3,4,5,6,7].map((i) => (
<rect key={i} x="4" y={8 + i * 4.5} width="6" height="3" rx="0.5" fill="#d4a017" />
))}
{[0,1,2,3,4,5,6,7].map((i) => (
<rect key={i} x="110" y={8 + i * 4.5} width="6" height="3" rx="0.5" fill="#d4a017" />
))}
<circle cx="28" cy="10" r="2" fill="#00ff88" opacity="0.9" />
<text x="60" y="44" textAnchor="middle" fill="#6699ff" fontSize="5" fontFamily="monospace">Arduino Nano</text>
</svg>
);
const BoardPico = () => (
<svg viewBox="0 0 120 60" className="board-svg">
<rect x="2" y="2" width="116" height="56" rx="3" fill="#f0f0f0" stroke="#ccc" strokeWidth="1.5" />
@ -294,23 +262,6 @@ const BoardPico = () => (
</svg>
);
const BoardMega = () => (
<svg viewBox="0 0 160 80" className="board-svg">
<rect x="2" y="2" width="156" height="76" rx="4" fill="#006633" stroke="#004d26" strokeWidth="1.5" />
<rect x="55" y="20" width="50" height="40" rx="2" fill="#1a1a1a" stroke="#333" strokeWidth="1" />
<rect x="0" y="28" width="14" height="24" rx="2" fill="#555" stroke="#444" strokeWidth="1" />
<circle cx="148" cy="20" r="7" fill="#333" stroke="#222" strokeWidth="1" />
{Array.from({length: 18}).map((_, i) => (
<rect key={i} x={18 + i * 7} y="4" width="3" height="6" rx="0.5" fill="#d4a017" />
))}
{Array.from({length: 18}).map((_, i) => (
<rect key={i} x={18 + i * 7} y="70" width="3" height="6" rx="0.5" fill="#d4a017" />
))}
<circle cx="130" cy="12" r="2.5" fill="#00ff88" opacity="0.9" />
<circle cx="138" cy="12" r="2.5" fill="#ff6600" opacity="0.9" />
<text x="80" y="77" textAnchor="middle" fill="#00aa55" fontSize="5" fontFamily="monospace">Arduino Mega 2560</text>
</svg>
);
/* ── Features ─────────────────────────────────────────── */
const features = [
@ -486,21 +437,27 @@ export const LandingPage: React.FC = () => {
</div>
<div className="boards-grid">
<div className="board-card">
<BoardUno />
<div className="board-element-wrap board-element-uno">
<wokwi-arduino-uno />
</div>
<div className="board-info">
<span className="board-name">Arduino Uno</span>
<span className="board-chip">ATmega328p · AVR8 · 16 MHz</span>
</div>
</div>
<div className="board-card">
<BoardNano />
<div className="board-element-wrap board-element-nano">
<wokwi-arduino-nano />
</div>
<div className="board-info">
<span className="board-name">Arduino Nano</span>
<span className="board-chip">ATmega328p · AVR8 · 16 MHz</span>
</div>
</div>
<div className="board-card">
<BoardMega />
<div className="board-element-wrap board-element-mega">
<wokwi-arduino-mega />
</div>
<div className="board-info">
<span className="board-name">Arduino Mega</span>
<span className="board-chip">ATmega2560 · AVR8 · 16 MHz</span>