forked from MozillaKerala/Card-Generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
executable file
·166 lines (141 loc) · 6.7 KB
/
index.php
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card Generator | Mozilla Portal | Mozilla Kerala</title>
<meta name="description" content="Card Generator for Mozillians">
<!-- favicon -->
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico">
<!-- Facebook META Tags
<meta property="og:type" content="website">
<meta property="og:site_name" content="Card Generator | Mozilla Kerala">
<meta property="og:title" content="Card Generator | Mozilla Kerala">
<meta property="og:url" content="http://cards.mozillakerala.org">
<meta property="og:description" content="Card Generator for Mozillians">
<meta property="og:image" content="images/mozilla_og.png">
<meta property="fb:page_id" content="290667851051610"> -->
<!-- Cascade Style Sheets Includes -->
<link rel="stylesheet" href="css/style.css" />
<!-- Tabzilla stylesheet -->
<link rel="stylesheet" type="text/css" href="//mozorg.cdn.mozilla.net/media/css/tabzilla-min.css" />
<!-- Tabzilla Script -->
<script src="//mozorg.cdn.mozilla.net/tabzilla/tabzilla.js"></script>
<!-- Javascript Includes -->
<script src="js/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function () {
$('#gen-card-button').click(function () {
var template_html = $("#gen-template-frame").contents().find('html').html();
var template_back_html = $("#gen-template-back-frame").contents().find('html').html();
$('#gen-html-textarea').val(template_html);
$('#gen-html-back-textarea').val(template_back_html);
$('#gen-create-form').submit();
});
});
</script>
</head>
<body>
<div id="page">
<a href="/en-US/" id="tabzilla">mozilla</a>
<div id="header">
<span>Card Generator</span>
</div>
<div class="gen-select-template-container">
Select card template:
<select id="gen-select-template" class="" onchange="change()">
<?php
$files = scandir( './templates' );
$first = '';
foreach ( $files as $key => $file ) {
if ( is_file( './templates' . '/' . $file ) ) {
if ( 'Reps-Card 1.html' === $file ) {
unset( $files[$key] );
}
} else {
unset( $files[$key] );
}
}
$files[0] = 'Reps-Card 1.html';
ksort($files);
foreach ( $files as $file ) {
if ( empty( $first ) ) {
$first = $file;
}
echo '<option value="' . str_replace( '.html', '', $file ) . '">' . str_replace( '.html', '', $file ) . '</option>' . "\n";
}
?>
</select>
</div>
<p class="help-text"><span class="heart">❤</span> Press <span class="shortcut-key">SHIFT</span> to highlight editable text. And click to edit.</p>
<!-- TODO: Need to change this to support choosing other card templates. -->
<iframe id="gen-template-frame" src="templates/<?php echo $first ?>"></iframe>
<iframe id="gen-template-back-frame" src="templates/back/<?php echo $first ?>"></iframe>
<form id="gen-create-form" action="generate.php" method="post">
<input name="paper" type="hidden" value="card"/>
<input name="orientation" type="hidden" value="portrait"/>
<textarea name="html" id="gen-html-textarea"></textarea>
<textarea name="html2" id="gen-html-back-textarea"></textarea>
<script>
function change() {
var sel = $('#gen-select-template option:selected').text();
var frame = $('#gen-template-frame');
var frame_back = $('#gen-template-back-frame');
frame.attr('src', 'templates/' + sel + '.html');
frame_back.attr('src', 'templates/back/' + sel + '.html');
}
</script>
<div>
<input type="button" value="Generate Card" id="gen-card-button" class="button" />
</div>
</form>
<div id="footer"><br/>Created by fox lovers in Kerala | <a href="https://github.com/MozillaKerala/Card-Generator/">Grab the code</a> and improve it. | <a href="https://github.com/MozillaKerala/Card-Generator/tree/master#how-to-add-new-card-template">Add</a> a new card template.<br/><br/></div>
</div>
<script>
$(document).on('keydown', function (e) {
if (e.keyCode === 16) {
$('#gen-template-frame').contents().find('div[contenteditable]').css('background-color', 'rgba(255, 100, 58, 0.43)');
}
});
$(document).on('keyup', function (e) {
$('#gen-template-frame').contents().find('div[contenteditable]').css('background-color', 'transparent');
});
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-46056779-4', 'mozillakerala.org');
ga('send', 'pageview');
</script>
<!-- Piwik Analytics -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "//piwik.mozillakerala.org/";
_paq.push(['setTrackerUrl', u + 'piwik.php']);
_paq.push(['setSiteId', 6]);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript';
g.async = true;
g.defer = true;
g.src = u + 'piwik.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<noscript>
<p><img src="//piwik.mozillakerala.org/piwik.php?idsite=6" style="border:0;" alt="" /></p>
</noscript>
<!-- End Piwik Code -->
</body>
</html>