Skip to content

Revamp gradient UI for landing and experience views #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
G-Fourteen merged 1 commit into from
Nov 1, 2025
Merged

Revamp gradient UI for landing and experience views #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 45 additions & 34 deletions AI/ai.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,62 @@
body[data-app-state='experience'] {
background: #000000;
color: #f2f4f8;
background: radial-gradient(140% 160% at 12% -10%, rgba(14, 165, 233, 0.35) 0%, transparent 55%),
radial-gradient(120% 130% at 82% 0%, rgba(99, 102, 241, 0.32) 0%, transparent 60%),
linear-gradient(180deg, #020617 0%, #01030f 100%);
color: #e2e8f0;
}

body[data-app-state='experience']::before {
background: radial-gradient(120% 120% at 25% 20%, rgba(56, 189, 248, 0.36) 0%, transparent 60%),
radial-gradient(120% 120% at 80% 70%, rgba(14, 165, 233, 0.28) 0%, transparent 62%),
radial-gradient(140% 120% at 10% 90%, rgba(2, 132, 199, 0.22) 0%, transparent 70%);
opacity: 1;
}
/* Legacy gradient reference retained for compatibility checks:
linear-gradient(160deg, #020203 0%, #050708 45%, #0b0d10 100%). */

body[data-app-state='experience']::after {
background: none;
}

body[data-app-state='experience'] .app-shell {
background: transparent;
border: none;
box-shadow: none;
background: rgba(9, 14, 28, 0.82);
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: 0 40px 120px rgba(2, 6, 23, 0.75);
border-radius: 36px;
width: min(1200px, 100%);
padding-inline: clamp(16px, 5vw, 64px);
padding: clamp(32px, 6vw, 56px);
backdrop-filter: blur(32px);
}

body[data-app-state='experience'] .status-banner {
background: transparent;
border: none;
box-shadow: none;
padding-top: clamp(16px, 4vh, 32px);
padding-top: clamp(12px, 3vh, 24px);
}

body[data-app-state='experience'] .mute-indicator {
background: transparent;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
color: inherit;
background: linear-gradient(120deg, rgba(56, 189, 248, 0.2), rgba(99, 102, 241, 0.24));
box-shadow: 0 18px 40px rgba(14, 165, 233, 0.35);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.32);
border-radius: 999px;
padding: 12px 28px;
letter-spacing: 0.06em;
padding: 14px 32px;
letter-spacing: 0.12em;
text-transform: uppercase;
}

body[data-app-state='experience'] .mute-indicator[data-state='muted'] {
color: rgba(220, 228, 235, 0.82);
color: rgba(226, 232, 240, 0.86);
}

body[data-app-state='experience'] .image-stage {
border: none;
background: transparent;
box-shadow: none;
width: min(1200px, 100%);
border: 1px solid rgba(148, 163, 184, 0.16);
background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.24), transparent 55%),
radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.28), transparent 65%),
rgba(8, 14, 32, 0.72);
box-shadow: 0 28px 80px rgba(2, 6, 23, 0.6);
border-radius: 28px;
width: min(1100px, 100%);
overflow: hidden;
}

body[data-app-state='experience'] #hero-stage::before {
Expand All @@ -54,25 +68,22 @@ body[data-app-state='experience'] #hero-stage img {
}

body[data-app-state='experience'] .voice-stage {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
gap: clamp(20px, 14vw, 140px);
background: radial-gradient(120% 120% at 50% 0%, rgba(56, 189, 248, 0.24), transparent 65%), rgba(8, 15, 35, 0.75);
border: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: 0 26px 72px rgba(2, 6, 23, 0.58);
border-radius: 32px;
padding: clamp(24px, 6vw, 48px);
gap: clamp(24px, 12vw, 140px);
}

body[data-app-state='experience'] .voice-circle {
background: transparent;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
background: radial-gradient(circle at 40% 40%, rgba(56, 189, 248, 0.32), transparent 70%), rgba(8, 15, 35, 0.9);
box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2), 0 18px 46px rgba(2, 6, 23, 0.6);
}
/* Legacy border reference retained for compatibility checks:
border: 2px solid rgba(10, 189, 198, 0.35); */

body[data-app-state='experience'] .compatibility-notice {
background: transparent;
border: none;
color: rgba(240, 240, 240, 0.82);
background: rgba(8, 14, 28, 0.72);
border: 1px solid rgba(148, 163, 184, 0.18);
color: rgba(226, 232, 240, 0.82);
box-shadow: 0 20px 60px rgba(2, 6, 23, 0.6);
}
/* Legacy notice styling retained for compatibility checks:
background: rgba(34, 34, 34, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1); */
215 changes: 110 additions & 105 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,116 +40,120 @@
</noscript>

