-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathnew-material.html
135 lines (131 loc) · 4.94 KB
/
new-material.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
<html>
<head>
<title>MY SHARDS | EZRA MILLER</title>
<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic' rel='stylesheet' type='text/css'>
<style>
body{
background: black;
margin: 0;
}
.path {
-webkit-stroke: "#ffffff";
stroke-width: 4;
/*stroke-dasharray: 600;*/
/*stroke-dashoffset: 0;*/
/* -webkit-animation: dash 1s ease-in alternate infinite;
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 600;
}
to {
stroke-dashoffset: 0;
}*/
}
svg{
/*display: none;*/
margin: 20px;
z-index: 1;
position: absolute;
right: 0;
top: 0;
text-shadow: 0px 1px 0px red;
}
#box{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.75);
color: white;
font-family: "Cardo";
display: none;
}
.center{
max-width: 600px;
height: 200px;
margin: 0 auto;
position:relative;
/*left:50%;*/
padding: 40px;
top:25%;
}
.center h1{
margin: 0;
font-size: 45px;
}
.center h3{
margin: 0;
font-size: 35px;
}
.center p{
margin: 30px 0;
font-size: 22px;
}
.center a{
text-decoration: none;
border-bottom: solid 1px white;
color: inherit;
}
.italic{
font-style: italic;
}
</style>
</head>
<body>
<a id="shard" onclick="handleShardClick()" href="#">
<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"
width="60px" height="60px" viewBox="0 0 196.816 203" enable-background="new 0 0 196.816 203" xml:space="preserve">
<image display="none" overflow="visible" width="2880" height="1486" xlink:href="../../../../../../../../Users/ezmill/Desktop/35437d5a-51d2-4f72-a7b2-c95c6e014956.png" transform="matrix(1 0 0 1 -1081.3535 -701.4746)">
</image>
<g>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="1089.139,-236.845 1335.018,-258.67
1159.071,-170.475 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="1143.034,-370.475 1335.018,-258.67
1089.139,-236.845 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="1335.018,-258.67 1313.193,-224.371
1159.071,-170.475 "/>
</g>
<g>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="45.315,109.231 159.749,27.272
195.316,182.942 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="149.954,201.5 195.316,182.942
45.315,109.231 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="40.16,159.231 45.315,109.231
149.954,201.5 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="1.5,119.026 10.263,70.572 40.16,159.231
"/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="71.088,1.5 45.315,109.231 10.263,70.572
"/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="159.749,27.272 71.088,1.5
45.315,109.231 "/>
</g>
<g>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="346.334,205.107 341.159,155.939
326.371,171.096 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="382.193,47.991 346.334,205.107
341.159,155.939 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="302.342,32.464 326.371,171.096
341.159,155.939 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="343.007,10.283 302.342,32.464
382.193,47.991 "/>
<polygon class="path" fill="none" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" points="384.781,5.107 382.193,47.991
343.007,10.283 "/>
</g>
</svg></a>
<div id="box" onclick="handleShardClick()">
<div class="center">
<h1 class="italic">MY SHARDS</h1>
<p class="italic">Directions: Click for a new texture, move your mouse to rotate</p>
<p class="italic">Made by <a href="http://ezramiller.biz">Ezra Miller</a></p>
<p class="italic" style="font-size: 16px">Not working? Try reloading the page. MY SHARDS uses WebGL, which requires a modern browser. Download <a href="http://google.com/chrome" style="border-bottom: 1px solid white" target="_blank">Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/" style="border-bottom: 1px solid white" target="_blank">Firefox</a></p></p>
</div>
</div>
<script src="js/three.min.js"></script>
<script src="js/BinaryLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/new-material.js"></script>
</body>
</html>