generated from Templates_CodeFirst/templateHtmlCss
adding project page
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
cocaillot
5 months ago
parent
35c9f8842b
commit
9345ed9519
|
After Width: | Height: | Size: 312 KiB |
@ -0,0 +1,55 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link type="text/css" rel="stylesheet" href="style.css">
|
||||||
|
<script src="effect.js" defer></script>
|
||||||
|
<script src="project.js" defer></script> <!-- Load dynamic content -->
|
||||||
|
<title>Projet</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar">
|
||||||
|
<ul class="navbar-list">
|
||||||
|
<li><a href="index.html">Accueil</a></li>
|
||||||
|
<li><a href="cursus.html">Cursus</a></li>
|
||||||
|
<li><a href="planning.html">Planning</a></li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a href="#">Galerie</a>
|
||||||
|
<ul class="dropdown-content">
|
||||||
|
<li><a href="images.html">Images</a></li>
|
||||||
|
<li><a href="videos.html">Vidéos</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="form.html">Contact</a></li>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" id="theme-switch">
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="project-header">
|
||||||
|
<h1 id="project-title">Nom du Projet</h1>
|
||||||
|
<p id="project-subtitle" class="project-subtitle">Description courte.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="project-content">
|
||||||
|
<h2>Description</h2>
|
||||||
|
<p id="project-description">Chargement...</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="project-gallery">
|
||||||
|
<h2>Galerie</h2>
|
||||||
|
<div id="project-gallery" class="gallery"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="project-tech">
|
||||||
|
<h2>Technologies utilisées</h2>
|
||||||
|
<div id="project-tech-icons" class="tech-icons"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Pied de page</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// Get project name from URL
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const projectName = urlParams.get("name");
|
||||||
|
|
||||||
|
// Simulated "database" of projects
|
||||||
|
const projects = {
|
||||||
|
"analytics": {
|
||||||
|
title: "Projet Analytics",
|
||||||
|
subtitle: "Un projet basé sur l'analyse de données.",
|
||||||
|
description: "Ce projet se concentre sur l'analyse de données et les tableaux de bord interactifs.",
|
||||||
|
images: ["img/project/scolaire/mastermind_menu.png", "img/project/analytics2.jpg"],
|
||||||
|
technologies: ["html", "css", "js"]
|
||||||
|
},
|
||||||
|
"dashboards": {
|
||||||
|
title: "Projet Dashboards",
|
||||||
|
subtitle: "Création de tableaux de bord interactifs.",
|
||||||
|
description: "Un projet mettant en avant la visualisation des données avec des graphiques dynamiques.",
|
||||||
|
images: ["img/dashboards1.jpg", "img/dashboards2.jpg"],
|
||||||
|
technologies: ["react", "nodejs"]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get project data or fallback
|
||||||
|
const project = projects[projectName] || {
|
||||||
|
title: "Projet Inconnu",
|
||||||
|
subtitle: "Désolé, ce projet n'existe pas.",
|
||||||
|
description: "Nous n'avons pas trouvé d'informations sur ce projet.",
|
||||||
|
images: [],
|
||||||
|
technologies: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update HTML content
|
||||||
|
document.getElementById("project-title").innerText = project.title;
|
||||||
|
document.getElementById("project-subtitle").innerText = project.subtitle;
|
||||||
|
document.getElementById("project-description").innerText = project.description;
|
||||||
|
|
||||||
|
// Update gallery
|
||||||
|
const galleryContainer = document.getElementById("project-gallery");
|
||||||
|
project.images.forEach(imgSrc => {
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = imgSrc;
|
||||||
|
img.alt = "Image du projet";
|
||||||
|
galleryContainer.appendChild(img);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update technologies
|
||||||
|
// Update technologies
|
||||||
|
const techContainer = document.getElementById("project-tech-icons");
|
||||||
|
project.technologies.forEach(tech => {
|
||||||
|
const div = document.createElement("div");
|
||||||
|
div.classList.add("tech-box", `${tech}-box`); // Ensure the correct class is added
|
||||||
|
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = `icons/${tech}.png`;
|
||||||
|
img.alt = tech.toUpperCase();
|
||||||
|
|
||||||
|
const text = document.createElement("span");
|
||||||
|
text.innerText = tech.toUpperCase();
|
||||||
|
|
||||||
|
div.appendChild(img);
|
||||||
|
div.appendChild(text);
|
||||||
|
techContainer.appendChild(div);
|
||||||
|
});
|
||||||
|
// Fade-in effect when page loads
|
||||||
|
document.body.classList.remove("fade-out");
|
||||||
|
});
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue