diff --git a/WEB/View/assets/svg/Polygon Luminary.svg b/WEB/View/assets/svg/Polygon Luminary.svg new file mode 100644 index 00000000..dcb37e00 --- /dev/null +++ b/WEB/View/assets/svg/Polygon Luminary.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/WEB/View/src/CSS/Main2.css b/WEB/View/src/CSS/Main2.css index f0efff2d..b314e7a7 100644 --- a/WEB/View/src/CSS/Main2.css +++ b/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); diff --git a/WEB/View/src/JS/FirstTest.js b/WEB/View/src/JS/FirstTest.js deleted file mode 100644 index 0333f0ab..00000000 --- a/WEB/View/src/JS/FirstTest.js +++ /dev/null @@ -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"; \ No newline at end of file diff --git a/WEB/View/src/pages/Main2.html b/WEB/View/src/pages/Main2.html index f2d9cc76..a834aa5a 100644 --- a/WEB/View/src/pages/Main2.html +++ b/WEB/View/src/pages/Main2.html @@ -116,8 +116,10 @@

Scripted

+ +
- + @@ -138,11 +140,26 @@ } ?> -->
-
- TEST + + +
+ + + + + + + + + + + + ScriptRush + +
- \ No newline at end of file +