blob: 5334f85fb06c136093679c4fd6109f2629eddf6e (
plain)
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
|
<style type="text/css">
#perspective,
#perspective .mx-scene {
position: absolute;
left:0%;
top:0px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
#orthographic {
position: absolute;
left:50%;
top:0px
}
.hud {
position: absolute;
top: 0;
left: 0;
padding: 10px;
background: white;
}
.ortho-hud {
left: 50%;
border-left: 1px solid black;
}
#url { width: 300px }
.hud span { color: #888; cursor: pointer; }
.hud span.active { color: #000; }
.blueprintInfo {
bottom: 14px;
left: 10px;
width: 270px;
font-size: 13px;
font-weight: 300;
padding: 10px;
}
.blueprintInfo .setting {
margin-bottom: 20px;
}
.blueprintInfo .setting.number input[type=text] {
width: 100px;
font-size: 16px;
}
</style>
<div id="blueprintView">
<div id="perspective"></div>
<div id="orthographic"></div>
<div class="hud persp-hud">
<input type="text" id="url" placeholder="paste an image URL here!">
<span class="ion-ionic active" data-role="orbit-mode"></span>
<span class="ion-archive" data-role="keyboard-mode"></span>
</div>
<div class="hud ortho-hud">
<span class="ion-navigate" data-role="arrow-mode"></span>
<span class="ion-ios-pulse active" data-role="polyline-mode"></span>
<span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
<span class="ion-scissors" data-role="eraser-mode"></span>
</div>
</div>
|
