-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (123 loc) · 9.99 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Amanda 💖 Momin</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css?v=27'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/451/fabric.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.1.0/uuidv4.min.js"></script>
<script defer src='main.js?v=27'></script>
</head>
<body>
<div class="overlay" id="draw">
<a class="overlay-close" href="#"></a>
<div class="overlay-content">
<div class="draw-intro wave-border" onclick="location.href = '#'"><div class="draw-x wave-border">X</div>Upload photos of the wedding here for everyone to see on the TV near the DJ table! You can draw your own doodles too. Thanks for helping us capture this memorable day :D<div style="position: absolute; bottom: 2px; width: 95%;">♥ Amanda & Momin ♥ <a href="https://github.com/foolmoron/amanda.momin.love" target="_blank" style="float: right;">Source Code (for nerds)</a></a></div></div>
<div class="draw-panel wave-border">
<input class="draw-full-name wave-border" name="full-name" placeholder="Enter Full Name Here" autocorrect="off" autocapitalize="off" spellcheck="false" />
<div class="colors">
<div class="wave-border" data-color="#282828" style="--wave-border-x: 19px; --wave-border-y: 75px;"></div>
<div class="wave-border" data-color="#1d2b53" style="--wave-border-x: 23px; --wave-border-y: 6px;"></div>
<div class="wave-border" data-color="#7e2553" style="--wave-border-x: 46px; --wave-border-y: 309px;"></div>
<div class="wave-border" data-color="#008751" style="--wave-border-x: 37px; --wave-border-y: 8px;"></div>
<div class="wave-border" data-color="#ab5236" style="--wave-border-x: 33px; --wave-border-y: 67px;"></div>
<div class="wave-border" data-color="#5f574f" style="--wave-border-x: 279px; --wave-border-y: 148px;"></div>
<div class="wave-border" data-color="#c2c3c7" style="--wave-border-x: 19px; --wave-border-y: 68px;"></div>
<div class="wave-border" data-color="#fff1e8" style="--wave-border-x: 10px; --wave-border-y: 61px;"></div>
<div class="wave-border" data-color="#ff004d" style="--wave-border-x: 25px; --wave-border-y: 7px;"></div>
<div class="wave-border" data-color="#ffa300" style="--wave-border-x: 31px; --wave-border-y: 149px;"></div>
<div class="wave-border" data-color="#ffec27" style="--wave-border-x: 25px; --wave-border-y: 8px;"></div>
<div class="wave-border" data-color="#00e436" style="--wave-border-x: 13px; --wave-border-y: 81px;"></div>
<div class="wave-border" data-color="#29adff" style="--wave-border-x: 240px; --wave-border-y: 75px;"></div>
<div class="wave-border" data-color="#83769c" style="--wave-border-x: 927px; --wave-border-y: 167px;"></div>
<div class="wave-border" data-color="#ff77a8" style="--wave-border-x: 34px; --wave-border-y: 10px;"></div>
<div class="wave-border" data-color="#ffccaa" style="--wave-border-x: 37px; --wave-border-y: 158px;"></div>
</div>
<div class="controls">
<div class="border-button wave-border tiny width" data-size="3" style="--wave-border-x: 380px; --wave-border-y: 35px;"></div>
<div class="border-button wave-border small width" data-size="7" style="--wave-border-x: 10px; --wave-border-y: 85px;"></div>
<div class="border-button wave-border medium width" data-size="12" style="--wave-border-x: 837px; --wave-border-y: 80px;"></div>
<div class="border-button wave-border large width" data-size="40" style="--wave-border-x: 13px; --wave-border-y: 81px;"></div>
<div class="img-button wave-border control undo" style="margin-left: auto; --wave-border-x: 13px; --wave-border-y: 81px;"></div>
<div class="img-button wave-border control redo" style="--wave-border-x: 13px; --wave-border-y: 81px;"></div>
<div class="img-button wave-border control clear" style="--wave-border-x: 25px; --wave-border-y: 7px;"></div>
</div>
<div class="canvas-resize-helper">
<div class="button-container" data-state="init">
<input type="file" accept="image/*,.png,.jpg;capture=camera" id="upload-input"
onchange="onUploadChange(this.files[0])" style="display: none;" />
<button class="upload-button wave-border" style="--wave-border-x: 68px; --wave-border-y: 10px;"
onclick="tryStartDrawing(true)">Upload Photo<br>📷</button>
<button class="no-upload-button wave-border" style="--wave-border-x: 10px; --wave-border-y: 46px;"
onclick="tryStartDrawing(false)">Draw Without Photo</button>
<div class="uploading-text">Uploading...</div>
</div>
<img class="photo" crossorigin="anonymous" />
<canvas id="static-canvas" class="canvas-container"></canvas>
<canvas id="canvas"></canvas>
</div>
<button class="submit-button submit-none wave-border" onclick="submitDrawing()">Submit Photo/Drawing!</button>
<button class="submit-button submit-inprogress wave-border" style="display: none;">Submitting...</button>
<button class="submit-button submit-failed wave-border" onclick="submitDrawing()" style="display: none;">⚠ Submit Failed, Try Again ⚠</button>
<button class="submit-button submit-done wave-border" disabled style="display: none;">Successfully Submitted Drawing ✅</button>
</div>
</div>
</div>
<a class="callout" href="#draw">
<div class="title wave-border">
<span class="paint-text" style="--color-angle: 289deg; background-position: 76% -8%">T</span>
<span class="paint-text" style="--color-angle: 262deg; background-position: -53% -20%">A</span>
<span class="paint-text" style="--color-angle: 63deg; background-position: -49% -5%">P</span>
<span class="paint-text" style="--color-angle: 164deg; background-position: 77% -56%">H</span>
<span class="paint-text" style="--color-angle: 134deg; background-position: 14% -62%">E</span>
<span class="paint-text" style="--color-angle: 33deg; background-position: -89% 16%">R</span>
<span class="paint-text" style="--color-angle: 185deg; background-position: 98% -41%">E</span>
<span class="paint-text" style="--color-angle: 112deg; background-position: -72% -36%">T</span>
<span class="paint-text" style="--color-angle: 198deg; background-position: -56% -18%">O</span>
<span class="paint-text" style="--color-angle: 54deg; background-position: 68% 69%">U</span>
<span class="paint-text" style="--color-angle: 100deg; background-position: 82% -26%">P</span>
<span class="paint-text" style="--color-angle: 211deg; background-position: -92% -15%">L</span>
<span class="paint-text" style="--color-angle: 342deg; background-position: -87% 4%">O</span>
<span class="paint-text" style="--color-angle: 211deg; background-position: -92% -15%">A</span>
<span class="paint-text" style="--color-angle: 342deg; background-position: -87% 4%">D</span>
<br/>
<span class="paint-text" style="--color-angle: 342deg; background-position: -87% 4%">&</span>
<span class="paint-text" style="--color-angle: 54deg; background-position: 68% 69%">D</span>
<span class="paint-text" style="--color-angle: 100deg; background-position: 82% -26%">R</span>
<span class="paint-text" style="--color-angle: 211deg; background-position: -92% -15%">A</span>
<span class="paint-text" style="--color-angle: 342deg; background-position: -87% 4%">W</span>
<span class="paint-text" style="--color-angle: 235deg; background-position: -30% 79%">F</span>
<span class="paint-text" style="--color-angle: 21deg; background-position: -35% 12%">O</span>
<span class="paint-text" style="--color-angle: 340deg; background-position: 26% -76%">R</span>
<span class="paint-text" style="--color-angle: 134deg; background-position: 0% 60%">U</span>
<span class="paint-text" style="--color-angle: 99deg; background-position: -88% 15%">S</span>
<span class="paint-text" style="--color-angle: 51deg; background-position: 8% -77%">!</span>
</div>
</a>
<div class="overlay" id="view">
<div class="view-container">
<header>Go to <span>amanda.momin.love</span> on your phone to upload photos & drawings to the gallery!</header>
</div>
</div>
<iframe class="fill-container" src="https://www.zola.com/wedding/amandamomin"></iframe>
<template id="tpl-gallery-image">
<div class="gallery-image">
<img class="drawing" crossorigin="anonymous" src="" />
<label>Someone's long name here</label>
</div>
</template>
</body>
</html>