ORGANISATION-KA-INTERNATIONALE/gong.gp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change modal and card to dark theme

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2024-03-18 18:08:29 +01:00
parent ed720f20e5
commit a9a0856822
2 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+30 -30
View File
@@ -50,7 +50,7 @@
<div class="columns is-multiline p-3"> <div class="columns is-multiline p-3">
{{#data}} {{#data}}
<div class="column is-one-third"> <div class="column is-one-third">
<div class="card" onclick="openModalFromTemplate()" <div class="card has-background-black-ter has-text-light" onclick="openModalFromTemplate()"
hx-target=".modal-request" hx-target=".modal-request"
hx-get="http://localhost:1337/api/articles/{{id}}?populate=couverture,fichiers"> hx-get="http://localhost:1337/api/articles/{{id}}?populate=couverture,fichiers">
<div class="card-image"> <div class="card-image">
@@ -60,7 +60,7 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="content"> <div class="content">
<h2 class="title">{{attributes.titre}}</h2> <h2 class="title has-text-light">{{attributes.titre}}</h2>
<p class="is-italic">{{{attributes.chapeau}}}</p> <p class="is-italic">{{{attributes.chapeau}}}</p>
</div> </div>
</div> </div>
@@ -79,11 +79,11 @@
<div id="modal-charte" class="modal"> <div id="modal-charte" class="modal">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head has-background-dark">
<p class="modal-card-title has-text-centered">LA CHARTE DU GONG <br> Juin 1963</p> <p class="modal-card-title has-text-centered has-text-light">LA CHARTE DU GONG <br> Juin 1963</p>
<button class="delete" aria-label="close"></button> <button class="delete" aria-label="close"></button>
</header> </header>
<section class="modal-card-body has-text-justified"> <section class="modal-card-body has-text-justified has-background-dark has-text-light">
<p> <p>
Ces dernières années écoulées ont vu l'effondrement quasi général du système colonial dans le monde. Ces dernières années écoulées ont vu l'effondrement quasi général du système colonial dans le monde.
Avec l'accession de l'Algérie à l'indépendance, après la libération des pays de l'Afrique Noire, Avec l'accession de l'Algérie à l'indépendance, après la libération des pays de l'Afrique Noire,
@@ -155,7 +155,7 @@
</li> </li>
</ul> </ul>
</p> </p>
<h3 class="title is-5 mt-5">1. LE DROIT DU PEUPLE GUADELOUPEEN A DISPOSER DE LUI-MÊME.</h3> <h3 class="title is-5 mt-5 has-text-light">1. LE DROIT DU PEUPLE GUADELOUPEEN A DISPOSER DE LUI-MÊME.</h3>
<p> <p>
Le droit à l’autodétermination est un droit inaliénable et imprescriptible reconnu à tous les peuples et expressément notifié par la Charte des Nations unies. Le droit à l’autodétermination est un droit inaliénable et imprescriptible reconnu à tous les peuples et expressément notifié par la Charte des Nations unies.
Les Guadeloupéens constituent un peuple majeur différent du peuple français. Communauté stable d'hommes avec un territoire propre, une histoire propre, une culture, Les Guadeloupéens constituent un peuple majeur différent du peuple français. Communauté stable d'hommes avec un territoire propre, une histoire propre, une culture,
@@ -169,7 +169,7 @@
<p> <p>
II en résulte que : II en résulte que :
</p> </p>
<h3 class="title is-5 mt-5">2. LA GUADELOUPE A LE DROIT A LA PLEINE SOUVERAINETE NATIONALE</h3> <h3 class="title is-5 mt-5 has-text-light">2. LA GUADELOUPE A LE DROIT A LA PLEINE SOUVERAINETE NATIONALE</h3>
<p> <p>
C'est un principe constant sur lequel on ne saurait transiger quand bien même le peuple guadeloupéen C'est un principe constant sur lequel on ne saurait transiger quand bien même le peuple guadeloupéen
consentirait à hiérarchiser les étapes par lesquelles inéluctablement il atteindrait son objectif final. consentirait à hiérarchiser les étapes par lesquelles inéluctablement il atteindrait son objectif final.
@@ -182,7 +182,7 @@
La lutte du peuple guadeloupéen pour le triomphe de ses aspirations est par conséquent une lutte à caractère national La lutte du peuple guadeloupéen pour le triomphe de ses aspirations est par conséquent une lutte à caractère national
pour là raison même que ces aspirations sont le reflet d’un désir encore plus ou moins conscient de libération du joug oppresseur. pour là raison même que ces aspirations sont le reflet d’un désir encore plus ou moins conscient de libération du joug oppresseur.
</p> </p>
<h3 class="title is-5 mt-5">3. LA LUTTE POUR CE DROIT EST UNE LUTTE JUSTE.</h3> <h3 class="title is-5 mt-5 has-text-light">3. LA LUTTE POUR CE DROIT EST UNE LUTTE JUSTE.</h3>
<p> <p>
Elle s'inscrit dans le grand courant de décolonisation qui constitue l'événement historique fondamental de notre époque. Elle s'inscrit dans le grand courant de décolonisation qui constitue l'événement historique fondamental de notre époque.
</p> </p>
@@ -244,7 +244,7 @@
</li> </li>
</ul> </ul>
</p> </p>
<h3 class="title is-5 mt-5">4. NÉCESSITÉ D'UNE LUTTE RÉVOLUTIONNAIRE</h3> <h3 class="title is-5 mt-5 has-text-light">4. NÉCESSITÉ D'UNE LUTTE RÉVOLUTIONNAIRE</h3>
<p> <p>
La revendication du peuple guadeloupéen est une revendication nationale. La revendication du peuple guadeloupéen est une revendication nationale.
Elle vise avant tout à transformer l'état de choses existant dans ce qu'il a de plus fondamental et de plus essentiel. Elle vise avant tout à transformer l'état de choses existant dans ce qu'il a de plus fondamental et de plus essentiel.
@@ -257,7 +257,7 @@
<p> <p>
C'est donc une véritable révolution qu'il faut réaliser en Guadeloupe. (...) C'est donc une véritable révolution qu'il faut réaliser en Guadeloupe. (...)
</p> </p>
<h3 class="title is-5 mt-5">6. LES OBJECTIFS DE LA RÉVOLUTION</h3> <h3 class="title is-5 mt-5 has-text-light">6. LES OBJECTIFS DE LA RÉVOLUTION</h3>
<p> <p>
Il résulte de l'analyse faite plus haut que la Révolution doit amener nécessairement la Guadeloupe à la pleine souveraineté. Il résulte de l'analyse faite plus haut que la Révolution doit amener nécessairement la Guadeloupe à la pleine souveraineté.
</p> </p>
@@ -284,7 +284,7 @@
</ul> </ul>
</p> </p>
<p> <p>
<strong>La pleine souveraineté nationale</strong> <br> <strong class="has-text-light">La pleine souveraineté nationale</strong> <br>
La lutte révolutionnaire à pour objectif de soustraire la Guadeloupe à la tutelle coloniale et à toute tutelle étrangère. La lutte révolutionnaire à pour objectif de soustraire la Guadeloupe à la tutelle coloniale et à toute tutelle étrangère.
Les Guadeloupéens veulent construire leur destin à l'exemple de tous les autres peuples et non subir un destin qu'on leur impose ; Les Guadeloupéens veulent construire leur destin à l'exemple de tous les autres peuples et non subir un destin qu'on leur impose ;
cela implique l'édification de la Guadeloupe en un état souverain dirigé par: cela implique l'édification de la Guadeloupe en un état souverain dirigé par:
@@ -303,12 +303,12 @@
Ces deux pouvoirs détenant les attributs de la souveraineté nationale. Ces deux pouvoirs détenant les attributs de la souveraineté nationale.
</p> </p>
<p class="pt-3"> <p class="pt-3">
<strong>Rapports avec la France</strong> <br> <strong class="has-text-light">Rapports avec la France</strong> <br>
La destruction des structures coloniales, -l’accession à la pleine souveraineté, signifient l'établissement de nouveaux rapports La destruction des structures coloniales, -l’accession à la pleine souveraineté, signifient l'établissement de nouveaux rapports
entre l’ancienne métropole et la Guadeloupe. Seule l'issue de la lutte déterminera le caractère de ces nouveaux rapports. entre l’ancienne métropole et la Guadeloupe. Seule l'issue de la lutte déterminera le caractère de ces nouveaux rapports.
</p> </p>
<p class="pt-3"> <p class="pt-3">
<strong>La Guadeloupe dans la Caraïbe</strong> <br> <strong class="has-text-light">La Guadeloupe dans la Caraïbe</strong> <br>
La Guadeloupe, de par sa situation même, est à vocation caraïbe. Le peuple, dans sa grande majorité, La Guadeloupe, de par sa situation même, est à vocation caraïbe. Le peuple, dans sa grande majorité,
est sensible à tout ce qui se passe dans la Caraïbe et dans l'Amérique latine ; les progrès de la révolution cubaine sont suivis avec un intérêt croissant est sensible à tout ce qui se passe dans la Caraïbe et dans l'Amérique latine ; les progrès de la révolution cubaine sont suivis avec un intérêt croissant
par les masses laborieuses. C'est la conjonction des divers colonialismes français, britannique, hollandais, espagnol et américain qui a dressé par les masses laborieuses. C'est la conjonction des divers colonialismes français, britannique, hollandais, espagnol et américain qui a dressé
@@ -371,7 +371,7 @@
de leurs intérêts et à prolonger la tutelle coloniale. de leurs intérêts et à prolonger la tutelle coloniale.
</p> </p>
<p class="pt-3"> <p class="pt-3">
<strong>Un régime démocratique et populaire</strong>. <br> <strong class="has-text-light">Un régime démocratique et populaire</strong>. <br>
La prise en main par notre peuple de ses propres affaires suppose l’orientation de la Révolution vers un régime démocratique et populaire ; La prise en main par notre peuple de ses propres affaires suppose l’orientation de la Révolution vers un régime démocratique et populaire ;
dire l'union consciente de toute les couches de la population pour la construction de la Guadeloupe dans le cadre des principes socialistes. dire l'union consciente de toute les couches de la population pour la construction de la Guadeloupe dans le cadre des principes socialistes.
</p> </p>
@@ -405,7 +405,7 @@
</li> </li>
</ul> </ul>
</p> </p>
<h3 class="title is-5 mt-5">7. LES CONDITIONS DU SUCCÈS</h3> <h3 class="title is-5 mt-5 has-text-light">7. LES CONDITIONS DU SUCCÈS</h3>
<p> <p>
Telles sont dans leurs grandes lignes les conditions de l'émancipation de notre pays. Telles sont dans leurs grandes lignes les conditions de l'émancipation de notre pays.
</p> </p>
@@ -419,13 +419,13 @@
LE G.O.N.G. - Adopté en Assemblée générale - juin 1963 LE G.O.N.G. - Adopté en Assemblée générale - juin 1963
</p> </p>
</section> </section>
<footer class="flex modal-card-foot is-justify-content-space-between"> <footer class="flex modal-card-foot is-justify-content-space-between has-background-dark has-text-light">
<button class="button">Fermer</button> <button class="button">Fermer</button>
<div> <div>
<span class="icon"> <span class="icon">
<ion-icon name="document"></ion-icon> <ion-icon name="document"></ion-icon>
</span> </span>
<a href="./assets/charte-du-gong-1963.pdf" download>Voir l'original</a> <a class="has-text-success" href="./assets/charte-du-gong-1963.pdf" download>Voir l'original</a>
</div> </div>
</footer> </footer>
</div> </div>
@@ -433,11 +433,11 @@
<div id="modal-orientation" class="modal"> <div id="modal-orientation" class="modal">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head has-background-dark">
<p class="modal-card-title has-text-centered">ORIENTATION <br> ET <br> STRATEGIE <br> DE LA LUTTE <br> REVOLUTIONNAIRE <br> DU PEUPLE <br> GUADELOUPEEN</p> <p class="modal-card-title has-text-centered has-text-light">ORIENTATION <br> ET <br> STRATEGIE <br> DE LA LUTTE <br> REVOLUTIONNAIRE <br> DU PEUPLE <br> GUADELOUPEEN</p>
<button class="delete" aria-label="close"></button> <button class="delete" aria-label="close"></button>
</header> </header>
<section class="modal-card-body has-text-justified"> <section class="modal-card-body has-text-justified has-background-dark has-text-light">
<p> <p>
Au cours de la journée d'étude du 1er mai, en présence de représentants de l'AGEC, de l'A.A.C., Au cours de la journée d'étude du 1er mai, en présence de représentants de l'AGEC, de l'A.A.C.,
le bureau provisoire a débattu des voies et moyens et du programme d'activités de l’année 1963. le bureau provisoire a débattu des voies et moyens et du programme d'activités de l’année 1963.
@@ -800,21 +800,21 @@
</li> </li>
</ul> </ul>
</p> </p>
<h3 class="title is-5 my-5 has-text-centered">«NOUS VAINCRONS»</h3> <h3 class="title is-5 my-5 has-text-centered has-text-light">«NOUS VAINCRONS»</h3>
<figure class="image is-128x128 mx-auto"> <figure class="image is-128x128 mx-auto">
<img src="./img/gong.png"> <img src="./img/gong.png">
</figure> </figure>
<p class="subtitle is-uppercase has-text-weight-bold"> <p class="subtitle is-uppercase has-text-weight-bold has-text-light">
Rangeons nous sous la bannière du G.O.N.G. pour poursuivre la lutte contre l'impérialisme, contre le colonialisme français et ses valets locaux. Rangeons nous sous la bannière du G.O.N.G. pour poursuivre la lutte contre l'impérialisme, contre le colonialisme français et ses valets locaux.
</p> </p>
</section> </section>
<footer class="flex modal-card-foot is-justify-content-space-between"> <footer class="flex modal-card-foot is-justify-content-space-between has-background-dark has-text-light">
<button class="button">Fermer</button> <button class="button">Fermer</button>
<div> <div>
<span class="icon"> <span class="icon">
<ion-icon name="document"></ion-icon> <ion-icon name="document"></ion-icon>
</span> </span>
<a href="./assets/orientation-et-strategie-de-la-lutte-revolutionnaire-du-peuple-guadeloupeen-1963.pdf" download>Voir l'original</a> <a class="has-text-success" href="./assets/orientation-et-strategie-de-la-lutte-revolutionnaire-du-peuple-guadeloupeen-1963.pdf" download>Voir l'original</a>
</div> </div>
</footer> </footer>
</div> </div>
@@ -822,26 +822,26 @@
<div id="modal-article" class="modal"> <div id="modal-article" class="modal">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head has-background-dark">
<p id="article-titre" class="modal-card-title"></p> <p id="article-titre" class="modal-card-title has-text-light"></p>
<button class="delete" aria-label="close"></button> <button class="delete" aria-label="close"></button>
</header> </header>
<section id="modal-card-render" class="modal-card-body"> <section id="modal-card-render" class="modal-card-body has-background-dark has-text-light">
<figure class="image is-3by2 mx-auto mb-3"> <figure class="image is-3by2 mx-auto mb-3">
<img id="article-couverture"> <img id="article-couverture">
</figure> </figure>
<p id="article-chapeau" class="mb-5 is-italic subtitle"></p> <p id="article-chapeau" class="mb-5 is-italic subtitle has-text-light"></p>
<p id="article-contenu"></p> <p id="article-contenu"></p>
<hr> <hr>
<div id="article-fichiers"></div> <div id="article-fichiers"></div>
</section> </section>
<section class="modal-request"></section> <section class="modal-request"></section>
<footer class="modal-card-foot"> <footer class="modal-card-foot has-background-dark">
<button class="button">Fermer</button> <button class="button">Fermer</button>
</footer> </footer>
</div> </div>
</div> </div>
<footer class="footer has-background-black has-text-white"> <footer class="footer has-background-black-ter has-text-white">
<div class="content has-text-centered"> <div class="content has-text-centered">
<q> <q>
<i> <i>
js/main.js
+2 -2
View File
@@ -96,7 +96,7 @@ document.addEventListener('htmx:afterSwap', function(event) {
articleFichiers.innerHTML = ''; articleFichiers.innerHTML = '';
articleFichiers.insertAdjacentHTML('beforeend', '<h3 class="title is-4 has-text-centered">Documents</h3>'); articleFichiers.insertAdjacentHTML('beforeend', '<h3 class="title is-4 has-text-centered has-text-light">Documents</h3>');
fichiers.forEach(fichier => { fichiers.forEach(fichier => {
articleFichiers.insertAdjacentHTML('beforeend', ` articleFichiers.insertAdjacentHTML('beforeend', `
@@ -104,7 +104,7 @@ document.addEventListener('htmx:afterSwap', function(event) {
<span class="icon"> <span class="icon">
<ion-icon name="document"></ion-icon> <ion-icon name="document"></ion-icon>
</span> </span>
<a href="http://localhost:1337${fichier.attributes.url}">${fichier.attributes.name}</a> <a class="has-text-success" href="http://localhost:1337${fichier.attributes.url}">${fichier.attributes.name}</a>
</p> </p>
`); `);
}); });