-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (108 loc) · 4.46 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="fr">
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<link href="css/bg.css" rel="stylesheet" />
<link href="css/tabs.css" rel="stylesheet" />
<style>
html,
body,
pre,
code,
kbd,
samp {
font-family: "Press Start 2P";
}
body {
margin: 2rem;
}
.nes-container {
margin: 1rem;
}
.special {
color: #AB9A44;
}
.nes-progress {
margin: 1rem;
border-image-repeat: repeat;
}
</style>
</head>
<body style="width: 70%;margin: auto;">
<!-- badges -->
<div style="position: absolute; top: 10px; right: 20px; display: flex; align-items:normal;">
<a href="https://www.linkedin.com/in/christophe-bessis/">
<li-icon type="app-linkedin-bug-color-icon" class="ivm-view-attr__icon " size="large" role="img"
aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="64x64"
fill="currentColor" class="mercado-match" width="64" height="64" focusable="false">
<path
d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z">
</path>
</svg>
</li-icon>
</a>
<a href="https://www.credential.net/3f5fb7c2-b806-404f-b484-614f0d28a651#gs.94uwxb"><img src="https://templates.images.credential.net/1711468817150941540075889617866.png" width="126px" height="106px" alt="Unreal Authorized Instructor"></a>
<a href="https://github.com/YopSolo?tab=repositories&q=&type=public&language=&sort=" target="_self" class="nes-myOctocat"></a>
</div>
<div id="nescss">
<div>
<p class="mainTitle" style="font-size: 3rem;">Portfolio</p>
</div>
<div class="tabs">
<!-- TAB 1 -->
<input class="tabInput" name="tabs" type="radio" id="tab-1" checked="checked" />
<label class=tabLabel for="tab-1">Travaux récents</label>
<div class="tabPanel" style="width: 100%;">
<div class="nes-container with-title">
<p class="title">Travaux récents</p>
<div class="lists" style="text-align: left">
// -- TODO -- //
</div>
</div>
</div>
<!-- TAB 2 -->
<input class="tabInput" name="tabs" type="radio" id="tab-2" />
<label class=tabLabel for="tab-2">Historique</label>
<div class="tabPanel" style="width: 100%;">
<div class="nes-container with-title">
<p class="title">Historique</p>
<div class="lists" style="text-align: left">
// -- TODO -- //
</div>
</div>
</div>
<!-- TAB 3 -->
<input class="tabInput" name="tabs" type="radio" id="tab-3" onclick="window.location='lisaa.html'" />
<label class=tabLabel for="tab-3">Lisaa</label>
</div>
</div>
</div>
</body>
<script>
const pageAlias = {
'tab_recents': '1',
'tab_historique': '2',
'tab_lisaa': '3'
};
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
// higlight current tab
if (urlParams.has('page')) {
let page = urlParams.get('page').toLowerCase();
if (page !== 'gd1') {
document.getElementById('tab-' + pageAlias[page]).checked = true;
}
}
// update url on tab click
const tabInputs = document.getElementsByClassName('tabInput');
for (let i = 0; i < tabInputs.length; i++) {
tabInputs[i].addEventListener('click', function () {
let page = this.id.split('-')[1];
let pageKey = Object.keys(pageAlias).find(key => pageAlias[key] === page);
window.history.pushState({}, '', window.location.pathname + '?page=' + pageKey);
});
}
</script>
</html>