ben/ben.de-roo.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update hamels/index.html

Browse Source
This commit is contained in:
Ben de Roo
2026-02-05 11:23:57 +01:00
parent 790087235d
commit 57c54b358d
1 changed files with 20 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
hamels/index.html
View File

@@ -14,28 +14,11 @@ body {
background-color: #ffffff; background-color: #ffffff;
color: black; color: black;
} }
h1, h2, p, footer { color: black; }
h1, h2, p, footer { p { font-size: 18px; max-width: 700px; margin: 0 auto; }
color: black; img { width: 300px; margin: 20px; border: 3px solid black; background-color: white; }
} video { margin: 20px auto; width: 600px; max-width: 100%; border: 2px solid black; }
.buttons { margin: 20px; }
p {
font-size: 18px;
max-width: 700px;
margin: 0 auto;
}
img {
width: 300px;
margin: 20px;
border: 3px solid black;
background-color: white;
}
.buttons {
margin: 20px;
}
button { button {
font-size: 18px; font-size: 18px;
padding: 10px 20px; padding: 10px 20px;
@@ -44,11 +27,7 @@ button {
border: 2px solid black; border: 2px solid black;
background-color: white; background-color: white;
} }
button:hover { background-color: #ddd; }
button:hover {
background-color: #ddd;
}
#grafiek { #grafiek {
width: 300px; width: 300px;
margin: 20px auto; margin: 20px auto;
@@ -57,7 +36,6 @@ button:hover {
align-items: flex-end; align-items: flex-end;
height: 150px; height: 150px;
} }
.bar { .bar {
width: 100px; width: 100px;
background-color: #4CAF50; background-color: #4CAF50;
@@ -66,10 +44,7 @@ button:hover {
font-weight: bold; font-weight: bold;
margin: 0 10px; margin: 0 10px;
} }
.bar.negative { background-color: #f44336; }
.bar.negative {
background-color: #f44336;
}
</style> </style>
</head> </head>
<body> <body>
@@ -78,41 +53,31 @@ button:hover {
<h2>Wie was Napoleon?</h2> <h2>Wie was Napoleon?</h2>
<p> <p>
Napoleon Bonaparte was een Franse leider die leefde rond 1800. Napoleon Bonaparte was een Franse leider rond 1800.
Hij gebruikte propaganda om zichzelf te laten zien als een sterke Hij gebruikte propaganda om zichzelf te laten zien als sterke en heldhaftige leider.
en heldhaftige leider van Frankrijk.
</p> </p>
<img src="napoleon1.jpg" alt="Napoleon schilderij"> <img src="napoleon1.jpg" alt="Napoleon schilderij">
<h2>Nationalisme</h2> <h2>Nationalisme</h2>
<p> <p>
Nationalisme betekent dat mensen zich sterk verbonden voelen met hun land. Nationalisme betekent dat mensen zich verbonden voelen met hun land.
Napoleon stimuleerde dit door Frankrijk af te beelden als machtig en superieur. Napoleon stimuleerde dit door Frankrijk af te beelden als machtig.
Soldaten vochten niet alleen voor hem, maar voor Frankrijk zelf.
</p> </p>
<img src="nationalisme.jpg" alt="Napoleontisch nationalisme"> <img src="nationalisme.jpg" alt="Napoleontisch nationalisme">
<h2>Propaganda</h2> <h2>Propaganda</h2>
<p> <p>
Propaganda werd gebruikt om Napoleon groter, sterker en slimmer af te beelden Propaganda werd gebruikt om Napoleon groter, sterker en slimmer af te beelden.
dan hij in werkelijkheid was. Op schilderijen werd hij vaak afgebeeld Op schilderijen werd hij vaak als held weergegeven.
als een held of bijna als een mythisch figuur.
</p> </p>
<img src="propaganda.jpg" alt="Napoleontische propaganda"> <img src="propaganda.jpg" alt="Napoleontische propaganda">
<h2>Waarom werkte dit?</h2> <h2>Bekijk video</h2>
<p> <video controls>
Veel mensen konden niet lezen, dus beelden waren heel belangrijk. <source src="https://git.de-roo.org/ben/ben.de-roo.org/raw/branch/main/hamels/Dire%20Straits%20-%20Money%20For%20Nothing%20%28Official%20Music%20Video%29.webm" type="video/webm">
Door deze afbeeldingen gingen mensen Napoleon bewonderen en steunen. Je browser ondersteunt deze video niet.
</p>
<h2>Bekijk een korte video over Napoleon</h2>
<video width="400" controls>
<source src="dire_straights_mony_for_nothing.webm" type="video/webm">
Je browser ondersteunt deze video niet.
</video> </video>
<h2>Vond je deze site leuk?</h2> <h2>Vond je deze site leuk?</h2>
<div class="buttons"> <div class="buttons">
<button onclick="stem('like')">👍 Duimpje omhoog</button> <button onclick="stem('like')">👍 Duimpje omhoog</button>
@@ -129,33 +94,27 @@ button:hover {
</footer> </footer>
<script> <script>
// Laad stemmen uit localStorage of initialiseer // laadt stemmen uit localStorage of start bij 0
let stemmen = JSON.parse(localStorage.getItem('stemmen')) || {like: 0, dislike: 0}; let stemmen = JSON.parse(localStorage.getItem('stemmen')) || {like:0, dislike:0};
function stem(keuze) { function stem(keuze) {
stemmen[keuze]++; stemmen[keuze]++;
localStorage.setItem('stemmen', JSON.stringify(stemmen)); // opslaan localStorage.setItem('stemmen', JSON.stringify(stemmen));
updateGrafiek(); updateGrafiek();
} }
// Update de grafiek
function updateGrafiek() { function updateGrafiek() {
let totaal = stemmen.like + stemmen.dislike; let totaal = stemmen.like + stemmen.dislike;
let likeBar = document.getElementById("likeBar"); let likeBar = document.getElementById("likeBar");
let dislikeBar = document.getElementById("dislikeBar"); let dislikeBar = document.getElementById("dislikeBar");
// hoogte in pixels (max 150px)
let likeHeight = (stemmen.like / Math.max(totaal,1)) * 150; let likeHeight = (stemmen.like / Math.max(totaal,1)) * 150;
let dislikeHeight = (stemmen.dislike / Math.max(totaal,1)) * 150; let dislikeHeight = (stemmen.dislike / Math.max(totaal,1)) * 150;
likeBar.style.height = likeHeight + "px"; likeBar.style.height = likeHeight + "px";
likeBar.innerText = stemmen.like; likeBar.innerText = stemmen.like;
dislikeBar.style.height = dislikeHeight + "px"; dislikeBar.style.height = dislikeHeight + "px";
dislikeBar.innerText = stemmen.dislike; dislikeBar.innerText = stemmen.dislike;
} }
// Init grafiek bij laden
updateGrafiek(); updateGrafiek();
</script> </script>