mirror of
https://github.com/jpetazzo/container.training.git
synced 2026-02-14 17:49:59 +00:00
8ea09e93ee
Cards are now credit-card sized. The code aligning front and back should be more robust, too.
238 lines
5.9 KiB
HTML
238 lines
5.9 KiB
HTML
{#
|
|
The variables below can be customized here directly, or in your
|
|
settings.yaml file. Any variable in settings.yaml will be exposed
|
|
in here as well.
|
|
#}
|
|
|
|
{%- set url = url
|
|
| default("http://FIXME.container.training/") -%}
|
|
{%- set pagesize = pagesize
|
|
| default(10) -%}
|
|
{%- set lang = lang
|
|
| default("en") -%}
|
|
{%- set event = event
|
|
| default("training session") -%}
|
|
{%- set backside = backside
|
|
| default(False) -%}
|
|
{%- set image = image
|
|
| default(False) -%}
|
|
{%- set clusternumber = clusternumber
|
|
| default(None) -%}
|
|
{%- set thing = thing
|
|
| default("lab environment") -%}
|
|
|
|
{%- if lang == "en" -%}
|
|
{%- set intro -%}
|
|
Here is the connection information to your very own
|
|
{{ thing }} for this {{ event }}.
|
|
You can connect to it with any SSH client.
|
|
{%- endset -%}
|
|
{%- endif -%}
|
|
{%- if lang == "fr" -%}
|
|
{%- set intro -%}
|
|
Voici les informations permettant de se connecter à votre
|
|
{{ thing }} pour cette formation.
|
|
Vous pouvez vous y connecter
|
|
avec n'importe quel client SSH.
|
|
{%- endset -%}
|
|
{%- endif -%}
|
|
{%- if lang == "en" -%}
|
|
{%- set slides_are_at -%}
|
|
You can find the slides at:
|
|
{%- endset -%}
|
|
{%- endif -%}
|
|
{%- if lang == "fr" -%}
|
|
{%- set slides_are_at -%}
|
|
Le support de formation est à l'adresse suivante :
|
|
{%- endset -%}
|
|
{%- endif -%}
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
|
|
|
|
{% if paper_size == "A4" %}
|
|
@page {
|
|
size: A4; /* Change from the default size of A4 */
|
|
margin: 0.5cm; /* Set margin on each page */
|
|
}
|
|
body {
|
|
/* this is A4 minus 0.5cm margins */
|
|
width: 20cm;
|
|
height: 28.7cm;
|
|
}
|
|
{% elif paper_size == "Letter" %}
|
|
@page {
|
|
size: Letter; /* 8.5in x 11in */
|
|
}
|
|
body {
|
|
width: 6.75in; /* two cards wide */
|
|
margin-left: 0.875in; /* (8.5in - 6.75in)/2 */
|
|
margin-top: 0.1875in; /* (11in - 5 cards)/2 */
|
|
}
|
|
{% endif %}
|
|
|
|
body, table {
|
|
line-height: 1em;
|
|
font-size: 15px;
|
|
font-family: 'Slabo 27px';
|
|
}
|
|
|
|
table {
|
|
border-spacing: 0;
|
|
margin-top: 0.4em;
|
|
margin-bottom: 0.4em;
|
|
border-left: 0.8em double grey;
|
|
padding-left: 0.4em;
|
|
}
|
|
|
|
td:first-child {
|
|
width: 10.5em;
|
|
}
|
|
|
|
div.card {
|
|
float: left;
|
|
border: 0.01in dotted black;
|
|
/*
|
|
columns * (width+left+right) < 100%
|
|
height: 33%;
|
|
width: 24.8%;
|
|
width: 33%;
|
|
*/
|
|
width: 3.355in; /* 3.375in minus two 0.01in borders */
|
|
height: 2.105in; /* 2.125in minus two 0.01in borders */
|
|
}
|
|
|
|
p {
|
|
margin: 0.8em;
|
|
}
|
|
|
|
div.front {
|
|
{% if image %}
|
|
background-image: url("{{ image }}");
|
|
background-repeat: no-repeat;
|
|
background-size: 1in;
|
|
background-position-x: 2.8in;
|
|
background-position-y: center;
|
|
{% endif %}
|
|
}
|
|
|
|
span.scale {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.qrcode img {
|
|
height: 5.8em;
|
|
padding: 1em 1em 0.5em 1em;
|
|
float: left;
|
|
}
|
|
|
|
.logpass {
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pagebreak {
|
|
page-break-after: always;
|
|
clear: both;
|
|
display: block;
|
|
height: 0;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="qrcode.min.js"></script>
|
|
<script type="text/javascript">
|
|
function qrcodes() {
|
|
[].forEach.call(
|
|
document.getElementsByClassName("qrcode"),
|
|
(e, index) => {
|
|
new QRCode(e, {
|
|
text: "{{ qrcode }}",
|
|
correctLevel: QRCode.CorrectLevel.L
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
function scale() {
|
|
[].forEach.call(
|
|
document.getElementsByClassName("scale"),
|
|
(e, index) => {
|
|
var text_width = e.getBoundingClientRect().width;
|
|
var box_width = e.parentElement.getBoundingClientRect().width;
|
|
var percent = 100 * box_width / text_width + "%";
|
|
e.style.fontSize = percent;
|
|
}
|
|
);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="qrcodes(); scale();">
|
|
{% for login in logins %}
|
|
<div class="card front">
|
|
<p>{{ intro }}</p>
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<td>login:</td>
|
|
<td>password:</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="logpass">{{ login.login }}</td>
|
|
<td class="logpass">{{ login.password }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>IP address:</td>
|
|
{% if login.port %}
|
|
<td>port:</td>
|
|
{% endif %}
|
|
</tr>
|
|
<tr>
|
|
<td class="logpass">{{ login.ipaddrs.split("\t")[0] }}</td>
|
|
{% if login.port %}
|
|
<td class="logpass">{{ login.port }}</td>
|
|
{% endif %}
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
<p>
|
|
{% if url %}
|
|
{{ slides_are_at }}
|
|
<p>
|
|
<span class="scale">{{ url }}</span>
|
|
</p>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
{% if loop.index%pagesize==0 or loop.last %}
|
|
<span class="pagebreak"></span>
|
|
{% if backside %}
|
|
{% for x in range(pagesize) %}
|
|
<div class="card back">
|
|
{{ backside }}
|
|
{#
|
|
<p>Thanks for attending
|
|
"Getting Started With Kubernetes and Container Orchestration"
|
|
during CONFERENCE in Month YYYY!</p>
|
|
<p>If you liked that workshop,
|
|
I can train your team, in person or
|
|
online, with custom courses of
|
|
any length and any level.
|
|
</p>
|
|
{% if qrcode %}
|
|
<p>If you're interested, please scan that QR code to contact me:</p>
|
|
<span class="qrcode"></span>
|
|
{% else %}
|
|
<p>If you're interested, you can contact me at:</p>
|
|
{% endif %}
|
|
<p>jerome.petazzoni@gmail.com</p>
|
|
#}
|
|
</div>
|
|
{% endfor %}
|
|
<span class="pagebreak"></span>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</body>
|
|
</html>
|