diff --git a/Week-3/Task-3/vanilla/index.html b/Week-3/Task-3/vanilla/index.html index e2d9ea7..316f960 100644 --- a/Week-3/Task-3/vanilla/index.html +++ b/Week-3/Task-3/vanilla/index.html @@ -11,6 +11,7 @@ + diff --git a/Week-3/Task-3/vanilla/main.js b/Week-3/Task-3/vanilla/main.js index 170bb3f..e9155b8 100644 --- a/Week-3/Task-3/vanilla/main.js +++ b/Week-3/Task-3/vanilla/main.js @@ -20,6 +20,7 @@ const geometries = { black: new THREE.BoxGeometry(2, 2, 2), silver: new THREE.SphereGeometry(1.5, 32, 32), gold: new THREE.TorusGeometry(1.2, 0.4, 16, 100), + emerald: new THREE.CylinderGeometry(1.2, 0.4, 2.5, 100), }; const materials = { @@ -38,6 +39,11 @@ const materials = { roughness: 0.4, metalness: 1, }), + emerald: new THREE.MeshStandardMaterial({ + color: "#009B77", + roughness: 0.4, + metalness: 1, + }), }; let currentVariant = "black"; diff --git a/Week-3/Task-3/vanilla/style.css b/Week-3/Task-3/vanilla/style.css new file mode 100644 index 0000000..4da72f8 --- /dev/null +++ b/Week-3/Task-3/vanilla/style.css @@ -0,0 +1,42 @@ +body { + margin: 0; + overflow: hidden; + font-family: 'Inter', system-ui, -apple-system, sans-serif; +} + +#controls { + position: absolute; + top: 20px; + left: 20px; + display: flex; + gap: 12px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + padding: 16px; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.05); +} + +button { + padding: 10px 18px; + border: none; + border-radius: 8px; + background: white; + color: #333; + cursor: pointer; + font-weight: 500; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +button.active { + background: #333; + color: white; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +}