-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.html
84 lines (84 loc) · 3.63 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>LeMEME Generator</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand">LeMeme Generator</a>
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Base Image <b class="caret"></b></a>
<ul class="dropdown-menu" id="meme-images">
<li class="active"><a href="#" data-img="yuno.jpg">Y U NO guy</a></li>
<li><a href="#" data-img="loktarian.jpg">Loktarian</a></li>
<li><a href="#" data-img="trollface.jpg">Troll Face</a></li>
<li><a href="#" data-img="fry.jpg">Fry (Not sure if...)</a></li>
<li><a href="#" data-img="goodguy.jpg">Good Guy Greg</a></li>
<li><a href="#" data-img="kid.jpg">Success Kid</a></li>
<li><a href="#" data-img="philosoraptor.jpg">Philosoraptor</a></li>
<li><a href="#" data-img="scumbag.jpg">Scumbag Steve</a></li>
<li><a href="#" data-img="socailakward.jpg">Socially Awkward Penguin</a></li>
<li><a href="#" data-img="alone.jpg">Forever Alone</a></li>
<li><a href="#" data-img="doseke.jpg">Dos Equis Man</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Font Color <b class="caret"></b></a>
<ul class="dropdown-menu" id="meme-color">
<li class="active"><a href="#" data-color="#FFF">White</a></li>
<li><a href="#" data-color="#000">Black</a></li>
<li><a href="#" data-color="#888">Grey</a></li>
<li><a href="#" data-color="#F00">Red</a></li>
<li><a href="#" data-color="#0F0">Green</a></li>
<li><a href="#" data-color="#00F">Blue</a></li>
<li><a href="#" data-color="#FF0">Yellow</a></li>
<li><a href="#" data-color="#A020F0">Purple</a></li>
<li><a href="#" data-color="#FFAED5">Pink</a></li>
</ul>
</li>
<li>
<form id="api-key-form" class="navbar-form">
<button class="btn btn-danger" id="api-key" title="Change API Key">API KEY</button>
<input type="text" id="api-key-input" value="eef75ee1f4d14ddf5e48e67e6531f739" style="display: none;" />
</form>
</li>
</ul>
<ul class="nav pull-right">
<li class="active"><a href="#" id="generate">Generate!</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="span12">
<div class="row">
<canvas id="cvs">Get a real browser! http://www.google.com/chrome </canvas>
</div>
<div class="row">
<input type="text" class="span7" id="text-top" placeholder="Top Line"/>
</div>
<div class="row">
<input type="text" class="span7" id="text-bottom" placeholder="Bottom Line"/>
</div>
<div class="row">
<input type="text" class="span7" id="img-link" placeholder="Generated image url will appear here."/>
<img src="images/spinner.gif" id="spinner" class="vertical-align: middle'" hidden/>
</div>
<div class="row">
<div class="alert alert-error">
<strong>Oh snap!</strong> There are only 50 images per hour that can be generated and stored on imgur. If you cannot generate an image, please provide your own API Key to generate more! More information can be found <a href="http://imgur.com/register/api_anon" target="_blank" title="open imgur.com in a new window">Here</a>.
</div>
</div>
</div>
</div>
<script type='text/javascript' src='js/jquery.js'></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>