-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
131 lines (123 loc) · 6.55 KB
/
index.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
<!-- @format -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
<title>Universe of Mental Health</title>
<link rel="stylesheet" href="./src/css/index.css">
<link rel="stylesheet" href="./src/css/popup.css">
<link rel="stylesheet" href="./src/css/legend.css">
<link rel="stylesheet" href="./src/css/planet.css">
<link rel="stylesheet" href="./src/css/panel.css">
<link rel="stylesheet" href="./src/css/tree.css">
</head>
<body>
<div id="popupBox">
<span class="close-icon" style="background-image: url('img/close.svg');background-size: 50%; top: 10px; right: 10px;" onclick="this.parentNode.style.display = 'none'"></span>
<div id="popupText"></div>
</div>
<!-- 标题区域 -->
<div class="title">The Universe of Mental Health in Tech Company</div>
<span class="triangle"></span>
<span class="interaction-into">SELECT: left mouse button. DRAG: right mouse button. ZOOM: middle wheel.
<span class="close-icon" style="background-image: url('img/close-black.svg');background-size: 50%; margin-right: -10px;" onclick="this.parentNode.style.display = 'none'; document.getElementsByClassName('triangle')[0].style.display = 'none';"></span></span>
<!-- 左边栏区域 -->
<div class="left-side">
<div class="left-panel">
<div class="panel-title">
<img src="img/title_Navigation.png" style="width: 310px;">
</div>
<div class="panel-text">Please CLICK one of the circles:</div>
<div id="tree-nav"></div>
</div>
<hr style="background: black; border: none;" />
<div class="left-panel">
<div class="panel-title">
<img src="img/title_Legend.png" style="width: 310px;">
</div>
<div class="panel-text">
<img src="img/subtitle_Color.png" alt="" style="width: 250px;">
</div>
<div id="color-legend"></div>
<div class="panel-text">
<img src="img/subtitle_Radus.png" alt="" style="width: 250px;">
</div>
<div id="radius-legend">
<img src="img/scale-legend.png" alt="">
</div>
<div class="panel-text">
<img src="img/subtitle_Flikers.png" alt="" style="width: 250px;">
</div>
<div style="font-size: 9px; line-height: 14px; width: 320px; font-family: 微软雅黑 Light">"Do you think that team members/co-workers would view you more negatively if they knew you suffered from a mental health issue ?"
</div>
<div id="flicker-legend">
<div class="flicker" style="-webkit-animation-duration: 1s;" title="Yes, I think they do!"></div>
<div class="flicker" style="-webkit-animation-duration: 5s;" title="Yes, I think they would…"></div>
<div class="flicker" style="-webkit-animation-duration: 10s;" title="Maybe…"></div>
<div class="ring" style="width: 15px; height: 15px; margin: 17.5px 20px 0 20px;" title="No, I don't think they would…">
<div style="width: 3px; height: 3px; margin: 6px 0 0 6.5px; background-color: rgba(255,255,255,0.6); border: solid 0px rgba(255,255,255,0.6); border-radius: 50%;"></div>
</div>
<div class="ring" style="width: 30px; height: 30px; margin: 10px 20px 0 20px;" title="No, I don't think they do!">
<div style="width: 3px; height: 3px; margin: 13.5px 0 0 13.5px; background-color: rgba(255,255,255,0.6); border: solid 0px rgba(255,255,255,0.6); border-radius: 50%;"></div>
</div>
</div>
</div>
<div class="interact-button left-show__btn" id="showNavigation" style="margin-bottom: 20px" value="false" onclick="showLeftDetail(this)">
<div class="detail-icon"></div>
</div>
</div>
<!-- 右边栏区域 -->
<div class="right-side">
<!-- 按钮 -->
<div style="width: 60px; height: 200px; top: 50%; left: -40px; position: absolute;">
<div class="interact-button" id="showBtn" style="margin-bottom: 20px" value="false" onclick="showDetail()">
<div class="detail-icon"></div>
</div>
</div>
<!-- 细节图 -->
<div class="right-panel">
<span class="close-icon" style="background-image: url('img/delete_btn.png');" onclick="closeDetail()"></span>
<div class="panel-title">
<img src="img/title_Dtails.png" style="width: 310px;">
</div>
<div class="panel-text" style="margin-bottom: 20px;">Please CLICK one of the elements for analyizing:</div>
<div id="empty-container">
<img src="img/empty-icon.png" alt="">
<p>Please select the stars in starry sky.</p>
</div>
<!-- <div class="svgScrollWrapper"> -->
<div id="svgContainer"></div>
<!-- </div> -->
<div id="detail-legend__btn" onclick="changeLegend()">Show Legend</div>
<div id="detail-legend" style="background-color: rgba(0, 0, 0, .8); border-radius: 8px; height: 385px; width:300px; position: absolute; bottom: 0; right: 14px; padding: 18px 18px 18px; transition: 0.5s ease-in-out; border: solid 1px rgba(255,255,255,0.6)">
<div class="panel-text" style="margin-bottom: 10px; font-size: 14px;">
<img src="img/subtitle_Shapes.png" alt="" style="width: 240px;">
<span class="close-icon" id="closeLegend" style="background-image: url('img/close.svg'); width:15px; margin-right: 0; margin-top: -5px;" onclick="changeLegend()"></span>
</div>
<!-- <img width="280px;" src="img/detail-legend.svg" /> -->
<img style="width:210px; margin-bottom: 15px; margin-left: 45px;" src="img/legend-1.png" />
<img src="img/subtitle_Others.png" alt="" style="width: 240px;">
<div id="orbit-svg" style="float: left;">
<div id="orbit-span" class="legend-text"></div>
</div>
<div id="pos-svg" style="float: left;">
<div id="pos-span" class="legend-text"></div>
</div>
<img style="width:160px; margin-top: 10px; margin-left: 65px;" src="img/legend-2.png" />
</div>
</div>
</div>
<script src="./src/js/tree.js"></script>
<script src="./src/js/panel.js"></script>
<script src="./src/js/legend.js"></script>
<script src="./src/js/tool.js"></script>
<script src="./src/js/drawSky.js"></script>
<script src="./src/js/drawPlanet.js"></script>
<script src="./src/js/interactSky.js"></script>
<script src="./src/js/interactPlanet.js"></script>
</body>
</html>