new project - journal french : "La liberté d'expression sur les réseaux sociaux"

app/Controllers/Http/ProjectsController.ts

@@ -14,4 +14,8 @@ export default class ProjectsController {
     return view.render('projects/myNetwork/index')
   }
 
+  async journal({ view }: HttpContextContract) {
+    return view.render('projects/journal/index')
+  }
+
 }

public/assets/entrypoints.json

@@ -55,6 +55,14 @@
       "js": [
         "http://localhost:8080/assets/my-network-project.js"
       ]
+    },
+    "journal": {
+      "css": [
+        "http://localhost:8080/assets/journal.css"
+      ],
+      "js": [
+        "http://localhost:8080/assets/journal.js"
+      ]
     }
   }
 }

public/assets/manifest.json

@@ -13,5 +13,7 @@
   "assets/nups.js": "http://localhost:8080/assets/nups.js",
   "assets/my-network-project.css": "http://localhost:8080/assets/my-network-project.css",
   "assets/my-network-project.js": "http://localhost:8080/assets/my-network-project.js",
+  "assets/journal.css": "http://localhost:8080/assets/journal.css",
+  "assets/journal.js": "http://localhost:8080/assets/journal.js",
   "assets/images/landing.jpg": "http://localhost:8080/assets/images/landing.6d6841c3.jpg"
 }

resources/css/journal.css

