-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (109 loc) · 6.57 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
<!DOCTYPE html>
<html>
<head>
<title>Movement Graphic Maker</title>
<meta property="og:title" content="Movement Graphic Maker: Sunrise">
<meta property="og:description" content="Sunrise Movement's social media quote tool">
<meta property="og:image" content="https://sunrisemvmtnyc.github.io/outquote/social-card.png">
<meta property="og:url" content="https://sunrisemvmtnyc.github.io/outquote/">
<meta name="twitter:title" content="Movement Graphic Maker: Sunrise">
<meta name="twitter:description" content="Sunrise Movement's social media quote tool">
<meta name="twitter:image" content="https://sunrisemvmtnyc.github.io/outquote/social-card.png">
<meta name="twitter:card" content="summary_large_image">
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="mgm-container" id="container">
<div class="mgm-row">
<h2>Movement Graphic Maker</h2>
<p>Social media quote card generator.</p>
</div>
<div class="mgm-row" id="canvasRow">
<canvas id="canvas">
Your browser does not support the canvas element. Please use a modern browser.
</canvas>
</div>
</div>
<div class="mgm-container">
<p>
The text card will render as you type. Click "save" to download a <code>.png</code> of the canvas.
</p>
<h4>Content</h4>
<textarea class="u-full-width" type="text" id="quoteBox" placeholder="Quote Text" value=""></textarea>
<div class="mgm-row">
<div class="six mgm-columns">
<input class="u-full-width" type="text" id="quoteAttr" placeholder="Quote Attribution" value="">
</div>
<div class="six mgm-columns">
<input class="u-full-width" type="text" id="quoteTitle" placeholder="Attribution Subtext" value="">
</div>
</div>
<div class="mgm-row">
<div class="twelve mgm-columns">
<h4>Options</h4>
</div>
</div>
<div class="mgm-row">
<div class="four mgm-columns">
<h5>Formatting</h5>
<select class="u-full-width background" id="canvasSize">
<option value="instagram">Instagram Post</option>
<option value="instagramStory">Instagram Story</option>
<option value="twitterFB">Twitter/Facebook</option>
</select>
<input type="checkbox" id="centerElements">Center text</input><br>
<input type="checkbox" id="showQuotes" checked>Show quotes</input><br>
<input type="checkbox" id="splitAttribution" checked>Split attribution over two lines</input><br>
<input type="checkbox" id="insetLogo" checked>Set logo into border</input>
</div>
<div class="four mgm-columns">
<h5>Style</h5>
<select class="u-full-width background" id="backgroundColor">
<option value="gradient_a">Orange/Purple Gradient</option>
<option value="gradient_b">Yellow/Purple Gradient</option>
<option value="yellow">Yellow/Gray</option>
<option value="gray">Gray/Yellow</option>
</select>
<input type="checkbox" id="includeSunrays">Include sunrays<br>
<input type="checkbox" id="useBackgroundImage">Use background image<br>
<select class="u-full-width background" id="blendMode" disabled>
<option value="overlay">Overlay (medium)</option>
<option value="multiply">Multiply (dark)</option>
<option value="hard-light">Hard light (light)</option>
</select>
</div>
<div class="four mgm-columns">
<h5>Elements</h5>
<input type="checkbox" id="toggleAttribution" checked>Include attribution</input><br>
<input type="checkbox" id="toggleTitle" checked>Include attribution title</input><br>
<input type="checkbox" id="toggleLogo" checked>Include logo</input><br>
<select class="u-full-width background" id="hubLogo">
<option value="national">National logo</option>
<option value="nyc">NYC logo</option>
</select>
</div>
</div>
<div class="thumbnails-container" id="thumbnailsContainer">
<p class="thumbnails-text">Click on a photo to use it in the background of your graphic. You can select which filter to use on it in the dropdown above.</p>
<div class="thumbnails" id="thumbnails"></div>
</div>
<div class="mgm-row">
<div class="twelve mgm-columns">
<button class="u-full-width button-primary" type="button" id="saveButton">Save ↓</button>
</div>
</div>
<div class="mgm-row">
<div class="twelve mgm-columns center">
Have a feature you'd like added? <a href="https://gitreports.com/issue/sunrisemvmtnyc/outquote?details=%2A%2AIs+your+feature+request+related+to+a+problem%3F+Please+describe.%2A%2A%0D%0AA+clear+and+concise+description+of+what+the+problem+is.+Ex.+I%27m+always+frustrated+when+%5B...%5D%0D%0A%0D%0A%2A%2ADescribe+the+solution+you%27d+like%2A%2A%0D%0AA+clear+and+concise+description+of+what+you+want+to+happen.%0D%0A%0D%0A%2A%2ADescribe+alternatives+you%27ve+considered%2A%2A%0D%0AA+clear+and+concise+description+of+any+alternative+solutions+or+features+you%27ve+considered.%0D%0A%0D%0A%2A%2AAdditional+context%2A%2A%0D%0AAdd+any+other+context+or+screenshots+about+the+feature+request+here." target="_blank">Submit one here.</a>
<br>
Found an issue? <a href="https://gitreports.com/issue/sunrisemvmtnyc/outquote?details=%2A%2ADescribe+the+bug%2A%2A%0D%0AA+clear+and+concise+description+of+what+the+issue+is.%0D%0A%0D%0A%2A%2ATo+Reproduce%2A%2A%0D%0ASteps+to+reproduce+the+behavior%3A%0D%0A1.+Go+to+%27...%27%0D%0A2.+Click+on+%27....%27%0D%0A3.+Scroll+down+to+%27....%27%0D%0A4.+See+error%0D%0A%0D%0A%2A%2AExpected+behavior%2A%2A%0D%0AA+clear+and+concise+description+of+what+you+expected+to+happen.%0D%0A%0D%0A%2A%2ADesktop+%28please+complete+the+following+information%29%3A%2A%2A%0D%0A+-+OS%3A+%5Be.g.+iOS%5D%0D%0A+-+Browser+%5Be.g.+chrome%2C+safari%5D%0D%0A%0D%0A%2A%2AMobile+%28please+complete+the+following+information%29%3A%2A%2A%0D%0A+-+Device%3A+%5Be.g.+iPhone%2FGalaxy%5D%0D%0A+-+OS%3A+%5Be.g.+iOS8.1%5D%0D%0A+-+Browser+%5Be.g.+safari%2C+chrome%5D%0D%0A%0D%0A%2A%2AAdditional+context%2A%2A%0D%0AAdd+any+other+context+about+the+problem+here." target="_blank">Report it here.</a>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>