diff --git a/css/style.css b/css/style.css index 63942fa..34427dd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,121 +1,140 @@ -main { - flex: 1 0 auto; -} - -footer { - text-align: center; - position: fixed; - bottom: 0; - width: 100%; - background-color: #f8f9fa; - padding: 10px; - border-top: 1px solid #e7e7e7; -} - -.row { - margin-top: 20px; - display: flex; - justify-content: space-between; -} - -.col-md-6 { - flex: 0 0 50%; - max-width: 50%; -} - -.col-md-12 { - flex: 0 0 100%; - max-width: 100%; -} - -.hiddenTable { - max-height: 400px; /* Adjust this value as needed */ - overflow-y: hidden; -} - -.full-view { - max-height: none; - overflow-y: visible; -} - -.sticky-header thead { - position: sticky; - top: 0; - z-index: 1; - background-color: #fff; -} - -#addVideoHandler { - display: flex; - align-items: center; -} - -#show-form-button { - margin-left: 20px; -} - -.form-container { - z-index: 25; - display: none; - position: fixed; +body::before { + content: ""; + position: fixed; /* Use fixed positioning to keep the image in place */ top: 0; left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-image: url("../image/camera-image"); + background-position: center; + background-size: cover; + filter: blur(1px) brightness(0.3); + z-index: -100; /* Ensure the background image stays behind other content */ +} + +.container { + max-width: 1140px; + margin: auto; + padding: 15px; +} + +.mt-5 { + margin-top: 5rem; +} + +.mb-4 { + margin-bottom: 4rem; +} + +.text-center { + text-align: center; +} + +.modal, +.form-container { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; } +.modal-content, +.form-content { + background-color: #1e1e1e; + padding: 20px; + border-radius: 8px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + width: 80%; + max-width: 600px; + margin: auto; + color: #e0e0e0; +} + .form-content { - background-color: #fff; padding: 30px; border-radius: 12px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); text-align: left; display: flex; flex-direction: column; - width: 90%; - max-width: 600px; - max-height: 90vh; /* Adjust the max-height as needed */ + max-height: 90vh; overflow-y: auto; } +.modal-buttons { + text-align: center; + margin-top: 20px; +} +.default-button { + background-color: #248f99; + z-index: 15; + color: white; + border: none; + padding: 10px; + cursor: pointer; + border-radius: 5px; + font-size: 18px; + margin-bottom: 15px; + white-space: nowrap; + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ +} + +.default-button:hover { + transform: translateY(-4px); /* Lift the button more on hover */ + box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */ +} + +.default-button:active { + transform: translateY(0); /* Remove lift on click */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */ +} + +.buttons-container { + display: flex; + gap: 10px; /* Space between buttons */ + margin-bottom: 20px; +} + .form-content h1 { - margin: 0; margin-bottom: 20px; font-size: 1.5rem; - color: #333; + color: #f0f0f0; } .form-content label { margin-bottom: 10px; font-weight: bold; - color: #555; + color: #cccccc; } .form-content input, -.form-content select, -.form-content .duration-input, -.form-content .fraction-input { +.form-content select { margin-bottom: 20px; padding: 12px; font-size: 1rem; - border: 1px solid #ccc; + border: 1px solid #555; border-radius: 4px; width: 100%; box-sizing: border-box; + background-color: #333; + color: #e0e0e0; } -.form-content .duration-input, -.form-content .fraction-input { +.duration-input, +.fraction-input { display: flex; align-items: center; justify-content: center; } -.form-content .duration-input button, -.form-content .fraction-input button { +.duration-input button, +.fraction-input button { width: 40px; height: 40px; margin: 0 10px; @@ -127,149 +146,101 @@ footer { transition: background-color 0.3s; } -.form-content .duration-input button:hover, -.form-content .fraction-input button:hover { +.duration-input button:hover, +.fraction-input button:hover { background-color: #0056b3; } -.form-content .duration-input input { +.duration-input input { width: 60px; text-align: center; } -.form-content #submit { - margin-top: 20px; - padding: 12px; - font-size: 1rem; - width: 100%; - background-color: #007bff; - color: #fff; - border: none; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s; -} - -.form-content #submit:hover{ - background-color: #0056b3; -} - -#number-board { - display: grid; - gap: 10px; - justify-content: center; - max-height: 40vh; /* Adjust the max-height as needed */ - overflow-y: auto; -} - -.number-button { - padding: 10px; - font-size: 1rem; - background-color: #f0f0f0; - border: 1px solid #ccc; - cursor: pointer; - transition: background-color 0.3s; - margin: 5px; - border-radius: 4px; -} - -.number-button.highlight { - background-color: red; - color: #fff; -} - -#numerator, #denominator { - width: 30%; - text-align: center; -} - -.close-button { - position: absolute; - top: 10px; - right: 10px; - width: 30px; - height: 30px; - background-color: red; - color: white; - border: none; - border-radius: 5px; - font-size: 1.5rem; - cursor: pointer; +.frequency-control { display: flex; - justify-content: center; align-items: center; - z-index: 30; -} - -.close-button:hover { - background-color: darkred; -} -footer{ - margin-top: 15px; -} -#video-container{ - margin-bottom: 15px; -} -.modal { - display: none; - position: fixed; - z-index: 1; - left: 0; - top: 0; - background-color: rgba(0, 0, 0, 0.6); /* Darker background */ -} - -.modal-content { - background-color: #fff; - padding: 20px; - border: 2px solid #ff0000; /* Red border */ - width: 40% !important; /* Fixed width for a smaller modal */ - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Add shadow for emphasis */ - border-radius: 8px; /* Rounded corners */ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); /* Center the modal */ -} - -.modal-buttons { - text-align: center; /* Center buttons */ - margin-top: 20px; -} - -.modal-buttons button { - background-color: #ff0000; /* Red buttons */ - color: white; - border: none; - padding: 10px 20px; - margin: 5px; - cursor: pointer; - border-radius: 5px; - font-size: 16px; -} - -.modal-buttons button:hover { - background-color: #cc0000; /* Darker red on hover */ -} - -#alertMessage { - color: #ff0000; /* Red text */ - font-size: 18px; - text-align: center; -} - -.buttons-container2{ - float: left; - width:20%; + margin-bottom: 20px; } .frequency-control label { margin-right: 10px; + color: #e0e0e0; } + .frequency-control input[type="number"] { width: 50px; text-align: center; + background-color: #333; + border: 1px solid #555; + color: #e0e0e0; } -.frequency-control button { - margin: 0 5px; + +.hiddenTable { + max-height: 65vh; + overflow-y: hidden; +} + +.full-view { + max-height: none; + overflow-y: visible; +} + +footer { + text-align: center; + position: fixed; + bottom: 0; + width: 100%; + background-color: #1e1e1e; + padding: 1.5vh; + border-top: 1px solid #333; + color: #e0e0e0; +} + +#metric_viewer { + background-color: rgb(227, 216, 216); +} + +.default-access-button { + background-color: #182b3f; + z-index: 15; + color: white; + border: 1px solid yellow; + padding: 10px; + cursor: pointer; + border-radius: 5px; + font-size: 18px; + margin-bottom: 15px; + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ +} + +.default-access-button:hover { + transform: translateY(-4px); /* Lift the button more on hover */ + box-shadow: 0 6px 8px rgba(0, 0, 0, 0.8); /* Increase shadow on hover */ +} + +.default-access-button:active { + transform: translateY(0); /* Remove lift on click */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */ +} + +.default-delete-button { + background-color: #7e2416; + z-index: 15; + color: white; + border: none; + padding: 10px; + cursor: pointer; + border-radius: 5px; + font-size: 18px; + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ +} + +.default-delete-button:hover { + transform: translateY(-4px); /* Lift the button more on hover */ + box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */ +} + +.default-delete-button:active { + transform: translateY(0); /* Remove lift on click */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */ } diff --git a/css/style_menu.css b/css/style_menu.css new file mode 100644 index 0000000..6379f71 --- /dev/null +++ b/css/style_menu.css @@ -0,0 +1,63 @@ +#carousel-container { + display: flex; + align-items: center; + justify-content: center; + width: 80%; + margin: auto; + overflow: hidden; + position: relative; + perspective: 1000px; + } + + #carousel { + display: flex; + transition: transform 0.5s ease; + 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; + } + + \ No newline at end of file diff --git a/css/style_project.less b/css/style_project.less new file mode 100644 index 0000000..c3f0371 --- /dev/null +++ b/css/style_project.less @@ -0,0 +1,47 @@ +@bggradient: linear-gradient(to right top, #ffffff, #f5f4f5, #ebeaeb, #e2dfe0, #d9d5d5); +@ball: #f57724; +@text: #414141; + + +#name_project { + position: absolute; + font-size: 40px; + display: inline-block; + white-space: nowrap; + font-weight: bold; + overflow: hidden; + top: 50px; + left: 115px; + color: darken(@text, 10%); + animation: textreveal 4s infinite alternate; + } + + #ball { + position: absolute; + top: 27.5px; + left: 50px; + height: 98px; + width: 100px; + white-space: nowrap; + overflow: hidden; + background-color: @ball; + border-radius: 50%; + animation: ballmove 4s infinite alternate; + z-index: 1; + box-shadow: 0px 3px 15px rgba(0,0,0,0.3); + } + + @keyframes ballmove { + 0%{transform: translate(0px, 8.5px) scale(0.1);} + 25%{transform: translateX(127.5px) scale(0.5);} + 50%{transform: translateX(255px) scale(0.1);} + 75%{transform: translateX(127.5px) scale(0.5);} + 100%{transform: translate(0px, 8.5px) scale(0.1);} + } + + @keyframes textreveal { + 0% {width: 0;} + 10% {width: 0;} + 50% {width: 240px;} + 100% {width: 0;} +} \ No newline at end of file diff --git a/css/style_projet.css b/css/style_projet.css new file mode 100644 index 0000000..ceb3edc --- /dev/null +++ b/css/style_projet.css @@ -0,0 +1,246 @@ +.nexter { + float: left; + display: inline; + width: 49%; + margin-bottom: 10vh; +} + +.picture_placeHolder { + width: 100%; +} + +.video { + width: 100%; +} + +.video_placeHolder { + width: 100%; + margin-top: 10px; +} + +.box { + display: inline-block; + height: 45px; +} + +.box select { + background-color: #248f99; + color: white; + padding: 10px; + width: 250px; + border: none; + font-size: 18px; + box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); + -webkit-appearance: button; + appearance: button; + outline: none; + border-radius: 5px; + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */ +} + +.box:hover select { + transform: translateY(-4px); /* Lift the button more on hover */ + box-shadow: 0 6px 8px rgba(0, 0, 0, 1); /* Increase shadow on hover */ +} + +.box:active select { + transform: translateY(0); /* Remove lift on click */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */ +} + +.box select option { + padding: 30px; +} + +.arrow-icon { + z-index: 100; + height: 3em; + width: 2.8em; + padding: 0.5em; + margin: 1em auto; + cursor: pointer; + padding-top: 1em; + border-radius: 4px; + bottom: 45px; /* Adjust as needed to position below the table */ + left: 72%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + position: fixed; + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure smooth transition */ +} + +.arrow-icon:hover { + transform: translateX(-50%) translateY(-10px); /* Move the arrow up on hover */ +} + +.arrow-icon:active { + transform: translateX(-50%) translateY(0); /* Remove lift on click */ +} + +.left-bar, .right-bar { + z-index: 100; + position: absolute; + background-color: transparent; + width: 40px; + height: 10px; + display: block; + border-radius: 2px; +} + +.left-bar { + top: 50%; + left: 0; + transform: rotate(35deg); +} + +.right-bar { + top: 50%; + left: 26px; + transform: rotate(-35deg); +} + +.left-bar:after, .right-bar:after { + content: ""; + background-color: white; + width: 40px; + height: 10px; + display: block; + border-radius: 6px 10px 10px 6px; + transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8); + z-index: -1; +} + +.right-bar:after { + border-radius: 10px 6px 6px 10px; +} + +.open .left-bar:after { + transform-origin: center center; + transform: rotate(-70deg); +} + +.open .right-bar:after { + transform-origin: center center; + transform: rotate(70deg); +} + +#name_project { + animation: glitch 3s steps(100) infinite; + color: #151515; + font-size: 6em; + text-align: center; + text-transform: uppercase; +} + +@media (min-width: 480px) { + #name_project { + font-size: 2em; + } +} + +@keyframes glitch { + 0% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 1% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 2% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 3% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 4% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 5% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 6% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 7% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 8% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 9% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 10% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 11% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} + 12% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} + 13% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} + 14% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} + 15% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} + 16% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 17% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 18% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 19% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 20% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 21% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 22% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 23% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 24% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 25% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 26% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);} + 27% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);} + 28% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 29% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 30% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 31% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 32% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 33% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 34% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 35% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} + 36% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} + 37% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} + 38% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 39% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 40% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 41% { text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime; filter: blur(0);} + 42% { text-shadow: 0 0 0 #0c33f5, 0 0 0 lime; filter: blur(0);} + 43% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} + 44% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} + 45% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} + 46% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} + 47% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} + 48% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 49% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 50% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 51% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 52% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 53% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 54% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 55% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0.5px);} + 56% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} + 57% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} + 58% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 59% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 60% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 61% { text-shadow: 30px 0 0 red, -30px 0 0 lime; filter: blur(0);} + 62% { text-shadow: 0 0 0 red, 0 0 0 lime; filter: blur(0);} + 63% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} + 64% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} + 65% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} + 66% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0.5px);} + 67% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} + 68% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 69% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 70% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 71% { text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5; filter: blur(0);} + 72% { text-shadow: 0 0 0 red, 0 0 0 #0c33f5; filter: blur(0);} + 73% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 74% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 75% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 76% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} + 77% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 78% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 79% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 80% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} + 81% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} + 82% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} + 83% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} + 84% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} + 85% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} + 86% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} + 87% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} + 88% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 89% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 90% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} + 91% { text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5; filter: blur(0);} + 92% { text-shadow: 0 0 0 lime, 0 0 0 #0c33f5; filter: blur(0);} + 92% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 93% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 94% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 95% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} + 96% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 97% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} + 98% { 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);} +} diff --git a/html/projet_detail.html b/html/projet_detail.html index d9d61ef..d33917f 100644 --- a/html/projet_detail.html +++ b/html/projet_detail.html @@ -1,32 +1,26 @@ - Détails - - - - + - -
-
-
-
- -
-
-
-
-

-
-
-
-
-
- -
- +
+
+
+ +
+
+
+ +
-
- -
-
Pas de vidéos pour le projet par défaut
-
-
- - - - - - - - -
+
+

+
+
+
+ +
+
+
+
+ + +
+
+
+ + + +
- -
-

© 2025 Timelapse. All rights reserved.

-
- - - - \ No newline at end of file +
+

© 2025 Timelapse. All rights reserved.

+
+ diff --git a/image/camera-image b/image/camera-image new file mode 100644 index 0000000..d32f27e Binary files /dev/null and b/image/camera-image differ diff --git a/index.html b/index.html index af00bbc..b2976ed 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,7 @@ Timelapse - - + @@ -16,14 +14,14 @@

This is a custom alert!

- - + +
-
-
- - +
+
+ +
- - - - - - - - - -
NameImagesActions
+

© 2025 Timelapse. All rights reserved.

- - + - diff --git a/js/index.js b/js/index.js index f04b80c..ab31bd0 100644 --- a/js/index.js +++ b/js/index.js @@ -1,7 +1,30 @@ -// Function to display projects in a table -function display_projects() { - // Get data from API and then generate HTML code to display the data in a table - const table = document.getElementById("table-projects"); +document.addEventListener("DOMContentLoaded", () => { + getAllProject() + .then((project_list) => { + global_project_list = project_list; + setupCarousel(global_project_list); + }) + .catch((error) => { + console.error(error); + }); +}); + +function formatStatus(status) { + switch (status) { + case 0: + return "brouillon"; + case 1: + return "en cours"; + case 2: + return "terminé"; + case 3: + return "En cours de génération"; + default: + return "inconnu"; + } +} + +function setupCarousel(global_project_list) { const formContainer = document.getElementById('form-container'); function showForm() { @@ -20,13 +43,13 @@ function display_projects() { const nameProject = document.getElementById('name').value; const description = document.getElementById('description').value; 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'); - return 0; + return; } PostNewProject(nameProject, description).then(() => { - location.reload();}) - + location.reload(); + }); } function checkName(Projects, name) { @@ -39,70 +62,83 @@ function display_projects() { return res; } - let datas = ` - Id - Name - Date - Status - Actions - Delete Project - `; - for (let i = 0; i < global_project_list.length; i++) { - datas += ` - ${global_project_list[i].id} - ${global_project_list[i].name} - ${formatDate(global_project_list[i].start_date)} - ${global_project_list[i].status} - - - `; - } - table.innerHTML = datas; + const carousel = document.getElementById('carousel'); + let currentIndex = 0; - // Select all the buttons_access with the class button_project - const buttons_access = document.getElementsByClassName("project_detail"); - const buttons_delete = document.getElementsByClassName("project_delete"); - // Add an event listener to each button - for (let i = 0; i < buttons_access.length; i++) { - buttons_access[i].addEventListener("click", (event) => { - // Send data to API and then navigate to projet_detail.html page - window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`; - }); - buttons_access[i].addEventListener("click", (event) => { - // Send data to API and then navigate to projet_detail.html page - current_project = change_current_project(i); - }); + function updateCarousel() { + const projectWidth = document.querySelector('.project').clientWidth; + carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`; } - for (let i = 0; i < buttons_delete.length; i++) { - buttons_delete[i].addEventListener("click", (event) => { - const projectName = global_project_list[i].name; + function showPrevProject() { + if (currentIndex > 0) { + currentIndex--; + updateCarousel(); + } else { + currentIndex = global_project_list.length - 1; + updateCarousel(); + } + } + + function showNextProject() { + if (currentIndex < global_project_list.length - 1) { + currentIndex++; + updateCarousel(); + } else { + currentIndex = 0; + updateCarousel(); + } + } + + document.getElementById('prev-button').addEventListener('click', showPrevProject); + document.getElementById('next-button').addEventListener('click', showNextProject); + + // Populate the carousel with project data + global_project_list.forEach(project => { + const projectDiv = document.createElement('div'); + projectDiv.classList.add('project'); + projectDiv.innerHTML = ` +

Nom : ${project.name}

+

Date : ${formatDate(project.start_date)}

+

Status : ${formatStatus(parseInt(project.status))}

+
+ + +
+ `; + carousel.appendChild(projectDiv); + + // Add event listener for project details button + const detailButton = projectDiv.querySelector('.default-access-button'); + detailButton.addEventListener('click', (event) => { + event.stopPropagation(); + window.location.href = `html/projet_detail.html?id=${project.id}`; + change_current_project(global_project_list.indexOf(project)); + }); + + // Add event listener for project delete button + const deleteButton = projectDiv.querySelector('.default-delete-button'); + deleteButton.addEventListener('click', (event) => { + event.stopPropagation(); + const projectName = project.name; + document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`; document.getElementById('customAlert').style.display = 'block'; document.getElementById('okBtn').onclick = function() { document.getElementById('customAlert').style.display = 'none'; // Call your delete function here - deleteProject(global_project_list[i].id).then(()=>{ + deleteProject(project.id).then(() => { location.reload(); - }) + }); }; document.getElementById('cancelBtn').onclick = function() { document.getElementById('customAlert').style.display = 'none'; }; }); - } -} - -getAllProject() - .then((project_list) => { - global_project_list = project_list; - // Call the next function here - display_projects(); - }) - .catch((error) => { - console.error(error); }); + + // Initial update to set the correct position + updateCarousel(); +} diff --git a/js/projet_detail.js b/js/projet_detail.js index dcf4411..9bf37c6 100644 --- a/js/projet_detail.js +++ b/js/projet_detail.js @@ -163,12 +163,6 @@ document.addEventListener("DOMContentLoaded", async () => { alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo + '\nRésolution : ' + videoResolution + '\nDurée : ' + videoDuration + ' secondes'); - }).then(()=>{ - getDataProjectVideosFromApi(projectId).then((data)=>{ - idVideo = data[data.length-1].id - console.log(idVideo) - renderVideo(idVideo) - }) }) } @@ -181,11 +175,9 @@ document.addEventListener("DOMContentLoaded", async () => { if (tableImage.classList.contains("hiddenTable")) { tableImage.classList.remove("hiddenTable"); tableImage.classList.add("full-view"); - document.getElementById("toggle-view").innerHTML = "See first images"; } else { tableImage.classList.remove("full-view"); tableImage.classList.add("hiddenTable"); - document.getElementById("toggle-view").innerHTML = "See all images"; } } @@ -230,7 +222,7 @@ function populateImageTable(DataMetrics) { let i = 0; DataMetrics.forEach((measure) => { let imageTD = document.createElement("td"); - imageTD.innerHTML = ``; + imageTD.innerHTML = ``; row.appendChild(imageTD); if ((i + 1) % 3 === 0 && i !== 0) { @@ -274,7 +266,7 @@ async function generateViewMetric(projectId) { samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]); if(currentVideoDatas[0].status != 0){ videoPlaceHolder.innerHTML=` -