Skip to content

Minor clean-up + better screen reader support #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
toontownlpz wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Minor clean-up + better screen reader support #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a39167d
Hardware page: minor clean-up
toontownlpz Mar 30, 2026
413ee0a
Software page: minor clean-up
toontownlpz Mar 30, 2026
d77ea25
Index page: minor clean-up
toontownlpz Mar 30, 2026
03556b2
Index page: add break after h2
toontownlpz Mar 30, 2026
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
30 changes: 15 additions & 15 deletions dspico_hw.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSpico - Hardware | LNH Team</title>

<!-- Material Symbols -->
Expand All @@ -11,14 +11,14 @@
<!-- Font of DSpico logo and for the content of webpage -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- CSS externo -->
<!-- External CSS stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header class="navbar">
<div class="nav-left">
<img src="assets/lnh-logo.png" alt="Logo" class="logo-icon1">
<img src="assets/lnh-logo.png" alt="The LNH Team logo." class="logo-icon1">
</div>
<nav class="nav-links">
<a href="index.html" title="Home"><span class="material-symbols-outlined nav-icon">home</span></a>
Expand All @@ -29,7 +29,7 @@

<div class="hero">
<div class="logo-title">
<img src="assets/dspico-logo.png" alt="DSpico logo" class="logo-icon2">
<img src="assets/dspico-logo.png" alt="The DSpico logo." class="logo-icon2">
<h1>DSpico</h1>
</div>

Expand All @@ -38,11 +38,11 @@ <h1>DSpico</h1>
<div class="buttons">

<a href="dspico_hw.html" class="btn secondary">
<img src="assets/dspico-logo.png" style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Hardware
<img src="assets/dspico-logo.png" alt="The DSpico logo." style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Hardware
</a>

<a href="dspico_sw.html" class="btn secondary">
<img src="assets/picolauncher-logo.png" style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Software
<img src="assets/picolauncher-logo.png" alt="The Pico Launcher logo." style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Software
</a>

</div>
Expand All @@ -54,7 +54,7 @@ <h1>DSpico</h1>
<div class="container">
<div class="logo-title">
<h2 style="text-align: center;">
<img src="assets/dspico-logo.png" style="width: auto; height: 50px; vertical-align: middle;">
<img src="assets/dspico-logo.png" alt="The DSpico logo." style="width: auto; height: 50px; vertical-align: middle;">
DSpico Flashcart
</h2>
</div>
Expand All @@ -63,14 +63,14 @@ <h2 style="text-align: center;">
The DSpico is the open-source flashcart from the LNH Team. Designed for both DS and DSi consoles, it features fully open hardware and firmware built on the RP2040 microcontroller.
</p>
<br><br>
<img src="assets/dspico-features.png" alt="DSpico" class="responsive-img" style="max-width: 600px; max-height: 400px; width: 90%; height: auto;" />
<img src="assets/dspico-features.png" alt="The DSpico separated into many parts." class="responsive-img" style="max-width: 600px; max-height: 400px; width: 90%; height: auto;">
<br>
<!-- Table with features -->
<div class="features_table">
<div class="item"><span class="material-symbols-outlined big-icon">memory</span> <br>RP2040 microcontroller</div>
<div class="item"><span class="material-symbols-outlined big-icon">storage</span> <br>16 MBit (= 2 MByte) flash memory</div>
<div class="item"><span class="material-symbols-outlined big-icon">usb</span> <br>Micro-USB port</div>
<div class="item"><span class="material-symbols-outlined big-icon">sd_card</span> <br>Micro SD slot</div>
<div class="item"><span class="material-symbols-outlined big-icon">sd_card</span> <br>MicroSD slot</div>
<div class="item"><span class="material-symbols-outlined big-icon">engineering</span> <br>Development port</div>
<div class="item"><span class="material-symbols-outlined big-icon">lightbulb_2</span> <br>Two LEDs</div>
<div class="item"><span class="material-symbols-outlined big-icon">energy_savings_leaf</span> <br>Low power consumption: ~57mW</div>
Expand All @@ -83,11 +83,11 @@ <h2 style="text-align: center;">
All DSpico fabrication files are open-source and available for download or inspection.
</p>

<img src="assets/assa2.png" alt="DSpico" class="responsive-img" />
<img src="assets/assa2.png" alt="A slightly more detailed look at the DSpico separated into many parts." class="responsive-img">

