-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
267 lines (242 loc) · 11.8 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layering Realities</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="../assets/sitefav32.png" type="image/png" sizes="32x32">
<link rel="icon" href="../assets/sitefav16.png" type="image/png" sizes="16x16">
</head>
<body>
<nav class="navigation">
<div class="nav-left">
<a href="../index.html" class="nav-link">
<img src="../assets/sitelogo.png" alt="Site Logo" class="site-logo">
</a>
<a href="../index.html" class="nav-link">
<span class="site-name">Thelogicmatrix</span>
</a>
</div>
<div class="nav-right">
<ul class="desktop-nav">
<li><a href="../index.html">Home</a></li>
<li><a href="../layering-realities.html" class="active">Layering Realities</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
<!-- Mobile Menu Icon (Hamburger) - Now included directly as SVG -->
<div class="mobile-menu-icon" onclick="toggleMobileMenu()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
</div>
</nav>
<!-- Mobile Menu Dropdown -->
<div class="mobile-dropdown" id="mobileMenu">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../layering-realities.html" class="active">Layering Realities</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<header class="lr-hero">
<h1>Layering Realities</h1>
<p>a Field Guide to Royal Park</p>
</header>
<main>
<section>
<h2>Core Question</h2>
<p>What is the purpose and use case for parks in modernity and within urban environments?</p>
<h3>Summary</h3>
<p>This is an exploration of what purpose parks have in our modern society, as well as within our modern cities. The way I have decided to format this exploration of these concepts is through a collage of images, soundscapes, and models of Royal Park. Through this and exploratory blog posts, I will cover the concepts that I am trying to dig down into.</p>
</section>
<!-- Tab Navigation -->
<section class="tabs">
<nav class="tab-navigation">
<ul>
<li><a href="#blog" id="blog-tab">Blog</a></li>
<li><a href="#gallery" id="gallery-tab">Gallery</a></li>
<li><a href="#sketches" id="sketches-tab">Sketches</a>
<li><a href="#models" id="models-tab">3D</a></li>
<li><a href="#audio" id="audio-tab">Audio</a></li>
</ul>
</nav>
</section>
<!-- Blog Tab -->
<div id="blog" class="tab-content">
<h2>Blog</h2>
<p>Here I go in depth into the concepts and ideas I explored while at the park.</p>
<div class="blog-list">
<ul>
<li class="blog-post">
<a href="blog/blog-False-Oasis.html">
<div class="blog-thumbnail">
<img src="../assets/imgall/DSCF1259Quickhero.jpg" alt="Urban Oasis Blog Post">
</div>
<div class="blog-info">
<h3>A False Oasis: The Paradox of Parks</h3>
<p>A comparison of the differing purposes and designs of urban parks in Australia and Singapore.</p>
</div>
</a>
</li>
<!-- Hidden Gems Blog Post -->
<li class="blog-post">
<a href="blog/blog-Water.html">
<div class="blog-thumbnail">
<img src="../assets/imgall/DSCF1106Quick.jpg" alt="Hidden Gems of Royal Park">
</div>
<div class="blog-info">
<h3>Natural Mirrors: Water and Light</h3>
<p>An exploration of water in parks and it's effects.</p>
</div>
</a>
</li>
<!-- Green Oasis Blog Post -->
<li class="blog-post">
<a href="blog/blog-Trees.html">
<div class="blog-thumbnail">
<img src="../assets/imgall/DSCF1282Quick.jpg" alt="Green Oasis Blog Post">
</div>
<div class="blog-info">
<h3>The Trees of Royal Park</h3>
<p>A look into the trees that populate Royal Park.</p>
</div>
<!-- Green Oasis Blog Post -->
<li class="blog-post">
<a href="blog/blog-Grass.html">
<div class="blog-thumbnail">
<img src="../assets/imgall/DSCF1245Quickhero.jpg" alt="Green Oasis Blog Post">
</div>
<div class="blog-info">
<h3>Grass: The Whispers of the Wind</h3>
<p>An exploration of grass and how it's kept in the Park.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- Gallery Tab -->
<div id="gallery" class="tab-content">
<h2>Gallery</h2>
<p>Snapshots of my explorations of Royal Park.</p>
<div class="masonry-gallery" id="gallery-images">
<!-- Images will be inserted here -->
</div>
</div>
<!-- Sketches Tab -->
<div id="sketches" class="tab-content">
<h2>Sketches</h2>
<p>Sketches I made at Royal Park.</p>
<div class="masonry-gallery" id="sketches-images">
<!-- Sketches will be inserted here -->
</div>
</div>
<!-- Models Tab -->
<div id="models" class="tab-content">
<h2>Models</h2>
<p>Explore interactive models related to the park's landscapes.</p>
<!-- New Models Container -->
<div class="container-models">
<!-- Sketchfab Embed -->
<div class="model-item">
<h3>Low Poly Model</h3>
<div class="sketchfab-embed-wrapper">
<iframe title="LowPoly_LOD0" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"
allow="autoplay; fullscreen; xr-spatial-tracking"
src="https://sketchfab.com/models/744e0554e53f4d08ba0a06c31dc8cc8d/embed">
</iframe>
</div>
</div>
</div>
</div>
<!-- Audio Tab -->
<div id="audio" class="tab-content">
<h2>Audio</h2>
<p>Listen to the ambient soundscapes recorded at the Royal Park.</p>
<div class="audio-container">
<!-- Example audio player -->
<audio controls>
<source src="assets/audio/audio1.aac" type="audio/aac">
Your browser does not support the audio element.
</audio>
<audio controls>
<source src="assets/audio/audio2.aac" type="audio/aac">
Your browser does not support the audio element.
</audio>
<audio controls>
<source src="assets/audio/audio3.aac" type="audio/aac">
Your browser does not support the audio element.
</audio>
<audio controls>
<source src="assets/audio/audio4.aac" type="audio/aac">
Your browser does not support the audio element.
</audio>
</div>
</div>
</main>
<!-- Modal Structure -->
<div id="imageModal" class="modal">
<span class="modal-close" onclick="closeModal()">×</span>
<img id="modalImage" class="modal-image" src="" alt="Modal Image">
</div>
<footer>
<p>© 2025 Nathan Wong. All rights reserved.</p>
</footer>
<script>
// Function to toggle the mobile menu
function toggleMobileMenu() {
const mobileMenu = document.getElementById("mobileMenu");
mobileMenu.classList.toggle("show");
}
// Function to open the modal and display the selected image
function openModal(imageSrc) {
document.getElementById("imageModal").style.display = "flex"; // Show the modal using flex
document.getElementById("modalImage").src = imageSrc; // Set the source of the modal image
}
// Function to close the modal
function closeModal() {
document.getElementById("imageModal").style.display = "none"; // Hide the modal
}
// Close modal if user clicks anywhere outside the modal content
window.addEventListener("click", function(event) {
if (event.target === document.getElementById("imageModal")) {
closeModal();
}
});
// Dynamically load gallery images and handle tab switching
document.addEventListener("DOMContentLoaded", function() {
const galleryContainer = document.getElementById('gallery-images');
const tabs = document.querySelectorAll('.tab-navigation a');
const tabContents = document.querySelectorAll('.tab-content');
// Initially hide all tab contents
tabContents.forEach(content => content.classList.remove('active'));
// Show the first tab's content by default (this part will handle the first tab showing)
const defaultTab = document.querySelector('#blog'); // Change to the first tab's ID
if (defaultTab) {
defaultTab.classList.add('active');
}
// Handle tab switching
tabs.forEach(tab => {
tab.addEventListener('click', function(e) {
e.preventDefault();
// Remove 'active' class from all tabs and tab content
tabs.forEach(tab => tab.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add 'active' class to the clicked tab and its corresponding content
tab.classList.add('active');
const targetContent = document.querySelector(tab.getAttribute('href'));
targetContent.classList.add('active');
});
});
// Set the first tab as active by default
document.querySelector('#blog-tab').classList.add('active');
document.querySelector('#blog').classList.add('active');
});
</script>
</body>
</html>