-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (91 loc) · 5.47 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="CMS (CERN) Conference Stamp Generator">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1b7d79a1ac.js" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/2.0.4/dist/FileSaver.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@200;300;400&display=swap" rel="stylesheet">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="general.css">
<title>CMS Stamp Generator</title>
</head>
<body>
<script src="bags/setdatauri.js"></script>
<script src="svg.js"></script>
<script src="preset.js"></script>
<script src="save.js"></script>
<h1><a href=".">CMS Stamp Generator</a></h1>
<div class="setup"><i class="fa-solid fa-keyboard hideinmobile"></i>
<input type="text" id="inputt" onkeyup="setattr()" placeholder="">
<i class="fa-solid fa-up-right-and-down-left-from-center"></i>
<input type="range" min="60" max="180" class="slider" id="slidert" oninput="setattr()">
<i class="fa-solid fa-text-height"></i>
<input type="range" min="20" max="60" class="slider" id="sliderft" oninput="setattr()"></div>
<div class="setup"><i class="fa-solid fa-keyboard hideinmobile"></i>
<input type="text" id="inputm" onkeyup="setattr()" placeholder="">
<i class="fa-solid fa-up-right-and-down-left-from-center"></i>
<input type="range" min="60" max="180" class="slider" id="sliderm" oninput="setattr()" disabled>
<i class="fa-solid fa-text-height"></i>
<input type="range" min="20" max="60" class="slider" id="sliderfm" oninput="setattr()"></div>
<div class="setup"><i class="fa-solid fa-keyboard hideinmobile"></i>
<input type="text" id="inputb" onkeyup="setattr()" placeholder="">
<i class="fa-solid fa-up-right-and-down-left-from-center"></i>
<input type="range" min="60" max="180" class="slider" id="sliderb" oninput="setattr()">
<i class="fa-solid fa-text-height"></i>
<input type="range" min="20" max="60" class="slider" id="sliderfb" oninput="setattr()"></div>
<div class="setup" onmouseleave="rmdesc();">
<!-- <i class="fa-solid fa-fill-drip hideinmobile"></i> -->
<input type="color" id="colorpicker" onchange="setattr();" onmouseover="showdesc(this, 'Color');">
<button onclick="changetype();" onmouseover="showdesc(this, 'Shape');"><i class="fa-solid fa-repeat"></i><input type="number" id="type" style="display:none"></input></button>
<button onclick="changeeffect();" onmouseover="showdesc(this, 'Effect');"><i class="fa-solid fa-stamp"></i><input type="number" id="effect" style="display:none"></input></button>
<button onclick="saveaspng();" onmouseover="showdesc(this, 'Save as PNG');"><i class="fa-solid fa-download"></i></button>
<button onclick="copylink();" onmouseover="showdesc(this, 'Copy setup');"><i class="fa-solid fa-clipboard"></i></button>
<select id="presets" onchange="reset(); setattr();" onmouseover="showdesc(this, 'Use presets');"></select>
</div>
<div id="desc" class='desc'></div>
<script>listpreset(); reset(); geturl();</script>
<div>
<svg id="svg" height="356.25" width="356.25" xmlns="http://www.w3.org/2000/svg" style="background-color: transparent;">
<defs>
<filter id="inkFilter1">
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="4" result="TURBULENCE"/>
<feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="3" />
</filter>
<mask id="inkFilter2">
<!-- Only data uri external image in svg can be rendered in <img> -->
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" id="inkFilter2image" href=""/>
</mask>
<mask id="inkFilter3">
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" id="inkFilter3image" href=""/>
</mask>
<filter id="inkFilter4">
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="BLUR"/>
<feSpecularLighting in="BLUR" style="lighting-color:white" specularExponent="100" result="SPEC">
<feDistantLight azimuth="-90" elevation="50" />
</feSpecularLighting>
<feComposite operator="in" in="SPEC" in2="SourceAlpha" result="COMPOSITE"/>
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="COMPOSITE"/>
</feMerge>
</filter>
</defs>
<g id="g">
<text id="textt" dy="5">
<textPath id="textpt" xlink:href="#innert" startOffset="50%" lengthAdjust="spacing"
text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle"></textPath></text>
<text id="textb" dy="5">
<textPath id="textpb" xlink:href="#innerb" startOffset="50%" lengthAdjust="spacing"
text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle"></textPath></text>
<text id="textm" dy="5" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle"></text>
</g>
</svg>
</div>
<script>draw()</script>
<div class="footer">CMS HIN © 2023</div>
<div id="dalert" class="alert" style="display:none"></div>
</body>
</html>