-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmap.html
More file actions
150 lines (143 loc) · 6.95 KB
/
map.html
File metadata and controls
150 lines (143 loc) · 6.95 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Internal Squabbles - Map</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="the interactive map you can use to access all of the sites writing">
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body class="map">
<header>
<a href="index.html" id="home_link">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 264 242" style="enable-background:new 0 0 264 242;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EED894;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
</style>
<g>
<rect x="32.4" y="56" class="st0" width="26.4" height="129.9"/>
<rect x="120.3" y="56" class="st0" width="26.4" height="129.9"/>
<rect x="22.1" y="29.7" class="st0" width="220.8" height="26.4"/>
<rect x="32.4" y="3.3" class="st0" width="201.2" height="26.4"/>
<rect x="3.5" y="212.3" class="st0" width="256.9" height="26.4"/>
<rect x="16.8" y="186" class="st0" width="234.2" height="26.4"/>
<rect x="208.2" y="56" class="st0" width="26.4" height="129.9"/>
</g>
</svg>
</a>
</header>
<main>
<section id="map_outer_wrapper">
<div id="map_inner_wrapper">
<img id="map_image" src="img/map.jpg">
<span id="mobile_explanation">
Please view on desktop to use the interactive map feature, otherwise you can use the links below to view each piece of writing.
</span>
<a href="neighbor.html">
<div class="bailey bailey_button text_button">
<span>I Can Hear a Hissing</span>
</div>
</a>
<a href="letter.html">
<div class="kit text_button">
<span>Corno Phorno M––</span>
</div>
</a>
<a href="the_stones.html">
<div class="ciara text_button">
<span>The Stones are Lain</span>
</div>
</a>
<a href="journal.html">
<div class="journal bailey_button text_button">
<span>Journal</span>
</div>
</a>
<a href="turgid_sprocket.html">
<div class="matt text_button">
<span>Turgid Sprocket</span>
</div>
</a>
</div>
</section>
<section id="mini_map_outer_wrapper">
<img id="mini_map_image" src="img/map.jpg">
<div id="mini_map_location"></div>
<div class="bailey text_button"></div>
<div class="kit text_button"></div>
<div class="ciara text_button"></div>
<div class="journal text_button"></div>
<div class="matt text_button"></div>
</section>
<section id="zoom_control_container">
<button class="zoom_button" id="zoom_in">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 292 272" style="enable-background:new 0 0 292 272;" xml:space="preserve">
<style type="text/css">
.zoom0{fill:#EED894;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:12;}
.zoom1{fill:#EED894;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<rect x="4.2" y="4.2" class="zoom0" width="122" height="122"/>
<rect x="85.8" y="65.8" class="zoom1" width="202" height="202"/>
<line class="zoom1" x1="4.2" y1="126.2" x2="85.8" y2="267.8"/>
<line class="zoom1" x1="4.2" y1="4.2" x2="85.8" y2="65.8"/>
<line class="zoom1" x1="126.2" y1="4.2" x2="287.8" y2="65.8"/>
<g>
<line class="zoom1" x1="186.8" y1="126.2" x2="186.8" y2="206.8"/>
<line class="zoom1" x1="227" y1="166.5" x2="146.5" y2="166.5"/>
</g>
</g>
</svg>
</button>
<div id="zoom_indicators">
<img id="zoom3" src="img/zoom3.svg">
<img id="zoom2" src="img/zoom2.svg">
<img id="zoom1" src="img/zoom1.svg">
</div>
<button class="zoom_button" id="zoom_out">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 292 272" style="enable-background:new 0 0 292 272;" xml:space="preserve">
<style type="text/css">
.zoom0{fill:#EED894;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:12;}
.zoom1{fill:#EED894;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<rect x="4" y="4" class="zoom0" width="202" height="202"/>
<rect x="166" y="146" class="zoom1" width="122" height="122"/>
<line class="zoom1" x1="4" y1="4" x2="166" y2="146"/>
<line class="zoom1" x1="206" y1="4" x2="288" y2="146"/>
<line class="zoom1" x1="4" y1="206" x2="166" y2="268"/>
<g>
<line class="zoom1" x1="258" y1="206.3" x2="197" y2="206.3"/>
</g>
</g>
</svg>
</button>
</section>
</main>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>