<div class="buttons">
<a href="https://github.com/LNH-team/dspico-hardware" class="btn build-btn">
<img src="assets/github-mark.png" style="width: 24px; height: 24px; vertical-align: middle; filter: invert(1);" alt="GitHub">
<img src="assets/github-mark.png" alt="The GitHub mark." style="width: 24px; height: 24px; vertical-align: middle; filter: invert(1);">
<span class="btn-text">Repository</span>
</a>
</div>
Expand All @@ -102,13 +102,13 @@ <h2 style="text-align: center;">
<div class="container">
<div class="logo-title">
<h2 style="text-align: center;">
<img src="assets/picofirmware-logo.png" style="width: auto; height: 50px; vertical-align: middle;">
<img src="assets/picofirmware-logo.png" alt="The DSpico Firmware logo." style="width: auto; height: 50px; vertical-align: middle;">
DSpico Firmware
</h2>
</div>
<p class="lead">The DSpico Firmware is the official firmware for the DSpico, running on the RP2040 microcontroller.</p>

<img src="assets/rp2040-3.png" alt="RP2040" class="responsive-img" />
<img src="assets/rp2040-3.png" alt="The RP2040 microcontroller icon." class="responsive-img">
<p class="tagline">Versatile. Flexible.</p>
<p class="final-line">The DSpico firmware is compatible with modified and unmodified DS, DSi and 3DS consoles, allowing you to use DSpico on any console you own.</p>
<br>
Expand All @@ -123,7 +123,7 @@ <h2 style="text-align: center;">

<div class="buttons">
<a href="https://github.com/LNH-team/dspico-firmware" class="btn build-btn">
<img src="assets/github-mark.png" style="width: 24px; height: 24px; vertical-align: middle; filter: invert(1);" alt="GitHub">
<img src="assets/github-mark.png" alt="The GitHub mark." style="width: 24px; height: 24px; vertical-align: middle; filter: invert(1);">
<span class="btn-text">Repository</span>
</a>
</div>
Expand Down
30 changes: 15 additions & 15 deletions dspico_sw.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSpico - Software | LNH Team</title>

<!-- Material Symbols -->
Expand All @@ -11,14 +11,14 @@
<!-- Font of DSpico logo and for the content of webpage -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- CSS externo -->
<!-- External CSS stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header class="navbar">
<div class="nav-left">
<img src="assets/lnh-logo.png" alt="Logo" class="logo-icon1">
<img src="assets/lnh-logo.png" alt="The LNH Team logo." class="logo-icon1">
</div>
<nav class="nav-links">
<a href="index.html" title="Home"><span class="material-symbols-outlined nav-icon">home</span></a>
Expand All @@ -29,19 +29,19 @@

<div class="hero">
<div class="logo-title">
<img src="assets/dspico-logo.png" alt="DSpico logo" class="logo-icon2">
<img src="assets/dspico-logo.png" alt="The DSpico logo." class="logo-icon2">
<h1>DSpico</h1>
</div>

<!-- Buttons of top of webpage -->
<div class="buttons">

<a href="dspico_hw.html" class="btn secondary">
<img src="assets/dspico-logo.png" style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Hardware
<img src="assets/dspico-logo.png" alt="The DSpico logo." style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Hardware
</a>

<a href="dspico_sw.html" class="btn secondary">
<img src="assets/picolauncher-logo.png" style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Software
<img src="assets/picolauncher-logo.png" alt="The Pico Launcher logo." style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Software
</a>

</div>
Expand All @@ -54,7 +54,7 @@ <h1>DSpico</h1>
<section id="pico-launcher">
<div class="container">
<div class="logo-title">
<img src="assets/picolauncher-logo.png" alt="Pico Launcher Logo" class="logo" />
<img src="assets/picolauncher-logo.png" alt="The Pico Launcher logo." class="logo">
<h2>Pico Launcher</h2>
</div>

Expand All @@ -63,14 +63,14 @@ <h2>Pico Launcher</h2>
Compatible with many types of flashcarts, including the DSpico.
</p>

