<!
DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>Dynamic Tint Control Eyewear Simulator</title>
<!—Load Tailwind CSS
<script src=[Link]
<style>
/* Define custom styles for the glasses and animation */
Body {
Font-family: ‘Inter’, sans-serif;
Background-color: #0d1117;
Display: flex;
Justify-content: center;
Align-items: center;
Min-height: 100vh;
Padding: 20px;
.glasses-container {
Position: relative;
Width: 100%;
Max-width: 600px;
Aspect-ratio: 1 / 1; /* Keep it square */
Overflow: hidden;
Border-radius: 12px;
Box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
Transition: transform 0.3s ease;
.glasses-container:hover {
Transform: scale(1.02);
.background-image {
Width: 100%;
Height: 100%;
Object-fit: cover;
Filter: grayscale(0.1);
.lens-frame {
Position: absolute;
Top: 50%;
Left: 50%;
Transform: translate(-50%, -50%);
Width: 80%;
Height: 40%;
Display: flex;
Justify-content: space-between;
Align-items: center;
/* Simple metal frame simulation */
Border: 5px solid #333;
Border-radius: 10% / 50%;
Box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
.lens {
/* This is the dynamic tint overlay */
Position: absolute;
Background-color: #000; /* Tint color */
Transition: opacity 0.2s ease-in-out;
Pointer-events: none; /* Allows clicks to pass through to the slider if
needed, but not necessary here */
.lens-left {
Width: 48%;
Height: 90%;
Left: 1%;
Border-radius: 50% / 80%;
.lens-right {
Width: 48%;
Height: 90%;
Right: 1%;
Border-radius: 50% / 80%;
}
.bridge {
Position: absolute;
Top: 50%;
Left: 50%;
Transform: translate(-50%, -50%);
Width: 4%;
Height: 5%;
Background-color: #333;
Border-radius: 5px;
z-index: 10;
Input[type=”range”]::-webkit-slider-thumb {
-webkit-appearance: none;
Appearance: none;
Width: 20px;
Height: 20px;
Border-radius: 50%;
Background: #4F46E5; /* Indigo */
Cursor: pointer;
Box-shadow: 0 0 5px rgba(79, 70, 229, 0.8);
Border: 3px solid #fff;
Input[type=”range”]::-moz-range-thumb {
Width: 20px;
Height: 20px;
Border-radius: 50%;
Background: #4F46E5;
Cursor: pointer;
Box-shadow: 0 0 5px rgba(79, 70, 229, 0.8);
Border: 3px solid #fff;
</style>
</head>
<body>
<div class=”max-w-xl w-full bg-gray-800 p-6 rounded-xl shadow-2xl”>
<h1 class=”text-3xl font-bold text-center text-indigo-400 mb-6
tracking-wider”>
<span class=”text-white”>👓</span> Dynamic Tint Control
</h1>
<p class=”text-sm text-gray-400 text-center mb-6”>Use the slider to
adjust the lens brightness (opacity) in real-time.</p>
<!—Glasses Container
<div class=”glasses-container”>
<!—Background Image
<img id=”sceneImage”
Src=[Link]
text=Sunny+Outdoor+Scene
Onerror=”[Link]=’[Link]
text=Sunny+Outdoor+Scene’;”
Alt=”Sunny outdoor scene”
Class=”background-image”>
<!—Lens Frame and Lenses
<div class=”lens-frame”>
<div id=”lensLeft” class=”lens lens-left” style=”opacity:
0.5;”></div>
<div id=”lensRight” class=”lens lens-right” style=”opacity:
0.5;”></div>
<div class=”bridge”></div>
</div>
</div>
<!—Controls
<div class=”mt-8”>
<label for=”brightnessSlider” class=”block text-lg font-medium text-
gray-300 mb-3 text-center”>
Brightness Control
</label>
<div class=”flex items-center space-x-4 bg-gray-700 p-4 rounded-lg
shadow-inner”>
<span class=”text-gray-400 text-xl” title=”Maximum Brightness
(Low Tint)”>🔆</span>
<input type=”range”
Id=”brightnessSlider”
Min=”0”
Max=”100”
Value=”50”
Class=”w-full h-2 bg-gray-600 rounded-lg appearance-none
cursor-pointer range-lg focus:outline-none”
Oninput=”adjustBrightness([Link])”>
<span class=”text-gray-400 text-xl” title=”Minimum Brightness
(High Tint)”>⚫</span>
</div>
<p id=”currentTintValue” class=”text-sm text-center text-indigo-300
mt-3 font-mono”>Tint Opacity: 50%</p>
</div>
</div>
<script>
// Global constants for DOM elements
Const lensLeft = [Link](‘lensLeft’);
Const lensRight = [Link](‘lensRight’);
Const currentTintValueDisplay =
[Link](‘currentTintValue’);
/**
* Converts the slider value (0-100) to an opacity value (0.0-1.0) and
updates the lenses.
* Note: 0% slider value means max tint (opacity 1.0) and 100% slider
value means min tint (opacity 0.0).
* Here, we map slider value 0 (min) to max opacity (1.0) and slider
value 100 (max) to min opacity (0.0).
* Since the user asked for “brightness” adjustment, we’ll map the slider
intuitively:
* Slider low (0) = Dark/Low Brightness (High Opacity Tint)
* Slider high (100) = Clear/High Brightness (Low Opacity Tint)
*
* @param {string} sliderValue The current value of the range input (0
to 100).
*/
Function adjustBrightness(sliderValue) {
Const value = parseInt(sliderValue, 10);
// Map slider value (0-100) to opacity (1.0 – 0.0)
// 0 -> 1.0 (Darkest Tint)
// 100 -> 0.0 (Clearest Tint)
Const opacity = 1.0 – (value / 100);
// Apply the new opacity to the lens elements
[Link] = opacity;
[Link] = opacity;
// Update the display text (showing the tint’s opacity)
[Link] = `Tint Opacity: $
{[Link](opacity * 100)}%`;
// Initialize the value display on load
[Link] = () => {
// Set the initial opacity and display text based on the default slider
value (50)
adjustBrightness([Link](‘brightnessSlider’).value);
};
</script>
</body>
</html>