-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdetail-pr.html
154 lines (122 loc) · 6.14 KB
/
detail-pr.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<title>WikiArt Analysis</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header id="header" class="header" style=" background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('images/pr.jpg') center center no-repeat;background-size: cover;">
<div class ="row">
<div class = "col-sm-1"></div>
<h1 class = "col-sm-5" style="font-size:24px;" >WikiArt Analysis</h1>
<nav class = "col-sm-6 text-right">
<a href = "index.html">Home</a>
<a href = "design.html">Design</a>
<a href = "about.html">About Us</a>
</nav>
</div>
<div class="header-content">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-container">
<h1>Post Renaissance Art</h1>
<!-- <p class="p-heading p-large">asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklsdfghjklsdfghjklasdfghjklasdfghjklasdfghjkasdfghjkasdfghjkl</p> -->
</div>
</div>
</div>
</div>
</div>
</header>
<section id = "pr-year" class = "container">
<div class = "row">
<div class = "col-sm-4 explain">
<li>The Post Renaissance Art is from about Year 1600 to Year 1850. It includes Baroque Art, Rococo Art, Neoclassical Art and Romanticism Movement. It is an important time period of the western art history.</li>
<li>From this visualization, we can see two peak periods of Post Renaissance Art: First is around Year 1630; the second one is from about Year 1760 to Year Year 1870. </li>
</div>
<div class = "col-sm-8">
<img class ="portrait" src = "images/pr-y.png">
</div>
</section>
<section id = "pr-emotion" class = "container">
<div class = "row">
<div class = "col-sm-8">
<img class ="portrait" src = "images/pr-e.png">
</div>
<div class = "col-sm-4 explain">
<li>This bubble chart shows the emotion average annotation of Post Renaissance Art. The bubbles of green colors represent positive emotions; the bubbles of orange colors represent negative emotions; the bubbles of blue colors represent other emotions--mixed or neutral. The color inside each emotion type is from dark to light according to the average annotations.</li>
<li>From this bubble chart, we can see that the main type of emotions that annotators feel is the positive emotions. Happiness, Trust and humility has the average annotations of 0.372, 0.227 and 0.194, which is much higher than any other emotions.</li>
</div>
</section>
<section id = "pr-rate" class = "container">
<div class = "row">
<div class = "col-sm-6 explain">
<li>This bar chart shows How did the annotators like the piece of Post Renaissance Art on average (-3 (strongly dislike) to 3 (strongly like)).</li>
<li>We use colors of green to represent ‘like’. We also use color of gray to represent ‘neither like nor dislike’ and the colors of oranges to represent ‘dislike’. The colors change from dark to light according to how much the annotators like the piece of art work.</li>
<li>From this visualization, it is clear that pieces of Post Renaissance are popular among the annotators. 464 annotators chose ‘like it’, which is more than the total amount of all the other choices. Besides, there are 286 annotators chose ‘like it somewhat’. So most annotators like the work of Post Renaissance Art.</li>
</div>
<div class = "col-sm-6">
<img class ="portrait" src = "images/pr-r.png">
</div>
</section>
<section id="category">
<div class="container">
<!-- <h3>Click on each art style to see details</h3> -->
<div class = "row">
<div class="imgcard col-sm-4" onclick="{location.href='detail.html'}">
<img src="images/r.png" style="width:100%">
<div class="container">
<p>Renaissance Art</p>
</div>
</div>
<!-- <div class="imgcard col-sm-4" onclick="{location.href='detail-pr.html'}">
<img src="images/pr.png" style="width:100%"/>
<div class="container">
<p>Post Renaissance Art</p>
</div>
</div> -->
<div class="imgcard col-sm-4" onclick="{location.href='detail-m.html'}">
<img src="images/m.jpeg" style="width:100%">
<div class="container">
<p>Modern Art</p>
</div>
</div>
<div class="imgcard col-sm-4" onclick="{location.href='detail-c.html'}">
<img src="images/c.png" style="width:100%"/>
<div class="container">
<p>Contemporary Art</p>
</div>
</div>
</div>
</div>
</section>
<div id="gotop">
<div class="arrow"></div>
<div class="stick"></div>
</div>
<footer class = "container" >
<div class = "row" >
<p>© 2019 INFO 5602 Group 6</p>
</div>
</footer>
<script src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
if( scrollt >600 ){
$("#gotop").fadeIn(400);
}else{
$("#gotop").stop().fadeOut(400);
}
});
$("#gotop").click(function(){
$("html,body").animate({scrollTop:"0px"},200);
});
});
</script>
</body>
</html>