timelapse/timelapse-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

im crazy as fuck

Browse Source
This commit is contained in:
arussac
2025-03-23 21:25:33 +01:00
parent a6e565d677
commit 4222b37e77
6 changed files with 236 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
css/style.css
View File

@@ -349,3 +349,13 @@ footer {
99% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 99% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
100% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 100% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);}
} }
.form-header {
display: flex;
justify-content: right; /* Aligns items with space between them */
;
}
#close-form-button-project, #close-form-button-{
width: 35px;
}

142
css/style_menu.css
View File

@@ -1,69 +1,81 @@
#carousel-container { .project {
display: flex; width: 90%;
align-items: center; height: 40vh;
justify-content: center; box-sizing: border-box;
width: 80%; padding: 20px;
margin: auto; background-color: #f8f9fa;
overflow: hidden; text-align: center;
position: relative; border: 1px solid #ddd;
perspective: 1000px; border-radius: 10px;
} margin: 0 10px;
backface-visibility: hidden;
#carousel { }
display: flex;
transition: transform 0.5s ease; #global_title {
transform-style: preserve-3d;
}
.project {
min-width: 90%;
box-sizing: border-box;
padding: 20px;
background-color: #f8f9fa;
text-align: center;
border: 1px solid #ddd;
border-radius: 10px;
margin: 0 10px;
backface-visibility: hidden;
}
.nav-button {
background-color: #182b3f;
z-index: 15;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#prev-button {
left: 10px;
}
#next-button {
right: 10px;
}
.nav-button:hover {
background-color: #12457d;
}
.project_buttons {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#global_title {
animation: glitch 3s steps(100) infinite; animation: glitch 3s steps(100) infinite;
color: #151515; color: #151515;
font-size: 13vh; font-size: 10vh;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }
#carousel-dots {
position: sticky;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
z-index: 30;
width: 12px;
height: 12px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}
.dot.active {
background-color: #717171;
}
.container {
margin: 0 auto;
width: 250px;
height: 47vh;
position: relative;
perspective: 1000px;
}
.carousel {
width: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.item {
display: block;
position: absolute;
text-align: center;
}
.next, .prev {
position: absolute;
cursor: pointer;
background-color: transparent;
font-size: 90px;
color: white;
border: none;
bottom: 2.5em;
transition: transform 0.3s, box-shadow 0.3s;
}
.next:hover, .prev:hover {
box-shadow: 0 0 15px 0 rgba(253, 252, 252, 0.2);
transform: translateY(-4px);
}
.next { right: 2em; }
.prev { left: 2em; }

10
css/style_projet.css
View File

@@ -139,13 +139,3 @@
font-size: 2em; font-size: 2em;
} }
} }
.form-header {
display: flex;
justify-content: right; /* Aligns items with space between them */
;
}
#close-form-button-project{
width: 35px;
}

2
html/projet_detail.html
View File

@@ -21,7 +21,7 @@
<div id="form-container-project" class="form-container" style="display: none"> <div id="form-container-project" class="form-container" style="display: none">
<div class="form-content"> <div class="form-content">
<div class="form-header"> <div class="form-header">
<button id="close-form-button-project" class="default-delete-button">&times;</button> <button id="close-form-button-project" class="default-delete-button">&#x2715;</button>
</div> </div>
<h1>Formulaire</h1> <h1>Formulaire</h1>
<div id="my-form"> <div id="my-form">

21
index.html
View File

