added svgs, cleaned up css
This commit is contained in:
parent
436bfb0d41
commit
52e5b80c16
@ -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 {
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 250px) {
|
||||||
|
#first_circle {
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
#second_circle {
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
draggable {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.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;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
@ -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>
|
||||||
|
@ -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…
Reference in New Issue
Block a user