mougnibas/projet-clicodrome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

alerte qui change + comic sans MS

Browse source
This commit is contained in:
thaaoblues 2024-12-15 20:55:30 +01:00
parent 1184764f7a
commit 51368fe0a8
17 changed files with 415 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
css/alerte.css
View file

@ -1,65 +1,56 @@
/* styles.css */
/*
* @file css/alerte.css
* @description
* @author mougnibas <mougnibas@insa-toulouse.fr>
* @createTime 2024-11-29 10:35:07
* @lastModified 2024-12-15 18:53:32
* Copyright ©Théo Mougnibas All rights reserved
*/
/* Modal styles */
/* Le conteneur de l'alerte, va couvrir tout l'écran*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Fixed in place */
z-index: 1; /* On top of everything */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0, 0, 0, 0.4); /* Black background with transparency */
}
display: none; /* on la cache par défaut */
position: fixed;
z-index: 1; /* BAM ! AU DESSUS DE TOUT */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* On floute le derrière */
}
/* Modal content box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* Center the modal */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Width of the modal */
max-width: 400px;
text-align: center;
}
/* Contenu de l'alerte */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* on le centre */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
text-align: center;
}
/* Close button */
.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Button inside modal */
.modal.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.modal:hover {
background-color: #45a049;
}
/* Styling for the main button */
.modal.button.show-alert-btn {
padding: 10px 20px;
background-color: #008CBA;
color: white;
border: none;
cursor: pointer;
}
.modal.button.show-alert-btn:hover {
background-color: #007b9e;
}
/* Bouton pour fermer l'alerte */
.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Bouton OK */
.modal.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

32
css/alerte/a1.css Normal file
View file

@ -0,0 +1,32 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ccc; /* Gris uni */
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 10px;
border: 2px solid black; /* Bordures noires bien visibles */
width: 40vw;
text-align: left; /* Alignement à gauche */
font-family: Arial, sans-serif; /* Typo basique */
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
padding: 5px 10px;
background-color: #008CBA; /* Bleu très simple */
color: white;
}

39
css/alerte/a2.css Normal file
View file

@ -0,0 +1,39 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ccc; /* Gris uni */
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 10px;
border: 2px solid black; /* Bordures noires bien visibles */
width: 40vw;
text-align: left; /* Alignement à gauche */
font-family: Arial, sans-serif; /* Typo basique */
border-radius: 5px; /* Bordures légèrement arrondies */
border: 1px solid gray;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
padding: 5px 10px;
background-color: #008CBA; /* Bleu très simple */
color: white;
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

39
css/alerte/a3.css Normal file
View file

@ -0,0 +1,39 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('background.jpg') repeat; /* Texture kitsch */
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 10px;
width: 40vw;
text-align: left; /* Alignement à gauche */
border-radius: 5px; /* Bordures légèrement arrondies */
border: 1px solid gray;
font-family: "Comic Sans MS", cursive; /* Typo iconique des années 2000 */
background-color: pink; /* Couleurs flashy */
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Ombres portées pour effet "pop" */
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
padding: 5px 10px;
background-color: #ff69b4; /* Rose bonbon */
font-weight: bold;}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

44
css/alerte/a4.css Normal file
View file

