<?php
// relocates the user to the cms with the link : ...index.php?page=cms -------------------------------
if (isset($_GET["page"])) {
if ($_GET["page"] == "cms")
$page = "Pages/" . $_GET["page"] . ".php";
header("Location: " . $page);
}
// ---------------------------------------------------------------------------------------------------
// connect to the database ---------------------------------------------------------------------------
$servername = "127.0.0.1";
$username = "janya763";
$password = "vOOxhXUhWhgCPWFC";
$dbname = "janya763";
$connection = new mysqli($servername, $username, $password, $dbname);
if ($connection->connect_error) {
die("Connection failed: " . $connection->connect_error);
}
// ---------------------------------------------------------------------------------------------------
// Select all data from table into JSON --------------------------------------------------------------
$query = "SELECT * FROM data";
$result = $connection->query($query);
$json_data = null;
if ($result->num_rows > 0) {
$data = [];
while ($row = $result->fetch_assoc()) { // No need for a foreach loop here
$data[] = [
'date' => $row['date'],
'title' => json_decode($row['title'], true) ?? [], // Ensure valid JSON
'text' => json_decode($row['text'], true) ?? [],
'images' => json_decode($row['images'], true) ?? [],
'work' => (bool) $row['work'], // Convert to boolean
'music' => $row['music'] ?? "" // Ensure non-null string
];
}
$json_data = json_encode($data, JSON_PRETTY_PRINT);
}
$connection->close();
// ---------------------------------------------------------------------------------------------------
// load json and decode it ---------------------------------------------------------------------------
/*$jsonFile = 'JSON/data.json';
$jsonData = file_get_contents($jsonFile);
$data = json_decode($jsonData, true);
if ($data === null) {
die("Error decoding JSON: " . json_last_error_msg());
}
if (!isset($data['data']) || !is_array($data['data']))
die("Error: JSON data is not structured correctly.");
foreach ($data['data'] as $entry) {
$year = $entry["date"];
$is_work = $entry["work"] ? 1 : 0;
$text_count = count($entry['text']);
$image_count = count($entry['images']);
$stmt = $connection->prepare("INSERT INTO Title (year, is_work) VALUES (?, ?)");
$stmt->bind_param("si", $year, $is_work);
$stmt->execute();
$stmt->close();
// Loop over titles, texts, and images to populate Paragraph
for ($i = 0; $i < $text_count; $i++) {
$heading = $entry['title'][$i] ?? null;
$content = $entry['text'][$i] ?? null;
$image_url = isset($entry['images'][$i]) ? $entry['images'][$i] : null;
$music = isset($entry['music']) && !empty($entry['music']) ? $entry['music'] : '';
// Insert paragraph
$stmt = $connection->prepare("INSERT IGNORE INTO Paragraph (heading, content, image_url, is_music, fk_title_includes) VALUES (?, ?, ?, ?, ?) ");
$stmt->bind_param("ssssi", $heading, $content, $image_url, $music, $title_id);
$stmt->execute();
$stmt->close();
}
}
$connection->close();
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pierre Nimax Sr. - Timeline</title>
<link rel="stylesheet" href="Styles/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Parkinsans:wght@300..800&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Parkinsans:wght@300..800&display=swap"
rel="stylesheet">
<script>let informationArray = <?= $json_data ?>;</script>
</head>
<body>
<!-- Article container -->
<article id="article_container">
<!-- Add code here -->
</article>
<!-- Timeline div -->
<div class="timeline">
<!-- Container for the timeline -->
<div class="container_timeline">
<!-- SVG image -->
<svg id="svg_image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 666 666">
<!-- Path for the circle -->
<path class="cls-1"
d="M333,66c36.07,0,71.02,7.06,103.91,20.96,31.79,13.44,60.34,32.7,84.88,57.24,24.54,24.54,43.8,53.1,57.24,84.88,13.91,32.89,20.96,67.84,20.96,103.91s-7.06,71.02-20.96,103.91c-13.44,31.79-32.7,60.34-57.24,84.88-24.54,24.54-53.1,43.8-84.88,57.24-32.89,13.91-67.84,20.96-103.91,20.96s-71.02-7.06-103.91-20.96c-31.79-13.44-60.34-32.7-84.88-57.24-24.54-24.54-43.8-53.1-57.24-84.88-13.91-32.89-20.96-67.84-20.96-103.91s7.06-71.02,20.96-103.91c13.44-31.79,32.7-60.34,57.24-84.88,24.54-24.54,53.1-43.8,84.88-57.24,32.89-13.91,67.84-20.96,103.91-20.96M333,0C149.09,0,0,149.09,0,333s149.09,333,333,333,333-149.09,333-333S516.91,0,333,0h0Z" />
<path class="cls-2"
d="M449.26,513.3c-10.41,6.75-21.41,12.59-32.95,17.47-26.37,11.15-54.4,16.81-83.32,16.81s-56.95-5.66-83.32-16.81c-25.49-10.78-48.38-26.22-68.06-45.9s-35.12-42.57-45.9-68.06c-11.15-26.37-16.81-54.4-16.81-83.32s5.62-56.72,16.68-82.99l-48.64-20.86c-13.49,31.92-20.95,67.01-20.95,103.85,0,147.46,119.54,267,267,267,52.45,0,101.37-15.13,142.63-41.26l-26.37-45.94Z" />
</svg>
</div>
</div>
<!-- Text container -->
<div class="text_container">
<!-- Text for the circle -->
<p id="circletext1">Lierwen</p>
<p id="circletext2">Aarbeschten</p>
</div>
<!-- Script tag -->
<script src="Scripts/script.js"></script>
</body>
</html>