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");
|
||||
});
|
||||
Loading…
Reference in new issue