-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (100 loc) · 6.77 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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panorama Mapping Tool</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
<link rel="stylesheet" href="./style.css"/>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex h-screen">
<div class="w-1/5 sm:w-2/6 border-r-2 p-3 overflow-auto">
<div class="steps" id="imageSetup">
<div class="mb-2 bg-gray-200 p-1">
<div class="flex items-center justify-between">
<span>Images</span>
<a class="bg-gray-400 p-1 text-sm rounded inline-flex items-center" href="javascript:_addImage();">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Add Image
</a>
</div>
</div>
<div id="imageControlPanel"></div>
<div class="flex items-center justify-end">
<a id="nextStep" class="bg-gray-400 text-sm rounded p-1 pl-2 inline-flex items-center hidden" href="javascript:_next('hotspotSetup')">
Next
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<div class="steps hidden" id="hotspotSetup">
<div class="mb-2 bg-gray-200 p-1">
<label>Hotspot Settings</label>
<div class="border-b-2"></div>
</div>
<div id="hotspotControlPanel">
<div id="hotspotControlPanel-imageList"></div>
<div id="hotspotControlPanel-hotspotSettings"></div>
</div>
<div class="border-b-2 my-2"></div>
<div class="flex items-center justify-between">
<button class="bg-gray-400 p-1 text-sm rounded w-full inline-flex items-center mr-2" onclick="javascript:_preview()" type="button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>
Preview
</button>
<button class="bg-gray-400 p-1 text-sm rounded w-full inline-flex items-center" onclick="javascript:_copy()" type="button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
</svg>
Copy Payload
</button>
</div>
<div class="border-b-2 my-2"></div>
<div class="flex items-center justify-between">
<a class="bg-gray-400 text-sm rounded p-1 pr-2 inline-flex items-center" href="javascript:_back('imageSetup')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
Back
</a>
</div>
</div>
</div>
<div class="w-4/5 sm:w-4/6 bg-gray-400" id="panorama"></div>
</div>
<div class="hidden overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="previewModal">
<div class="relative w-auto mx-auto max-w-full h-screen">
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full h-full bg-white outline-none focus:outline-none">
<div class="flex items-start justify-between p-2 border-b border-solid border-slate-200 rounded-t">
<h3 class="text-2xl font-semibold inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>
Preview
</h3>
</div>
<div id="panoramicPreview" class="relative flex-auto">
</div>
<div class="flex items-center justify-end p-2 border-t border-solid border-slate-200 rounded-b">
<button class="bg-gray-400 p-1 text-sm rounded inline-flex items-center" type="button" onclick="toggleModal()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Close
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>