new project - my network

app/Controllers/Http/ProjectsController.ts

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

public/assets/entrypoints.json

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

public/assets/manifest.json

@@ -11,5 +11,7 @@
   "assets/project-nups.js": "http://localhost:8080/assets/project-nups.js",
   "assets/nups.css": "http://localhost:8080/assets/nups.css",
   "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/images/landing.jpg": "http://localhost:8080/assets/images/landing.6d6841c3.jpg"
 }

resources/css/index.css

@@ -258,37 +258,6 @@ main {
   border-radius: 7px;
 }
 
-.footer{
-  font-family: "Montserrat", sans-serif;
-  min-height: 100px;
-  display: flex;
-  align-items: center;
-  margin-top: 50px;
-  justify-content: space-between;
-  padding: 0 100px;
-  flex-wrap: wrap;
-  background-color: rgb(50, 50, 50);
-}
-
-.copyrights{
-  padding-right: 20px;
-  color: white;
-}
-
-.copyrights,
-#year {
-  padding-right: 20px;
-  color: #9aa0a6;
-  display: inline;
-  padding: 0;
-}
-
-.conditions_generale {
-  text-decoration: none;
-  font-weight: 600;
-  color: #9aa0a6;
-}
-
 .btn_theme {
   background-color:rgba(255, 255, 255, 0);
   color: rgb(83, 83, 83);

resources/css/my-network-project.css

@@ -0,0 +1,102 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
+
+.btn {
+    color: white;
+    font-weight: bold;
+    font-size: 1em;
+    text-decoration: none;
+    text-transform: uppercase;
+    padding: 4px;
+    background-color: #222222;
+    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;
+    font-family: 'Inter', sans-serif;
+    border-radius: 10px;
+}
+.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;
+    padding-right: 48px;
+}
+
+*{
+    margin: 0;
+    padding: 0;
+    scroll-behavior: smooth;
+}
+
+body{
+    background-color: black;
+}
+
+section{
+    display: flex;
+    flex-direction: column;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+}
+
+div{
+    padding: 8px;
+}
+
+.accueil{
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 64px 16px 32px;
+}
+
+.profil_img{
+    border-radius: 50%;
+    width : 100px;
+    height : 100px;
+}
+
+h1{
+    font-family: 'Inter', sans-serif;
+    font-weight: 900;
+    color: rgb(255, 255, 255);
+    font-size: 20px;
+    margin-left: 12px;
+    margin-right: 12px;
+    max-width: 100%;
+    margin-top: 15px;
+}
+
+h2{
+    font-family: 'Inter', sans-serif;
+    font-weight: 900;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 16px;
+    padding-left: 40px;
+    padding-right: 40px;
+    margin-top: 8px;
+}
+
+.liste_btn{
+    margin: 0px auto;
+    max-width: 680px;
+}
+
+.lien_img{
+    width : 48px;
+    height : 48px;
+    border-radius: 9px;
+}

resources/css/project-nups.css

@@ -206,36 +206,6 @@ nav a{
 
 /* -------------------- section autre -------------------- */
 
-/* -------------------- footer -------------------- */
-
-.footer{
-   font-family: "Montserrat", sans-serif;
-   min-height: 100px;
-   display: flex;
-   align-items: center;
-   margin-top: 50px;
-   justify-content: space-between;
-   padding: 0 100px;
-   flex-wrap: wrap;
-   background-color: rgb(50, 50, 50);
-}
-
-.copyrights,
-#year{
-   padding-right: 20px;
-   color: white;
-   display: inline;
-   padding: 0;
-}
-
-.conditions_generale{
-   text-decoration: none;
-   font-weight: 600;
-   color: white;
-}
-
-/* -------------------- footer -------------------- */
-
 .dark-mode-theme {
    background-color: #1c1c1e;
    color: #fefefe;

resources/views/auth.edge

@@ -77,5 +77,6 @@
 	      	</div>
 	    </div>
 	</div>
+   @include('components/foother')
 </body>
 </html>

resources/views/components/foother.edge

@@ -0,0 +1,52 @@
+<footer id="footer" class="footer">
+   <span class="copyrights">&copy; <div id="year"></div> - Arthur Puechberty</span>
+   <a href="{{ route('terms') }}" class="conditions_generale" target="_blank">Terms and Conditions</a>
+</footer>
+<script>
+   var year = new Date().getFullYear();
+   document.getElementById("year").innerHTML = year;
+   
+   document.getElementById('myForm').addEventListener('submit', function(event) {
+       var input = document.getElementById('myInput');
+       if (input.value.trim() === '') {
+           event.preventDefault(); // Empêche la soumission du formulaire
+       } else {
+           this.action = "https://www.google.fr/search";
+       }
+   });
+</script>
+<style>
+   @import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
+
+   .footer{
+      font-family: 'Roboto', sans-serif;
+      font-weight: 600;
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      margin-top: 50px;
+      justify-content: space-between;
+      padding: 0 100px;
+      flex-wrap: wrap;
+      background-color: rgb(50, 50, 50);
+   }
+
+   .copyrights{
+      padding-right: 20px;
+      color: white;
+   }
+
+   .copyrights,
+   #year {
+      padding-right: 20px;
+      color: #9aa0a6;
+      display: inline;
+      padding: 0;
+   } 
+
+   .conditions_generale {
+      text-decoration: none;
+      font-weight: 600;
+      color: #9aa0a6;
+   }
+</style>

resources/views/index.edge

@@ -107,6 +107,9 @@
       <div class="nups-project">
         <a href="{{ route('nups') }}" target="_blank"><img src="/project-nups.png" alt=""></a>
       </div>
