From e748d904ea6dd0a88dade59e42a733714b0a06f2 Mon Sep 17 00:00:00 2001 From: Michael Verdi Date: Wed, 30 Jul 2025 10:35:32 -0500 Subject: [PATCH] Refactor: Use external SVG file for play button - Replace embedded SVG code with external play.svg file - Update HTML to use for cleaner code - Update CSS selector from 'svg' to 'img' element - Maintain all existing functionality and styling - Improve code maintainability and separation of concerns - Enable better caching and easier SVG updates --- index.html | 67 ++---------------------------------------------- play.svg | 11 ++++++++ vr180-player.css | 53 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 65 deletions(-) create mode 100644 play.svg create mode 100644 vr180-player.css diff --git a/index.html b/index.html index 50061bf..70d1e75 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ VR180 Web Player + @@ -84,17 +31,7 @@ diff --git a/play.svg b/play.svg new file mode 100644 index 0000000..efbd861 --- /dev/null +++ b/play.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/vr180-player.css b/vr180-player.css new file mode 100644 index 0000000..518c7c5 --- /dev/null +++ b/vr180-player.css @@ -0,0 +1,53 @@ +#vr-container { + position: relative; + display: inline-block; + width: 100%; +} + +#playBtn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: none; + border: none; + cursor: pointer; + padding: 0; + width: 80px; + height: 80px; + transition: opacity 0.3s ease, transform 0.2s ease; + z-index: 10; +} + +#playBtn:hover { + transform: translate(-50%, -50%) scale(1.1); +} + +#playBtn:active { + transform: translate(-50%, -50%) scale(0.95); +} + +#playBtn.hidden { + opacity: 0; + pointer-events: none; +} + +#playBtn img { + width: 100%; + height: 100%; +} + +/* Responsive sizing */ +@media (max-width: 600px) { + #playBtn { + width: 60px; + height: 60px; + } +} + +@media (min-width: 900px) { + #playBtn { + width: 100px; + height: 100px; + } +}