Replace static frontend logo with rotating preloaded 3D GLB logo - #5
Merged
Merged
Conversation
Copilot created this pull request from a session on behalf of
AtharvM02222
July 8, 2026 11:28
View session
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR upgrades the registration page’s branding from a static image to an embedded 3D GLB logo rendered via <model-viewer>, adding preload hints, a loader overlay, and runtime handling for load/error states while keeping the existing registration form structure intact.
Changes:
- Replaces the
<img>logo inFront-end/register.htmlwith a<model-viewer>pointing at the Cloudinary GLB and adds preload/preconnect hints. - Adds a loading overlay and fade-in behavior for the 3D logo via new styles in
Front-end/style.css. - Adds JS event handling in
Front-end/index.jsto hide the loader on successful model load and show an error message on failure.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| Front-end/register.html | Swaps the logo markup to <model-viewer>, adds resource hints, loader element, and loads the model-viewer runtime. |
| Front-end/index.js | Adds load/error handlers to control the loader overlay and model visibility. |
| Front-end/style.css | Introduces layout + loader overlay styling and model fade-in once ready. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <title>Robotronics Registration</title> | ||
| <link rel="icon" type="image/png" href="/favicon.png" /> | ||
| <link rel="icon" type="image/webp" href="/logo.webp" /> | ||
| <link rel="preconnect" href="https://res.cloudinary.com" /> |
Comment on lines
+10
to
+15
| <link | ||
| rel="preload" | ||
| href="https://res.cloudinary.com/drqqqhudz/image/upload/v1783427413/logo-optimized_evx5on.glb" | ||
| as="fetch" | ||
| crossorigin="anonymous" | ||
| /> |
| style="max-width: 200px; height: auto" | ||
| /> | ||
| <div class="logo-3d-wrap"> | ||
| <div class="logo-loader" id="logoLoader">Loading 3D logo...</div> |
Comment on lines
+37
to
+40
| <script | ||
| type="module" | ||
| src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js" | ||
| ></script> |
Comment on lines
+5
to
+18
| document.addEventListener('DOMContentLoaded', () => { | ||
| const logoModel = document.getElementById('logo3d'); | ||
| const logoLoader = document.getElementById('logoLoader'); | ||
| if (!logoModel || !logoLoader) return; | ||
|
|
||
| logoModel.addEventListener('load', () => { | ||
| logoModel.classList.add('is-ready'); | ||
| logoLoader.style.display = 'none'; | ||
| }, { once: true }); | ||
|
|
||
| logoModel.addEventListener('error', () => { | ||
| logoLoader.textContent = '3D logo failed to load'; | ||
| }, { once: true }); | ||
| }); |
Comment on lines
+32
to
+40
| model-viewer { | ||
| width: 100%; | ||
| height: 100%; | ||
| opacity: 0; | ||
| transition: opacity 0.3s ease; | ||
| } | ||
| model-viewer.is-ready { | ||
| opacity: 1; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The registration frontend used a static image logo; this updates it to render the provided 3D GLB logo with a visible loading state and continuous rotation. The change keeps the existing page structure while upgrading only the logo surface.
3D logo integration
<img>logo block inFront-end/register.htmlwith<model-viewer>pointing to the Cloudinary GLB asset.@google/model-viewermodule script for runtime rendering.Preload + loading UX
preconnectandpreloadhints for the GLB URL to reduce initial fetch latency.Loading 3D logo...) shown until the model finishes loading.Motion and runtime behavior
auto-rotate, immediate start viaauto-rotate-delay="0", and tuned speed withrotation-per-second.Front-end/index.jsto hide the loader on success and show a fallback message on failure.Styling updates
Front-end/style.cssfor the 3D logo container, loader overlay, and model fade-in once ready.