forked from galen-winsor/galenlwinsor.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (119 loc) · 8.2 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
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- master branch -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="og:title" content="Join the Adventure! Become a #TeamJaime Hero.">
<meta name="og:image" content="images/JaimeCapeFinal.png">
<meta name="og:description" content="Show your #TeamJaime spirit by creating your own Jaime comic book panel! Share with your friends and help bring hope back to South Carolina.">
<meta name="og:url" content="https://galenwinsor.com/graphic-maker">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />
<title>Join the Adventure!</title>
<script src="onteamjaime.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="y5wpzpff"></script>
<!-- a box for page contents -->
<div class="container">
<!-- a box for displaying the generated graphic -->
<div class="flex column center-hl center-vl" id="display-box" style="opacity:0; z-index:-1">
<!-- button to close display box -->
<svg class="close" onclick="putBack('display-box')" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-x" fill="white" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
<canvas id="canvas" width="1200px" height="675px" style="display:none"></canvas>
<img id="loading" src="images/Loadingsome.gif" alt="" width="50%">
<!-- the generated graphic -->
<h1 id="instruction" style="height:0.01px; overflow:hidden"><a id="download-1" href="#" download="TeamJaimeAvatar.png" style="color:#24478d"><span style="color:#24478d; font-weight:bold">Download,</span></a> then share!</h1>
<img id="avatar-generated" style="width:50%" onload="hide('loading'); expand('buttons'); expand('instruction')" onchange="show('avatar-generated')">
<!-- a box to center the display box elements -->
<div id="buttons" class="flex center-hl center-vl" style="height:0.01px; overflow:hidden">
<ul>
<li>
<!-- a download button -->
<a id="download-2" href="#" download="TeamJaimeAvatar.png">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</a>
</li>
<!-- TODO: figure out how to make these buttons share graphic directly -->
<li id="tweet">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="I'm on Team Jaime! Make your own #TeamJaime comic book panel, and join the fight today." data-hashtags="TeamJaime" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li>
<a href="https://facebook.com/sharer/sharer.php?u=https://hero.jaimeharrison.com" style="font-size:0.75em" target="_blank">Share on Facebook</a>
</li>
</ul>
</div>
</div>
<!-- a box for displaying the help message -->
<div class="center-hl center-vl" id="help-box" style="display:none">
<!-- a button to close the help message -->
<svg class="close" onclick="flexNone('help-box')" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-x" fill="white" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
<!-- the help message -->
<div id="help-blurb">
<ul>
<li>Click "Choose a file" to upload your image. (Try to select a square image, if possible)</li>
<li>Select an image in the window that appears.</li>
<li>Click either the "Upload" button to upload or the name of your file to upload a different image.</li>
<li>Wait for your Jaime graphic to load. <span style="color:#24478d; font-weight:bold">Download, share, and enjoy!</span></li>
</ul>
</div>
</div>
<!-- the page header, with links to the main site and volunteer and donate opportunities -->
<div id="header" class="flex center-vl">
<a id="header-link" href="https://jaimeharrison.com" rel="noopener noreferrer" target="_blank">
<div id="header-img-box" class="flex center-vl center-hl">
<img id="header-img" src="images/lmenu.png" alt="">
</div>
</a>
<ul id="menu-list" class="flex center-hl">
<li>
<a href="https://go.jaimeharrison.com/page/s/volunteer-sign-up?source=MS_HP_FR_X_X_homepage-signup_X__F1_S1_C1__X" rel="noreferrer noopener" target="_blank">VOLUNTEER</a>
</li>
<li>
<a href="https://secure.actblue.com/donate/ms_harrison_fr_homepage_2019?refcode=MS_HP_FR_X_X_homepage_X__F1_S1_C1__X&recurring=auto&amount=25" rel="noreferrer noopener" target="_blank">DONATE</a>
</li>
</ul>
</div>
<!-- box for preview of graphic -->
<div id="avatar-box" class="flex center-hl center-vl">
<!-- button to open help message -->
<div id="help">
<svg onclick="flexNone('help-box')" fill="white" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-info-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
<circle cx="8" cy="4.5" r="1"/>
</svg>
</div>
<!-- a box for holding the graphic and buttons -->
<div id="avatar-desc" class="flex column center-vl center-hl">
<!-- form that calls fetchImage() -->
<form id="avatar-form" onsubmit="return false" enctype="multipart/form-data">
<input id="inputfile" type="file" name="photo" accept="image/*" onchange="findFile(this);">
<label for="inputfile" id="file-label"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><span id="choose"> Choose an image</span></label>
<input id='submit' type="submit" value="Upload" target="_blank" onclick="putForward('display-box'); show('loading'); makeImage()">
<img id="avatar" src="images/AvatarTemplate.png" alt="">
</form>
</div>
</div>
<!-- the page footer -->
<div id="footer" class="flex column center-hl center-vl">
<img id="footer-img" src="images/footer.png" alt="">
<div id="paid-box">
<p>PAID FOR BY JAIME HARRISON FOR U.S. SENATE</p>
</div>
</div>
</div>
</body>
</html>