-
-
Notifications
You must be signed in to change notification settings - Fork 182
/
index.html
103 lines (97 loc) · 5.07 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
<html>
<head>
<meta
http-equiv="Content-Security-Policy"
content="img-src vscode-resource: data: https:; script-src vscode-resource:; style-src 'unsafe-inline' vscode-resource:;"
/>
<style>
html {
box-sizing: border-box;
padding-top: 32px;
}
body {
display: flex;
flex-flow: column;
align-items: center;
}
#snippet-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
resize: both;
background-color: #f2f2f2;
border-radius: 4px;
opacity: 0;
transition: opacity .4s;
width: calc(100% - 4rem);
}
#snippet {
overflow: hidden;
resize: both;
display: flex;
padding: 18px;
margin-top: 64px;
margin-bottom: 64px;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
width: calc(100% - 8rem);
}
#snippet > div {
display: flex;
flex-flow: column nowrap;
justify-content: center;
max-width: 100%;
white-space: pre-wrap !important;
word-break: break-all;
}
#snippet > div > div {
display: flex;
flex-wrap: wrap;
}
#save-container {
margin-top: 40px;
margin-bottom: 60px;
text-align: center;
}
.obturateur {
width: 64px;
height: 64px;
}
.obturateur * {
transition: stroke .4s;
}
.obturateur:not(.filling) path {
opacity: .5;
}
</style>
</head>
<body>
<div id="snippet-container">
<div id="snippet" style="color: #d8dee9;background-color: #2e3440;font-family: SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><meta charset="utf-8"><div style="color: #d8dee9;background-color: #2e3440;font-family: Input Mono;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">0. Run command `Polacode 📸 `</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">1. Copy some code</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">2. Paste into Polacode view</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">3. Click the button 📸 </span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div></div></div>
</div>
<div id="save-container">
<svg id="save" class="obturateur" width="132px" height="132px" viewBox="0 0 132 132" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="obturateur" transform="translate(2.000000, 2.000000)" stroke-width="3">
<circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="64"></circle>
<circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="60.9706667"></circle>
<circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="51.8734222"></circle>
<circle id="Oval" stroke="#D8DEE9" cx="64" cy="64" r="28.2595556"></circle>
<path d="M17.0965333,86.1788444 L40.5667556,48.1998222" id="Shape" stroke="#EBCB8B"></path>
<path d="M15.1509333,46.5180444 L58.6026667,36.2574222" id="Shape" stroke="#A3BE8C"></path>
<path d="M41.8204444,17.0965333 L79.8001778,40.5660444" id="Shape" stroke="#8FBCBB"></path>
<path d="M81.4819556,15.1502222 L91.7425778,58.6019556" id="Shape" stroke="#88C0D0"></path>
<path d="M110.902756,41.8197333 L87.4332444,79.8001778" id="Shape" stroke="#81A1C1"></path>
<path d="M112.848356,81.4819556 L69.3973333,91.7418667" id="Shape" stroke="#B48EAD"></path>
<path d="M86.1795556,110.902756 L48.1998222,87.4332444" id="Shape" stroke="#BF616A"></path>
<path d="M46.5187556,112.848356 L36.2574222,69.3973333" id="Shape" stroke="#D08770"></path>
</g>
</g>
</svg>
</div>
<script src="./dom2image.js"></script>
<script src="./vivus.js"></script>
<script src="./index.js"></script>
</body>
</html>