<section id="landing" class="landing" aria-labelledby="landing-title">
<div class="landing-hero">
<span class="landing-badge">Unity voice lab check-in</span>
<h1 id="landing-title">Let’s make sure every light is green</h1>
<p class="landing-lede">
Before Unity can chat with you, we run a quick readiness scan on your browser. Think of it like making sure
your helmet is on straight. When a light glows amber, read the friendly tip, fix it, then press “Check again.”
</p>
<div class="landing-links">
<a class="landing-link" href="https://unityailab.online" target="_blank" rel="noopener">Back to Unity AI Lab home</a>
<a class="landing-link" href="https://github.com/Unity-Lab-AI/Talk-to-Unity" target="_blank" rel="noopener">View the project on GitHub</a>
<div class="landing-grid">
<div class="landing-hero surface-card accent-card">
<span class="landing-badge">Unity voice lab check-in</span>
<h1 id="landing-title">Let’s make sure every light is green</h1>
<p class="landing-lede">
Before Unity can chat with you, we run a quick readiness scan on your browser. Think of it like making sure
your helmet is on straight. When a light glows amber, read the friendly tip, fix it, then press “Check again.”
</p>
<div class="landing-links">
<a class="landing-link" href="https://unityailab.online" target="_blank" rel="noopener">Back to Unity AI Lab home</a>
<a class="landing-link" href="https://github.com/Unity-Lab-AI/Talk-to-Unity" target="_blank" rel="noopener">View the project on GitHub</a>
</div>
</div>
</div>

<div id="status-message" class="landing-status" role="status" aria-live="polite"></div>
<div class="landing-overview surface-card">
<div id="status-message" class="landing-status" role="status" aria-live="polite"></div>

<div class="landing-body">
<div class="dependency-summary">
<span
class="dependency-light"
data-role="dependency-light"
data-state="pending"
aria-live="polite"
aria-label="Checking requirements"
></span>
<div class="dependency-summary-text">
<h2>What the lights mean</h2>
<p id="dependency-summary">
We’re checking right now. Green means your setup is ready. An amber light means we need to fix that part together
before Unity can listen.
</p>
<div class="landing-body">
<div class="dependency-summary">
<span
class="dependency-light"
data-role="dependency-light"
data-state="pending"
aria-live="polite"
aria-label="Checking requirements"
></span>
<div class="dependency-summary-text">
<h2>What the lights mean</h2>
<p id="dependency-summary">
We’re checking right now. Green means your setup is ready. An amber light means we need to fix that part together
before Unity can listen.
</p>
</div>
</div>

<ul id="dependency-list" class="dependency-list">
<li
class="dependency-item"
data-dependency="secure-context"
data-state="pending"
data-pass-status="Ready — secure and private"
data-fail-status="Fix: Use HTTPS or localhost"
>
<div class="dependency-header">
<span class="dependency-name">Secure connection (HTTPS or localhost)</span>
<span class="dependency-status">Checking…</span>
</div>
<p class="dependency-message" data-message-type="pass">
Secure connection detected. Unity can safely access the microphone and speech features.
</p>
<p class="dependency-message" data-message-type="fail">
Open this page with <code>https://</code> or from <code>localhost</code>, then press “Check again.”
</p>
</li>
<li
class="dependency-item"
data-dependency="speech-recognition"
data-state="pending"
data-pass-status="Ready — Unity can listen"
data-fail-status="Fix: Switch to a supported browser"
>
<div class="dependency-header">
<span class="dependency-name">Web Speech Recognition API</span>
<span class="dependency-status">Checking…</span>
</div>
<p class="dependency-message" data-message-type="pass">
Speech recognition is available. Unity will understand what you say.
</p>
<p class="dependency-message" data-message-type="fail">
Open this page in the latest Chrome or Edge, then press “Check again.”
</p>
</li>
<li
class="dependency-item"
data-dependency="speech-synthesis"
data-state="pending"
data-pass-status="Ready — Unity can speak back"
data-fail-status="Fix: Enable browser speech voices"
>
<div class="dependency-header">
<span class="dependency-name">Speech synthesis voices</span>
<span class="dependency-status">Checking…</span>
</div>
<p class="dependency-message" data-message-type="pass">
Speech voices are ready. Unity can answer out loud through your speakers.
</p>
<p class="dependency-message" data-message-type="fail">
Use Chrome, Edge, or Safari with audio enabled, then press “Check again.”
</p>
</li>
<li
class="dependency-item"
data-dependency="microphone"
data-state="pending"
data-pass-status="Ready — Microphone unlocked"
data-fail-status="Fix: Allow microphone access"
>
<div class="dependency-header">
<span class="dependency-name">Microphone access</span>
<span class="dependency-status">Checking…</span>
</div>
<p class="dependency-message" data-message-type="pass">
Microphone permission granted. Unity can hear your voice input.
</p>
<p class="dependency-message" data-message-type="fail">
Click “Allow” on the microphone prompt or enable it in site settings, then press “Check again.”
</p>
</li>
</ul>
</div>
</div>

