This commit is contained in:
andreyflat 2025-07-09 17:04:08 +08:00
parent fc7cabf7a3
commit 1117c0cc5b
6 changed files with 22 additions and 21 deletions

BIN
models/previews/bird.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
models/previews/bowman.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
models/previews/fish.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View file

@ -50,12 +50,13 @@
gap: 20px; gap: 20px;
padding: 20px 0; padding: 20px 0;
} }
.item model-viewer { .item img {
width: 100%; width: 100%;
height: 200px; height: auto;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
background: #111; background: #111;
display: block;
} }
.item p { .item p {
margin: 0.5em 0 0; margin: 0.5em 0 0;
@ -104,16 +105,16 @@
</p> </p>
<div class="gallery"> <div class="gallery">
<div class="item" onclick="openModel('bird_01')"> <div class="item" onclick="openModel('bird')">
<model-viewer src="models/bird_01.glb" camera-controls disable-zoom></model-viewer> <img src="models/previews/bird.jpg" alt="Bird">
<p>Bird 01 – Symbolic Avian Form</p> <p>Bird 01 – Symbolic Avian Form</p>
</div> </div>
<div class="item" onclick="openModel('bowman')"> <div class="item" onclick="openModel('bowman')">
<model-viewer src="models/bowman.glb" camera-controls disable-zoom></model-viewer> <img src="models/previews/bowman.jpg" alt="Bowman">
<p>Bowman – Archer Character Concept</p> <p>Bowman – Archer Character Concept</p>
</div> </div>
<div class="item" onclick="openModel('fish_01')"> <div class="item" onclick="openModel('fish')">
<model-viewer src="models/fish_01.glb" camera-controls disable-zoom></model-viewer> <img src="models/previews/fish.jpg" alt="Fish">
<p>Fish 01 – Abstract Aquatic Creature</p> <p>Fish 01 – Abstract Aquatic Creature</p>
</div> </div>
</div> </div>
@ -130,7 +131,7 @@
exposure="1" exposure="1"
environment-image="neutral"> environment-image="neutral">
</model-viewer> </model-viewer>
<button class="back" onclick="closeModel()">&larr; Back to gallery</button> <button class="back" onclick="closeModel()">&larr; backy</button>
</div> </div>
</section> </section>
</main> </main>
@ -150,7 +151,7 @@
document.querySelector('.gallery').style.display = 'grid'; document.querySelector('.gallery').style.display = 'grid';
} }
</script> </script>
<script> <script>
const h1 = document.querySelector("header h1"); const h1 = document.querySelector("header h1");
h1.addEventListener("mouseenter", () => { h1.addEventListener("mouseenter", () => {
const maxSpacing = 12.0; const maxSpacing = 12.0;
@ -162,6 +163,6 @@
h1.style.letterSpacing = ""; h1.style.letterSpacing = "";
h1.style.transition = "letter-spacing 1s ease"; h1.style.transition = "letter-spacing 1s ease";
}); });
</script> </script>
</body> </body>
</html> </html>