diff --git a/static/css/style.css b/static/css/style.css index 01bc778..69b3665 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -2,6 +2,7 @@ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Source+Sans+Pro:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Harmattan&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Asul&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap'); * { border: 0px black solid; @@ -50,115 +51,115 @@ /* Node styling */ #ahmed text { - fill: #703022; + fill: #226270 ; font-size: 20px; font-family: 'Vesper Libre', serif; } #mevlana text { - fill: #703022; + fill: #226270 ; font-size: 20px; font-family: 'Vesper Libre', serif; } #haci text { - fill: #703022; + fill: #226270 ; font-size: 20px; font-family: 'Vesper Libre', serif; } #dadaloglu text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #dedekorkut text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #asikN text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #asikA text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #asikM text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #karacaoglan text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #asikV text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #neset text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #muharrem text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #aliekber text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #dedeoglu text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #pir text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #yunus text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #kulN text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } #kaygusuz text { - fill: #C85E40; + fill: #703022; font-size: 20px; font-family: 'Vesper Libre', serif; } -svg{ width:100%; height:200%; } +svg{ width:100%; height:100%; margin:0 auto;} path{ fill: transparent; stroke: #000; @@ -185,15 +186,19 @@ stroke-dasharray:6px; /* text area */ .thesis { overflow-y: scroll; -max-height:400px; +max-height:600px; scroll-behavior: smooth; font-size: 1em; border: 1px black solid; -padding: 0.5em; +padding: 2em; margin-right: 10px; margin-top: 10px; +line-height: 1.6em; +font-family: 'Vesper Libre', serif; +scrollbar-color: #cdcec9 #aeb10a; } + h1 { font-size: 1.4em !important; } @@ -207,16 +212,19 @@ h2 { .play-stop { position: absolute; - bottom: 1.2em; + bottom: 1.6em; z-index: 1; margin-left: calc( 50% - 1.8em ); overflow: hidden; - font-size: 20px; + font-size: 1.2em; font-weight: bold; + font-family:'Walter Turncoat', cursive; + color: #AEB10A; + cursor: pointer; } .play-stop:hover { - color: #AEB10A; + color: #cdcec9; } /* circles */ @@ -262,10 +270,16 @@ draggable { /* pop up */ -#showdadaloglu,#showmuharrem { +#showdadaloglu,#showasikA { display: none; left: 20%; - width: 23% !important; + width: 50% !important; +} + +.text_audio{ + margin-bottom: 1.2em; + margin-top: 2em; + font-family:'Vesper Libre', serif; } @@ -280,5 +294,5 @@ draggable { } .active { - background-color: #80ffd4; + background-color: RGBA(174, 177, 10, 0.6); } diff --git a/static/js/d3_map.js b/static/js/d3_map.js index 03daa83..8536155 100644 --- a/static/js/d3_map.js +++ b/static/js/d3_map.js @@ -1,16 +1,18 @@ var width = 500, - height = 400 + height = 380 var svg = d3.select(".map_area").append("svg") .attr("width", width) - .attr("height", height); + .attr("height", height) + .attr("viewBox", `${-width/2.5} ${-height/2.5} ${width*2.5} ${height*2.5}`); var force = d3.layout.force() .gravity(0.01) - .distance(100) + .distance(300) .charge(-50) .size([width, height]); + d3.json("/static/js/group1.json", function(error, json) { if (error) throw error; @@ -27,7 +29,8 @@ d3.json("/static/js/group1.json", function(error, json) { var node = svg.selectAll(".node") .data(json.nodes) .enter().append("g") - .attr("class", "node "+function(d){return d.class}) + .attr("class", "node ") + // .node()classList.add(function(d){return d.group}); .attr("id", function(d){return d.id}) @@ -46,6 +49,11 @@ d3.json("/static/js/group1.json", function(error, json) { .attr("width", 16) .attr("height", 16); + node.on({ + "mouseover": function(d) { + d3.select(this).style("cursor", "pointer"); + }}); + node.append("text") .attr("dx", 12) .attr("dy", ".35em") @@ -106,9 +114,9 @@ d3.json("/static/js/group1.json", function(error, json) { - $("#muharrem").click(function(){$("#showmuharrem").fadeIn() + $("#asikA").click(function(){$("#showasikA").fadeIn() console.log("around") - var muh = document.getElementById("textmuharrem"); + var muh = document.getElementById("textasikA"); muh.className += " active"; muh.scrollIntoView(); var audio2 = document.getElementById("audio-1"); @@ -124,10 +132,10 @@ d3.json("/static/js/group1.json", function(error, json) { var textdada = document.getElementById("textdadaloglu"); textdada.classList.remove("active"); }; - if (!$(e.target).parents().andSelf().is('#muharrem')) { - $("#showmuharrem").fadeOut(); - $("audiomuharrem").trigger('pause'); - var textmuh = document.getElementById("textmuharrem"); + if (!$(e.target).parents().andSelf().is('#asikA')) { + $("#showasikA").fadeOut(); + $("audioasikA").trigger('pause'); + var textmuh = document.getElementById("textasikA"); textmuh.classList.remove("active"); }; }); diff --git a/templates/hello.html b/templates/hello.html index e82f146..8bca3a8 100644 --- a/templates/hello.html +++ b/templates/hello.html @@ -1,5 +1,5 @@ {% extends "base.html" %} -{% block title %}Hello{% endblock %} +{% block title %}VVVW{% endblock %} {% block body %}
@@ -24,11 +24,11 @@
-
Audio for Dadaloglu