Browse Source

added svgs, cleaned up css

master
alicestrt 4 years ago
parent
commit
52e5b80c16
  1. 87
      static/css/style.css
  2. 2
      templates/base.html
  3. 23
      templates/hello.html

87
static/css/style.css

@ -1,6 +1,6 @@
/* Everything*/ /* Everything*/
* { * {
border: 1px black solid; border: 0px black solid;
} }
/*Main areas*/ /*Main areas*/
@ -26,33 +26,38 @@ overflow-y: scroll;
max-height:500px; max-height:500px;
} }
/* .iframe_area { /* circles */
margin-top: 10px;
padding-right: 20px; #first_circle {
} */ width: 80%;
#video1 { height: 80%;
margin-top: 300px;
} }
.draggable { #second_circle {
position: absolute; width: 80%;
height: 80%;
} }
img { @media all and (max-width: 250px) {
opacity: 0.8; #first_circle {
width: 4rem;
height: 4rem;
}
#second_circle {
width: 4rem;
height: 4rem;
}
} }
draggable {
position: absolute;
}
.draggable iframe { .draggable iframe {
padding: 20px; padding: 20px;
} }
#video2 {
margin-top: 100px;
}
#audio1 {
margin-left: 400px;
}
#transcriptWrapper { #transcriptWrapper {
overflow: hidden; overflow: hidden;
@ -67,36 +72,8 @@ img {
font-weight: bold; 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 */ /* pop up */
#show1 { #show1 {
@ -104,21 +81,3 @@ img {
left: 20%; left: 20%;
width: 23% !important; 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;
}

2
templates/base.html

@ -5,7 +5,6 @@
<title>{% block title %}VVVW{% endblock %}</title> <title>{% block title %}VVVW{% endblock %}</title>
<link rel="stylesheet" href="../static/css/style.css"> <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"> <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> </script>
{% endblock %} {% endblock %}
@ -15,6 +14,7 @@
{% block body %} {% endblock %} {% block body %} {% endblock %}
</div> </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://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://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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

23
templates/hello.html

@ -3,7 +3,24 @@
{% block body %} {% block body %}
<div class="row"> <div class="row">
<div class="col-md-9"> <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> </div>
</div> </div>
@ -47,7 +64,7 @@
</div> </div>
</div> </div>
<script type="text/javascript"> <!-- <script type="text/javascript">
let firsttext = 'text text'; let firsttext = 'text text';
function setup() { function setup() {
@ -61,6 +78,6 @@
text(firsttext, 252, 144, 72, 72); text(firsttext, 252, 144, 72, 72);
firsttext.id = 'firsttext'; firsttext.id = 'firsttext';
} }
</script> </script> -->
{% endblock %} {% endblock %}

Loading…
Cancel
Save