@@ -0,0 +1,222 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+    scroll-behavior: smooth;
+}
+
+body{
+    background-color: rgb(240, 240, 240);
+}
+
+.btn {
+    color: white;
+    font-weight: bold;
+    font-size: 1em;
+    text-decoration: none;
+    text-transform: uppercase;
+    padding: 10px;
+    background-color: gray;
+    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
+    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 width="1296px" height="768px" viewBox="0 0 1296 768" enable-background="new 0 0 1296 768" xml:space="preserve"><g><polygon fill="#8694D1" points="766.6,1.2 -0.2,768 200.7,768 967.5,1.2 	"/></g><g><polygon fill="#8694D1" points="1094.8,1.2 328,768 528.9,768 1295.7,1.2 	"/></g></svg>');
+    background-size: contain;
+    background-position: -200px center;
+    background-repeat: no-repeat;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.btn:hover {
+    transform: scale(1.04);
+    background-position: -60px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.btn:active {
+    transform: scale(0.5);
+    background-position: 500px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.txt_lien{
+    width : 100%;
+    text-align: center;
+}
+
+.header{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+}
+
+.div_big_title{
+    padding: 40px;
+    text-align: center;
+}
+
+.big_title{
+    font-weight: 900;
+    color: black;
+    font-size: 40px;
+}
+
+.sous_big_title{
+    font-size: 20px;
+}
+
+.div_btn{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    position: fixed;
+}
+
+.div_btn_2{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.sous_title{
+    font-weight: 900;
+    color: black;
+    font-size: 17px;
+    text-align: center;
+    padding: 25px;
+}
+
+.corps{
+    margin: 0px 150px 0px;
+    background-color: white;
+    box-shadow: 0px 0px 10px 1px gray;
+}
+
+.inter_corps,
+.inter_corps_contact{
+    padding: 15px;
+}
+
+.def_pv1_1,
+.def_pv1_2{
+    padding: 0 0 25px;
+}
+
+.img_1,
+.img_3{
+    width : 30%;
+	border: none;
+	float: right;
+    border-radius: 25% 10% 25% 15%;
+    padding: 0 0 15px 15px;
+}
+
+.img_2{
+    width : 30%;
+	border: none;
+	float: left;
+    border-radius: 10% 25% 15% 25%;
+    padding: 0 15px 15px 0;
+}
+
+.id2_pv1,
+.id2_pv2,
+.id2_pv3,
+.id2_pv4{
+    padding: 0 0 25px;
+}
+
+.img_carte{
+    width : 100%;
+	border: none;
+    border-radius: 5% / 10%;
+}
+
+.clear{
+    clear:both
+}
+
+.inter_corps_contact{
+    margin-bottom: 30px;
+}
+
+.p_contact{
+    padding: 10px 0 10px 0;
+}
+
+form {
+	display: flex;
+	flex-direction: column;
+}
+
+label {
+	margin-bottom: 5px;
+}
+
+input[type="text"], input[type="email"], textarea {
+	margin-bottom: 10px;
+	padding: 10px;
+	border: 1px solid #ccc;
+}
+
+.footer{
+    background-color: rgb(51, 50, 58);
+    margin-top: 50px;
+}
+
+.footer2{
+    height: 100px;
+    display: flex;
+    align-items: center;
+    padding: 0 10%;
+}
+
+.sources, 
+.sources a{
+    text-decoration: none;
+    color: white;
+}
+
+.line{
+    border-bottom: 1px solid gray;
+    margin: 0 100px; 
+}
+
+.footer1{
+    width: 100%;
+    height: 100px;
+    padding-top: 40px;
+}
+
+.copyrights{
+    color: white;
+    float: left;
+    width: 40%;
+    text-align: left;
+    margin-left: 10%;
+}
+
+.conditions_generale{
+    text-decoration: none;
+    font-weight: 600;
+    color: white;
+    float: right;
+    width: 40%;
+    text-align: right;
+    margin-right: 10%;
+}
+
+.id3_pv1,
+.id3_pv2,
+.id3_pv3,
+.id3_pv4,
+.id3_pv5{
+    padding: 0 0 25px;
+}

resources/views/index.edge

@@ -110,6 +110,9 @@
       <div class="my-networks-project">
         <a href="{{ route('myNetwork') }}" target="_blank"><img src="/my-networks.jpg" alt=""></a>
       </div>
+      <div class="journal-project">
+        <a href="{{ route('journal') }}" target="_blank"><img src="/projects/journal/journal.avif" alt=""></a>
+      </div>
     </div>
   </section>
   <section id="contact">

resources/views/projects/journal/index.edge

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
+   <title>EMC</title>
+   @entryPointStyles('journal')
+</head>
+<body>
+    <section class="header">
+        <div class="div_big_title" id="id_div_big_title">
+            <h1 class="big_title">La liberté d'expression sur les réseaux sociaux</h1>
+            <h2 class="sous_big_title">Y a-t-il une plus grande liberté d'expression sur les réseaux sociaux ?</h2>
+        </div>
+        <div class="div_btn">
+            <a href="#" class="btn"><p class="txt_lien">Accueil</p></a>
+            <a href="#1" class="btn"><p class="txt_lien">Définitions</p></a>
+            <a href="#2" class="btn"><p class="txt_lien">Développement</p></a>
+            <a href="#3" class="btn"><p class="txt_lien">Exemples</p></a>
+            <a href="#carte" class="btn"><p class="txt_lien">Carte</p></a>
+            <a href="#contact" class="btn"><p class="txt_lien">Nous contacter</p></a>
+        </div>
+        <div class="div_btn_2">
+            <a href="#" class="btn"><p class="txt_lien">Accueil</p></a>
+            <a href="#1" class="btn"><p class="txt_lien">Définitions</p></a>
+            <a href="#2" class="btn"><p class="txt_lien">Développement</p></a>
+            <a href="#3" class="btn"><p class="txt_lien">Exemples</p></a>
+            <a href="#carte" class="btn"><p class="txt_lien">Carte</p></a>
+            <a href="#contact" class="btn"><p class="txt_lien">Nous contacter</p></a>
+        </div>
+    </section>
+    <script>
+      $(function() {
+         $('.div_btn').hide();
+      });
+
+      $(window).scroll(function(){  
+         posScroll = $(document).scrollTop();  
+         if(posScroll >=id_div_big_title.clientHeight)  
+            $('.div_btn').show();  
+         else  
+            $('.div_btn').hide();  
+      }); 
+    </script>
+    <section class="sous_title" id="1">
+        <h2>Quelques définitions qui vont vous servir !</h2>
+    </section>
+    <section class="corps">
+        <div class="inter_corps">
+            <img src="/projects/journal/app téléphone.jpg" alt="Image d'application sur un téléphone" class="img_1">
+            <div class="definition">
+                <div class="def_pv1_1">
+                    <p><b> - <span style="text-decoration: underline;">Réseaux sociaux</span> : </b> Un réseau social est un environnement numérique qui peut être un site et/ou une application qui permet de communiquer, partager, rencontrer des gens... Tout ça sous le respect des CGU.</p>
+                </div>
+                <div class="def_pv1_2">
+                    <b> - <span style="text-decoration: underline;">CGU</span> : </b> Conditions générales d'utilisation, elles servent à définir les règles du réseau. Actuellement il n'existe aucune législation spécifique aux réseaux sociaux, cependant ils sont considérés comme des espaces publics.</p>
+                </div>
+                <div class="def_pv1_3">
+                    <b> - <span style="text-decoration: underline;">Liberté d'expression</span> : </b> Tout citoyen a le droit de s'exprimer librement de la manière qu'il souhaite tant qu'il ne néglige aucune loi écrite dans la constitution.</p>
+                </div>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </section>
+
+    <section class="sous_title" id="2">
+        <h2>Développement !</h2>
+    </section>
+    <section class="corps">
+        <div class="inter_corps">
+            <img src="/projects/journal/img développement réseaux.png" alt="Image de développement sur les réseaux" class="img_2">
+            <div class="paver">
+                <p class="id2_pv1">La liberté d'expression est un droit fondamental qui permet à chaque individu d'exprimer ses opinions, ses idées et ses pensées sans être censuré ou réprimandé. Avec l'avènement des réseaux sociaux, il est devenu plus facile que jamais pour les gens de s'exprimer publiquement et de partager leurs points de vue avec le monde entier.</p>
+                <p class="id2_pv2">En théorie, les réseaux sociaux offrent une plus grande liberté d'expression que les canaux de communication traditionnels tels que les journaux, les magazines ou la télévision. Tout le monde peut créer un compte et publier du contenu, qu'il s'agisse de textes, de photos, de vidéos ou de commentaires. Les réseaux sociaux permettent également aux gens de se connecter avec des personnes partageant les mêmes idées, de former des communautés et de participer à des débats en ligne.</p>
+                <p class="id2_pv3">Cependant, cette liberté d'expression sur les réseaux sociaux n'est pas absolue. Les plateformes ont des règles de modération pour limiter les contenus abusifs ou illégaux, comme la haine, la violence, le harcèlement ou la diffamation. Ces règles sont souvent critiquées pour être opaques ou biaisées, et pour entraîner une censure injustifiée de certains contenus.</p>
+                <p class="id2_pv4">De plus, la liberté d'expression sur les réseaux sociaux peut être limitée par des facteurs externes tels que la pression sociale, les trolls, les bots et les fake news. Les gens peuvent être intimidés ou harcelés pour avoir exprimé leur opinion, ou être victimes de campagnes de désinformation visant à discréditer leurs points de vue.</p>
+                <p class="id2_pv5">En fin de compte, la liberté d'expression sur les réseaux sociaux est un sujet complexe et controversé. Bien que les réseaux sociaux offrent un espace pour l'expression libre, cette liberté peut être compromise par des règles de modération, des pressions externes et des comportements abusifs. Il est important pour les utilisateurs de prendre des précautions lorsqu'ils s'expriment en ligne et de respecter les règles de chaque plateforme, tout en défendant leur droit à exprimer leurs opinions.</p>
+            </div>
+        </div>
+    </section>
+
+    <section class="sous_title" id="3">
+        <h2>Des exemples...</h2>
+    </section>
+    <section class="corps">
+        <div class="inter_corps">
+            <img src="/projects/journal/img exemple de liberter.jpeg" alt="Image d'exemple de liberter" class="img_3">
+            <div class="paver">
+                <p class="id3_pv1"><b> - 1 : </b> Les autorités en Iran ont bloqué l'accès à Instagram et WhatsApp suite à six jours de protestations contre la mort de Mahs Amini, une jeune femme de 22 ans, arrêtée par la police des moeurs.</p>
+                <p class="id3_pv2"><b> - 2 : </b> Pendant une semaine, les internautes chinois ont pu discuter librement de sujets interdits sur le nouveau réseau social "Clubhouse" avant que la plateforme ne soit bloquée par Pékin. Les autorités chinoises ont imposé de nouvelles règles très strictes de censure sur internet. La chine censure beaucoup les réseaux sociaux en proposant une alternative de reproduction de site, cela leur permet de tout contrôler.</p>
+                <p class="id3_pv3"><b> - 3 : </b>Deux auteurs de tweets homophobes ont été condamnés par la justice pour avoir prononcé des propos haineux visant <a href="https://www.paris.fr/pages/brossat-ian-2260" target="_bank">Ian BROSSAT</a>.</p>
+                <p class="id3_pv4"><b> - 4 : </b>Une jeune femme de 19 ans a été menacée de mort sur Twitter par un homme de 20 ans. Le nom et l'addresse de la femme ont été divulgués sur Twitter, l'homme a été jugé en comparution immédiate et a écopé de 2 ans de prison avec sursis.</p>
+                <p class="id3_pv5"><b> - 5 : </b>La journaliste <a href="https://fr.wikipedia.org/wiki/Nadia_Daam" target="_bank">Nadia Daam</a> a été victime d'un "raid numérique". C'est un harcèlement réalisé via les outils numériques, visant une ou un groupe de personnes et réalisé en meute, c'est à dire impliquant de manière concertée ou non de nombreux individus. Elle a été menacée de mort et de viol sur elle et sa fille. Certains auteurs de l'attaque ont été condamnés par la justice, notamment amende et prison avec sursis.</p>
+                <p class="id3_pv6"><b> - 6 : </b>Twitter supprime le compte de <a href="https://fr.wikipedia.org/wiki/Donald_Trump" target="_bank">Donald Trump</a> pour tenter de limiter les risques d'incitation à la violence. </p>
+            </div>
+        </div>
+    </section>
+
+    <section class="sous_title" id="carte">
+        <h2>Carte</h2>
+    </section>
+    <section class="corps">
+        <div class="inter_corps">
+            <img src="/projects/journal/carte.png" alt="Image d'une carte de la liberté d'expression sur internet" class="img_carte">
+        </div>
+    </section>
+
+    <section class="sous_title" id="contact">
+        <h2>Nous contacter</h2>
+    </section>
+    <section class="corps">
+        <div class="inter_corps_contact">
+            <h2>Contact</h2>
+			<p class="p_contact">Utilisez le formulaire ci-dessous pour poser des questions ou signaler des problèmes.</p>
+			<form action="" method="post">
+				<label for="name">Nom :</label>
+				<input type="text" id="name" name="user_name" required>
+				<label for="email">Email :</label>
+				<input type="email" id="email" name="user_email" required>
+				<label for="message">Message :</label>
+				<textarea id="message" name="user_message" required></textarea>
+				<input type="submit" value="Envoyer">
+			</form>
+        </div>
+    </section>
+    <footer id="footer" class="footer">
+        <div class="footer2">
+            <span class="sources"> Sources : <a href="https://www.avocat.fr/" target="_bank">Les avocats</a>, <a href="https://www.justifit.fr/" target="_bank">Justifit</a>, <a href="https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal" target="_bank">Wikipedia</a>, <a href="https://www.maisondesjournalistes.org/" target="_bank">La maison des journalistes</a>, <a href="https://www.economie.gouv.fr/recrutement/consultant-juridique" target="_bank">Consultant juridique</a>, <a href="https://freedomhouse.org/" target="_bank">Freedom House</a>, <a href="https://www.lefigaro.fr/" target="_bank">Le Figaro</a>, <a href="https://www.sudouest.fr/" target="_bank">Sud Ouest</a>, <a href="https://www.la-croix.com/?gclid=EAIaIQobChMI7s_q9ZXP_QIVvpBoCR1nrQQLEAAYASAAEgKUxfD_BwE" target="_bank">La Croix</a>, <a href="https://www.lemonde.fr/" target="_bank">Le Monde</a>, <a href="https://www.mediapart.fr/" target="_bank">Mediapart</a>, <a href="https://www.midilibre.fr/" target="_bank">Midi Libre</a></span>
+        </div>
+        <div class="line"></div>
+        <div class="footer1">
+            <span class="copyrights">&copy; 2023 - Arthur Puechberty</span>
+            <a href="{{ route('terms') }}" target="_blank" class="conditions_generale">Conditions générales</a>
+        </div>
+    </footer>
+</body>
+</html>

start/routes.ts

@@ -34,5 +34,6 @@ Route.post('/modifemail', 'ComptesController.modifemail').as('modifemail')
 Route.get('/projects/nups', 'ProjectsController.nups').as('nups')
 Route.get('/projects/nups/web', 'ProjectsController.nupsWeb').as('nups-web')
 Route.get('/projects/my-networks', 'ProjectsController.myNetwork').as('myNetwork')
+Route.get('/projects/journal', 'ProjectsController.journal').as('journal')
 
 Route.get('/terms', 'TermsController.index').as('terms')

webpack.config.js

@@ -52,6 +52,7 @@ Encore.addEntry('terms', './resources/css/terms.css')
 Encore.addEntry('project-nups', './resources/css/project-nups.css')
 Encore.addEntry('nups', './resources/css/nups.css')
 Encore.addEntry('my-network-project', './resources/css/my-network-project.css')
+Encore.addEntry('journal', './resources/css/journal.css')
 
 /*
 |--------------------------------------------------------------------------