<img src="assets/launcher-screen.png" alt="Launcher Screenshot" class="launcher-image" />
<img src="assets/launcher-screen.png" alt="A screenshot of Pico Launcher, with its default layout." class="launcher-image">
<p class="description">
Customize your launcher with fresh themes and background music.
Choose how you navigate: horizontal or vertical grid, banner list or cover flow.
</p>
<div>
<img src="assets/carrousel.png" alt="Launcher Screenshot" class="launcher-image" />
<img src="assets/HorizontalCustom.png" alt="Launcher Screenshot" class="launcher-image" />
<img src="assets/carrousel.png" alt="A screenshot of Pico Launcher in carrousel mode." class="launcher-image">
<img src="assets/HorizontalCustom.png" alt="A screenshot of Pico Launcher in horizontal mode, featuring a custom background image." class="launcher-image">
</div>
<p class="description">
Any file can have a cover! Pico Launcher also supports setting default apps per file extension such that any type of file can be launched using your favorite homebrew apps!
Expand All @@ -80,7 +80,7 @@ <h2>Pico Launcher</h2>

<div class="buttons">
<a href="https://github.com/LNH-team/pico-launcher" class="btn build-btn">
<img src="assets/github-mark.png" style="width: 24px; height: 24px; vertical-align: middle; filter: invert(1);" alt="GitHub">
<img src="assets/github-mark.png" alt="The GitHub mark." style="width: 24px; height: 24px; vertical-align: middle; filter: invert(1);">
<span class="btn-text">Repository</span>
</a>
</div>
Expand All @@ -95,13 +95,13 @@ <h2>Pico Launcher</h2>
<div class="container">
<div class="logo-title">
<h2 style="text-align: center;">
<img src="assets/picoloader-logo.png" style="width: auto; height: 50px; vertical-align: middle;">
<img src="assets/picoloader-logo.png" alt="The Pico Loader logo." style="width: auto; height: 50px; vertical-align: middle;">
Pico Loader
</h2>
</div>
<p class="lead">The high-speed DS(i) app loader engineered for DSpico and compatible with many other existing flashcarts for DS(i).
</p>
<img src="assets/loader.png" alt="Loader" class="responsive-img" />
<img src="assets/loader.png" alt="A simple image depicting Pico Loader integrating with the Nintendo DS." class="responsive-img">
<p class="description">
From the moment you launch it, Pico Loader delivers near-instant access to your apps. Giving your DS(i) a smoother, snappier experience than ever before.
</p>
Expand All @@ -113,7 +113,7 @@ <h2 style="text-align: center;">

<div class="buttons">
<a href="https://github.com/LNH-team/pico-loader" class="btn build-btn">
<img src="assets/github-mark.png" style="width: 24px; height: 24px; vertical-align: middle; filter: invert(1);" alt="GitHub">
<img src="assets/github-mark.png" alt="The GitHub mark." style="width: 24px; height: 24px; vertical-align: middle; filter: invert(1);">
<span class="btn-text">Repository</span>
</a>
</div>
Expand Down
41 changes: 20 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSpico | LNH Team</title>

<!-- Material Symbols -->
Expand All @@ -11,14 +11,14 @@
<!-- Font of DSpico logo and for the content of webpage -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- CSS externo -->
<!-- External CSS stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header class="navbar">
<div class="nav-left">
<img src="assets/lnh-logo.png" alt="Logo" class="logo-icon1">
<img src="assets/lnh-logo.png" alt="The LNH Team logo." class="logo-icon1">
</div>
<nav class="nav-links">
<a href="index.html" title="Home"><span class="material-symbols-outlined nav-icon">home</span></a>
Expand All @@ -29,48 +29,47 @@

<div class="hero">
<div class="logo-title">
<img src="assets/dspico-logo.png" alt="DSpico logo" class="logo-icon2">
<img src="assets/dspico-logo.png" alt="The DSpico logo." class="logo-icon2">
<h1>DSpico</h1>
</div>
<h3>The world’s first open-source DS(i) flashcart</h3>
<img src="assets/ds-pico.png" alt="DSpico" class="dspico-img" />
<h2>The world’s first open-source DS(i) flashcart</h2><br>
<img src="assets/ds-pico.png" alt="The DSpico logo." class="dspico-img">

<!-- Buttons of top of webpage -->
<div class="buttons">

<a href="dspico_hw.html" class="btn secondary">
<img src="assets/dspico-logo.png" style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Hardware
<img src="assets/dspico-logo.png" alt="The DSpico logo." style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Hardware
</a>

<a href="dspico_sw.html" class="btn secondary">
<img src="assets/picolauncher-logo.png" style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Software
<img src="assets/picolauncher-logo.png" alt="The Pico Launcher logo." style="width: auto; height: 50px; vertical-align: middle; border-radius: 0;">DSpico Software
</a>

</div>
</div>

