diff --git a/Week-3/Task-2/vanilla/index.html b/Week-3/Task-2/vanilla/index.html index cf4f562..2129f67 100644 --- a/Week-3/Task-2/vanilla/index.html +++ b/Week-3/Task-2/vanilla/index.html @@ -3,6 +3,7 @@ Task 2 — Texture / Surface Variant Switcher + @@ -10,6 +11,7 @@ + diff --git a/Week-3/Task-2/vanilla/main.js b/Week-3/Task-2/vanilla/main.js index 30c0687..63bf8e1 100644 --- a/Week-3/Task-2/vanilla/main.js +++ b/Week-3/Task-2/vanilla/main.js @@ -23,7 +23,8 @@ const loader = new THREE.TextureLoader(); const textures = { earth: loader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZVsp7bSmsdGhM1GouOYgZ6l06Za__Z1ZY8A&s'), moon: loader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROh1go667NHsMdzLyvI-0tt9Mn0eugRp0xhQ&s'), - sun: loader.load('https://upload.wikimedia.org/wikipedia/commons/a/a4/Solarsystemscope_texture_8k_sun.jpg') + sun: loader.load('https://upload.wikimedia.org/wikipedia/commons/a/a4/Solarsystemscope_texture_8k_sun.jpg'), + jupiter: loader.load('https://www.shutterstock.com/image-vector/vector-texture-map-spherical-surface-260nw-2473415409.jpg') }; const material = new THREE.MeshStandardMaterial({ diff --git a/Week-3/Task-2/vanilla/style.css b/Week-3/Task-2/vanilla/style.css new file mode 100644 index 0000000..4da72f8 --- /dev/null +++ b/Week-3/Task-2/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); +}