Skip to content

Commit 13113b3

Browse files
bramusbramus
committed
Rework navigation-types demo to make it visually more compelling
1 parent 9844a8a commit 13113b3

12 files changed

Lines changed: 276 additions & 70 deletions

File tree

‎demo/navigation-types/about.html‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,13 @@
1313
<meta name="viewport" content="width=device-width, initial-scale=1">
1414
</head>
1515
<body>
16-
<h1>About</h1>
1716
<nav>
1817
<a href="./demo.html">Home</a>
19-
<a href="./detail/1.html">Detail 1</a>
20-
<a href="./detail/2.html">Detail 2</a>
21-
<a href="./detail/3.html">Detail 3</a>
22-
<a href="./about.html">About</a>
18+
<a href="./about.html" class="active">About</a>
2319
</nav>
24-
<div class="from">From Box</div>
25-
<div class="to">To Box</div>
26-
<p>This is the About page.</p>
20+
<div class="monster-detail">
21+
<h1>About the Monsters</h1>
22+
<p>The monsters are wonderful creatures from different galaxies. They are all friendly and helpful. Each monster has their own unique personality and gifts. Whether it's Zorp's boundless energy or Fluffy's soothing hums, you'll find a friend in every corner of the universe!</p>
23+
</div>
2724
</body>
2825
</html>

‎demo/navigation-types/demo.html‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,19 @@
1313
<meta name="viewport" content="width=device-width, initial-scale=1">
1414
</head>
1515
<body>
16-
<h1>Home</h1>
1716
<nav>
18-
<a href="./demo.html">Home</a>
19-
<a href="./detail/1.html">Detail 1</a>
20-
<a href="./detail/2.html">Detail 2</a>
21-
<a href="./detail/3.html">Detail 3</a>
17+
<a href="./demo.html" class="active">Home</a>
2218
<a href="./about.html">About</a>
2319
</nav>
24-
<div class="from">From Box</div>
25-
<div class="to">To Box</div>
26-
<p>Welcome to the Navigation Types demo.</p>
20+
<div class="monster-overview">
21+
<h1>Meet the monsters</h1>
22+
<p>Which one do you want to get to know better?</p>
23+
<ul class="boxes">
24+
<li><a href="./detail/1.html"><img src="./images/zorp.png" alt="Zorp" id="zorp"><span>Zorp</span></a></li>
25+
<li><a href="./detail/2.html"><img src="./images/fluffy.png" alt="Fluffy" id="fluffy"><span>Fluffy</span></a></li>
26+
<li><a href="./detail/3.html"><img src="./images/bloop.png" alt="Bloop" id="bloop"><span>Bloop</span></a></li>
27+
<li><a href="./detail/4.html"><img src="./images/spike.png" alt="Spike" id="spike"><span>Spike</span></a></li>
28+
</ul>
29+
</div>
2730
</body>
2831
</html>

‎demo/navigation-types/detail/1.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,17 @@
1313
<meta name="viewport" content="width=device-width, initial-scale=1">
1414
</head>
1515
<body>
16-
<h1>Detail 1</h1>
1716
<nav>
1817
<a href="../demo.html">Home</a>
19-
<a href="../detail/1.html">Detail 1</a>
20-
<a href="../detail/2.html">Detail 2</a>
21-
<a href="../detail/3.html">Detail 3</a>
2218
<a href="../about.html">About</a>
2319
</nav>
24-
<div class="from">From Box</div>
25-
<div class="to">To Box</div>
26-
<p>This is the Detail 1 page.</p>
20+
<div class="monster-detail">
21+
<h1>Zorp</h1>
22+
<img src="../images/zorp.png" alt="Zorp" id="zorp">
23+
<p>Zorp is a boundless bundle of energy from the Nebula of Joy who is famous for his infectious enthusiasm and ability to make friends wherever he goes. He loves nothing more than helping travelers with their daily tasks and spreading happiness across the galaxy with his cheerful spirit.</p>
24+
</div>
25+
<div class="back-nav">
26+
<a href="../demo.html" class="back-btn">&larr; Back to Monsters</a>
27+
</div>
2728
</body>
2829
</html>

