2eme button

WEB/View/src/CSS/Main2.css

@@ -222,18 +222,34 @@ button {
   letter-spacing: 0.05em;
   border-radius: 0.8em;
   border: none;
-  color: black;
+  color: white; /* text color */
   overflow: hidden;
-  width: 70%;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='300' height='75' preserveAspectRatio='none' viewBox='0 0 300 75'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1104%26quot%3b)' fill='none'%3e%3crect width='300' height='75' x='0' y='0' fill='rgba(0%2c 0%2c 0%2c 1)'%3e%3c/rect%3e%3cpath d='M-11.476106017509828 33.47060972583941L-2.015461870303831 52.03816931799171 16.55209772184847 42.57752517078571 7.091453574642472 24.009965578633413z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M258.0719965516592 46.07799073582278L240.7745192544972 50.39073620454944 245.08726472322385 67.68821350171143 262.3847420203859 63.37546803298477z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M180.93 12.89 a22.93 22.93 0 1 0 45.86 0 a22.93 22.93 0 1 0 -45.86 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M164.62 31.32 a16.98 16.98 0 1 0 33.96 0 a16.98 16.98 0 1 0 -33.96 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M224.20611910410452 18.55085907357581L212.48065635471693 9.389923563339346 215.04518359386805 30.27632182296341z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M278.01 40.11 a20.95 20.95 0 1 0 41.9 0 a20.95 20.95 0 1 0 -41.9 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M186.04 41.06 a15.82 15.82 0 1 0 31.64 0 a15.82 15.82 0 1 0 -31.64 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M21.39 16.13 a24.66 24.66 0 1 0 49.32 0 a24.66 24.66 0 1 0 -49.32 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M224.00916726888346-9.23366258290659L211.00323044588336 2.8945697138943434 236.1373995656844 3.772274240093518z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M156.83 17.1 a13.5 13.5 0 1 0 27 0 a13.5 13.5 0 1 0 -27 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M246.21781304822062 69.63762934778728L231.63253228481503 64.5999612265927 233.97485791251776 77.88394997460789z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M101.31710504730977-6.198536151196572L94.75897362904786-0.4976394844455836 106.5893843383053 6.48910930957177z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M117.4526134603044-3.4023751975074994L101.06749414910404-13.247548129675788 91.22232121693574 3.1375711815245815 107.60744052813612 12.98274411369287z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1104'%3e%3crect width='300' height='75' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
+  width: 65%;
   background-position: center center;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
