43 lines
1.9 KiB
HTML
43 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Les Simpson avec Riot.js</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/riot@6.0.1/riot.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; }
|
||
|
|
.controls { margin-bottom: 20px; }
|
||
|
|
button { margin: 0 5px; padding: 8px 12px; cursor: pointer; }
|
||
|
|
.selected-char { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<app></app>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import './my-list.riot';
|
||
|
|
import './app.riot';
|
||
|
|
|
||
|
|
const personnages = [
|
||
|
|
{"id":"1","nom":"Simpson","prenom":"Homer","age":"38"},
|
||
|
|
{"id":"2","nom":"Simpson","prenom":"Marge","age":"34"},
|
||
|
|
{"id":"3","nom":"Simpson","prenom":"Bart","age":"10"},
|
||
|
|
{"id":"4","nom":"Simpson","prenom":"Lisa","age":"8"},
|
||
|
|
{"id":"5","nom":"Simpson","prenom":"Maggie","age":"1"},
|
||
|
|
{"id":"6","nom":"Flanders","prenom":"Ned","age":"60"},
|
||
|
|
{"id":"7","nom":"Flanders","prenom":"Todd","age":"8"},
|
||
|
|
{"id":"8","nom":"Flanders","prenom":"Rod","age":"10"},
|
||
|
|
{"id":"9","nom":"Van Houten","prenom":"Kirk","age":null},
|
||
|
|
{"id":"10","nom":"Van Houten","prenom":"Milhouse","age":null},
|
||
|
|
{"id":"11","nom":"Van Houten","prenom":"Luann","age":null},
|
||
|
|
{"id":"12","nom":"Muntz","prenom":"Nelson","age":null},
|
||
|
|
{"id":"13","nom":"Muntz","prenom":"Véronica","age":null},
|
||
|
|
{"id":"14","nom":"Muntz","prenom":"Thomas Jr","age":null},
|
||
|
|
{"id":"15","nom":"Lovejoy","prenom":"Timothy","age":null},
|
||
|
|
{"id":"16","nom":"Burns","prenom":"Charles","age":null}
|
||
|
|
];
|
||
|
|
|
||
|
|
riot.mount('app', { personnages });
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|