-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
104 lines (90 loc) · 4.84 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Open Ecard Generator - Design your own electronic greeting card!</title>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" type="text/css" href="css/picnic.min.css"/>
<link rel="stylesheet" type="text/css" href="css/card.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/create.js" type="text/javascript"></script>
<script src="js/jscolor.min.js" type="text/javascript"></script>
</head>
<body onload="load_ready()">
<h1><img src="logo.svg" width="40"> Open Ecard Generator</h1>
<div id="create">
<h2>Design card</h2>
<textarea id="message" rows=7 cols=20 placeholder="Write your message here." onchange="show_preview()" onkeyup="show_preview()"></textarea><br>
<input type="text" id="recipient" size="25" placeholder="Recipient" onchange="show_preview()" onkeyup="show_preview()"><br>
<input type="text" id="sender" size="25" placeholder="Sender" onchange="show_preview()" onkeyup="show_preview()"><br>
<input type="text" id="image_url" size="25" placeholder="Image url" onchange="show_preview()" onkeyup="show_preview()"><br>
<div id="select_ic"> </div>
<button
class="jscolor {valueElement:'chosen_value',value:'FFF',onFineChange:'setTextColor(this)'}"
style="border:1px solid black;margin-right:5px">
Pick card background color
</button>
HEX value: <span id="chosen_value"> </span>
<script>
function setTextColor(picker) {
document.getElementById('card_container').style.backgroundColor = '#' + picker.toString();
show_preview();
}
</script>
<div id="select_bg"> </div>
</div>
<button type="button" onclick="toggle_preview()">Toggle preview</button> <label for="modal_1" class="button success">Import</label> <label for="modal_2" class="button warning">Help</label>
<div class="modal">
<input id="modal_1" type="checkbox">
<label for="modal_1" class="overlay"></label>
<article>
<header>
<h3>Import</h3>
<label for="modal_1" class="close">×</label>
</header>
<section class="content">
<p>Have a card URL or code from another Open Ecard Generator instance? You can import it and view it here! Just paste the original URL in the box below and press the button to view your card.</p>
<input type="text" id="import_url" size="25" placeholder="URL or code"><br><button onclick="import_card()">View card!</button>
</section>
</article>
</div>
<div class="modal">
<input id="modal_2" type="checkbox">
<label for="modal_2" class="overlay"></label>
<article>
<header>
<h3>Help</h3>
<label for="modal_2" class="close">×</label>
</header>
<section class="content">
<p>The default ("create") page provides a simple interface to design your electronic greeting card. The message text, card image, background colour and pattern, and sender and receiver names can all be customized. Your card will appear in an automatically-updating preview at the bottom of the screen as you begin to edit it. Press the "Toggle preview" button to turn off the preview feature.</p>
<p>While you are designing your card, a link will appear to the final card. You can share this link (which goes to the "receive" page) with anyone you would like to send the card to.</p>
<p>All of your customizations are encoded in the url, so the card contents will not expire or change as long as the site is up (and even if the site goes down, you can still retrieve your card by downloading the generator and importing the link.)</p>
<p>The card generation and retrieval process is done entirely locally, so none of the card contents is ever stored anywhere on any server.</p>
</section>
</article>
</div>
<div id="card_url"> </div>
<br>
<div id="preview_container">
<h2>Preview card</h2>
<div id="card_container">
<div id="preview">
<center>
<img id="card_image"/><br>
<p id="message_preview"> </p>
</center>
</div>
</div>
</div>
<footer>
Source <a href="https://github.com/dohliam/ecards">available on GitHub</a>.
</footer>
</body>
</html>