+#btn-1 {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='300' height='75' preserveAspectRatio='none' viewBox='0 0 300 75'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1065%26quot%3b)' fill='none'%3e%3crect width='300' height='75' x='0' y='0' fill='rgba(15%2c 17%2c 21%2c 1)'%3e%3c/rect%3e%3cpath d='M88.58 44.57 a12.5 12.5 0 1 0 25 0 a12.5 12.5 0 1 0 -25 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M304.7324658513289 67.92373703388498L289.9393763882664 65.58074183860701 287.5963811929884 80.37383130166957 302.38947065605095 82.71682649694753z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M272.6717239241291 45.44517070202609L265.44747696055765 34.734784126938415 252.99402057971187 50.92634785983939z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M139.86852403993186 17.277208590099413L152.36680844893687-0.5721913763171713 134.5174084825203-13.070475785322195 122.01912407351527 4.778924181094389z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M69.31 2.7 a23.05 23.05 0 1 0 46.1 0 a23.05 23.05 0 1 0 -46.1 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M200.644556359526 77.73750637644713L210.09013424424927 69.23266984831206 192.61009050968502 59.31672128529469z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M188.74 65.78 a22.37 22.37 0 1 0 44.74 0 a22.37 22.37 0 1 0 -44.74 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M50.67333971689776 18.34335935719956L34.189822854481996 24.670788651580793 40.51725214886323 41.154305513996555 57.00076901127899 34.82687621961532z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M236.50761656073053 43.80085479326328L215.11114470239534 38.46611519693424 209.77640510606628 59.862587055269444 231.1728769644015 65.19732665159847z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M36.69630717595443 33.954886934991144L51.286547918089674 23.354456541993386 40.686117525091916 8.764215799858142 26.095876782956672 19.3646461928559z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M277.96 6.68 a17.57 17.57 0 1 0 35.14 0 a17.57 17.57 0 1 0 -35.14 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M48.13 71.94 a14.2 14.2 0 1 0 28.4 0 a14.2 14.2 0 1 0 -28.4 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M227.81 38.26 a16.2 16.2 0 1 0 32.4 0 a16.2 16.2 0 1 0 -32.4 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1065'%3e%3crect width='300' height='75' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
+  color: black;
+}
+
+#btn-1::before {
+  background: white;
+}
+
+#btn-1:hover {
+  color: white;
+}
+
+#btn-2 {
+  background-image: url(../../assets/svg/Polygon\ Luminary.svg);
+}
+
 .cssbuttons-io:hover {
-  color: #fff;
+  color: white; /* Text color hover */
 }
 
 .cssbuttons-io svg {
@@ -267,7 +283,7 @@ button {
 
 .cssbuttons-io::before {
   content: "";
-  background: white;
+  background: rgb(20, 18, 33); /* Background color */
   width: 120%;
   left: -10%;
   transform: skew(30deg);

WEB/View/src/JS/FirstTest.js

@@ -1,3 +0,0 @@
-var secondTest1 = "Pour ce second test, nous allons voir comment déclarer une variable et le manipuler. Pour créer une variable en python il est inutile de déclarer son type, il suffit de faire : ";
-var secondTest2 = "x = 1"
-var secondTest3 = "Pour la manipuler";

WEB/View/src/pages/Main2.html

@@ -116,8 +116,10 @@
           <div class="row mx-0 pt-4 pb-5 text-center">
             <h1>Scripted</h1>
           </div>
+          
+          <!-- Solo -->
           <div class="row m-0 pt-4 pb-5 d-flex justify-content-center text-center">
-            <a class="cssbuttons-io" href="./Presentation.html">
+            <a class="cssbuttons-io" href="./Presentation.html" id="btn-1">
               <span
                 ><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                   <path d="M0 0h24v24H0z" fill="none"></path>
@@ -138,11 +140,26 @@
                 }
               ?> -->
           </div>
-          <div class="row m-0 pt-4 pb-5 text-center">
-            <a>TEST</a>
+
+          <!-- Multijoueur -->
+          <div class="row m-0 pt-4 pb-5 d-flex justify-content-center text-center">
+            <a class="cssbuttons-io" href="./Presentation.html" id="btn-2">
+              <span>
+                <svg fill="#ffffff" height="200px" width="200px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 468.493 468.493" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_iconCarrier"> <g> 
+                  <path d="M138.321,161.831h-17.437v-17.437c0-3.615-2.287-6.835-5.701-8.026c-5.319-1.855-10.904-2.796-16.6-2.796 c-5.696,0-11.281,0.941-16.6,2.796c-3.414,1.191-5.701,4.411-5.701,8.026v17.437H58.847c-3.615,0-6.834,2.287-8.025,5.7 c-1.856,5.318-2.797,10.904-2.797,16.601s0.941,11.283,2.797,16.601c1.191,3.413,4.411,5.699,8.025,5.699h17.437v17.437 c0,3.615,2.287,6.834,5.7,8.025c5.318,1.856,10.904,2.797,16.601,2.797c5.697,0,11.283-0.941,16.601-2.797 c3.413-1.191,5.7-4.41,5.7-8.025v-17.437h17.437c3.615,0,6.835-2.287,8.026-5.7c1.855-5.318,2.796-10.903,2.796-16.6 c0-5.696-0.941-11.281-2.796-16.6C145.156,164.118,141.937,161.831,138.321,161.831z M131.729,189.432h-19.344 c-4.694,0-8.5,3.806-8.5,8.5v19.344c-3.481,0.553-7.12,0.552-10.601,0v-19.344c0-4.694-3.806-8.5-8.5-8.5H65.44 c-0.276-1.741-0.415-3.511-0.415-5.3s0.139-3.56,0.415-5.301h19.344c4.694,0,8.5-3.806,8.5-8.5v-19.343 c3.482-0.553,7.12-0.553,10.601,0v19.343c0,4.694,3.806,8.5,8.5,8.5h19.343c0.276,1.741,0.415,3.511,0.415,5.301 C132.143,185.921,132.004,187.692,131.729,189.432z"></path> 
+                  <path d="M254.329,166.478c0.009,0,0.019,0,0.028,0c7.996-0.009,14.459-6.501,14.44-14.497c-0.02-7.987-6.501-14.449-14.497-14.439 c-7.987,0.019-14.459,6.511-14.439,14.497C239.879,160.025,246.351,166.478,254.329,166.478z"></path> 
+                  <path d="M413.655,176.853c-15.05-16.238-39.613-18.106-57.137-4.34c-4.789,3.762-10.376,6.982-16.534,9.625 c-6.765-39.084-24.521-74.946-51.786-104.346c-15.049-16.24-39.611-18.11-57.141-4.344c-14.5,11.397-36.2,17.934-59.535,17.934 c-23.341,0-45.044-6.537-59.545-17.935C94.463,59.683,69.9,61.551,54.838,77.791C19.475,115.946,0,165.618,0,217.657 c0,19.499,2.732,38.81,8.122,57.398c3.94,13.584,14.402,24.161,27.984,28.293c4.044,1.23,8.175,1.833,12.271,1.833 c9.678,0,19.154-3.365,26.782-9.76c16.623-13.948,35.986-24.059,56.702-29.731c-4.216,16.521-6.402,33.645-6.402,51.037 c0,19.509,2.731,38.819,8.117,57.393c3.94,13.586,14.402,24.164,27.988,28.295c4.042,1.229,8.17,1.831,12.264,1.831 c9.679,0,19.157-3.367,26.782-9.764c26.931-22.595,61.155-35.038,96.366-35.038s69.435,12.443,96.365,35.038 c10.851,9.104,25.448,12.069,39.046,7.934c13.586-4.132,24.048-14.709,27.988-28.295c5.386-18.573,8.117-37.883,8.117-57.393 C468.493,264.68,449.018,215.006,413.655,176.853z M62.306,280.097c-5.739,4.811-13.167,6.312-20.378,4.117 c-7.197-2.189-12.518-7.559-14.598-14.729C22.466,252.708,20,235.27,20,217.657c0-46.981,17.582-91.825,49.505-126.269 c7.915-8.536,20.861-9.489,30.114-2.217c17.957,14.115,44.165,22.21,71.904,22.21c27.732,0,53.937-8.095,71.89-22.207 c9.265-7.274,22.208-6.321,30.118,2.214c25.198,27.172,41.391,60.45,47.16,96.697c-6.77,1.379-13.891,2.167-21.197,2.315 c0.952-1.937,1.498-4.11,1.49-6.416c-0.02-7.986-6.521-14.449-14.517-14.42c-7.986,0.019-14.439,6.52-14.419,14.516 c0.005,1.344,0.207,2.639,0.554,3.873c-13.69-2.876-25.901-8.161-35.168-15.44c-17.522-13.765-42.085-11.899-57.137,4.34 c-18.159,19.591-32.116,42.226-41.41,66.654C110.767,248.981,84.397,261.56,62.306,280.097z M441.167,368.549 c-2.08,7.173-7.4,12.542-14.599,14.731c-7.209,2.193-14.636,0.692-20.371-4.121c-30.527-25.611-69.316-39.716-109.221-39.716 s-78.693,14.105-109.22,39.716c-5.735,4.812-13.158,6.313-20.373,4.121c-7.197-2.189-12.519-7.558-14.598-14.731 c-4.861-16.763-7.326-34.199-7.326-51.823c0-46.989,17.582-91.835,49.506-126.277c4.349-4.692,10.22-7.09,16.164-7.09 c4.866,0,9.782,1.608,13.949,4.882c17.962,14.11,44.168,22.203,71.897,22.203s53.936-8.093,71.897-22.203 c9.258-7.273,22.203-6.326,30.113,2.208c31.924,34.443,49.506,79.289,49.506,126.277 C448.493,334.351,446.028,351.786,441.167,368.549z"></path> 
+                  <path d="M263.776,260.896h-17.437V243.46c0-3.615-2.287-6.835-5.7-8.026c-5.318-1.855-10.903-2.796-16.6-2.796 c-5.696,0-11.281,0.941-16.6,2.796c-3.414,1.191-5.701,4.411-5.701,8.026v17.437h-17.436c-3.615,0-6.834,2.287-8.025,5.7 c-1.856,5.318-2.797,10.904-2.797,16.601s0.941,11.283,2.797,16.601c1.191,3.413,4.41,5.7,8.025,5.7h17.436v17.436 c0,3.615,2.287,6.834,5.7,8.025c5.319,1.856,10.905,2.797,16.601,2.797c5.697,0,11.283-0.941,16.601-2.797 c3.413-1.191,5.699-4.411,5.699-8.025v-17.436h17.437c3.614,0,6.834-2.286,8.025-5.699c1.855-5.317,2.797-10.903,2.797-16.602 s-0.941-11.285-2.797-16.602C270.61,263.182,267.39,260.896,263.776,260.896z M257.183,288.498h-19.344c-4.694,0-8.5,3.806-8.5,8.5 v19.343c-3.481,0.553-7.12,0.552-10.601,0v-19.343c0-4.694-3.806-8.5-8.5-8.5h-19.343c-0.276-1.741-0.415-3.511-0.415-5.301 s0.139-3.56,0.415-5.301h19.343c4.694,0,8.5-3.806,8.5-8.5v-19.343c3.482-0.553,7.12-0.552,10.601,0v19.344 c0,4.694,3.806,8.5,8.5,8.5h19.344c0.276,1.741,0.415,3.511,0.415,5.301S257.459,286.757,257.183,288.498z"></path> 
+                  <path d="M411.973,297.569c0.01,0,0.029,0,0.039,0c7.996-0.029,14.449-6.521,14.43-14.517c-0.029-7.986-6.52-14.449-14.516-14.42 c-7.987,0.019-14.449,6.52-14.42,14.507C397.524,291.116,403.996,297.569,411.973,297.569z"></path> <path d="M347.715,268.758c-7.987,0.01-14.459,6.491-14.448,14.487c0.01,7.986,6.491,14.459,14.487,14.449 c7.987-0.01,14.459-6.491,14.449-14.478C362.192,275.221,355.711,268.749,347.715,268.758z"></path> 
+                  <path d="M379.931,300.849c-0.087,0-0.164,0-0.251,0c-7.909,0.096-14.295,6.53-14.295,14.468c0,7.986,6.481,14.468,14.468,14.468 c0.019,0,0.039,0,0.048,0c0.029,0,0.058,0,0.087,0c0.02,0,0.039,0,0.058,0c7.986-0.029,14.439-6.54,14.41-14.526 C394.418,307.263,387.917,300.81,379.931,300.849z"></path> 
+                  <path d="M379.786,265.546c0.009,0,0.02,0,0.029,0c7.996-0.019,14.459-6.51,14.439-14.497c-0.019-7.996-6.511-14.459-14.497-14.439 c-7.995,0.019-14.458,6.511-14.439,14.497C365.327,259.084,371.81,265.546,379.786,265.546z"></path> </g> </g>
+                </svg>
+                ScriptRush
+              </span>
+            </a>
           </div>
         </div>
       </div>
     </div>
   </body>
-</html>
+</html>