diff --git a/Pages/3D-Visualizations/index.html b/Pages/3D-Visualizations/index.html index 8dbc52da7..fe229f5c4 100644 --- a/Pages/3D-Visualizations/index.html +++ b/Pages/3D-Visualizations/index.html @@ -91,6 +91,17 @@

Cathode Ray Tube

+
+
+
Course
+

Biology

+
+
+
Molecular Biology
+

Deoxyribonucleic acid(DNA)

+ +
+
diff --git a/Pages/3D-Visualizations/sources/button-5/.vscode/settings.json b/Pages/3D-Visualizations/sources/button-5/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/Pages/3D-Visualizations/sources/button-5/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Pages/3D-Visualizations/sources/button-5/assets/asset 1.png b/Pages/3D-Visualizations/sources/button-5/assets/asset 1.png new file mode 100644 index 000000000..c5385e378 Binary files /dev/null and b/Pages/3D-Visualizations/sources/button-5/assets/asset 1.png differ diff --git a/Pages/3D-Visualizations/sources/button-5/assets/asset 41.png b/Pages/3D-Visualizations/sources/button-5/assets/asset 41.png new file mode 100644 index 000000000..961365f32 Binary files /dev/null and b/Pages/3D-Visualizations/sources/button-5/assets/asset 41.png differ diff --git a/Pages/3D-Visualizations/sources/button-5/assets/dna.jpg b/Pages/3D-Visualizations/sources/button-5/assets/dna.jpg new file mode 100644 index 000000000..60ac5045d Binary files /dev/null and b/Pages/3D-Visualizations/sources/button-5/assets/dna.jpg differ diff --git a/Pages/3D-Visualizations/sources/button-5/css/style.css b/Pages/3D-Visualizations/sources/button-5/css/style.css new file mode 100644 index 000000000..8b81fcb6b --- /dev/null +++ b/Pages/3D-Visualizations/sources/button-5/css/style.css @@ -0,0 +1,27 @@ +#container3D canvas { + width: 100vw ; + height: 50vh; + position: absolute; + top: 0; + left: 0; + margin-top: 10vh; + } + + + #loading-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white background */ + display: flex; + justify-content: center; + align-items: center; + z-index: 999; /* make sure it's on top of everything */ +} + +#loading-overlay img { + width: 30rem; /* adjust the size of the loading image */ + height: 24rem; +} \ No newline at end of file diff --git a/Pages/3D-Visualizations/sources/button-5/index.html b/Pages/3D-Visualizations/sources/button-5/index.html new file mode 100644 index 000000000..0a9199238 --- /dev/null +++ b/Pages/3D-Visualizations/sources/button-5/index.html @@ -0,0 +1,77 @@ + + + + + + + Virtuo Learn + + + + + + + + + + +
+
+

Deoxyribonucleic acid(DNA)

