appen-isen/projet-cal
1
0
Fork 0
mirror of https://github.com/appen-isen/projet-cal.git synced 2026-03-18 21:40:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from appen-isen/front

Browse Source 
Front
This commit is contained in:
Félix MARQUET
2024-11-28 10:08:52 +01:00
committed by GitHub
parent b7a7a0bbaa 891df625db
commit e3083961df
8 changed files with 314 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
backend/date_link.txt
View File

@@ -1,2 +1,25 @@
27-11-2024;https://vyme.fr
01-12-2024;https://vyme.fr
07-11-2024;https://vyme.fr
02-12-2024;https://vyme.fr
03-12-2024;
04-12-2024;
05-12-2024;
06-12-2024;
07-12-2024;
08-12-2024;
09-12-2024;
10-12-2024;
11-12-2024;
12-12-2024;
13-12-2024;
14-12-2024;
15-12-2024;
16-12-2024;
17-12-2024;
18-12-2024;
19-12-2024;
20-12-2024;
21-12-2024;
22-12-2024;
23-12-2024;
24-12-2024;

1
backend/go.mod
View File

@@ -13,6 +13,7 @@ require (
github.com/cloudwego/base64x v0.1.4 // indirect
github.com/cloudwego/iasm v0.2.0 // indirect
github.com/gabriel-vasile/mimetype v1.4.3 // indirect
github.com/gin-contrib/cors v1.7.2 // indirect
github.com/gin-contrib/sse v0.1.0 // indirect
github.com/go-playground/locales v0.14.1 // indirect
github.com/go-playground/universal-translator v0.18.1 // indirect

3
backend/go.sum
View File

@@ -11,6 +11,8 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/gabriel-vasile/mimetype v1.4.3 h1:in2uUcidCuFcDKtdcBxlR0rJ1+fsokWf+uqxgUFjbI0=
github.com/gabriel-vasile/mimetype v1.4.3/go.mod h1:d8uq/6HKRL6CGdk+aubisF/M5GcPfT7nKyLpA0lbSSk=
github.com/gin-contrib/cors v1.7.2 h1:oLDHxdg8W/XDoN/8zamqk/Drgt4oVZDvaV0YmvVICQw=
github.com/gin-contrib/cors v1.7.2/go.mod h1:SUJVARKgQ40dmrzgXEVxj2m7Ig1v1qIboQkPDTQ9t2E=
github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
@@ -84,6 +86,7 @@ google.golang.org/protobuf v1.34.1 h1:9ddQBjfCyZPOHPUiPxpYESBLc+T8P3E+Vo4IbKZgFW
google.golang.org/protobuf v1.34.1/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

21
backend/main.go
View File

@@ -2,6 +2,7 @@ package main
import (
"bufio"
"github.com/gin-contrib/cors"
"github.com/gin-gonic/gin"
"github.com/joho/godotenv"
"log"
@@ -52,10 +53,10 @@ func getDayAndLink(c *gin.Context) {
log.Fatalf("Error reading file: %v", err)
}
link, exists := links[date]
if !exists {
link/*, exists*/ := links[date]
/*if !exists {
link = "https://instagram.com/appen_isen"
}
}*/
c.JSON(200, LinkAndDate{Link: link, Date: date})
}
@@ -64,15 +65,23 @@ func main() {
gin.SetMode(gin.ReleaseMode)
router := gin.Default()
// Enable CORS
router.Use(cors.Default())
// Serve static files from the frontend directory
router.Static("/static", "./frontend")
router.Static("/static", "../frontend")
// API route
router.GET("/api/get_day", getDayAndLink)
// Serve the index.html file
// Serve the index.html file for all other routes
router.NoRoute(func(c *gin.Context) {
c.File("../frontend/index.html")
path := c.Request.URL.Path
if strings.HasPrefix(path, "/static/") {
c.File("../frontend" + path)
} else {
c.File("../frontend/index.html")
}
})
err := router.Run(":8080")

42
frontend/index.html
View File

@@ -2,9 +2,45 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendrier de l'Avent</title>
<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=Jim+Nightshade&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/style.css">
</head>
<body>
coucou
<div class="background-blur"></div>
<div class="background">
<h1>Calendrier de l'Avent 2024</h1>
<div class="grid">
<div class="box box-5" id="day-5">5</div>
<div class="box box-17" id="day-17">17</div>
<div class="box box-1" id="day-1">1</div>
<div class="box box-24" id="day-24">24</div>
<div class="box box-12" id="day-12">12</div>
<div class="box box-7" id="day-7">7</div>
<div class="box box-19" id="day-19">19</div>
<div class="box box-3" id="day-3">3</div>
<div class="box box-9" id="day-9">9</div>
<div class="box box-22" id="day-22">22</div>
<div class="box box-15" id="day-15">15</div>
<div class="box box-13" id="day-13">13</div>
<div class="box box-8" id="day-8">8</div>
<div class="box box-6" id="day-6">6</div>
<div class="box box-2" id="day-2">2</div>
<div class="box box-20" id="day-20">20</div>
<div class="box box-14" id="day-14">14</div>
<div class="box box-10" id="day-10">10</div>
<div class="box box-23" id="day-23">23</div>
<div class="box box-11" id="day-11">11</div>
<div class="box box-4" id="day-4">4</div>
<div class="box box-18" id="day-18">18</div>
<div class="box box-16" id="day-16">16</div>
<div class="box box-21" id="day-21">21</div>
</div>
<h2>Site réalisé par Appen pour le BDE de l’ISEN Nantes</h2>
</div>
<script src="static/script.js"></script>
</body>
</html>
</html>

BIN
frontend/static/assets/bg-winter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 809 KiB

79
frontend/static/script.js Normal file
View File

@@ -0,0 +1,79 @@
// URL de l'API
const apiUrl = "http://localhost:8080/api/get_day";
// Fonction pour récupérer les données depuis l'API
async function fetchDayData() {
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json(); // Exemple de réponse : { link: "...", date: "27-11-2024" }
return data;
} catch (error) {
console.error("Erreur lors de l'appel API :", error);
}
}
// Fonction pour initialiser les événements des boîtes
function initCalendar() {
const boxes = document.querySelectorAll(".box");
// Attacher un événement 'click' à chaque boîte
boxes.forEach(box => {
box.addEventListener("click", async () => {
const dayNumber = box.id.split("-")[1]; // Récupère le numéro de la boîte à partir de l'ID
const dayData = await fetchDayData();
if (!dayData) return; // Si l'appel API échoue, on ne fait rien
const todayDate = parseInt(dayData.date.split("-")[0], 10); // Extraire le jour de la date (ex : "27")
const link = dayData.link;
if (parseInt(dayNumber, 10) === todayDate) {
if (link)
showModal(`Voici votre lien du jour : <a href="${link}" target="_blank">${link}</a>`);
else
showModal("Ce lien n'existe pas. Si cela n'est pas normale, veuillez contacter <a href='https://instagram.com/appen_isen'>Appen sur instagram</a>.");
} else {
showModal("Ce lien n'est pas encore ou plus disponible !");
}
});
});
}
// Fonction pour afficher une modale
function showModal(message) {
// Créer la structure HTML de la modale
const modal = document.createElement("div");
modal.className = "modal";
modal.innerHTML = `
<div class="modal-content">
<span class="close">&times;</span>
<p>${message}</p>
</div>
`;
// Ajouter la modale au corps du document
document.body.appendChild(modal);
// Fermer la modale quand l'utilisateur clique sur "close"
modal.querySelector(".close").addEventListener("click", () => {
modal.remove();
});
// Fermer la modale si l'utilisateur clique à l'extérieur du contenu
modal.addEventListener("click", (event) => {
if (event.target === modal) {
modal.remove();
}
});
}
// Appel de la fonction à l'initialisation de la page
document.addEventListener("DOMContentLoaded", () => {
initCalendar();
});

153
frontend/static/style.css Normal file
View File

@@ -0,0 +1,153 @@
body {
margin: 0;
padding: 0;
font-family: 'Quicksand', sans-serif;
background: linear-gradient(to bottom, #005f73, #0a9396);
color: #fff;
}
.background {
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
flex-direction: column;
}
h1,h2 {
font-family: "Jim Nightshade", cursive;
font-weight: 400;
font-style: normal;
margin: 0;
text-align: center;
color: black;
}
h1 {
font-size: 5em;
}
.background-blur {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('assets/bg-winter.png') no-repeat center center;
background-size: cover;
filter: blur(5px);
z-index: -1;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 100px;
gap: 5px;
padding: 10px;
max-width: 700px;
width: 100%;
}
/* Style des boîtes */
.box {
background: linear-gradient(145deg, #e63946, #f4a261);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3);
border-radius: 10px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Great Vibes', cursive;
font-size: 20px;
font-weight: bold;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
/* Animation au survol */
.box:hover {
transform: scale(1.05);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.4);
cursor: pointer;
}
/* Dispositions variées */
.box-1 { grid-column: 1 / span 1; grid-row: 1 / span 1; }
.box-2 { grid-column: 2 / span 1; grid-row: 1 / span 2; }
.box-3 { grid-column: 3 / span 2; grid-row: 1 / span 1; }
.box-4 { grid-column: 5 / span 2; grid-row: 1 / span 1; }
.box-5 { grid-column: 1 / span 1; grid-row: 2 / span 1; }
.box-6 { grid-column: 4 / span 1; grid-row: 2 / span 1; }
.box-7 { grid-column: 6 / span 1; grid-row: 2 / span 1; }
.box-8 { grid-column: 1 / span 2; grid-row: 3 / span 1; }
.box-9 { grid-column: 3 / span 1; grid-row: 2 / span 2; }
.box-10 { grid-column: 4 / span 1; grid-row: 3 / span 2; }
.box-11 { grid-column: 5 / span 1; grid-row: 2 / span 2; }
.box-12 { grid-column: 6 / span 1; grid-row: 3 / span 2; }
.box-13 { grid-column: 1 / span 1; grid-row: 4 / span 1; }
.box-14 { grid-column: 2 / span 2; grid-row: 4 / span 1; }
.box-15 { grid-column: 5 / span 1; grid-row: 4 / span 1; }
.box-16 { grid-column: 1 / span 2; grid-row: 5 / span 1; }
.box-17 { grid-column: 3 / span 1; grid-row: 5 / span 1; }
.box-18 { grid-column: 4 / span 1; grid-row: 5 / span 1; }
.box-19 { grid-column: 5 / span 2; grid-row: 5 / span 1; }
.box-20 { grid-column: 1 / span 1; grid-row: 6 / span 1; }
.box-21 { grid-column: 2 / span 1; grid-row: 6 / span 1; }
.box-22 { grid-column: 3 / span 2; grid-row: 6 / span 1; }
.box-23 { grid-column: 5 / span 1; grid-row: 6 / span 1; }
.box-24 { grid-column: 6 / span 1; grid-row: 6 / span 1; }
/* Styles pour la modale */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
position: relative;
width: 80%;
max-width: 400px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.modal-content .close {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5rem;
cursor: pointer;
}
.modal-content h2 {
margin: 0 0 10px;
font-size: 1.5rem;
color: #333;
}
.modal-content p {
font-size: 1rem;
color: #555;
}
.modal-content a {
color: #007bff;
text-decoration: none;
font-weight: bold;
}