@ -0,0 +1,44 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('../../img/tecktonik.jpeg') repeat; /* Texture kitsch */
}
@font-face {
font-family: "Comic Sans MS";
src: url("../font/comic-sans.woff") format("woff");
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
text-align: left; /* Alignement à gauche */
font-family:"Comic Sans MS"; /* Typo iconique des années 2000 */
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* Ombres portées pour effet "pop" */
background: linear-gradient(to bottom, #ffffff, #e0e0e0); /* Dégradé élégant */
border: none;
border-radius: 10px;
color:purple;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
padding: 5px 10px;
background-color: #ff69b4; /* Rose bonbon */
font-weight: bold;
border-radius: 0px !important;
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

37
css/alerte/a5.css Normal file
View file

@ -0,0 +1,37 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
text-align: left; /* Alignement à gauche */
background-color: white;
border: 2px solid #4caf50; /* Vert plat */
box-shadow: none;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
background-color: #4caf50;
color: white;
border-radius: 3px;
border: none;
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

41
css/alerte/a6.css Normal file
View file

@ -0,0 +1,41 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
background-color: white;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombres douces */
border-radius: 4px;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
background-color: #4caf50;
color: white;
border-radius: 3px;
border: none;
transition: background-color 0.3s ease;
}
.modal.button:hover {
background-color: #45a049; /* Vert plus sombre au survol */
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

41
css/alerte/a7.css Normal file
View file

@ -0,0 +1,41 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombres douces */
background-color: #1e1e1e; /* Fond sombre */
color: #ffffff;
border: 1px solid #444444;
border-radius: 4px;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
border-radius: 3px;
border: none;
background-color: #bb86fc; /* Couleur violet pastel */
color: #000;
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

40
css/alerte/a8.css Normal file
View file

@ -0,0 +1,40 @@
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
}
.modal-content {
margin: 15% auto;
padding: 10px;
width: 40vw;
background-color: #ffdb00; /* Jaune vif */
color: #000;
border: 4px solid #000; /* Bordures audacieuses */
font-family: "Arial Black", sans-serif;
}
.close-btn {
color: black;
font-size: 18px;
}
.modal.button {
border-radius: 3px;
border: none;
background-color: #e63946; /* Rouge frappant */
font-size: 18px;
}
.close-btn:hover,
.close-btn:focus {
color: red; /* Rouge pour attirer l’attention */
}

33
css/alerte/a9.css Normal file
View file

@ -0,0 +1,33 @@
.modal {
background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */
backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */
}
.modal-content {
background: radial-gradient(circle, #222, #000);
color: #fff;
border-radius: 20px;
border: none;
width: 40vw;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */
transform: perspective(1000px) rotateX(5deg); /* Effet 3D */
}
.modal.button {
background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */
font-size: 20px;
border-radius: 50px;
animation: pulse 1.5s infinite; /* Animation d’impulsion */
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}

BIN
css/font/comic-sans.woff Normal file
View file

Binary file not shown.

11
css/t4.css
View file

@ -1,6 +1,13 @@
/* t4.css - HTML 3.2 */
/*
* @file css/t4.css
* @description
* @author mougnibas <mougnibas@insa-toulouse.fr>
* @createTime 2024-11-21 11:51:17
* @lastModified 2024-12-15 20:38:31
* Copyright ©Théo Mougnibas All rights reserved
*/
body {
font-family: 'Arial', sans-serif;
background-color: #ecf0f1;
color: #ddd;
margin: 0;

BIN
img/tecktonik.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

2
index.html
View file

@ -6,8 +6,8 @@
<title>Prog Web Legend</title>
<script> alert("click")</script>
<link rel="stylesheet" href="" id="link-css">
<link rel="stylesheet" href="./css/alerte.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/alerte/a1.css" id="alerte-css">
</head>
<body>

8
js/main.js
View file

@ -57,6 +57,11 @@ async function remplirMagasinTechnologies(){
// ne laisse acheter que si on a l'argent
if(score >= t.cout){
// incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
evolution_tech += 1
// on améliore le style de la page :)
t.appliquerAmeliorationStyle()
@ -71,6 +76,7 @@ async function remplirMagasinTechnologies(){
magasin_tech = {}
remplirMagasinTechnologies()
// finalement, on lui débit son compte de points tel un vendeur de voitures
score -= t.cout
const score_aff = document.getElementById("score_affichage")
@ -86,8 +92,6 @@ async function remplirMagasinTechnologies(){
boost += t.boost
}
// incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
evolution_tech += 1
}else{
// PAS ASSEZ RICHE !!!!!
ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")

1
js/technologie.js
View file

@ -7,6 +7,7 @@ class Technologie{
}
appliquerAmeliorationStyle(){
document.getElementById("alerte-css").setAttribute("href","css/alerte/a"+evolution_tech+".css")
document.getElementById("link-css").setAttribute("href","css/"+this.props.css_id)
}

2
lisezmoi.md
View file

@ -38,10 +38,8 @@ XHTML5
## TOUDOU
- rajouter dans le html des elements invisibles qui pop petit à petit et s'améliorent
- mettre des animations au premier achat d'un personnage
- mettre des animations quand le score change de milier ( feu d'artifice ?)
- vidéos
- arreter de fetch quand on instancie une classe et passer le dict en argument direct
- ne faire apparaitre les header du tableau qu'au premier clic
- faire une fonction qui en fonction de la puissance de 10 troncature le nb et met "milions", "quintilions"...
- mettre un palier où des photos aparaissent à coté de chaque collegue dans le magasin