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

79
hamels/index.html
View File

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