forked from sivelswhy/getpapillon.xyz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
note.html
76 lines (76 loc) · 4.19 KB
/
note.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
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Ma magnifique note - Papillon</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:locale" content="fr_FR" />
<meta property="og:type" content="website" />
<meta property="og:title" id="ogTitle" content="Note envoyé avec Papillon" />
<meta property="og:description" id="ogDescription" content="Quelqu'un vous a envoyé une note avec Papillon." />
<meta property="og:url" content="https://www.getpapillon.xyz" />
<meta property="og:site_name" content="Papillon" />
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/normalize.css">
<style>
/* FONT */
* {font-family: 'Fixel', sans-serif;}
/* BODY */
body {background-color: #F2F2F7;display: flex;align-items: center;justify-content: center;min-height: 100vh;}
.logo_bg {position: fixed;height: 110vh;bottom: -25vh;right: -15vh;z-index: -1;opacity: .2;}
/* CARD STYLE */
body > div {width: 100vw;max-width: 500px;background-color: #FFF;border-radius: 20px;box-shadow: 0 0 50px #00000010;overflow: hidden;}
body > div > .header {background-color: #32AB8E;padding: 20px;color: #FFF;}
body > div > .body {padding: 20px;height: calc(100% - 40px);width: calc(100% - 40px);}
/* TEXT STYLE */
h1 {margin: 0;font-size: 22pt;font-weight: 600;}
h2 {margin: 0;font-size: 12pt;font-weight: 400;opacity: .6;}
h3 {margin: 0;font-size: 54pt;}
p {margin: 0;font-size: 17pt;font-weight: 600;}
a {color: #000;}
.student_note > p {font-size: 10pt;}
/* STUDENT NOTE STYLE */
.student_note {height: 150px;display: flex;justify-content: center;align-items: center;flex-direction: column;}
hr {background-color: #000;opacity: .6;}
/* CATEGORY NAME STYLE */
span {font-size: 12pt;opacity: .6;font-weight: 400;}
p > br {margin-top: 10px;}
/* FOOT NOTE STYLE */
.bottom {margin-top: 30px;opacity: .3;text-align: center;}
.bottom > img {width: 32px;margin-top: 20px;}
.bottom > p {font-size: 10pt;opacity: .5;}
/* OTHER STYLE */
#un, #unf {opacity: 1;}
#unf {font-size: 10pt;font-weight: 600;}
/* RESPONSIVE */
@media only screen and (max-width: 768px) {body > div {max-width: none;height: 100vh;border-radius: 0;background-color: #FFFFFFAF;}.body {overflow: scroll;}}
</style>
</head>
<body>
<img src="/assets/logo_light.svg" class="logo_bg" alt="Logo de papillon en fond">
<div id="card">
<div class="header" id="hc">
<h2><span id="un">{username}</span> aimerait vous partager une de ses notes</h2>
<h1 id="su">{subject}</h1>
</div>
<div class="body">
<p><span>Note de l'élève :</span></p>
<div class="student_note">
<h3 id="sn">00/20</h3>
<p id="sc">(Une franche réussite)</p>
</div>
<hr>
<p id="co"><span>Coefficient :</span><br>x0.00</p>
<p id="sv"><span>Remis sur 20 :</span><br>00/20</p>
<p id="mc"><span>Moyenne de classe :</span><br>00/20</p>
<p id="mi"><span>Note minimale :</span><br>00/20</p>
<p id="ma"><span>Note maximale :</span><br>00/20</p>
<div class="bottom">
<p>Mais malgré tout, on sait que c'est avec notre fameuse application <a href="/">Papillon</a> que <span id="unf">{username}</span> à réussi. <a href="/">Et pourquoi pas vous ?</a></p>
<img src="/assets/logo_light.svg" alt="Logo de Papillon">
</div>
</div>
</div>
<script>function r(t){return new DOMParser().parseFromString(t,"text/html").body.textContent||""}const p = s => document.getElementById(s);const d = JSON.parse(decodeURIComponent(escape(atob(new URLSearchParams(window.location.search).get('d')))));p('hc').style.background = d.header.color;p('un').innerText = d.header.username;p('su').innerText = d.header.subject;p('sn').innerText = d.data.note;p('sc').innerText = `(${d.data.commentary})`;p('co').innerHTML = p('co').innerHTML.replace('x0.00', r(d.data.coef));p('sv').innerHTML = p('sv').innerHTML.replace('00/20', r(d.data.note20));p('mc').innerHTML = p('mc').innerHTML.replace('00/20', r(d.data.class));p('mi').innerHTML = p('mi').innerHTML.replace('00/20', r(d.data.min));p('ma').innerHTML = p('ma').innerHTML.replace('00/20', r(d.data.max));p('unf').innerText = d.header.username;</script>
</body>
</html>