@@ -14,14 +14,16 @@
<div class="modal-content"> <div class="modal-content">
<p id="alertMessage">This is a custom alert!</p> <p id="alertMessage">This is a custom alert!</p>
<div class="modal-buttons"> <div class="modal-buttons">
<button class="default-access-button" id="cancelBtn">Cancel</button> <button class="default-delete-button" id="cancelBtn">Annuler</button>
<button class="default-access-button" id="okBtn">OK</button> <button class="default-access-button" id="okBtn">OK</button>
</div> </div>
</div> </div>
</div> </div>
<div id="form-container" class="form-container" style="display: none"> <div id="form-container" class="form-container" style="display: none">
<div class="form-content" id="place-of-form"> <div class="form-content" id="place-of-form">
<button id="close-form-button" class="default-delete-button">&times;</button> <div class="form-header">
<button id="close-form-button" class="default-delete-button">&#x2715;</button>
</div>
<h1>Formulaire</h1> <h1>Formulaire</h1>
<div id="my-form"> <div id="my-form">
<label for="name">Nom :</label> <label for="name">Nom :</label>
@@ -34,7 +36,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="section" class="container2"> <div>
<div> <div>
<button class="default-button" id="download"><span>Download App</span></button> <button class="default-button" id="download"><span>Download App</span></button>
<button class="default-button" id="show-form-button"><span>+</span></button> <button class="default-button" id="show-form-button"><span>+</span></button>
@@ -42,14 +44,15 @@
<div> <div>
<h1 id="global_title">Caméra Timelapse</h1> <h1 id="global_title">Caméra Timelapse</h1>
</div> </div>
<div id="carousel-container"> <div id="carousel-container" class="container">
<button id="prev-button" class="nav-button">&larr;</button> <div id="carousel" class="carousel">
<div id="carousel"> <!-- Projects will be dynamically inserted here -->
<!-- Projects will be dynamically inserted here -->
</div>
<button id="next-button" class="nav-button">&rarr;</button>
</div> </div>
</div>
<button id="prev-button" class="prev">⮜</button>
<button id="next-button" class="next">⮞</button>
</div> </div>
<div id="carousel-dots"></div>
<footer class="text-center mt-5 py-3"> <footer class="text-center mt-5 py-3">
<p>&copy; 2025 Timelapse. All rights reserved.</p> <p>&copy; 2025 Timelapse. All rights reserved.</p>

210
js/index.js
View File