+
+
+ +
+
+ Loading... +
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/Pages/3D-Visualizations/sources/button-5/js/main.js b/Pages/3D-Visualizations/sources/button-5/js/main.js new file mode 100644 index 000000000..e54db365e --- /dev/null +++ b/Pages/3D-Visualizations/sources/button-5/js/main.js @@ -0,0 +1,87 @@ +import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js"; +import { OrbitControls } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js"; +import { GLTFLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js"; + + +const scene = new THREE.Scene(); + +const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); + +let object; + +let controls; + +const loader = new GLTFLoader(); + +loader.load( + `models/model/scene.gltf`, + function (gltf) { + object = gltf.scene; + scene.add(object); + }, + function (xhr) { + console.log((xhr.loaded / xhr.total * 100) + '% loaded'); + }, + function (error) { + console.error(error); + } +); + +const renderer = new THREE.WebGLRenderer({ alpha: true }); // Alpha true transparent background ke liye +renderer.setSize(window.innerWidth, window.innerHeight); + +document.getElementById("container3D").appendChild(renderer.domElement); + +camera.position.set(7, 0, -10); + +const topLight = new THREE.DirectionalLight(0xffffff, 1); // (color, intensity) +topLight.position.set(500, 500, 500) //top-left-ish +topLight.castShadow = true; +scene.add(topLight); + +const ambientLight = new THREE.AmbientLight(0x333333,5); +scene.add(ambientLight); + +controls = new OrbitControls(camera, renderer.domElement); + +function animate() { + requestAnimationFrame(animate); + renderer.render(scene, camera); +} + +window.addEventListener("resize", function () { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); +}); + +animate(); + + + +// Add a reference to the loading overlay +const loadingOverlay = document.getElementById('loading-overlay'); + +// Show the loading overlay initially +loadingOverlay.style.display = 'flex'; + +loader.load( + `models/model/scene.gltf`, + function (gltf) { + object = gltf.scene; + scene.add(object); + + // Hide the loading overlay when the model is loaded + loadingOverlay.style.display = 'none'; + }, + function (xhr) { + console.log((xhr.loaded / xhr.total * 100) + '% loaded'); + }, + function (error) { + console.error(error); + + // Hide the loading overlay in case of an error + loadingOverlay.style.display = 'none'; + } +); + diff --git a/Pages/3D-Visualizations/sources/button-5/media-queries.css b/Pages/3D-Visualizations/sources/button-5/media-queries.css new file mode 100644 index 000000000..8190bdc34 --- /dev/null +++ b/Pages/3D-Visualizations/sources/button-5/media-queries.css @@ -0,0 +1,98 @@ +@media screen and (max-width: 1030px) { + + h3 { + font-size: 1.2rem; + } + + .main-nav { + overflow: initial; + } + + .hamburger{ + display: block; + } + + .hamburger.active .bar:nth-child(2){ + opacity: 0; + } + .hamburger.active .bar:nth-child(1){ + transform: translateY(8px) rotate(45deg); + } + .hamburger.active .bar:nth-child(3){ + transform: translateY(-8px) rotate(-45deg); + } + + .nav-menu{ + position: absolute; + top: -100%; + left: 0; + gap: 0; + flex-direction: column; + width: 100%; + text-align: center; + transition: 0.3s; + z-index: 1; + /* background-color: aqua; */ + /* max-height: 10vh; */ + margin: 0; + padding: 0; + + background: rgba(236, 235, 255, 0.2); + /* border-radius: 16px; */ + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(3.3px); + -webkit-backdrop-filter: blur(3.3px); + border: 1px solid rgba(236, 235, 255, 0.3); + + } + .hover-link{ + margin: 16px 0; + } + .nav-menu.active{ + top: 13%; + } + + .course { + flex-direction: column; + height: 60vh; + } + .course-preview { + width: 70vw; + } + .course-info { + width: 100%; + height: 200%; + } + .card-btn { + bottom: 5vh; + right: 5vw; + } +} + +@media screen and (max-width: 479px) { + :root { + --padding-inline-section: 10px; + } + + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.5rem; + } + + h3 { + font-size: 1.5rem; + } + + p { + font-size: 1rem; + } + + .center{ + position: relative; + left: 0vw; + } + +} diff --git a/Pages/3D-Visualizations/sources/button-5/models/model/license.txt b/Pages/3D-Visualizations/sources/button-5/models/model/license.txt new file mode 100644 index 000000000..21ad391a2 --- /dev/null +++ b/Pages/3D-Visualizations/sources/button-5/models/model/license.txt @@ -0,0 +1,11 @@ +Model Information: +* title: DNA +* source: https://sketchfab.com/3d-models/dna-60e95170b37549e3b45ee490b74bb112 +* author: Holoxica (https://sketchfab.com/holoxica) + +Model License: +* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) +* requirements: Author must be credited. Commercial use is allowed. + +If you use this 3D model in your project be sure to copy paste this credit wherever you share it: +This work is based on "DNA" (https://sketchfab.com/3d-models/dna-60e95170b37549e3b45ee490b74bb112) by Holoxica (https://sketchfab.com/holoxica) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) \ No newline at end of file diff --git a/Pages/3D-Visualizations/sources/button-5/models/model/scene.bin b/Pages/3D-Visualizations/sources/button-5/models/model/scene.bin new file mode 100644 index 000000000..38c14378a Binary files /dev/null and b/Pages/3D-Visualizations/sources/button-5/models/model/scene.bin differ diff --git a/Pages/3D-Visualizations/sources/button-5/models/model/scene.gltf b/Pages/3D-Visualizations/sources/button-5/models/model/scene.gltf new file mode 100644 index 000000000..2d9a003bf --- /dev/null +++ b/Pages/3D-Visualizations/sources/button-5/models/model/scene.gltf @@ -0,0 +1,407 @@ +{ + "accessors": [ + { + "bufferView": 1, + "componentType": 5126, + "count": 38250, + "max": [4.234000205993652, 3.2802000045776367, 4.552499771118164], + "min": [-6.652599811553955, -4.46750020980835, -2.5329999923706055], + "type": "VEC3" + }, + { + "bufferView": 1, + "byteOffset": 459000, + "componentType": 5126, + "count": 38250, + "max": [0.9995937943458557, 0.9998039603233337, 0.9998579025268555], + "min": [-0.9995937943458557, -0.9998039603233337, -0.9998579025268555], + "type": "VEC3" + }, + { + "bufferView": 0, + "componentType": 5125, + "count": 156600, + "type": "SCALAR" + }, + { + "bufferView": 1, + "byteOffset": 918000, + "componentType": 5126, + "count": 45108, + "max": [5.036200046539307, 4.107699871063232, 4.810200214385986], + "min": [-6.978899955749512, -4.979400157928467, -3.3417000770568848], + "type": "VEC3" + }, + { + "bufferView": 1, + "byteOffset": 1459296, + "componentType": 5126, + "count": 45108, + "max": [0.9999114274978638, 0.9999059438705444, 0.9998691082000732], + "min": [-0.9999114274978638, -0.9999059438705444, -0.9998691082000732], + "type": "VEC3" + }, + { + "bufferView": 0, + "byteOffset": 626400, + "componentType": 5125, + "count": 201912, + "type": "SCALAR" + }, + { + "bufferView": 1, + "byteOffset": 2000592, + "componentType": 5126, + "count": 65532, + "max": [4.643899917602539, 3.831700086593628, 4.674799919128418], + "min": [-7.0920000076293945, -4.8368000984191895, -3.052299976348877], + "type": "VEC3" + }, + { + "bufferView": 1, + "byteOffset": 2786976, + "componentType": 5126, + "count": 65532, + "max": [0.9999051094055176, 0.999714195728302, 0.9999806880950928], + "min": [-0.9999051094055176, -0.999714195728302, -0.9999806880950928], + "type": "VEC3" + }, + { + "bufferView": 0, + "byteOffset": 1434048, + "componentType": 5125, + "count": 292899, + "type": "SCALAR" + }, + { + "bufferView": 1, + "byteOffset": 3573360, + "componentType": 5126, + "count": 55825, + "max": [4.682799816131592, 3.831700086593628, 4.71999979019165], + "min": [-7.132699966430664, -4.880799770355225, -2.9303998947143555], + "type": "VEC3" + }, + { + "bufferView": 1, + "byteOffset": 4243260, + "componentType": 5126, + "count": 55825, + "max": [0.9999812841415405, 0.9999701976776123, 0.9998829364776611], + "min": [-0.9999812841415405, -0.9999701976776123, -0.9998829364776611], + "type": "VEC3" + }, + { + "bufferView": 0, + "byteOffset": 2605644, + "componentType": 5125, + "count": 180141, + "type": "SCALAR" + }, + { + "bufferView": 1, + "byteOffset": 4913160, + "componentType": 5126, + "count": 13294, + "max": [4.906199932098389, 3.97379994392395, 4.814000129699707], + "min": [-6.769100189208984, -4.871600151062012, -3.19350004196167], + "type": "VEC3" + }, + { + "bufferView": 1, + "byteOffset": 5072688, + "componentType": 5126, + "count": 13294, + "max": [0.9998939037322998, 0.9992339611053467, 0.999090850353241], + "min": [-0.9998939037322998, -0.9992339611053467, -0.999090850353241], + "type": "VEC3" + }, + { + "bufferView": 0, + "byteOffset": 3326208, + "componentType": 5125, + "count": 50856, + "type": "SCALAR" + }, + { + "bufferView": 1, + "byteOffset": 5232216, + "componentType": 5126, + "count": 65532, + "max": [4.811600208282471, 3.952899932861328, 4.796199798583984], + "min": [-7.201300144195557, -4.989999771118164, -3.156899929046631], + "type": "VEC3" + }, + { + "bufferView": 1, + "byteOffset": 6018600, + "componentType": 5126, + "count": 65532, + "max": [0.9999314546585083, 0.9999480247497559, 0.9999300241470337], + "min": [-0.9999314546585083, -0.9999480247497559, -0.9999300241470337], + "type": "VEC3" + }, + { + "bufferView": 0, + "byteOffset": 3529632, + "componentType": 5125, + "count": 304911, + "type": "SCALAR" + }, + { + "bufferView": 1, + "byteOffset": 6804984, + "componentType": 5126, + "count": 6249, + "max": [3.9670000076293945, -0.09679999947547913, 2.873699903488159], + "min": [1.469499945640564, -3.510999917984009, -1.63100004196167], + "type": "VEC3" + }, + { + "bufferView": 1, + "byteOffset": 6879972, + "componentType": 5126, + "count": 6249, + "max": [0.9975656270980835, 0.9986762404441833, 0.9655718207359314], + "min": [-0.9975656270980835, -0.9986762404441833, -0.9655718207359314], + "type": "VEC3" + }, + { + "bufferView": 0, + "byteOffset": 4749276, + "componentType": 5125, + "count": 36297, + "type": "SCALAR" + } + ], + "asset": { + "extras": { + "author": "Holoxica (https://sketchfab.com/holoxica)", + "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)", + "source": "https://sketchfab.com/3d-models/dna-60e95170b37549e3b45ee490b74bb112", + "title": "DNA" + }, + "generator": "Sketchfab-12.68.0", + "version": "2.0" + }, + "bufferViews": [ + { + "buffer": 0, + "byteLength": 4894464, + "name": "floatBufferViews", + "target": 34963 + }, + { + "buffer": 0, + "byteLength": 6954960, + "byteOffset": 4894464, + "byteStride": 12, + "name": "floatBufferViews", + "target": 34962 + } + ], + "buffers": [ + { + "byteLength": 11849424, + "uri": "scene.bin" + } + ], + "materials": [ + { + "doubleSided": true, + "name": "vmd_mat_cindex_0", + "pbrMetallicRoughness": { + "baseColorFactor": [0.0286273403, 0.0286273403, 0.8464433773, 1.0], + "metallicFactor": 0.4602733405, + "roughnessFactor": 0.0 + } + }, + { + "doubleSided": true, + "name": "vmd_mat_cindex_1", + "pbrMetallicRoughness": { + "baseColorFactor": [0.65, 0.0, 0.0, 1.0], + "metallicFactor": 0.504238495, + "roughnessFactor": 0.2884972054 + } + }, + { + "doubleSided": true, + "name": "vmd_mat_cindex_10", + "pbrMetallicRoughness": { + "baseColorFactor": [ + 0.14700273508800002, 0.450195876207, 0.450195876207, 1.0 + ], + "metallicFactor": 0.3786237679, + "roughnessFactor": 0.13147879650000005 + } + }, + { + "doubleSided": true, + "name": "vmd_mat_cindex_5", + "pbrMetallicRoughness": { + "baseColorFactor": [0.3806290698, 0.3806290698, 0.1249768636, 1.0], + "metallicFactor": 0.4728348132, + "roughnessFactor": 0.23825131450000003 + } + }, + { + "doubleSided": true, + "name": "vmd_mat_cindex_8", + "pbrMetallicRoughness": { + "baseColorFactor": [0.65, 0.65, 0.65, 1.0], + "metallicFactor": 0.4916770223, + "roughnessFactor": 0.09379437840000004 + } + } + ], + "meshes": [ + { + "name": "Object_0", + "primitives": [ + { + "attributes": { + "NORMAL": 1, + "POSITION": 0 + }, + "indices": 2, + "material": 0, + "mode": 4 + } + ] + }, + { + "name": "Object_1", + "primitives": [ + { + "attributes": { + "NORMAL": 4, + "POSITION": 3 + }, + "indices": 5, + "material": 1, + "mode": 4 + } + ] + }, + { + "name": "Object_2", + "primitives": [ + { + "attributes": { + "NORMAL": 7, + "POSITION": 6 + }, + "indices": 8, + "material": 2, + "mode": 4 + } + ] + }, + { + "name": "Object_3", + "primitives": [ + { + "attributes": { + "NORMAL": 10, + "POSITION": 9 + }, + "indices": 11, + "material": 2, + "mode": 4 + } + ] + }, + { + "name": "Object_4", + "primitives": [ + { + "attributes": { + "NORMAL": 13, + "POSITION": 12 + }, + "indices": 14, + "material": 3, + "mode": 4 + } + ] + }, + { + "name": "Object_5", + "primitives": [ + { + "attributes": { + "NORMAL": 16, + "POSITION": 15 + }, + "indices": 17, + "material": 4, + "mode": 4 + } + ] + }, + { + "name": "Object_6", + "primitives": [ + { + "attributes": { + "NORMAL": 19, + "POSITION": 18 + }, + "indices": 20, + "material": 4, + "mode": 4 + } + ] + } + ], + "nodes": [ + { + "children": [1], + "matrix": [ + 1.0, 0.0, 0.0, 0.0, 0.0, 2.220446049250313e-16, -1.0, 0.0, 0.0, 1.0, + 2.220446049250313e-16, 0.0, 0.0, 0.0, 0.0, 1.0 + ], + "name": "Sketchfab_model" + }, + { + "children": [2, 3, 4, 5, 6, 7, 8], + "name": "DNA.obj.cleaner.materialmerger.gles" + }, + { + "mesh": 0, + "name": "Object_2" + }, + { + "mesh": 1, + "name": "Object_3" + }, + { + "mesh": 2, + "name": "Object_4" + }, + { + "mesh": 3, + "name": "Object_5" + }, + { + "mesh": 4, + "name": "Object_6" + }, + { + "mesh": 5, + "name": "Object_7" + }, + { + "mesh": 6, + "name": "Object_8" + } + ], + "scene": 0, + "scenes": [ + { + "name": "Sketchfab_Scene", + "nodes": [0] + } + ] +} diff --git a/Pages/3D-Visualizations/sources/button-5/style.css b/Pages/3D-Visualizations/sources/button-5/style.css new file mode 100644 index 000000000..3e2ae0cd0 --- /dev/null +++ b/Pages/3D-Visualizations/sources/button-5/style.css @@ -0,0 +1,202 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;700&display=swap'); + +/* resets */ + + + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} + +:root { + --primary-text-color: #183b56; + --secondary-text-color: #577592; + --accent-color: #2294ed; + --accent-color-dark: #1d69a3; + --padding-inline-section: 20px; +} + +body { + font-family: 'Poppins', sans-serif; + color: var(--primary-text-color); + overflow-x: hidden; +} + +h1 { + font-size: 3rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +p { + font-family: 'Roboto', sans-serif; + font-size: 1.25rem; + color: var(--secondary-text-color); + line-height: 1.8rem; +} + +a { + text-decoration: none; + display: inline-block; +} + +ul { + list-style: none; +} + +/* utility classes */ + +.small-bold-text { + font-size: 1rem; + font-weight: 700; +} + +.container { + max-width: 1180px; + margin-inline: auto; + padding-inline: var(--padding-inline-section); + overflow: hidden; +} + +.flex { + display: flex; + align-items: center; +} + +.hover-link { + color: var(--primary-text-color); + transition: 0.2s ease-out; +} + +.hover-link:hover { + color: var(--accent-color); +} + +.primary-button { + background-color: var(--accent-color); + border-radius: 6px; + font-weight: 700; + color: white !important; + padding: 12px 24px; + box-shadow: 0 0 2px var(--secondary-text-color); + transition: 0.2s ease-out; + text-align: center; +} + +.primary-button:hover { + background-color: var(--accent-color-dark); +} + +.secondary-button { + border: 0.5px solid var(--secondary-text-color); + border-radius: 6px; + font-weight: 700; + color: var(--primary-text-color) !important; + padding: 12px 24px; + transition: 0.2s ease-out; +} + +.secondary-button:hover { + border-color: var(--accent-color); + color: var(--accent-color) !important; +} + +/* nav bar */ + +.main-nav { + margin-top: 20px; + justify-content: space-between; +} + +.company-logo img { + width: 200px; +} + +.nav-links { + flex-basis: 730px; +} + +.nav-menu{ + display: flex; + align-items: center; +} + +.nav-links ul { + justify-content: end; + gap: 40px; +} + +.nav-toggle { + display: none; +} + +.hamburger{ + display: none; + cursor: pointer; +} + +.bar{ + display: block; + width: 25px; + height: 3px; + margin: 5px auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: black; +} + +/* header section */ +.header h1{ + text-align: center; + margin-top: 4vh; +} + + +/* footer */ + +footer{ + position: relative; + bottom: 0; + left: 0; + right: 0; + top: 50vh; + background: #111; + height: auto; + width: 100vw; + padding-top: 40px; + background-color: #ebf2fa; + margin-top: 15vh; +} + +.footer-content{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; +} + +.footer-logo{ + font-size: 2.1rem; + font-weight: 500; + text-transform: capitalize; + line-height: 3rem; +} + +.footer-content p{ + max-width: 500px; + margin: 10px auto; + line-height: 28px; + font-size: 14px; + color: #cacdd2; +}