-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (117 loc) · 8.01 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
<!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="https://galenlwinsor.github.io/images/JaimeCapeFinal.png">
<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> <!--JWCR: How about a better name? -->
<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>