diff --git a/data/images/navbar/menu-buy.png b/data/images/navbar/menu-buy.png new file mode 100644 index 0000000000000000000000000000000000000000..298bdfede49589866e76e73b66ad9b3ee6381723 Binary files /dev/null and b/data/images/navbar/menu-buy.png differ diff --git a/data/images/navbar/menu-comm.svg b/data/images/navbar/menu-comm.svg new file mode 100644 index 0000000000000000000000000000000000000000..7988d6554a9420ca0d14faee6c40c9ffc385f781 --- /dev/null +++ b/data/images/navbar/menu-comm.svg @@ -0,0 +1,75 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="64px" height="38px" viewBox="0 0 64 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch --> + <title>RealmsButtonStatic</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="RealmsButtonStatic" transform="translate(-3.000000, -7.000000)" fill-rule="nonzero"> + <polygon id="Shape" fill-opacity="0" fill="#000000" points="0 0 70 0 70 45 53 45 53 30 65 30 65 23 61 23 61 15 63 15 63 17 67 17 67 15 65 15 65 13 57 13 57 15 55 15 55 7 15 7 15 15 13 15 13 13 5 13 5 15 3 15 3 17 7 17 7 15 9 15 9 23 5 23 5 30 17 30 17 45 0 45"></polygon> + <polygon id="Shape" fill="#A05307" points="15 7 31 7 31 13 29 13 29 11 17 11 17 13 15 13"></polygon> + <polygon id="Shape" fill="#882F05" points="31 7 33 7 33 19 31 19"></polygon> + <polygon id="Shape" fill="#E4772A" points="33 7 39 7 39 17 37 17 37 21 39 21 39 23 33 23"></polygon> + <polygon id="Shape" fill="#F69F3A" points="39 7 55 7 55 15 53 15 53 13 51 13 51 11 47 11 47 13 45 13 45 15 39 15"></polygon> + <polygon id="Shape" fill="#FAC28C" points="17 11 29 11 29 13 31 13 31 23 27 23 27 19 25 19 25 17 21 17 21 15 17 15 17 17 21 17 21 19 19 19 19 23 15 23 15 13 17 13"></polygon> + <polygon id="Shape" fill="#FCD8B0" points="47 11 51 11 51 13 53 13 53 15 49 15 49 17 53 17 53 15 55 15 55 23 39 23 39 15 41 15 41 17 45 17 45 13 47 13"></polygon> + <polygon id="Shape" fill="#0980B0" points="5 13 7 13 7 15 5 15"></polygon> + <polygon id="Shape" fill="#41C7C5" points="7 13 13 13 13 15 7 15"></polygon> + <polygon id="Shape" fill="#41C7C5" points="57 13 63 13 63 15 57 15"></polygon> + <polygon id="Shape" fill="#0980B0" points="63 13 65 13 65 15 63 15"></polygon> + <polygon id="Shape" fill="#0980B0" points="3 15 5 15 5 17 3 17"></polygon> + <polygon id="Shape" fill="#41C7C5" points="5 15 7 15 7 17 5 17"></polygon> + <polygon id="Shape" fill="#882F05" points="9 15 11 15 11 23 9 23"></polygon> + <polygon id="Shape" fill="#0980B0" points="11 15 13 15 13 17 11 17"></polygon> + <polygon id="Shape" fill="#41C7C5" points="13 15 15 15 15 17 13 17"></polygon> + <polygon id="Shape" fill="#FFFFF6" points="17 15 19 15 19 17 17 17"></polygon> + <polygon id="Shape" fill="#A549C6" points="19 15 21 15 21 17 19 17"></polygon> + <polygon id="Shape" fill="#A549C6" points="25 15 27 15 27 17 25 17"></polygon> + <polygon id="Shape" fill="#FFFFF6" points="27 15 29 15 29 17 27 17"></polygon> + <polygon id="Shape" fill="#FFFFF6" points="41 15 43 15 43 17 41 17"></polygon> + <polygon id="Shape" fill="#679C2E" points="43 15 45 15 45 17 43 17"></polygon> + <polygon id="Shape" fill="#679C2E" points="49 15 51 15 51 17 49 17"></polygon> + <polygon id="Shape" fill="#FFFFF6" points="51 15 53 15 53 17 51 17"></polygon> + <polygon id="Shape" fill="#41C7C5" points="55 15 57 15 57 17 55 17"></polygon> + <polygon id="Shape" fill="#0980B0" points="57 15 59 15 59 17 57 17"></polygon> + <polygon id="Shape" fill="#882F05" points="59 15 61 15 61 23 59 23"></polygon> + <polygon id="Shape" fill="#41C7C5" points="63 15 65 15 65 17 63 17"></polygon> + <polygon id="Shape" fill="#0980B0" points="65 15 67 15 67 17 65 17"></polygon> + <polygon id="Shape" fill-opacity="0" fill="#000000" points="11 17 15 17 15 23 11 23"></polygon> + <polygon id="Shape" fill="#F6854A" points="21 17 25 17 25 19 21 19"></polygon> + <polygon id="Shape" fill="#F5B88D" points="37 17 39 17 39 21 37 21"></polygon> + <polygon id="Shape" fill-opacity="0" fill="#000000" points="55 17 59 17 59 23 55 23"></polygon> + <polygon id="Shape" fill="#A05307" points="19 19 21 19 21 21 25 21 25 19 27 19 27 23 19 23"></polygon> + <polygon id="Shape" fill="#FAC28C" points="21 19 25 19 25 21 21 21"></polygon> + <polygon id="Shape" fill="#E49453" points="31 19 33 19 33 23 31 23"></polygon> + <polygon id="Shape" fill="#F9A194" points="45 19 49 19 49 21 45 21"></polygon> + <polygon id="Shape" fill="#FAC28C" points="5 23 9 23 9 30 5 30"></polygon> + <polygon id="Shape" fill="#E49453" points="9 23 13 23 13 30 9 30"></polygon> + <polygon id="Shape" fill="#0980B0" points="13 23 17 23 17 30 13 30"></polygon> + <polygon id="Shape" fill="#41C7C5" points="17 23 31 23 31 33 19 33 19 35 17 35"></polygon> + <polygon id="Shape" fill="#55A233" points="31 23 35 23 35 31 31 31"></polygon> + <polygon id="Shape" fill="#7BC561" points="35 23 39 23 39 31 35 31"></polygon> + <polygon id="Shape" fill="#55A233" points="39 23 41 23 41 31 39 31"></polygon> + <polygon id="Shape" fill="#7BC561" points="41 23 43 23 43 25 45 25 45 27 47 27 47 25 49 25 49 27 51 27 51 29 53 29 53 31 41 31"></polygon> + <polygon id="Shape" fill="#F5B88D" points="43 23 49 23 49 25 47 25 47 27 45 27 45 25 43 25"></polygon> + <polygon id="Shape" fill="#F69F3A" points="49 23 53 23 53 29 51 29 51 27 49 27"></polygon> + <polygon id="Shape" fill="#55A233" points="53 23 57 23 57 30 53 30"></polygon> + <polygon id="Shape" fill="#F5B88D" points="57 23 61 23 61 30 57 30"></polygon> + <polygon id="Shape" fill="#FCD8B0" points="61 23 65 23 65 30 61 30"></polygon> + <polygon id="Shape" fill="#F5B88D" points="31 31 35 31 35 36 31 36"></polygon> + <polygon id="Shape" fill="#FCD8B0" points="35 31 39 31 39 36 35 36"></polygon> + <polygon id="Shape" fill="#013401" points="39 31 41 31 41 33 39 33"></polygon> + <polygon id="Shape" fill="#246804" points="41 31 53 31 53 33 41 33"></polygon> + <polygon id="Shape" fill="#0980B0" points="19 33 31 33 31 41 17 41 17 35 19 35"></polygon> + <polygon id="Shape" fill="#55A233" points="39 33 41 33 41 36 39 36"></polygon> + <polygon id="Shape" fill="#7BC561" points="41 33 53 33 53 36 41 36"></polygon> + <polygon id="Shape" fill="#2424AE" points="31 36 35 36 35 41 31 41"></polygon> + <polygon id="Shape" fill="#882F05" points="35 36 41 36 41 41 35 41"></polygon> + <polygon id="Shape" fill="#A05307" points="41 36 53 36 53 41 41 41"></polygon> + <polygon id="Shape" fill="#703605" points="17 41 31 41 31 45 17 45"></polygon> + <polygon id="Shape" fill="#501C03" points="31 41 35 41 35 45 31 45"></polygon> + <polygon id="Shape" fill="#8E7B71" points="35 41 41 41 41 45 35 45"></polygon> + <polygon id="Shape" fill="#C6B6AB" points="41 41 53 41 53 45 41 45"></polygon> + </g> + </g> +</svg> \ No newline at end of file diff --git a/data/images/navbar/menu-store.svg b/data/images/navbar/menu-store.svg new file mode 100644 index 0000000000000000000000000000000000000000..b4b762c1755b10362144976f55470ff292799e33 --- /dev/null +++ b/data/images/navbar/menu-store.svg @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- generated at drububu.com --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="50px" viewBox="0 0 60 50"> +<path d="M0 0h60v50h-15v-40h-42v40h-3v-50z" fill="rgba(0,0,0,0)"/> +<path d="M3 10h33v14h-9v-3h6v-8h-27v8h9v3h-12v-14z" fill="rgb(90,75,58)"/> +<path d="M36 10h3v14h-3v-14z" fill="rgb(60,50,38)"/> +<path d="M39 10h6v40h-6v-3h3v-20h-3v-6h3v-8h-3v-3z" fill="rgb(47,38,28)"/> +<path d="M6 13h27v3h-27v-3z" fill="rgb(159,100,28)"/> +<path d="M39 13h3v3h-3v-3z" fill="rgb(102,62,17)"/> +<path d="M6 16h3v5h-3v-5z" fill="rgb(180,112,31)"/> +<path d="M9 16h24v5h-6v-3h-12v3h-6v-5z" fill="rgb(208,131,36)"/> +<path d="M39 16h3v5h-3v-5z" fill="rgb(113,68,19)"/> +<path d="M15 18h6v6h-3v-3h-3v-3z" fill="rgb(223,222,219)"/> +<path d="M21 18h3v5h-3v-5z" fill="rgb(118,118,118)"/> +<path d="M24 18h3v3h-3v-3z" fill="rgb(168,106,30)"/> +<path d="M15 21h3v3h3v6h-6v-9z" fill="rgb(194,194,194)"/> +<path d="M24 21h3v3h-3v-3z" fill="rgb(70,58,45)"/> +<path d="M21 23h3v7h-3v-7z" fill="rgb(96,100,117)"/> +<path d="M3 24h12v3h-9v20h27v-20h-6v-3h9v26h-33v-26z" fill="rgb(70,58,45)"/> +<path d="M24 24h3v3h-3v-3z" fill="rgb(59,46,38)"/> +<path d="M36 24h3v26h-3v-26z" fill="rgb(48,40,31)"/> +<path d="M6 27h9v3h-9v-3z" fill="rgb(159,100,28)"/> +<path d="M24 27h9v3h-9v-3z" fill="rgb(159,100,28)"/> +<path d="M39 27h3v3h-3v-3z" fill="rgb(102,62,17)"/> +<path d="M6 30h3v17h-3v-17z" fill="rgb(180,112,31)"/> +<path d="M9 30h6v3h12v-3h6v17h-24v-17z" fill="rgb(208,131,36)"/> +<path d="M15 30h12v3h-12v-3z" fill="rgb(180,112,31)"/> +<path d="M39 30h3v15h-3v-15z" fill="rgb(113,68,19)"/> +<path d="M39 45h3v2h-3v-2z" fill="rgb(102,62,17)"/> +</svg> diff --git a/data/images/navbar/menu-support.svg b/data/images/navbar/menu-support.svg new file mode 100644 index 0000000000000000000000000000000000000000..cb5794032c0e096359deffb36b98330f47d09832 --- /dev/null +++ b/data/images/navbar/menu-support.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 48" width="59" height="48"> + <defs> + <image width="47" height="48" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAwBAMAAABziT7RAAAAAXNSR0IB2cksfwAAACpQTFRFDg4O8PT0iIOByMS+bGtvWks6ZF9ej46SIwoR3icnPDImVaIzJGgE/8QA1T7elgAAAA50Uk5TAP////////////////9XStsUAAABB0lEQVR4nGNggAJBKFBSUmJAATgljKHAxcVlEEmEQkFaWhqREuUdHeUgjGEUTgnjjpnGxjM7sLgKpwTQ4qjQUFIkjE1Do7D7nBQJRkHp3eXlpaFR5eVAfzhKbxRSUsAvwWxsvXsz1CgjJWVj6z1nDhCU2Gx7GRIfJi7OIMKBkARQxhgm4V5MWIK9vPY2QsLZvLwsLQG/BDPCJExX4ZAwL4eBEiIlTIChfQaIXYDJKhlZwiwtBS6RXowq4Q42CSiH4sESIB8mgeLBYqCDQcpA7kXxoDGyBNTymTPBgbj3MrESMxlmnjkDDnaCElDnAk06wwwNPgwJkHMREmj+wCoB8QlMAhocuCQAxGfgXuPUio8AAAAASUVORK5CYII="/> + </defs> + <style> + tspan { white-space:pre } + </style> + <use id="Layer 4" href="#img1" x="12" y="0" /> +</svg> \ No newline at end of file diff --git a/pages/assets/css/styles.css b/pages/assets/css/styles.css index 30710c254aaff0d94199e001e539d15db348d160..003d8e384db7a9e1fc378ab5aa916c0f4f9e17b8 100644 --- a/pages/assets/css/styles.css +++ b/pages/assets/css/styles.css @@ -38,7 +38,7 @@ a.siteName:hover { } .menuList{ display: table; - margin-top: 0; + margin-top: 1rem; } .barreDeNavigation .inferieure .menuList>li>a .nav-icon { display: inline-block; diff --git a/pages/client/includes/navbar.php b/pages/client/includes/navbar.php index fc37c0bf586df10edfef8e1f92324a5f33d6d501..2ba6e032ee35fe2d9c4a42e7b7968f90807561a9 100644 --- a/pages/client/includes/navbar.php +++ b/pages/client/includes/navbar.php @@ -13,10 +13,10 @@ </div> <div> <ul class="menuList"> - <li> + <li id="joinServerIcon"> <a href="#" class="nav-link"> <i class="nav-icon"> - <img src="<?=getWebsiteSetting("websiteUrl")?>data/images/navbar/menu-buy.gif" alt="Join icon"> + <img src="<?=getWebsiteSetting("websiteUrl")?>data/images/navbar/menu-buy.png" alt="Join icon"> </i> Nous rejoindre </a> @@ -25,4 +25,18 @@ </div> </div> </div> -</div> \ No newline at end of file +</div> +<script type="text/javascript"> + const joinServerIcon = document.getElementById('joinServerIcon'); + + joinServerIcon.addEventListener('mouseenter', e => { + animatedIcon("joinServerIcon", "enter"); + }); false); + joinServerIcon.addEventListener('mouseleave', e => { + animatedIcon("joinServerIcon", "leave"); + }); false); + + function animatedIcon(id, action){ + $("#"+id+" > i").css("background-color", "red"); + } +</script> \ No newline at end of file