‎demo/navigation-types/detail/2.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,17 @@
1313
<meta name="viewport" content="width=device-width, initial-scale=1">
1414
</head>
1515
<body>
16-
<h1>Detail 2</h1>
1716
<nav>
1817
<a href="../demo.html">Home</a>
19-
<a href="../detail/1.html">Detail 1</a>
20-
<a href="../detail/2.html">Detail 2</a>
21-
<a href="../detail/3.html">Detail 3</a>
2218
<a href="../about.html">About</a>
2319
</nav>
24-
<div class="from">From Box</div>
25-
<div class="to">To Box</div>
26-
<p>This is the Detail 2 page.</p>
20+
<div class="monster-detail">
21+
<h1>Fluffy</h1>
22+
<img src="../images/fluffy.png" alt="Fluffy" id="fluffy">
23+
<p>Fluffy is the galaxy’s kindest diplomat, known for her incredible ability to make anyone feel safe and loved instantly. She communicates through heartwarming hums and gentle vibrations that soothe the soul, ensuring that everyone around her feels perfectly at home.</p>
24+
</div>
25+
<div class="back-nav">
26+
<a href="../demo.html" class="back-btn">&larr; Back to Monsters</a>
27+
</div>
2728
</body>
2829
</html>

‎demo/navigation-types/detail/3.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,17 @@
1313
<meta name="viewport" content="width=device-width, initial-scale=1">
1414
</head>
1515
<body>
16-
<h1>Detail 3</h1>
1716
<nav>
1817
<a href="../demo.html">Home</a>
19-
<a href="../detail/1.html">Detail 1</a>
20-
<a href="../detail/2.html">Detail 2</a>
21-
<a href="../detail/3.html">Detail 3</a>
2218
<a href="../about.html">About</a>
2319
</nav>
24-
<div class="from">From Box</div>
25-
<div class="to">To Box</div>
26-
<p>This is the Detail 3 page.</p>
20+
<div class="monster-detail">
21+
<h1>Bloop</h1>
22+
<img src="../images/bloop.png" alt="Bloop" id="bloop">
23+
<p>Bloop is a shy but incredibly sweet companion who finds pure delight in organizing chaos and bringing harmony to his surroundings. He is the ultimate comfort friend, always ready to sit quietly by your side and offer unwavering support whenever you need a morale boost.</p>
24+
</div>
25+
<div class="back-nav">
26+
<a href="../demo.html" class="back-btn">&larr; Back to Monsters</a>
27+
</div>
2728
</body>
2829
</html>

‎demo/navigation-types/detail/4.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2026 Google LLC
4+
SPDX-License-Identifier: Apache-2.0
5+
-->
6+
7+
<html lang="en">
8+
9+
<head>
10+
<meta charset="UTF-8">
11+
<title>Navigation Types Demo - Detail 4</title>
12+
<link rel="stylesheet" href="../styles.css">
13+
<script type="module" src="../scripts.js" blocking="render" async></script>
14+
<meta name="viewport" content="width=device-width, initial-scale=1">
15+
</head>
16+
17+
<body>
18+
<nav>
19+
<a href="../demo.html">Home</a>
20+
<a href="../about.html">About</a>
21+
</nav>
22+
<div class="monster-detail">
23+
<h1>Spike</h1>
24+
<img src="../images/spike.png" alt="Spike" id="spike">
25+
<p>Despite the edgy name and actual spikes, Spike is actually a gentle nature-lover who spends his time singing lullabies to sleeping stars to ensure they have sweet dreams. He is widely considered the best listener in the universe, possessing a patient and thoughtful demeanor that makes him the perfect confidant.</p>
26+
</div>
27+
<div class="back-nav">
28+
<a href="../demo.html" class="back-btn">&larr; Back to Monsters</a>
29+
</div>
30+
</body>
31+
32+
</html>

‎demo/navigation-types/images/bloop.png‎

370 KB
Loading

‎demo/navigation-types/images/fluffy.png‎

323 KB
Loading

‎demo/navigation-types/images/spike.png‎

335 KB
Loading

‎demo/navigation-types/images/zorp.png‎

339 KB
Loading

0 commit comments

Comments
 (0)