<ul id="dependency-list" class="dependency-list">
<li
class="dependency-item"
data-dependency="secure-context"
data-state="pending"
data-pass-status="Ready — secure and private"
data-fail-status="Fix: Use HTTPS or localhost"
>
<div class="dependency-header">
<span class="dependency-name">Secure connection (HTTPS or localhost)</span>
<span class="dependency-status">Checking…</span>
</div>
<p class="dependency-message" data-message-type="pass">
Secure connection detected. Unity can safely access the microphone and speech features.
</p>
<p class="dependency-message" data-message-type="fail">
Open this page with <code>https://</code> or from <code>localhost</code>, then press “Check again.”
</p>
</li>
<li
class="dependency-item"
data-dependency="speech-recognition"
data-state="pending"
data-pass-status="Ready — Unity can listen"
data-fail-status="Fix: Switch to a supported browser"
>
<div class="dependency-header">
<span class="dependency-name">Web Speech Recognition API</span>
<span class="dependency-status">Checking…</span>
</div>
<p class="dependency-message" data-message-type="pass">
Speech recognition is available. Unity will understand what you say.
</p>
<p class="dependency-message" data-message-type="fail">
Open this page in the latest Chrome or Edge, then press “Check again.”
</p>
</li>
<li
class="dependency-item"
data-dependency="speech-synthesis"
data-state="pending"
data-pass-status="Ready — Unity can speak back"
data-fail-status="Fix: Enable browser speech voices"
>
<div class="dependency-header">
<span class="dependency-name">Speech synthesis voices</span>
<span class="dependency-status">Checking…</span>
</div>
<p class="dependency-message" data-message-type="pass">
Speech voices are ready. Unity can answer out loud through your speakers.
</p>
<p class="dependency-message" data-message-type="fail">
Use Chrome, Edge, or Safari with audio enabled, then press “Check again.”
</p>
</li>
<li
class="dependency-item"
data-dependency="microphone"
data-state="pending"
data-pass-status="Ready — Microphone unlocked"
data-fail-status="Fix: Allow microphone access"
>
<div class="dependency-header">
<span class="dependency-name">Microphone access</span>
<span class="dependency-status">Checking…</span>
</div>
<p class="dependency-message" data-message-type="pass">
Microphone permission granted. Unity can hear your voice input.
</p>
<p class="dependency-message" data-message-type="fail">
Click “Allow” on the microphone prompt or enable it in site settings, then press “Check again.”
</p>
</li>
</ul>
</div>

<div class="landing-instructions" aria-labelledby="landing-how-to-title">
<div class="landing-instructions surface-card" aria-labelledby="landing-how-to-title">
<h2 id="landing-how-to-title">How to get every light to glow green</h2>
<ol class="landing-steps">
<li>
Expand All @@ -158,7 +162,8 @@ <h2 id="landing-how-to-title">How to get every light to glow green</h2>
Unity AI Lab home page and enter from there.
</li>
<li>
<p><strong>Use a browser that can listen.</strong> We recommend the latest Chrome or Edge. Safari works on macOS. Firefox is not supported in this release because it does not support the speech APIs we rely on.</p>
<strong>Use a browser that can listen.</strong> We recommend the latest Chrome or Edge. Safari works on macOS. Firefox is not
supported in this release because it does not support the speech APIs we rely on.
</li>
<li>
<strong>Give Unity a voice and ears.</strong> Turn your speakers on, set your system output to the right device, and when the browser asks
Expand All @@ -178,7 +183,7 @@ <h2 id="landing-how-to-title">How to get every light to glow green</h2>
</p>
</div>

<div class="landing-actions">
<div class="landing-actions surface-card action-bar">
<button id="launch-app" class="primary" type="button" disabled aria-disabled="true">Talk to Unity</button>
<button id="recheck-dependencies" class="ghost" type="button">Check again</button>
</div>
Expand Down
Loading