<!-- Features Section -->
<section id="features">
<img src="assets/dspico-logo.png" alt="DSpico logo" class="logo-icon2" style="width: 50px; height: auto; display:block; margin: 0 auto;">
<img src="assets/dspico-logo.png" alt="The DSpico logo." class="logo-icon2" style="width: 50px; height: auto; display:block; margin: 0 auto;">
<h2 style="text-align: center;">Discover DSpico</h2>
<p style="text-align: center;">DSpico is a project by the LNH team, consisting of two parts: an open-source <b>DS(i) flashcart</b> and an <b>app launcher</b> compatible with many existing DS(i) flashcarts.
<br><br>All components —PCB, software, shell, stickers, and box art— are open-source, allowing you to build it yourself, modify it, study it or improve it.<br><br>
<h2 style="text-align: center;">
<a href="dspico_hw.html" style="text-decoration: none; color: inherit;"><img src="assets/dspico-logo.png" style="width: auto; height: 50px; vertical-align: middle;" alt="Discord logo" />
<a href="dspico_hw.html" style="text-decoration: none; color: inherit;"><img src="assets/dspico-logo.png" alt="The DSpico logo." style="width: auto; height: 50px; vertical-align: middle;">
DSpico Hardware</a>
</h2><br>Provides detailed information about the flashcart and its official firmware.<br>
<br><br>
<h2 style="text-align: center;">
<a href="dspico_sw.html" style="text-decoration: none; color: inherit;"><img src="assets/picolauncher-logo.png" style="width: auto; height: 50px; vertical-align: middle;" alt="Discord logo" />
<a href="dspico_sw.html" style="text-decoration: none; color: inherit;"><img src="assets/picolauncher-logo.png" alt="The Pico Launcher logo." style="width: auto; height: 50px; vertical-align: middle;">
DSpico Software</a>
</h2><br>Pico Launcher and Pico Loader for browsing and running your apps.

</p>
<br>
<div class="buttons">
<a href="https://github.com/LNH-team/dspico/blob/develop/GUIDE.md" class="btn build-btn">
<span class="material-symbols-outlined btn-icon">construction</span>
<span class="btn-text">Setup your DSpico now</span>
<span class="btn-text">Set up your DSpico now</span>
</a>
</div>

Expand All @@ -83,7 +82,7 @@ <h2 style="text-align: center;">
<div class="container">
<div class="logo-title">
<h2 style="text-align: center;">
<img src="https://logodownload.org/wp-content/uploads/2017/11/discord-logo-1-1.png" style="width: auto; height: 50px; vertical-align: middle;" alt="Discord logo" />
<img src="https://logodownload.org/wp-content/uploads/2017/11/discord-logo-1-1.png" alt="The Discord logo." style="width: auto; height: 50px; vertical-align: middle;">
Community
</h2>
</div>
Expand All @@ -99,15 +98,15 @@ <h2 style="text-align: center;">
<div class="container">
<div class="logo-title">
<h2 style="text-align: center;">
<img src="assets/lnh-logo.png" style="width: auto; height: 50px; vertical-align: middle;">
Who we are?
<img src="assets/lnh-logo.png" alt="The LNH Team logo." style="width: auto; height: 50px; vertical-align: middle;">
Who Are We?
</h2>
</div>
<p class="lead"><b>LNH Team</b> is a group of enthusiasts dedicated to preserving classic consoles and software, restoring lost hardware and creating innovative projects to keep their legacy alive. </p>
<p class="lead"><b>LNH Team</b> is a group of enthusiasts dedicated to preserving classic consoles and software, restoring lost hardware and creating innovative projects to keep their legacy alive.</p>

<div class="logo-title">
<h2 style="text-align: center;">
<img src="assets/github-mark.png" style="width: auto; height: 50px; vertical-align: middle;"> <a href="https://github.com/LNH-team/" target="_blank">Github</a>
<img src="assets/github-mark.png" alt="The GitHub mark." style="width: auto; height: 50px; vertical-align: middle;"> <a href="https://github.com/LNH-team/" target="_blank">GitHub</a>
</h2>
</div>

Expand All @@ -120,12 +119,12 @@ <h2 style="text-align: center;">

<!-- Default Statcounter code for LNH website
https://www.lnh-team.org/ -->
<script type="text/javascript">
<script>
var sc_project=13200743;
var sc_invisible=1;
var sc_security="10330443";
</script>
<script type="text/javascript"
<script
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
Expand Down