From 9e27c64b9b4398ca304a7bd8affac46052ac1968 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 8 Jul 2026 11:26:18 +0000 Subject: [PATCH] Replace frontend logo with rotating 3D model viewer --- Front-end/index.js | 15 +++++++++++++++ Front-end/register.html | 30 ++++++++++++++++++++++++------ Front-end/style.css | 28 ++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 6 deletions(-) diff --git a/Front-end/index.js b/Front-end/index.js index a37f720..5854639 100644 --- a/Front-end/index.js +++ b/Front-end/index.js @@ -2,6 +2,21 @@ const API_URL = window.location.hostname === 'localhost' || window.location.host ? "http://localhost:3001/api/register" : "/api/register"; +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 }); +}); + function onEvent(){ var max=+event.target.selectedOptions[0].dataset.max||3; var size=document.getElementById('size'); diff --git a/Front-end/register.html b/Front-end/register.html index 103a9e8..82416ee 100644 --- a/Front-end/register.html +++ b/Front-end/register.html @@ -6,6 +6,13 @@ Robotronics Registration + + -
- RoboNexus Logo +
+
Loading 3D logo...
+
+

Register

diff --git a/Front-end/style.css b/Front-end/style.css index 2001b39..6cfa1e1 100644 --- a/Front-end/style.css +++ b/Front-end/style.css @@ -10,6 +10,34 @@ body { linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; } +.logo-3d-wrap { + position: relative; + width: min(240px, 100%); + height: 240px; + margin: 0 auto 20px; +} +.logo-loader { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 12px; + background: rgba(0, 0, 0, 0.5); + color: #22d3ee; + font-size: 14px; + letter-spacing: 0.6px; +} +model-viewer { + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 0.3s ease; +} +model-viewer.is-ready { + opacity: 1; +} h1 { color: #22d3ee; font-size: 48px;