<!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>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Inter, Arial, sans-serif;
background:#f6f5f4;
color:#333;
}
/* ===== TABBLADEN ===== */
.month-tabs{
display:flex;
overflow-x:auto;
background:white;
border-bottom:1px solid #ddd;
}
.month-tab{
padding:18px 30px;
cursor:pointer;
border-right:1px solid #eee;
}
.month-tab.active{
background:#ede6e5;
font-weight:bold;
}
/* ===== HEADER ===== */
.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:30px;
}
.header h1{
font-size:52px;
}
.actions{
display:flex;
gap:10px;
}
.btn{
padding:12px 20px;
border:1px solid #ddd;
border-radius:10px;
background:white;
cursor:pointer;
}
/* ===== PAGINA ===== */
.wrapper{
display:grid;
grid-template-columns: 1fr 350px;
gap:20px;
padding:20px;
}
/* ===== KALENDER ===== */
.calendar{
background:white;
border-radius:12px;
overflow:hidden;
border:1px solid #ddd;
}
.week-header{
display:grid;
grid-template-columns:repeat(7,1fr);
background:#f1ebea;
}
.week-header div{
padding:15px;
text-align:center;
font-weight:600;
}
.week{
display:grid;
grid-template-columns:repeat(7,1fr);
}
.day{
min-height:280px;
border-top:1px solid #eee;
border-right:1px solid #eee;
padding:10px;
}
.day-number{
font-weight:bold;
margin-bottom:10px;
}
/* ===== FOTO DROPZONE ===== */
.dropzone{
height:140px;
border:2px dashed #d8d8d8;
border-radius:10px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
color:#888;
background:#fafafa;
overflow:hidden;
}
.dropzone img{
width:100%;
height:100%;
object-fit:cover;
}
/* ===== CAPTION ===== */
.caption{
width:100%;
min-height:70px;
margin-top:10px;
padding:10px;
border:1px solid #ddd;
border-radius:8px;
}
/* ===== SIDEBAR ===== */
.sidebar{
display:flex;
flex-direction:column;
gap:20px;
}
.panel{
background:white;
border:1px solid #ddd;
border-radius:12px;
padding:15px;
}
.panel h3{
margin-bottom:15px;
}
/* ===== MEDIABIBLIOTHEEK ===== */
.gallery{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.gallery img{
width:100%;
aspect-ratio:1;
object-fit:cover;
border-radius:8px;
cursor:grab;
}
/* ===== INSTAGRAM GRID ===== */
.grid-preview{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4px;
}
.grid-preview img{
width:100%;
aspect-ratio:1;
object-fit:cover;
}
</style>
</head>
<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>