Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/JustADev1024/threejs-car/llms.txt

Use this file to discover all available pages before exploring further.

Dream Car’s entire interface is styled with a single <style> block embedded directly in index.html — there is no external stylesheet and no CSS framework. Every visual tweak is a plain CSS edit followed by a page refresh.

​
Primary accent color

All interactive controls — buttons, the track dropdown, and the URL input border — share a single orange accent color: #ff6600. The base rule and its hover state are: 
button, select, input {
    background: #ff6600;
    border: none;
    padding: 6px 12px;
    border-radius: 40px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    font-size: 13px;
}
button:hover { background: #ff8833; }
To change the accent color globally, replace every occurrence of #ff6600 in the style block with your chosen color, and update #ff8833 (the lighter hover variant) to a tinted version of the same hue.
Some buttons override their own background inline via JavaScript — for example, updateLightsButton() sets lightsBtn.style.background = lightsOn ? '#ff6600' : '#444'. After updating the CSS accent, search the <script> block for occurrences of '#ff6600' and update those literals to match.

​
Control panel overlay

The floating #controls panel uses glass-morphism: a semi-transparent dark fill combined with a backdrop blur effect: 
#controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(12px);
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 14px;
    max-height: 45%;
    overflow-y: auto;
}
Common adjustments:
PropertyEffect
rgba(0,0,0,0.7)Increase the alpha value toward 1.0 for an opaque panel; decrease it toward 0.3 for a more transparent look.
blur(12px)Raise for stronger frosted-glass blur; lower for a sharper, less blurred background.
border-radius: 28pxReduce for squarer corners; set to 0 to remove rounding entirely.
border: 1px solid rgba(255,255,255,0.2)Adjust the alpha of the border to make the panel edge more or less prominent.
backdrop-filter: blur() is GPU-accelerated but can cause frame drops on low-end mobile hardware. If the UI feels sluggish on a phone, try lowering blur(12px) to blur(4px) or removing the backdrop-filter line entirely — the panel remains readable due to its dark background fill.

​
Time display

The #timeDisplay clock uses mix-blend-mode: difference to remain legible against both the bright daytime sky and the dark nighttime background: 
#timeDisplay {
    background: black;
    color: white;
    padding: 4px 8px;
    border-radius: 20px;
    font-weight: bold;
    mix-blend-mode: difference;
}
mix-blend-mode: difference subtracts the element’s colors from whatever is rendered behind it, producing an inverted tone. Against a light daytime sky the pill appears dark; against the deep night sky it appears bright — all without any JavaScript. This means the clock is always readable at any time of day without writing a single line of logic to handle the color switch.

​
Input and select fields

Inputs and selects receive overriding rules immediately after the shared button, select, input block: 
input, select {
    background: #2a2a2a;
    cursor: text;
    color: white;
    border: 1px solid #ff6600;
}
select { cursor: pointer; background: #ff6600; color: white; }
  • Text inputs (<input type="text">) use a near-black fill (#2a2a2a) so user-typed text stands out, with the accent color used only for the border.
  • Select dropdowns revert to the full accent background so they visually match the buttons.
To use a dark background for the dropdown as well, change select’s background to #2a2a2a and remove the override rule.

​
Language button active state

The language switcher buttons (EN / RU) use a dedicated class to toggle between active (orange) and inactive (grey): 
.lang-btn {
    background: #444;
    padding: 4px 12px;
    font-size: 13px;
    min-width: 40px;
}
.lang-btn.active {
    background: #ff6600;
}
The active class is applied in JavaScript via classList.toggle: 
langEnBtn.classList.toggle('active', currentLang === 'en');
langRuBtn.classList.toggle('active', currentLang === 'ru');
Change .lang-btn.active { background: … } to use a different highlight color for the selected language, without affecting any other buttons.

​
Mobile responsiveness

A @media query at the bottom of the style block makes all controls stretch to fill the available width on narrow screens: 
@media (max-width: 700px) {
    .row { flex-wrap: wrap; justify-content: stretch; }
    button, select, input, .slider { flex: 1; min-width: 80px; }
}
The 700px breakpoint can be adjusted to target a different device width. Increase min-width: 80px if any controls appear too narrow on a specific device, or reduce it to fit more controls side by side.

Build docs developers (and LLMs) love

Get started for freeTalk to us