<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Planner Pro</title>
</head>
<style>
<link rel="stylesheet" href="style.css">
</style>
<body>
<!-- MAANDEN -->
<div class="month-tabs">
<div class="month-tab active">Januari</div>
<div class="month-tab">Februari</div>
<div class="month-tab">Maart</div>
<div class="month-tab">April</div>
<div class="month-tab">Mei</div>
<div class="month-tab">Juni</div>
<div class="month-tab">Juli</div>
<div class="month-tab">Augustus</div>
<div class="month-tab">September</div>
<div class="month-tab">Oktober</div>
<div class="month-tab">November</div>
<div class="month-tab">December</div>
</div>
<!-- HEADER -->
<div class="header">
<h1>Maart 2025</h1>
<div class="actions">
<input type="file"
id="upload"
multiple
accept="image/*"
hidden>
<button class="btn"
onclick="document.getElementById('upload').click()">
Upload foto's
</button>
<button class="btn"
onclick="savePlanner()">
Opslaan
</button>
</div>
</div>
<!-- HOOFDLAYOUT -->
<div class="wrapper">
<!-- KALENDER -->
<div class="calendar">
<div class="week-header">
<div>Maandag</div>
<div>Dinsdag</div>
<div>Woensdag</div>
<div>Donderdag</div>
<div>Vrijdag</div>
<div>Zaterdag</div>
<div>Zondag</div>
</div>
<div id="calendarBody"></div>
</div>
<!-- SIDEBAR -->
<div class="sidebar">
<div class="panel">
<h3>Mediabibliotheek</h3>
<div class="gallery" id="gallery"></div>
</div>
<div class="panel">
<h3>Instagram Grid</h3>
<div class="grid-preview" id="gridPreview"></div>
</div>
</div>
</div>
<script>
/* ===== KALENDER GENEREREN ===== */
const calendarBody =
document.getElementById("calendarBody");
let dag = 1;
for(let weekNr=0; weekNr<5; weekNr++){
let week =
document.createElement("div");
week.className = "week";
for(let i=0; i<7; i++){
let day =
document.createElement("div");
day.className = "day";
day.innerHTML = `
<div class="day-number">${dag}</div>
<div class="dropzone">
Sleep foto hierheen
</div>
<textarea
class="caption"
placeholder="Caption schrijven...">
</textarea>
`;
let dropzone =
day.querySelector(".dropzone");
dropzone.addEventListener(
"dragover",
e => e.preventDefault()
);
dropzone.addEventListener(
"drop",
function(e){
e.preventDefault();
const image =
e.dataTransfer.getData("text");
this.innerHTML =
`<img src="${image}">`;
updateGrid();
});
week.appendChild(day);
dag++;
}
calendarBody.appendChild(week);
}
/* ===== FOTO'S UPLOADEN ===== */
document
.getElementById("upload")
.addEventListener("change", function(e){
const gallery =
document.getElementById("gallery");
[...e.target.files].forEach(file=>{
const reader =
new FileReader();
reader.onload = function(ev){
const img =
document.createElement("img");
img.src = ev.target.result;
img.draggable = true;
img.addEventListener(
"dragstart",
function(event){
event.dataTransfer
.setData(
"text",
img.src
);
});
gallery.appendChild(img);
};
reader.readAsDataURL(file);
});
});
/* ===== INSTAGRAM GRID ===== */
function updateGrid(){
const preview =
document.getElementById(
"gridPreview"
);
preview.innerHTML = "";
document
.querySelectorAll(
".dropzone img"
)
.forEach(img=>{
let clone =
document.createElement("img");
clone.src = img.src;
preview.appendChild(clone);
});
}
/* ===== OPSLAAN ===== */
function savePlanner(){
let planning = [];
document
.querySelectorAll(".day")
.forEach((day,index)=>{
planning.push({
dag:index + 1,
caption:
day.querySelector(
".caption"
).value
});
});
localStorage.setItem(
"instagramPlanner",
JSON.stringify(planning)
);
alert(
"Planning opgeslagen!"
);
}
</script>
</body>
</html>