pop up audio

static/css/style.css

@@ -7,7 +7,7 @@
 .map_area {
   text-align: center;
   margin-top: 200px;
-  height:800px;
+  height:80%;
 }
 .image_area {
   margin-top: 10px;

templates/base.html

@@ -18,5 +18,7 @@
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <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>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+<script src="../static/js/jquery-1.12.4.js"></script>
+<script src="../static/js/jquery-ui.js"></script>
 </body>
 </html>

templates/hello.html

@@ -1,35 +1,30 @@
 {% extends "base.html" %}
 {% block title %}Hello{% endblock %}
 {% block body %}
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <div class="row">
   <div class="col-md-9">
     <div class="map_area">Map area
       <div class="row">
         <div class="col-md-1 col-sm-4">
-          <div id="show1"><audio controls>
-            <source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
-            Your browser does not support the audio tag.
-          </audio></div>
-
 
-
+          <svg id="first_circle" onclick="scrolldiv()">
-  <svg id="first_circle angela" onclick="scrolldiv()">
+            <circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
-    <circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
+            <text id="angela" x="50" y="50" text-anchor="middle">hello </text>
-    <a href="#" >Angela<text x="50" y="50" text-anchor="middle">hello </text></a>
+          </svg>
-  </svg>
         </div>
         <div class="col-md-1 col-sm-4">
 
-  <svg id="second_circle">
+          <svg id="second_circle">
-    <circle cx="50" cy="50" r='2rem' stroke="red" stroke-width="2" fill="gray" />
+            <circle cx="50" cy="50" r='2rem' stroke="red" stroke-width="2" fill="gray" />
-    <text x="50" y="50" text-anchor="middle">hello boys </text>
+            <text x="50" y="50" text-anchor="middle">hello boys </text>
-  </svg>
+          </svg>
         </div>
 
 
       </div>
     </div>
-    <div class="col-md-10">
+    <div class="col-md-9">
       <audio controls>
         <source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
         Your browser does not support the audio tag.
@@ -41,6 +36,10 @@
       <div class="col-md-10">
         <div class="image_area">
           <p>image</p>
+          <div id="show1"><audio controls>
+              <source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
+              Your browser does not support the audio tag.
+            </audio></div>
           <img src="../static/images/test_small.jpeg" alt="poem">
         </div>
       </div>
@@ -81,17 +80,17 @@
   </div>
 </div>
 
-<script type="text/javascript">
+<script>
+  $("#angela").click(function() {
+    $("#show1").fadeIn()
+    console.log("around")
+  });
+
   function scrolldiv() {
     var elem = document.getElementById("ele");
     elem.scrollIntoView();
   }
 </script>
-<script type="text/javascript">
+
-  $("#angela").click(function(){
-      $("#show1").fadeIn()
-      console.log("around")gi
-   });
-</script>
 
 {% endblock %}