educates-tigera-theme/workshop-finished.html at main · frozenprocess/educates-tigera-theme · GitHub

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
<!--
  Body of the dialog shown when a workshop session is fully completed.
  Tigera corporate / light look (matches tigera.io).
-->

<style>
  .tigera-finished {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #231F1F;
    background-color: #FBF7F1;
    padding: 24px;
    border-radius: 8px;
  }
  .tigera-finished .stamp {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #E76D2B;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .tigera-finished h2 {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 28px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #231F1F;
  }
  .tigera-finished h2 .accent {
    background: linear-gradient(135deg, #FAA51B 0%, #E76D2B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .tigera-finished p { color: #5a6573; line-height: 1.6; margin: 0 0 12px; font-size: 15px; }

  .tigera-finished .actions {
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .tigera-finished .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 5px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: none;
  }
  .tigera-finished .btn-primary {
    background: linear-gradient(135deg, #FAA51B 0%, #E76D2B 100%);
    color: #fff !important;
  }
  .tigera-finished .btn-primary:hover { filter: brightness(1.05); }
  .tigera-finished .btn-secondary {
    background-color: transparent;
    border: 2px solid #231F1F;
    color: #231F1F !important;
  }
  .tigera-finished .btn-secondary:hover {
    background-color: #231F1F;
    color: #fff !important;
  }

  .tigera-finished .reward {
    margin-top: 18px;
    padding: 18px;
    background-color: #F4EFE6;
    border-radius: 8px;
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .tigera-finished .reward img {
    width: 96px;
    height: 96px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #E5E5E5;
  }
  .tigera-finished .reward .label {
    font-size: 13px;
    font-weight: 700;
    color: #E76D2B;
    margin-bottom: 6px;
  }
  .tigera-finished .reward code {
    font-family: 'JetBrains Mono', monospace;
    background-color: #fff;
    color: #231F1F;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid #E5E5E5;
  }
</style>

<div class="tigera-finished">
  <div class="stamp">Tigera Labs</div>
  <h2>Nice work &mdash; you <span class="accent">finished</span></h2>

  <p>
    Thanks for completing the workshop. We&rsquo;d love a quick word on how
    it went &mdash; it shapes the next lab in the catalog.
  </p>

  <div class="actions">
    <a class="btn btn-primary"
       href="https://tigera.io/labs/survey?workshop={{ workshop_name }}"
       target="_blank" rel="noopener">
      Take the 30-second survey
    </a>
    <a class="btn btn-secondary"
       href="https://docs.tigera.io"
       target="_blank" rel="noopener">
      Read the docs
    </a>
  </div>

  <div class="reward">
    <img alt="QR code" src="/static/workshops/theme/finished-qr.png">
    <div>
      <div class="label">Continue on your device</div>
      <p style="margin:0 0 6px;">
        Scan to keep exploring on your own machine &mdash; the booth
        laptop is about to free up for the next learner.
      </p>
      <div>Discount code: <code>TIGERA-LABS-XXXX</code></div>
    </div>
  </div>
</div>