Update game UI, add 3D gear assets, backgrounds, icons, and audio enhancements
This commit is contained in:
Vishva
+177
-104
@@ -286,130 +286,89 @@ html, body {
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SCREEN 1: START / HERO VIEW
|
||||
SCREEN 1: START / HERO VIEW WITH DEDICATED HQ HOME SCREEN GRAPHIC
|
||||
========================================================================== */
|
||||
|
||||
.intro-card {
|
||||
max-width: 820px;
|
||||
margin: 30px auto;
|
||||
background: linear-gradient(180deg, #131d2e 0%, #0d1524 100%);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
#screen-start {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.safety-shield-animated {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
.home-screen-backdrop {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
aspect-ratio: 1024 / 458;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--panel-border-light);
|
||||
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
|
||||
background: #070d18;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.shield-svg {
|
||||
.home-bg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
display: block;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: high-quality;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.shield-outline {
|
||||
fill: #1e293b;
|
||||
stroke: var(--safety-yellow);
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.shield-plus {
|
||||
stroke: var(--safety-yellow);
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--safety-yellow);
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mission-briefing {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 24px;
|
||||
margin-bottom: 28px;
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.mission-briefing h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mission-briefing p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.92rem;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.learning-flow-banner {
|
||||
.btn-start-hero-overlay {
|
||||
position: absolute;
|
||||
top: 78.5%;
|
||||
left: 50.8%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 24.8%;
|
||||
height: 9.8%;
|
||||
min-width: 180px;
|
||||
min-height: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 14px;
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
background: #090f19;
|
||||
padding: 12px 18px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--panel-border);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: var(--safety-yellow);
|
||||
.btn-hero-hover-text {
|
||||
opacity: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
letter-spacing: 1px;
|
||||
transition: opacity 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.85rem;
|
||||
.btn-start-hero-overlay:hover {
|
||||
background: rgba(250, 204, 21, 0.12);
|
||||
box-shadow: 0 0 40px rgba(250, 204, 21, 0.55);
|
||||
transform: translate(-50%, -50%) scale(1.015);
|
||||
}
|
||||
|
||||
.start-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.controls-hint {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
.btn-start-hero-overlay:active {
|
||||
transform: translate(-50%, -50%) scale(0.985);
|
||||
}
|
||||
|
||||
/* Common Button Styles */
|
||||
@@ -714,16 +673,109 @@ html, body {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scene-img-backdrop {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.env-stage-photo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center 60%;
|
||||
display: block;
|
||||
filter: contrast(1.03) brightness(0.98);
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: high-quality;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
transition: object-position 0.3s ease;
|
||||
}
|
||||
|
||||
.stage-chemical .env-stage-photo {
|
||||
object-position: center 48%;
|
||||
}
|
||||
|
||||
.stage-grinding .env-stage-photo {
|
||||
object-position: center 58%;
|
||||
}
|
||||
|
||||
.env-stage-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 35%, rgba(0, 0, 0, 0.35) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 280px;
|
||||
width: 290px;
|
||||
height: 440px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.worker-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
animation: characterAuraPulse 3s ease-in-out infinite;
|
||||
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.worker-svg image {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes characterAuraPulse {
|
||||
0% {
|
||||
filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.45))
|
||||
drop-shadow(0 0 12px rgba(56, 189, 248, 0.2))
|
||||
drop-shadow(0 14px 24px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.8))
|
||||
drop-shadow(0 0 22px rgba(56, 189, 248, 0.45))
|
||||
drop-shadow(0 0 34px rgba(56, 189, 248, 0.25))
|
||||
drop-shadow(0 14px 24px rgba(0, 0, 0, 0.65));
|
||||
}
|
||||
100% {
|
||||
filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.45))
|
||||
drop-shadow(0 0 12px rgba(56, 189, 248, 0.2))
|
||||
drop-shadow(0 14px 24px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific Equipped PPE Item Electric Cyan/Blue Glow Pop */
|
||||
.gear-pop-glow {
|
||||
animation: ppeGearPopGlow 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes ppeGearPopGlow {
|
||||
0% {
|
||||
filter: drop-shadow(0 0 16px #38bdf8) drop-shadow(0 0 32px #0284c7);
|
||||
opacity: 0.2;
|
||||
transform: scale(1.04);
|
||||
transform-origin: center center;
|
||||
}
|
||||
40% {
|
||||
filter: drop-shadow(0 0 20px #38bdf8) drop-shadow(0 0 36px #38bdf8);
|
||||
opacity: 1;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
100% {
|
||||
filter: url(#gearShadow);
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-step-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -1048,13 +1100,34 @@ html, body {
|
||||
color: var(--safety-cyan);
|
||||
}
|
||||
|
||||
/* 3x3 Grid Layout (Square Cards) */
|
||||
/* 3-Column Grid Layout for 10 Locker Items */
|
||||
.ppe-locker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
margin-bottom: auto;
|
||||
max-height: calc(100vh - 265px);
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.ppe-locker-grid::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.ppe-locker-grid::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ppe-locker-grid::-webkit-scrollbar-thumb {
|
||||
background: #1e3556;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ppe-locker-grid::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--safety-cyan);
|
||||
}
|
||||
|
||||
.ppe-item-card {
|
||||
@@ -1066,11 +1139,11 @@ html, body {
|
||||
background: #09121f;
|
||||
border: 1.5px solid #162740;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 8px 4px 6px 4px;
|
||||
padding: 6px 3px 5px 3px;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-normal);
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1.18;
|
||||
aspect-ratio: 1 / 1.15;
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user