From 19850dfc1a28cd556f9613f2cddc68e75ac4683a Mon Sep 17 00:00:00 2001
From: Alina Marquardt <lastfuture@lastfuture.de>
Date: Thu, 15 May 2025 18:53:00 +0200
Subject: [PATCH] js fix and ids for articles

---
 public_html/functions.js |  8 ++++++++
 public_html/index.html   | 14 +++-----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/public_html/functions.js b/public_html/functions.js
index dec44e1..8a72065 100644
--- a/public_html/functions.js
+++ b/public_html/functions.js
@@ -1,3 +1,11 @@
+document.querySelectorAll('.paused-animation').forEach(el => {
+  el.addEventListener('click', () => {
+    el.classList.toggle('active');
+  });
+});
+
+
+// icosahedron
 // Wait for everything to load
 window.onload = function() {
 	// Make sure THREE is available
diff --git a/public_html/index.html b/public_html/index.html
index 3e07268..930659c 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -139,7 +139,7 @@
 				</h1>
 			</header>
 			<div class="opaque whitebg">
-				<article>
+				<article id="watchfaces">
 					<h2><span class="halfbubble blurgreen"></span><em>watchfaces</em> for smartwatches</h2>
 					<a href="https://git.broken.graphics/alina/Pebble-Time-Watchface-Squared-4.0" target="_blank"><img class="watchface" src="img/experiments/watchface-squared40.webp" width="348" height="348" alt="squared 4.0 watchface on the pebble time round" /></a>
 					<a href="https://git.broken.graphics/alina/fitbit-echocentric" target="_blank"><img class="watchface" src="img/experiments/watchface-echocentric.webp" width="348" height="348" alt="echocentric clockface on the fitbit ionic" /></a>
@@ -147,9 +147,9 @@
 					<a href="https://git.broken.graphics/alina/fitbit-frosted" target="_blank"><img class="watchface" src="img/experiments/watchface-frosted.webp" width="348" height="348" alt="frosted watchface for fitbit smartwatches" /></a>
 					<p>ever since the original pebble came out in 2013 I've been in love with the idea of creating my own watchfaces. over the years I have programmed <a href="https://git.broken.graphics/explore/repos?q=watchface" target="_blank">serveral watchfaces</a> for the various pebble smartwatch models as well as fitbit smartwatches.</p>
 				</article>
-				<article>
+				<article id="3d-animation">
 					<h2><span class="halfbubble blurgreen"></span><em>3d animation</em> for “lastfuture”</h2>
-					<div class="paused-animation" style="aspect-ratio: 900 / 528;" onclick="togglePausedAnimations()">
+					<div class="paused-animation" style="aspect-ratio: 900 / 528;">
 						<div class="play-btn"></div>
 						<img class="poster-frame" src="img/experiments/lf-poster.webp" width="680" height="400" alt="LF 3d animation poster-frame" />
 						<img class="anim" src="img/experiments/lf-anim.gif" width="680" height="400" alt="LF 3d animation" />
@@ -161,13 +161,5 @@
 
 	</div>
 
-	<script>
-	  function togglePausedAnimations() {
-		document.querySelectorAll('.paused-animation').forEach(el => {
-		  el.classList.toggle('active');
-		});
-	  }
-	</script>
-
 </body>
 </html>