added svgs, cleaned up css

static/css/style.css

@@ -1,6 +1,6 @@
 /* Everything*/
 * {
-  border: 1px black solid;
+  border: 0px black solid;
 }
 
 /*Main areas*/
@@ -26,33 +26,38 @@ overflow-y: scroll;
 max-height:500px;
 }
 
-/* .iframe_area {
-  margin-top: 10px;
-  padding-right: 20px;
-} */
-#video1 {
-  margin-top: 300px;
+/* circles */
+
+#first_circle {
+  width: 80%;
+  height: 80%;
 }
 
-.draggable {
-  position: absolute;
+#second_circle {
+  width: 80%;
+  height: 80%;
 }
 
-img {
-  opacity: 0.8;
+@media all and (max-width: 250px) {
+  #first_circle {
+    width: 4rem;
+    height: 4rem;
+  }
+  #second_circle {
+    width: 4rem;
+    height: 4rem;
+  }
 }
+draggable {
+  position: absolute;
+}
+
+
 
 
 .draggable iframe {
   padding: 20px;
 }
-#video2 {
- margin-top: 100px;
-}
-
-#audio1 {
-  margin-left: 400px;
-}
 
 #transcriptWrapper {
   overflow: hidden;
@@ -67,36 +72,8 @@ img {
   font-weight: bold;
 }
 
-#background_a {
-  background-image: url("../images/map.png");
-  background-repeat: no-repeat;
-  background-color: silver;
-}
-
-
-#poem1 {
-  width: 500px;
-  margin-left: 400px;
-  opacity: 1 !important;
-  box-shadow: 8px 8px 3px #ccc;
-}
-
-#poem2 {
-  width: 500px;
-  margin-left: 300px;
-  margin-top: 10px;
-  opacity: 1 !important;
-  box-shadow: 8px 8px 3px #ccc;
-}
 
-#background_c {
-  background-image: url("../images/Hands_scan.png");
 
-}
-
-#scan1 {
-  width:60%; top:120px;left:240px;
-}
 
 /* pop up */
 #show1 {
@@ -104,21 +81,3 @@ img {
   left: 20%;
   width: 23% !important;
 }
-
-.nicelist {
-  font-size: 25px;
-  color: gray;
-  margin-top: 100px;
-  text-decoration: underline;
-  font-family: 'Dosis', sans-serif;
-}
-
-ul {
-  margin-left: 900px;
-
-}
-li {
-  padding-bottom: 20px;
-  list-style-type: none;
-
-}

templates/base.html

@@ -5,7 +5,6 @@
 <title>{% block title %}VVVW{% endblock %}</title>
 <link rel="stylesheet" href="../static/css/style.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-<script type="text/javascript" src="../static/js/p5/p5.min.js">
 
 </script>
 {% endblock %}
@@ -15,6 +14,7 @@
   {% block body %} {% endblock %}
 </div>
 
+<script type="text/javascript" src="../static/js/p5/p5.min.js">
 <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>

templates/hello.html

@@ -3,7 +3,24 @@
 {% block body %}
 <div class="row">
   <div class="col-md-9">
-    <div class="map_area">Map area<div id="circle-1">
+    <div class="map_area">Map area
+      <div class="row">
+        <div class="col-md-1 col-sm-4">
+
+  <svg id="first_circle">
+    <circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
+    <text x="50" y="50" text-anchor="middle">hello </text>
+  </svg>
+        </div>
+        <div class="col-md-1 col-sm-4">
+
+  <svg id="second_circle">
+    <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>
+  </svg>
+        </div>
+
+
       </div>
     </div>
   </div>
@@ -47,7 +64,7 @@
   </div>
 </div>
 
-<script type="text/javascript">
+<!-- <script type="text/javascript">
   let firsttext = 'text text';
 
   function setup() {
@@ -61,6 +78,6 @@
     text(firsttext, 252, 144, 72, 72);
     firsttext.id = 'firsttext';
   }
-</script>
+</script> -->
 
 {% endblock %}