diff --git a/WEB/Config/Config.php b/WEB/Config/Config.php index 72cf0162..ed27fa94 100644 --- a/WEB/Config/Config.php +++ b/WEB/Config/Config.php @@ -11,7 +11,7 @@ $sel = "JeSuisUnSeldeHashageEtJeSuisUniqueEtTresSecuriseEtJeSuisTresLong"; //View //Page -$vues['main'] = 'View/src/pages/Main2.php'; +$vues['main'] = 'View/src/pages/Main.php'; $vues['presentation'] = 'View/src/pages/Presentation.html'; $vues['login'] = 'View/src/pages/LogSign/Login.php'; $vues['signUp'] = 'View/src/pages/LogSign/SignUp.php'; diff --git a/WEB/View/src/CSS/Main.css b/WEB/View/src/CSS/Main.css index fd50a2db..8d74e8ec 100644 --- a/WEB/View/src/CSS/Main.css +++ b/WEB/View/src/CSS/Main.css @@ -1,290 +1,392 @@ -@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap"); +/*Fonts CSS */ +@font-face { + font-family: Fauna; + src: url("../../assets/fonts/Fauna.ttf"); +} +@font-face { + font-family: Equinox; + src: url("../../assets/fonts/Equinox.otf"); +} +/* End Fonts CSS */ -/*Default CSS*/ body { min-height: 100vh; - font-family: "Orbitron", sans-serif; + font-family: "Equinox", sans-serif; color: white; - background-image: url(../../assets/img/BackgroundMain.jpg); scroll-behavior: smooth; height: 100vh; + background-image: url("../../assets/img/ImgMain2.png"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; - background-color: #464646; + background-color: #000; } -p, -a, -li, -button, -ul { - margin: 0; - padding: 0; - line-height: normal; - text-decoration: none !important; +#imgMain { + background-image: url("../../assets/img/SecondMainBack.jpg"); + background-position: bottom center; + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 70%; + height: 80%; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + border: 1px solid #fff; } -/* Animation CSS */ - -@keyframes blink { - 0%, - 22%, - 36%, - 75% { - color: #ffe6ff; - text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf, - -0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf, - 0 -0.5rem 2rem #841174, 0 0.5rem 3rem #841174; - } - 28%, - 33% { - color: #dd07bf; - text-shadow: none; - } - 82%, - 97% { - color: #991888; - text-shadow: none; - } +.neonBg { + background-color: #511949; + opacity: 0.9; + background-size: 10px 10px; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; } -@keyframes flicker { - from { - opacity: 1; - } - - 4% { - opacity: 0.9; - } - - 6% { - opacity: 0.85; - } - - 8% { - opacity: 0.95; - } +button:focus { + outline: none; +} - 10% { - opacity: 0.9; - } +#imgProfil { + width: 30%; + height: 100%; +} - 11% { - opacity: 0.922; +@media screen and (max-width: 1100px) { + #imgProfil { + display: none; } +} - 12% { - opacity: 0.9; - } +#profil { + position: fixed; + top: 0; + left: 0; + opacity: 0; + height: 100%; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); - 14% { - opacity: 0.95; - } +} - 16% { - opacity: 0.98; - } +#profil.open { + opacity: 1; + display: flex; + transition: all 0.6s; + -webkit-transition: all 0.6s; + -moz-transition: all 0.6s; + -ms-transition: all 0.6s; + -o-transition: all 0.6s; +} - 17% { - opacity: 0.9; - } +#profilIcon { + font-size: 40px; + color: white; + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transition: transform 0.8s; + -webkit-transition: transform 0.8s; + -moz-transition: transform 0.8s; + -ms-transition: transform 0.8s; + -o-transition: transform 0.8s; +} - 19% { - opacity: 0.93; - } +#profilIcon.open { + transition: transform 0.8s; + -webkit-transition: transform 0.8s; + -moz-transition: transform 0.8s; + -ms-transition: transform 0.8s; + -o-transition: transform 0.8s; + background: none; + transform: rotate(180deg) !important; + -webkit-transform: rotate(180deg) !important; + -moz-transform: rotate(180deg) !important; + -ms-transform: rotate(180deg) !important; + -o-transform: rotate(180deg) !important; +} - 20% { - opacity: 0.99; - } - 24% { - opacity: 1; - } - 26% { - opacity: 0.94; - } +#profilContainer.open { + justify-content: end; +} - 28% { - opacity: 0.98; - } +#mainPart{ + transition: all 0.8s; + -webkit-transition: all 0.8s; + -moz-transition: all 0.8s; + -ms-transition: all 0.8s; + -o-transition: all 0.8s; +} - 37% { - opacity: 0.93; - } +#mainPart.open { + margin-left: 50% !important; +} - 38% { - opacity: 0.5; - } +/* Button Login/ Logout animation */ - 39% { - opacity: 0.96; - } +a { + position: relative; + display: inline-block; + cursor: pointer; + outline: none; + border: 0; + text-decoration: none; + background: transparent; + padding: 0; + font-size: inherit; + font-family: inherit; +} - 42% { - opacity: 1; - } +a.logButton { + width: 12rem; + height: 50px; +} - 44% { - opacity: 0.97; - } +a.logButton .circle { + transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); + display: block; + margin: 0; + width: 3rem; + height: 3rem; + background: #fff; + border-radius: 1.625rem; +} +a.logButton .circle .icon { + transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); + position: absolute; + top: 0; + bottom: 0; + margin: auto; + background: #050e15; +} +a.logButton .circle .icon.arrow { + transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); + left: 0.625rem; + width: 1.125rem; + height: 0.125rem; + background: none; +} +a.logButton .circle .icon.arrow::before { + position: absolute; + content: ""; + top: -0.25rem; + right: 0.0625rem; + width: 0.625rem; + height: 0.625rem; + border-top: 0.125rem solid #050e15; + border-right: 0.125rem solid #050e15; + transform: rotate(45deg); +} +a.logButton .button-text { + transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0.75rem 0; + margin: 0 0 0 1.85rem; + color: #fff; + font-weight: 700; + line-height: 1.6; + text-align: center; + text-transform: uppercase; +} - 46% { - opacity: 0.94; - } +a:hover .circle { + width: 100%; +} - 56% { - opacity: 0.9; - } +a:hover .circle .icon.arrow { + background: #050e15; + transform: translate(1rem, 0); +} - 58% { - opacity: 0.9; - } +a:hover .button-text { + color: #050e15; +} - 60% { - opacity: 0.99; - } +/* Button style for code */ - 68% { - opacity: 1; - } +a, +button { + text-decoration: none !important; + outline: none !important; +} - 70% { - opacity: 0.9; - } +.cssbuttons-io { + position: relative; + font-family: inherit; + font-weight: bolder; + font-size: 18px; + letter-spacing: 0.05em; + border-radius: 0.8em; + border: none; + color: white; /* text color */ + overflow: hidden; + width: 65%; + background-position: center center; + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; +} - 72% { - opacity: 0.95; - } +#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; +} - 93% { - opacity: 0.93; - } +#btn-1::before { + background: white; +} - 95% { - opacity: 0.95; - } +#btn-1:hover { + color: white; +} - 97% { - opacity: 0.93; - } +#btn-2 { + background-image: url(../../assets/svg/Polygon\ Luminary.svg); +} - to { - opacity: 1; - } +.cssbuttons-io:hover { + color: white; /* Text color hover */ } -@keyframes animate1 { - 0% { - left: -100%; - } - 50%, - 100% { - left: 100%; - } +.cssbuttons-io svg { + width: 1.5em; + height: 1.5em; + margin-right: 0.8em; } -@keyframes animate2 { - 0% { - top: -100%; - } - 50%, - 100% { - top: 100%; - } +.cssbuttons-io span { + position: relative; + z-index: 10; + display: inline-flex; + align-items: center; + padding: 0.8em 1.2em 0.8em 1.05em; + transition: color 0.6s; + -webkit-transition: color 0.6s; + -moz-transition: color 0.6s; + -ms-transition: color 0.6s; + -o-transition: color 0.6s; } -@keyframes animate3 { - 0% { - right: -100%; - } - 50%, - 100% { - right: 100%; - } +.cssbuttons-io::before, +.cssbuttons-io::after { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; } -@keyframes animate4 { - 0% { - bottom: -100%; - } - 50%, - 100% { - bottom: 100%; - } +.cssbuttons-io::before { + content: ""; + background: rgb(20, 18, 33); /* Background color */ + width: 120%; + left: -10%; + transform: skew(30deg); + -webkit-transform: skew(30deg); + -moz-transform: skew(30deg); + -ms-transform: skew(30deg); + -o-transform: skew(30deg); + transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); + -webkit-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); + -moz-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); + -ms-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); + -o-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); } -.flicker { - animation: shine 2s forwards, blink 3s 2s infinite; +.cssbuttons-io:hover::before { + transform: translate3d(100%, 0, 0); + -webkit-transform: translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + -o-transform: translate3d(100%, 0, 0); } -.fast-flicker { - animation: shine 2s forwards, blink 10s 1s infinite; - -webkit-animation: shine 2s forwards, blink 10s 1s infinite; +.cssbuttons-io:active { + transform: scale(0.95); + -webkit-transform: scale(0.95); + -moz-transform: scale(0.95); + -ms-transform: scale(0.95); + -o-transform: scale(0.95); } -/* COntainer CSS */ -h1 { - letter-spacing: 0.5rem; - color: #ffe6ff; - text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf, - -0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf, - 0 -0.5rem 2rem #841174, 0 0.5rem 3rem #841174; - animation: shine 2s forwards, flicker 3s infinite; + +/* Button admin */ + + +#btn { + width: 150px; + height: 50px; + border-radius: 5px; + border: none; + transition: all 0.5s ease-in-out; + font-size: 20px; + font-weight: 600; + display: flex; + align-items: center; + background: #040f16; + color: #f5f5f5; } -a { - letter-spacing: 0.2rem; - font-weight: 400; - border-radius: 10px; - font-size: 22px; - cursor: pointer; - transition: 0.5s; +#btn:hover { + box-shadow: 0 0 20px 0px #2e2e2e3a; } -a span { +#btn #icon { position: absolute; - display: block; + height: 25px; + width: 25px; + display: flex; + justify-content: center; + align-items: center; + transition: all 0.5s; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + -o-transition: all 0.5s; } - -#enigme { - color: #ff86ff; +#btn #text { + transform: translateX(40px); + -webkit-transform: translateX(40px); + -moz-transform: translateX(40px); + -ms-transform: translateX(40px); + -o-transform: translateX(40px); } -#enigme:hover { - background: #ff86ff; - color: #000000; - box-shadow: 0 0 5px #ff86ff, 0 0 25px #ff86ff, 0 0 50px #ff86ff, - 0 0 100px #ff86ff; - -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); +#btn:hover #icon { + width: 130px; } -/* #enigme span:nth-child(1) { - top: 0; - left: 0; - width: 100%; - height: 2px; - background: linear-gradient(90deg, transparent, #ff86ff); - animation: animate1 1s linear infinite; -} */ - - - - -#multi { - color: #56fcfc; +#btn:hover #text { + transition: all 0.5s; + opacity: 0; } -#multi:hover { - background: #56fcfc; - color: #000000 !important; - box-shadow: 0 0 5px #56fcfc, 0 0 25px #56fcfc, 0 0 50px #56fcfc, - 0 0 100px #56fcfc; - -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); +#btn:focus { + outline: none; } +#btn:active #icon { + transform: scale(0.85); +} \ No newline at end of file diff --git a/WEB/View/src/CSS/Main2.css b/WEB/View/src/CSS/Main2.css deleted file mode 100644 index f8153e50..00000000 --- a/WEB/View/src/CSS/Main2.css +++ /dev/null @@ -1,392 +0,0 @@ -/*Fonts CSS */ - -@font-face { - font-family: Fauna; - src: url("../../assets/fonts/Fauna.ttf"); -} -@font-face { - font-family: Equinox; - src: url("../../assets/fonts/Equinox.otf"); -} -/* End Fonts CSS */ - -body { - min-height: 100vh; - font-family: "Equinox", sans-serif; - color: white; - scroll-behavior: smooth; - height: 100vh; - background-image: url("../../assets/img/ImgMain2.png"); - background-position: center center; - background-attachment: fixed; - background-repeat: no-repeat; - background-size: cover; - background-color: #000; -} - -#imgMain { - background-image: url("../../assets/img/SecondMainBack.jpg"); - background-position: bottom center; - background-attachment: fixed; - background-repeat: no-repeat; - background-size: cover; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 70%; - height: 80%; - border-radius: 10px; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - -ms-border-radius: 10px; - -o-border-radius: 10px; - border: 1px solid #fff; -} - -.neonBg { - background-color: #511949; - opacity: 0.9; - background-size: 10px 10px; - border-radius: 10px; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - -ms-border-radius: 10px; - -o-border-radius: 10px; -} - -button:focus { - outline: none; -} - -#imgProfil { - width: 30%; - height: 100%; -} - -@media screen and (max-width: 1100px) { - #imgProfil { - display: none; - } -} - -#profil { - position: fixed; - top: 0; - left: 0; - opacity: 0; - height: 100%; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); - -} - -#profil.open { - opacity: 1; - display: flex; - transition: all 0.6s; - -webkit-transition: all 0.6s; - -moz-transition: all 0.6s; - -ms-transition: all 0.6s; - -o-transition: all 0.6s; -} - -#profilIcon { - font-size: 40px; - color: white; - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - -o-transform: rotate(90deg); - transition: transform 0.8s; - -webkit-transition: transform 0.8s; - -moz-transition: transform 0.8s; - -ms-transition: transform 0.8s; - -o-transition: transform 0.8s; -} - -#profilIcon.open { - transition: transform 0.8s; - -webkit-transition: transform 0.8s; - -moz-transition: transform 0.8s; - -ms-transition: transform 0.8s; - -o-transition: transform 0.8s; - background: none; - transform: rotate(180deg) !important; - -webkit-transform: rotate(180deg) !important; - -moz-transform: rotate(180deg) !important; - -ms-transform: rotate(180deg) !important; - -o-transform: rotate(180deg) !important; -} - - - -#profilContainer.open { - justify-content: end; -} - -#mainPart{ - transition: all 0.8s; - -webkit-transition: all 0.8s; - -moz-transition: all 0.8s; - -ms-transition: all 0.8s; - -o-transition: all 0.8s; -} - -#mainPart.open { - margin-left: 50% !important; -} - -/* Button Login/ Logout animation */ - -a { - position: relative; - display: inline-block; - cursor: pointer; - outline: none; - border: 0; - text-decoration: none; - background: transparent; - padding: 0; - font-size: inherit; - font-family: inherit; -} - -a.logButton { - width: 12rem; - height: 50px; -} - -a.logButton .circle { - transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); - display: block; - margin: 0; - width: 3rem; - height: 3rem; - background: #fff; - border-radius: 1.625rem; -} -a.logButton .circle .icon { - transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); - position: absolute; - top: 0; - bottom: 0; - margin: auto; - background: #050e15; -} -a.logButton .circle .icon.arrow { - transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); - left: 0.625rem; - width: 1.125rem; - height: 0.125rem; - background: none; -} -a.logButton .circle .icon.arrow::before { - position: absolute; - content: ""; - top: -0.25rem; - right: 0.0625rem; - width: 0.625rem; - height: 0.625rem; - border-top: 0.125rem solid #050e15; - border-right: 0.125rem solid #050e15; - transform: rotate(45deg); -} -a.logButton .button-text { - transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 0.75rem 0; - margin: 0 0 0 1.85rem; - color: #fff; - font-weight: 700; - line-height: 1.6; - text-align: center; - text-transform: uppercase; -} - -a:hover .circle { - width: 100%; -} - -a:hover .circle .icon.arrow { - background: #050e15; - transform: translate(1rem, 0); -} - -a:hover .button-text { - color: #050e15; -} - -/* Button style for code */ - -a, -button { - text-decoration: none !important; - outline: none !important; -} - -.cssbuttons-io { - position: relative; - font-family: inherit; - font-weight: bolder; - font-size: 18px; - letter-spacing: 0.05em; - border-radius: 0.8em; - border: none; - color: white; /* text color */ - overflow: hidden; - 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: white; /* Text color hover */ -} - -.cssbuttons-io svg { - width: 1.5em; - height: 1.5em; - margin-right: 0.8em; -} - -.cssbuttons-io span { - position: relative; - z-index: 10; - display: inline-flex; - align-items: center; - padding: 0.8em 1.2em 0.8em 1.05em; - transition: color 0.6s; - -webkit-transition: color 0.6s; - -moz-transition: color 0.6s; - -ms-transition: color 0.6s; - -o-transition: color 0.6s; -} - -.cssbuttons-io::before, -.cssbuttons-io::after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; -} - -.cssbuttons-io::before { - content: ""; - background: rgb(20, 18, 33); /* Background color */ - width: 120%; - left: -10%; - transform: skew(30deg); - -webkit-transform: skew(30deg); - -moz-transform: skew(30deg); - -ms-transform: skew(30deg); - -o-transform: skew(30deg); - transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); - -webkit-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); - -moz-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); - -ms-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); - -o-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1); -} - -.cssbuttons-io:hover::before { - transform: translate3d(100%, 0, 0); - -webkit-transform: translate3d(100%, 0, 0); - -moz-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - -o-transform: translate3d(100%, 0, 0); -} - -.cssbuttons-io:active { - transform: scale(0.95); - -webkit-transform: scale(0.95); - -moz-transform: scale(0.95); - -ms-transform: scale(0.95); - -o-transform: scale(0.95); -} - - - -/* Button admin */ - - -.btn { - width: 150px; - height: 50px; - border-radius: 5px; - border: none; - transition: all 0.5s ease-in-out; - font-size: 20px; - font-weight: 600; - display: flex; - align-items: center; - background: #040f16; - color: #f5f5f5; -} - -.btn:hover { - box-shadow: 0 0 20px 0px #2e2e2e3a; -} - -.btn .icon { - position: absolute; - height: 25px; - width: 25px; - display: flex; - justify-content: center; - align-items: center; - transition: all 0.5s; - -webkit-transition: all 0.5s; - -moz-transition: all 0.5s; - -ms-transition: all 0.5s; - -o-transition: all 0.5s; -} - -.btn .text { - transform: translateX(40px); - -webkit-transform: translateX(40px); - -moz-transform: translateX(40px); - -ms-transform: translateX(40px); - -o-transform: translateX(40px); -} - -.btn:hover .icon { - width: 130px; -} - -.btn:hover .text { - transition: all 0.5s; - opacity: 0; -} - -.btn:focus { - outline: none; -} - -.btn:active .icon { - transform: scale(0.85); -} \ No newline at end of file diff --git a/WEB/View/src/pages/Admin/AddEnigmeSolo.php b/WEB/View/src/pages/Admin/AddEnigmeSolo.php index efd7f577..0e66191d 100644 --- a/WEB/View/src/pages/Admin/AddEnigmeSolo.php +++ b/WEB/View/src/pages/Admin/AddEnigmeSolo.php @@ -19,6 +19,10 @@
+