new project - my network

2026-06-03 15:07:33 +02:00 · 2023-11-05 03:41:43 +01:00
parent 795946bc8d
commit a8b3b68ded
24 changed files with 248 additions and 96 deletions
@@ -10,4 +10,8 @@ export default class ProjectsController {
    return view.render('projects/nups/nups')
  }

+  async myNetwork({ view }: HttpContextContract) {
+    return view.render('projects/myNetwork/index')
+  }
+
 }
@@ -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"
+      ]
    }
  }
 }
@@ -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"
 }
@@ -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);
@@ -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;
+}
@@ -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;
@@ -77,5 +77,6 @@
 	      	</div>
 	    </div>
 	</div>
+   @include('components/foother')
 </body>
 </html>
@@ -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>
@@ -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">
-    <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>
+  @include('components/foother')
 </body>
 </html>
@@ -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>
@@ -98,24 +98,7 @@
      <h1 class="titre_section">Autre</h1>
      <p>Nous avons aussi un serveur discord !</p>
  </section>
-
-  <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>
+  @include('components/foother')
   <script>
      const body = document.querySelector("body");
      let darkmode = localStorage.getItem("dark-mode");
@@ -85,5 +85,6 @@
         body.classList.remove("dark-mode-theme");
      }
   </script>
+   @include('components/foother')
 </body>
 </html>
@@ -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')
@@ -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')

 /*
 |--------------------------------------------------------------------------