@@ -26,13 +26,16 @@ function formatStatus(status) {
function setupCarousel(global_project_list) { function setupCarousel(global_project_list) {
const formContainer = document.getElementById('form-container'); const formContainer = document.getElementById('form-container');
const carousel = document.getElementById('carousel');
const carouselDots = document.getElementById('carousel-dots');
let currentIndex = 0;
function showForm() { function showForm() {
formContainer.style.display = 'flex'; formContainer.style.display = 'flex';
} }
function hideForm() { function hideForm() {
formContainer.style.display = 'none'; formContainer.style.display = 'none';
} }
document.getElementById('show-form-button').addEventListener('click', showForm); document.getElementById('show-form-button').addEventListener('click', showForm);
@@ -40,105 +43,164 @@ function setupCarousel(global_project_list) {
document.getElementById('submit').addEventListener('click', handleFormSubmit); document.getElementById('submit').addEventListener('click', handleFormSubmit);
async function handleFormSubmit() { async function handleFormSubmit() {
const nameProject = document.getElementById('name').value; const nameProject = document.getElementById('name').value;
const description = document.getElementById('description').value; const description = document.getElementById('description').value;
if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) { if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' + alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
'veuillez en trouver un autre'); 'veuillez en trouver un autre');
return; return;
} }
PostNewProject(nameProject, description).then(() => { PostNewProject(nameProject, description).then(() => {
location.reload(); location.reload();
}); });
} }
function checkName(Projects, name) { function checkName(Projects, name) {
let res = true; let res = true;
Projects.forEach(project => { Projects.forEach(project => {
const ProjectName = project.name; const ProjectName = project.name;
if (ProjectName === name) if (ProjectName === name)
res = false; res = false;
}); });
return res; return res;
} }
const carousel = document.getElementById('carousel');
let currentIndex = 0;
function updateCarousel() { function updateCarousel() {
const projectWidth = document.querySelector('.project').clientWidth; const projectWidth = document.querySelector('.project').clientWidth;
carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`; carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
updateDots();
}
function updateDots() {
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
} }
function showPrevProject() { function showPrevProject() {
if (currentIndex > 0) { if (currentIndex > 0) {
currentIndex--; currentIndex--;
updateCarousel(); updateCarousel();
} else { } else {
currentIndex = global_project_list.length - 1; currentIndex = global_project_list.length - 1;
updateCarousel(); updateCarousel();
} }
} }
function showNextProject() { function showNextProject() {
if (currentIndex < global_project_list.length - 1) { if (currentIndex < global_project_list.length - 1) {
currentIndex++; currentIndex++;
updateCarousel(); updateCarousel();
} else { } else {
currentIndex = 0; currentIndex = 0;
updateCarousel(); updateCarousel();
} }
} }
document.getElementById('prev-button').addEventListener('click', showPrevProject); document.getElementById('prev-button').addEventListener('click', showPrevProject);
document.getElementById('next-button').addEventListener('click', showNextProject); document.getElementById('next-button').addEventListener('click', showNextProject);
// Populate the carousel with project data // Populate the carousel with project data
global_project_list.forEach(project => { const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
const projectDiv = document.createElement('div'); const degGlobal = 360 / global_project_list.length;
projectDiv.classList.add('project');
projectDiv.innerHTML = ` var carousel_css = $(".carousel"),
<h2>Nom : ${project.name}</h2> currdeg = 0
<p>Date : ${formatDate(project.start_date)}</p>
global_project_list.forEach((project, index) => {
const projectDiv = document.createElement('div');
projectDiv.classList.add('project');
projectDiv.classList.add('item');
projectDiv.classList.add(letter[index]);
projectDiv.innerHTML = `
<h2>${project.name}</h2>
<p>${formatDate(project.start_date)}</p>
<p>Status : ${formatStatus(parseInt(project.status))}</p> <p>Status : ${formatStatus(parseInt(project.status))}</p>
<div class="project_buttons"> <div class="project_buttons">
<button class="default-access-button">détails de ${project.name}</button> <button class="default-access-button">détails de ${project.name}</button>
<button class="default-delete-button">Supprimer</button> <button class="default-delete-button">Supprimer</button>
</div> </div>
`; `;
carousel.appendChild(projectDiv); carousel.appendChild(projectDiv);
document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(250px);`;
// Add event listener for project details button // Add event listener for project details button
const detailButton = projectDiv.querySelector('.default-access-button'); const detailButton = projectDiv.querySelector('.default-access-button');
detailButton.addEventListener('click', (event) => { detailButton.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
window.location.href = `html/projet_detail.html?id=${project.id}`; window.location.href = `html/projet_detail.html?id=${project.id}`;
change_current_project(global_project_list.indexOf(project)); change_current_project(global_project_list.indexOf(project));
}); });
// Add event listener for project delete button // Add event listener for project delete button
const deleteButton = projectDiv.querySelector('.default-delete-button'); const deleteButton = projectDiv.querySelector('.default-delete-button');
deleteButton.addEventListener('click', (event) => { deleteButton.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
const projectName = project.name; const projectName = project.name;
document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`; document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
document.getElementById('customAlert').style.display = 'block'; document.getElementById('customAlert').style.display = 'block';
document.getElementById('okBtn').onclick = function() { document.getElementById('okBtn').onclick = function () {
document.getElementById('customAlert').style.display = 'none'; document.getElementById('customAlert').style.display = 'none';
// Call your delete function here // Call your delete function here
deleteProject(project.id).then(() => { deleteProject(project.id).then(() => {
location.reload(); location.reload();
});
};
document.getElementById('cancelBtn').onclick = function () {
document.getElementById('customAlert').style.display = 'none';
};
});
// Create a dot for each project
const dot = document.createElement('div');
dot.classList.add('dot');
dot.addEventListener('click', () => {
const targetDeg = index * degGlobal;
const diff = targetDeg - currdeg;
currdeg +=diff;
currdeg=-currdeg;
currentIndex = index;
carousel_css.css({
"-webkit-transform": `rotateY(${currdeg}deg)`,
"-moz-transform": `rotateY(${currdeg}deg)`,
"-o-transform": `rotateY(${currdeg}deg)`,
"transform": `rotateY(${currdeg}deg)`
}); });
}; updateDots(); // Update active dot styles
});
document.getElementById('cancelBtn').onclick = function() { carouselDots.appendChild(dot);
document.getElementById('customAlert').style.display = 'none';
};
});
}); });
// Initial update to set the correct position // Initial update to set the correct position
updateCarousel(); updateCarousel();
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
function rotate(e){
if(e.data.d=="n"){
currdeg = currdeg - degGlobal;
}
if(e.data.d=="p"){
currdeg = currdeg + degGlobal;
}
if(currdeg > 360){
currdeg = currdeg%360;
}
carousel_css.css({
"-webkit-transform": "rotateY("+currdeg+"deg)",
"-moz-transform": "rotateY("+currdeg+"deg)",
"-o-transform": "rotateY("+currdeg+"deg)",
"transform": "rotateY("+currdeg+"deg)"
});
}
} }