forked from ReproducibiliTea-org/reproducibiliTea
-
Notifications
You must be signed in to change notification settings - Fork 0
/
card.html
150 lines (145 loc) · 6.39 KB
/
card.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
---
layout: default
title: "ReproducibiliTea Card"
---
<h1>ReproducibiliTea Schedule Card</h1>
<script src="/assets/js/pablojs/pablo.min.js" type="text/javascript"></script>
<script src="/assets/js/card-edit.js" type="text/javascript"></script>
<svg viewBox="0 0 600 340" xmlns="http://www.w3.org/2000/svg" id="card-img" width="600">
<style type="text/css">
@font-face {
font-family: 'FontAwesome';
src: url({% include fontAwesome %}) format('opentype');
}
#Logo {height: 250px; width: 250px;}
text {font-size: 24px; font-family: Arial, sans-serif; font-weight: bold;}
.icon {font-size: 32px; font-family: FontAwesome;}
.scrawl {font-family: "Lucida Console", Monaco, monospace};
#place text {font-size: 36px; font-weight: bold;}
#title text {font-size: 28px; text-decoration: underline;}
#twitter text {stroke: dodgerblue; font-weight: normal; font-size: 24px;}
#time text.scrawl {font-size: 32px;}
path {stroke: black;}
.border {stroke-width: 2; fill: transparent;}
.front {stroke: gainsboro;}
.back {stroke: grey;}
</style>
<path class="border back" d="M0 0 L600 0 L600 340 L0 340 Z"></path>
<path class="border front" d="M0 0 L598 0 L598 338 L0 338 Z"></path>
<image id="Logo" x="25" xlink:href="{% include reproducibiliTea-logo %}"/>
<g>
<!-- fontAwesome icon -->
<text id="title" x="425" y="50" text-anchor="middle">Online Journal Club</text>
</g>
<g>
<!-- fontAwesome icon -->
<text id="place" x="150" y="275" text-anchor="middle">Some place here</text>
</g>
<g>
<!-- fontAwesome icon -->
<text id="twitter" x="150" y="305" text-anchor="middle">@reproducibiliT</text>
</g>
<g>
<!-- fontAwesome icon -->
<text class="icon" x="300" y="150"></text>
<path d="M350 160 L550 160 Z"></path>
<text id="time" x="390" y="145" class="scrawl" text-anchor="middle">00:00</text>
<text id="timezone" x="500" y="145" class="scrawl" text-anchor="middle">00:00</text>
</g>
<g>
<!-- fontAwesome icon -->
<text class="icon" x="300" y="225"></text>
<path d="M350 235 L550 235 Z"></path>
<text id="date" x="450" y="220" class="scrawl" text-anchor="middle">Some date here</text>
</g>
</svg>
<div class="save" onclick="saveCardPNG()">
<span id="save-link">Download .png</span>
</div>
<style type="text/css">
.save {
width: 600px;
text-align: center;
background-color: aliceblue;
font-size: 1.5em;
line-height: 2em;
cursor: pointer;
}
.save:hover {
background-color: #70dfff;
color: grey;
font-weight: bold;
}
.controls {
display: flex;
flex-wrap: wrap;
width: 600px;
justify-content: space-evenly;
}
</style>
<form id="card-form" class="controls" onchange="updateCard()">
<div class="row" title="Name of the journal club hosting the session.">
<label for="place-in">JC</label>
<input type="text" id="place-in" name="place" value="Oxford" />
</div>
<div class="row" title="Time the session will take place. HH:MM">
<label for="time-in"><i class="far fa-clock"></i></label>
<input type="time" id="time-in" name="time" value="13:00"/>
</div>
<div class="row" title="Timezone to show on the card. Your timezone should be selected automatically. GMT+/-HHMM">
<label for="timezone-in"><i class="fas fa-globe-europe"></i></label>
<select id="timezone-in" name="timezone">
<option value="GMT-1200">GMT -12:00</option>
<option value="GMT-1100">GMT -11:00</option>
<option value="GMT-1000">GMT -10:00</option>
<option value="GMT-0930">GMT -9:30</option>
<option value="GMT-0900">GMT -9:00</option>
<option value="GMT-0800">GMT -8:00</option>
<option value="GMT-0700">GMT -7:00</option>
<option value="GMT-0600">GMT -6:00</option>
<option value="GMT-0500">GMT -5:00</option>
<option value="GMT-0430">GMT -4:30</option>
<option value="GMT-0400">GMT -4:00</option>
<option value="GMT-0330">GMT -3:30</option>
<option value="GMT-0300">GMT -3:00</option>
<option value="GMT-0200">GMT -2:00</option>
<option value="GMT-0100">GMT -1:00</option>
<option value="GMT+0000">GMT +0:00</option>
<option value="GMT+0100">GMT +1:00</option>
<option value="GMT+0200">GMT +2:00</option>
<option value="GMT+0300">GMT +3:00</option>
<option value="GMT+0330">GMT +3:30</option>
<option value="GMT+0400">GMT +4:00</option>
<option value="GMT+0430">GMT +4:30</option>
<option value="GMT+0500">GMT +5:00</option>
<option value="GMT+0530">GMT +5:30</option>
<option value="GMT+0545">GMT +5:45</option>
<option value="GMT+0600">GMT +6:00</option>
<option value="GMT+0630">GMT +6:30</option>
<option value="GMT+0700">GMT +7:00</option>
<option value="GMT+0800">GMT +8:00</option>
<option value="GMT+0845">GMT +8:45</option>
<option value="GMT+0900">GMT +9:00</option>
<option value="GMT+0930">GMT +9:30</option>
<option value="GMT+1000">GMT +10:00</option>
<option value="GMT+1030">GMT +10:30</option>
<option value="GMT+1100">GMT +11:00</option>
<option value="GMT+1130">GMT +11:30</option>
<option value="GMT+1200">GMT +12:00</option>
<option value="GMT+1245">GMT +12:45</option>
<option value="GMT+1300">GMT +13:00</option>
<option value="GMT+1400">GMT +14:00</option>
</select>
</div>
<div class="row" title="Date the session will take place. YYYY-MM-DD">
<label for="date-in"><i class="fas fa-calendar-alt"></i></label>
<input type="date" id="date-in" name="date" value="31/11/2020"/>
</div>
<div class="row" title="Twitter handle for the session organisers.">
<label for="twitter-in"><i class="fab fa-twitter"></i></label>
<input type="text" id="twitter-in" name="twitter" value="@reproducibiliT"/>
</div>
<!--div class="row">
<button onclick="updateCard(event)">Update</button>
</div-->
</form>