try this

CameronRosencutter · Dec 21, 2023 · a5ba27c · a5ba27c
1 parent 881405a
commit a5ba27c
Show file tree

Hide file tree

Showing 2 changed files with 206 additions and 0 deletions.
diff --git a/modelGallery.html b/modelGallery.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no user-scalable=no">
+    <!--favicon -->
+    <link rel="icon" sizes="180x180" href="../Images/building-assets/Imagination.svg">
+
+    <!-- JQuery -->
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
+        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Coiny&display=swap" rel="stylesheet" />
+
+    <!-- Bootstrap 4 -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+        crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
+
+    <!-- Font Awesome-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
+
+    <!-- Styles -->
+    <link rel="stylesheet" type="text/css" href="../Styles/styles.css">
+
+    <link rel="stylesheet" type="text/css" href="../Styles/normalize.css">
+
+    <link rel="stylesheet" type="text/css" href="../Styles/clouds.css">
+
+
+    <title> Imagination Gallery </title>
+
+    <!-- Popper.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+        crossorigin="anonymous"></script>
+
+    <!-- THREE.js -->
+    <script type="importmap">
+        {
+        "imports": {
+        "three": "https://unpkg.com/[email protected]/build/three.module.js",
+        "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+        }
+        }
+        </script>
+</head>
+
+<body>
+
+    <!-- Clouds for Background -->
+    <div class="container_clouds">
+        <div class="cloud"></div>
+    </div>
+
+    <!-- Menu attached to room  -->
+    <div id="menu" class="d-flex container-fluid justify-content-center col-12 py-5">
+
+        <!-- Card for Room 2  -->
+
+        <div id="menu-div" class="audio_controls">
+            <button id="start_audio">Start Audio </button>
+
+            <button id="pause_audio">Pause Audio </button>
+
+            <button id="stop_audio">Stop Audio </button>
+        </div>
+
+        <div class="card text-center text-primary bg-dark " style="width:350px">
+            <img class="card-img-top" style="height: 300px;" src="../Images/buildingicons/weirdbuild.png"
+                alt="Card image">
+            <div class="card-body">
+                <h4 class="card-title">Welcome<br><span class="text-primary">This
+                        is
+                        a 3D Art
+                        Gallery</span></h4>
+                <p class="card-text">Made with 💜 and THREE.js</p>
+                <p class="lead">Control Guide</p>
+                <p>W - Forward / S - Backward </p>
+                <p>A - Left / D - Right</p>
+                <p>Q - rotate Left / E - rotate Right</p>
+
+                <div id="playButton" class=''>
+                    <a id="play-button" href="../index.html"
+                        class="btn btn-block btn-link stretched-link text-light font-weight-bold btn-outline-primary rounded-circle ">Return
+                        To Homepage</a>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <script src="../scripts/modules/1_modelGallery.js" type="module">
+
+    </script>
+</body>
+
+</html>
diff --git a/museumGallery.html b/museumGallery.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no user-scalable=no">
+    <!--favicon -->
+    <link rel="icon" sizes="180x180" href="../Images/building-assets/Imagination.svg">
+
+    <!-- JQuery -->
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
+        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Coiny&display=swap" rel="stylesheet" />
+
+    <!-- Bootstrap 4 -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+        crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
+
+    <!-- Font Awesome-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
+
+    <!-- Styles -->
+    <link rel="stylesheet" type="text/css" href="../Styles/styles.css">
+
+    <link rel="stylesheet" type="text/css" href="../Styles/normalize.css">
+
+    <link rel="stylesheet" type="text/css" href="../Styles/clouds.css">
+
+
+    <title>Museum Gallery</title>
+
+    <!-- Popper.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+        crossorigin="anonymous"></script>
+
+    <!-- THREE.js -->
+
+
+    <script type="importmap">
+        {
+        "imports": {
+        "three": "https://unpkg.com/[email protected]/build/three.module.js",
+        "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+        }
+        }
+        </script>
+</head>
+
+<body>
+
+    <!-- Clouds for Background -->
+    <div class="container_clouds">
+        <div class="cloud"></div>
+    </div>
+
+    <!-- Menu attached to room  -->
+    <div id="menu" class="d-flex container-fluid justify-content-center col-12 py-5">
+
+        <!-- Card for Room 1  -->
+        <div id="menu" class="card text-center text-primary bg-dark " style="width:350px">
+            <img class="card-img-top" style="height: 300px;" src="../Images/assets/imagineamuseum.png" alt="Card image">
+            <div class="card-body">
+                <h4 class="card-title">Museum of Imagination Tour<br></h4>
+                <p class="card-text">Made with 💜 and THREE.js</p>
+                <p class="lead">Control Guide</p>
+                <p>W - Forward / S - Backward </p>
+                <p>A - Left / D - Right</p>
+                <p>Q - rotate Left / E - rotate Right</p>
+
+
+                <!--   -->
+                <div id="playButton" class=''>
+                    <a id="play-button" href="../index.html"
+                        class="btn btn-block btn-link stretched-link text-light font-weight-bold btn-outline-primary rounded-circle ">Return
+                        to Home Page </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Card for Room 2  -->
+
+        <div id="menu-div" class="audio_controls">
+            <button id="start_audio">Start Audio </button>
+
+            <button id="pause_audio">Pause Audio </button>
+
+            <button id="stop_audio">Stop Audio </button>
+        </div>
+
+    </div>
+    <script type="module" src="../scripts/1_museumGallery.js"></script>
+
+</body>
+
+</html>