-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
61 lines (58 loc) · 5.25 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
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Initialisation -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox=%220 0 1000 1000%22%3E%0A %3Cpath d=%22M536 50 291 500 447 790 483 724 362 500 570 113 778 500 536 950H603L844 500 603 50ZM464 950 709 500 553 210 518 275 638 500 430 887 222 500 464 50H397L156 500 397 950Z%22%2F%3E%0A%3C%2Fsvg%3E%0A">
<!-- Pour Google -->
<meta name="Description" CONTENT="Générateur de code d'autoradio Renault en local, dans le navigateur, sans envoie des données sur un serveur. Auteur: kpym.">
<meta name="keywords" content="Renault,code,precode,radio,autoradio">
<meta name="google-site-verification" content="DikcnH_TsWwf3-LmzgkDF1glvnKqj9yoxqmeED73Mr4" />
<!-- Les styles -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<!-- Les scripts -->
<script defer src="main.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<title>Code autoradio Renault</title>
</head>
<body>
<div x-data="rcode" class="container" x-cloak>
<div class="jumbotron">
<p class="lang">Français | <a href="en.html">English</a></p>
<h1 class="display-4">Générateur de code d'autoradio Renault</h1>
<p class="lead">Le calcul se fait en local, dans le navigateur, sans envoie des données sur un serveur.<br>
Le code libre est disponible dans le <a href="https://github.com/kpym/autoradio-renault">dépôt GitHub</a>.</p class="lead">
</div>
<div class="row">
<div class="form-group col-sm-12 col-md-6">
<label for="precode">Précode</label>
<input id="precode" x-model="precode" type="text" class="form-control" aria-label="précode de l'autoradio">
</div>
<div class="form-group col-sm-12 col-md-6">
<label for="code">Code</label>
<input id="code" x-model="code" type="text" class="form-control" readonly="readonly" aria-label="Code de sécurité de l'autoradio">
</div>
</div>
<!-- ----------- messages d'erreur -------------- -->
<div x-show="!test" class="alert alert-warning" role="alert">
<strong>Le précode doit être composé d'une lettre suivie de 3 chiffres (exemple : <code>A123</code>).</strong><br>
Le précode est écrit en arrière de l'autoradio, mais peut être récupéré sans le démontage <a href="https://youtu.be/nRGq3OI25Io">en appuyant simultanément</a> sur les touches <kbd>1</kbd> et <kbd>6</kbd> (ou <kbd>1</kbd> et <kbd>5</kbd>), puis sur le bouton d'alimentation.<br>
<em>Le calcul du code ne fonctionne pas pour les précodes qui commencent avec <strong><code>A0</code></strong>.</em>
</div>
<div x-show="test" class="alert alert-success" role="alert">
Pour activer votre radio :
<ol>
<li x-show="code[0]>0">Appuyer <strong><code x-text="code[0]"></code></strong> fois sur le bouton <kbd>1</kbd>.</li>
<li x-show="code[1]>0">Appuyer <strong><code x-text="code[1]"></code></strong> fois sur le bouton <kbd>2</kbd>.</li>
<li x-show="code[2]>0">Appuyer <strong><code x-text="code[2]"></code></strong> fois sur le bouton <kbd>3</kbd>.</li>
<li x-show="code[3]>0">Appuyer <strong><code x-text="code[3]"></code></strong> fois sur le bouton <kbd>4</kbd>.</li>
<li>Appuyer sur le bouton <kbd>6</kbd> (ou <kbd>5</kbd>) pour terminer.</li>
</ol>
</div>
</div>
<!-- Le lien vers le dépôt GitHub -->
<a href="https://github.com/kpym/autoradio-renault" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
</body>
</html>