+      <div class="my-networks-project">
+        <a href="{{ route('myNetwork') }}" target="_blank"><img src="/my-networks.jpg" alt=""></a>
+      </div>
     </div>
   </section>
   <section id="contact">
@@ -128,22 +131,6 @@
       <input type="submit" value="Envoyer">
     </form>
   </section>
-  <footer id="footer" class="footer">
+  @include('components/foother')
-    <span class="copyrights">&copy; <div id="year"></div> - Arthur Puechberty</span>
-    <a href="{{ route('terms') }}" class="conditions_generale" target="_blank">Terms and Conditions</a>
-  </footer>
-  <script>
-    var year = new Date().getFullYear();
-    document.getElementById("year").innerHTML = year;
-    
-    document.getElementById('myForm').addEventListener('submit', function(event) {
-        var input = document.getElementById('myInput');
-        if (input.value.trim() === '') {
-            event.preventDefault(); // Empêche la soumission du formulaire
-        } else {
-            this.action = "https://www.google.fr/search";
-        }
-    });
-  </script>
 </body>
 </html>

resources/views/projects/myNetwork/index.edge

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+   <title>Arthur Puechberty</title>
+   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;600;700&amp;display=swap" rel="stylesheet">
+   @entryPointStyles('my-network-project')
+</head>
+<body>
+   <section id="accueil" class="accueil">
+      <img class="profil_img" src="/projects/myNetwork/arthur.png" alt="Photo de profil Arthur">
+      <h1>Arthur</h1>
+      <h2>Une grande passion : la voile ⛵️</h2>
+   </section>
+   <section class="liste_btn">
+      <div classe="btn_1">
+         <a href="https://www.instagram.com/arthur.pbty/" class="btn" target="_blank"><img class="lien_img"
+               src="/projects/myNetwork/logo insta.png" alt="Logo Instagram">
+            <p class="txt_lien">Instagram</p>
+         </a>
+      </div>
+      <div classe="btn_2">
+         <a href="https://discord.gg/HxgaA44CPh" class="btn" target="_blank"><img class="lien_img"
+               src="/projects/myNetwork/Logo Discord.png" alt="Logo Discord">
+            <p class="txt_lien">Discord</p>
+         </a>
+      </div>
+      <div classe="btn_3">
+         <a href="https://twitter.com/arthur_pbty" class="btn" target="_blank"><img class="lien_img"
+               src="/projects/myNetwork/logo twitter.png" alt="Logo Twitter">
+            <p class="txt_lien">Twitter</p>
+         </a>
+      </div>
+      <div classe="btn_4">
+         <a href="https://www.youtube.com/channel/UCILN2CPA-wPbBUFkgqVCb9A" class="btn" target="_blank"><img
+               class="lien_img" src="/projects/myNetwork/Logo YouTube.png" alt="Logo YouTube">
+            <p class="txt_lien">YouTube</p>
+         </a>
+      </div>
+      <div classe="btn_5">
+         <a href="https://www.facebook.com/profile.php?id=100081982581492" class="btn" target="_blank"><img
+               class="lien_img" src="/projects/myNetwork/Logo Facebook.png" alt="Logo Facebook">
+            <p class="txt_lien">Facebook</p>
+         </a>
+      </div>
+      <div classe="btn_6">
+         <a href="https://www.twitch.tv/tuturp33" class="btn" target="_blank"><img class="lien_img"
+               src="/projects/myNetwork/Twitch logo.png" alt="Logo Twitch">
+            <p class="txt_lien">Twitch</p>
+         </a>
+      </div>
+      <div classe="btn_7">
+         <a href="https://github.com/TuturP33" class="btn" target="_blank"><img class="lien_img"
+               src="/projects/myNetwork/logo github.png" alt="Logo Github">
+            <p class="txt_lien">Github</p>
+         </a>
+      </div>
+      <div classe="btn_8">
+         <a href="https://fr.namemc.com/profile/TuturP33.1" class="btn" target="_blank"><img class="lien_img"
+               src="/projects/myNetwork/Logo Minecraft.png" alt="Logo Minecraft">
+            <p class="txt_lien">Minecraft</p>
+         </a>
+      </div>
+   </section>
+   @include('components/foother')
+</body>
+
+</html>

resources/views/projects/nups/project-nups.edge

@@ -98,24 +98,7 @@
       <h1 class="titre_section">Autre</h1>
       <p>Nous avons aussi un serveur discord !</p>
   </section>
-
+  @include('components/foother')
-  <footer class="footer">
-      <span class="copyrights">&copy; <div id="year"></div> - Arthur Puechberty</span>
-      <a href="{{ route('terms') }}" class="conditions_generale" target="_blank">Condition générales</a>
-  </footer>
-  <script>
-   var year = new Date().getFullYear();
-   document.getElementById("year").innerHTML = year;
-   
-   document.getElementById('myForm').addEventListener('submit', function(event) {
-       var input = document.getElementById('myInput');
-       if (input.value.trim() === '') {
-           event.preventDefault(); // Empêche la soumission du formulaire
-       } else {
-           this.action = "https://www.google.fr/search";
-       }
-   });
-   </script>
    <script>
       const body = document.querySelector("body");
       let darkmode = localStorage.getItem("dark-mode");

resources/views/terms.edge

@@ -85,5 +85,6 @@
          body.classList.remove("dark-mode-theme");
       }
    </script>
+   @include('components/foother')
 </body>
 </html>

start/routes.ts

@@ -33,5 +33,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('/terms', 'TermsController.index').as('terms')

webpack.config.js

@@ -51,6 +51,7 @@ Encore.addEntry('compte', './resources/css/compte.css')
 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')
 
 /*
 |--------------------------------------------------------------------------