<template>

  <div id="home">
<img src="../assets/ban.jpg" alt="INFOJUNE,TOUS LES LIENS DE LA JUNE" class="ban">
<img src="../assets/ban-mobile.jpg" alt="INFOJUNE,TOUS LES LIENS DE LA JUNE" class="ban-mobile">
    <div class="choice">
<h2 class="status">{{hover}}</h2>
      <div class="svg-container" >
      <svg
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xmlns:cc="http://creativecommons.org/ns#"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns="http://www.w3.org/2000/svg"
         id="svg8"
         version="1.1"
         height="390px"
         width="300px"
         >
        <defs
           id="defs2" />
        <metadata
           id="metadata5">
          <rdf:RDF>
            <cc:Work
               rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type
                 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
              <dc:title />
            </cc:Work>
          </rdf:RDF>
        </metadata>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a5"
           href="/finance" @mouseover='hover = "Financements"' @mouseleave='hover = not_hover'>
          <path
             id="path973"
             d="m 105.85263,175.81979 c -0.48507,-0.27729 -1.68889,-0.50979 -2.67516,-0.51667 l -1.79322,-0.0125 -1.502637,-6.74996 c -1.220857,-5.48424 -1.413817,-6.80626 -1.028997,-7.05016 1.161154,-0.73594 9.411234,0.23324 12.115294,1.42324 0.38805,0.17078 1.31282,0.57793 2.05502,0.90479 0.91771,0.40415 1.2861,0.75944 1.1514,1.11047 -0.18512,0.48241 -7.27976,11.43473 -7.38947,11.40746 -0.0277,-0.007 -0.44716,-0.23938 -0.93223,-0.51667 z"
             style="fill:#c0392b;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a8"
           href="/services-instances" @mouseover='hover = "Service et instances"' @mouseleave='hover = not_hover'>
          <path
             id="path971"
             d="m 111.11673,179.46417 c -1.06715,-1.11391 -2.68814,-2.38959 -3.60219,-2.83484 l -1.66191,-0.80954 2.69069,-4.12727 c 1.47988,-2.27 3.16428,-4.88134 3.74312,-5.80297 0.57883,-0.92163 1.243,-1.67569 1.47592,-1.67569 0.23293,0 1.08095,0.47625 1.8845,1.05833 0.80354,0.58208 1.60186,1.05833 1.77405,1.05833 0.94841,0 7.80693,7.70859 7.80693,8.77454 0,0.17705 -1.38906,1.03335 -3.08681,1.9029 -4.63875,2.37587 -7.28174,3.81644 -7.65527,4.17252 -0.68942,0.65721 -1.48195,0.25347 -3.36903,-1.71631 z"
             style="fill:#2ecc71;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a11"
           href="/tools" @mouseover='hover = "Outils"' @mouseleave='hover = not_hover'>
          <path
             sodipodi:nodetypes="sccscccccs"
             id="path977"
             d="m 93.133516,170.20986 c -2.07399,-3.04635 -3.82024,-5.6952 -3.88056,-5.88635 -0.0943,-0.29866 1.99777,-1.07748 6.26538,-2.33248 0.59586,-0.17523 1.64252,-0.3186 2.32591,-0.3186 h 1.24254 l 1.334664,6.04155 c 0.73407,3.32285 1.71989,6.58731 1.81174,6.93856 0.17359,0.66379 -0.32606,0.46726 -3.917684,0.91875 l -1.41111,0.17738 z"
             style="fill:#3498db;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a14"
           href="/change" @mouseover='hover = "Plateformes d échanges"' @mouseleave='hover = not_hover'>
          <path
             id="path981"
             d="m 85.550026,175.46227 c -3.04164,-1.97583 -5.62249,-3.6862 -5.73523,-3.80081 -0.26748,-0.27194 3.80439,-4.24215 5.62105,-5.48072 0.77611,-0.52913 1.95536,-1.23181 2.62056,-1.5615 l 1.20945,-0.59943 3.81927,5.86443 3.81927,5.86443 -1.36261,0.70642 c -0.74944,0.38853 -2.01702,1.14298 -2.81685,1.67656 -0.79983,0.53357 -1.49707,0.95954 -1.54944,0.9466 -0.0524,-0.0129 -2.58382,-1.64014 -5.62547,-3.61598 z"
             style="fill:#7f8c8d;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a17"
           href="/faq" @mouseover='hover = "FAQ"' @mouseleave='hover = not_hover'>
          <path
             id="path983"
             d="m 81.209966,184.49856 c -3.68652,-0.22722 -6.82184,-0.42657 -6.96736,-0.443 -1.09022,-0.12306 1.44803,-6.60089 4.18106,-10.67039 0.69557,-1.0357 1.32307,-1.94308 1.39445,-2.01641 0.0714,-0.0733 1.60438,0.81947 3.40666,1.98399 1.80227,1.16452 4.42487,2.8575 5.82799,3.76217 l 2.55113,1.64487 -1.26088,1.79387 c -0.69349,0.98662 -1.524,2.3708 -1.84558,3.07595 l -0.58469,1.28208 z"
             style="fill:#9b59b6;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a20"
           href="/blockchain" @mouseover='hover = "Blockchain"' @mouseleave='hover = not_hover'>
          <path
             sodipodi:nodetypes="ccccccsc"
             id="path985"
             d="m 73.745026,194.57374 c -0.33132,-1.76613 -0.298682,-10.2273 0.108258,-10.60672 0.38497,-0.35892 13.614852,0.51123 14.013332,0.91022 0.12716,0.12733 0.0618,0.8417 -0.14533,1.5875 -0.20709,0.7458 -0.37741,2.33749 -0.37849,3.53709 -0.002,1.77217 -0.11771,2.21495 -0.61933,2.36173 -3.64065,1.06526 -12.269023,3.65306 -12.526953,3.65306 -0.18294,0 -0.329267,-0.79141 -0.451487,-1.44288 z"
             style="fill:#16a085;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a23"
           href="/trm" @mouseover='hover = "Théorie Relative de la Monnaie"' @mouseleave='hover = not_hover'>
          <path
             sodipodi:nodetypes="ssccccccs"
             id="path993"
             d="m 86.805976,214.17913 c -2.51117,-1.42292 -7.22031,-5.89321 -7.22031,-6.8541 0,-0.27397 10.185989,-8.13009 10.953809,-8.4428 0.15742,-0.0641 0.493471,0.72426 1.125751,1.37297 0.63228,0.64872 1.69531,1.587 2.36229,2.08507 l 1.21268,0.90558 -3.63279,5.70442 c -1.99804,3.13743 -3.73437,5.68886 -3.85852,5.66983 -0.12415,-0.019 -0.54846,-0.21746 -0.94291,-0.44097 z"
             style="fill:#27ae60;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a26"
           href="/asso" @mouseover='hover = "Associations"' @mouseleave='hover = not_hover'>
          <path
             sodipodi:nodetypes="ccscsscscc"
             id="path989"
             d="m 78.481556,205.88552 c -1.43983,-2.13343 -2.61692,-4.49057 -3.50679,-7.02239 -1.26566,-3.60105 -1.54888,-3.32263 5.3563,-5.26571 3.34698,-0.94182 6.569129,-1.87634 6.781369,-1.9504 0.21223,-0.0741 0.427211,1.03908 0.856681,2.34734 0.42947,1.30826 1.24597,3.0111 1.81444,3.7841 0.56847,0.773 0.99593,1.43367 0.94992,1.46816 -0.046,0.0345 -2.57736,1.90412 -5.62522,4.15474 l -5.54156,4.09203 z"
             style="fill:#2980b9;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a29"
           href="/forums" @mouseover='hover = "Forums"' @mouseleave='hover = not_hover'>
          <path
             sodipodi:nodetypes="sscccs"
             id="path997"
             d="m 93.290316,217.39277 c -2.18295,-0.71838 -5.6118,-2.37273 -5.6118,-2.70758 0,-0.36994 7.12153,-11.4155 7.359,-11.41388 0.6618,0.005 5.428264,1.26141 5.526424,1.5559 0.0634,0.19033 -0.889167,3.65201 -1.801124,7.06102 -1.89101,7.06887 -1.60208,6.77824 -5.4725,5.50454 z"
             style="fill:#8e44ad;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a32"
           href="/agpl" @mouseover='hover = "Licences AGPL"' @mouseleave='hover = not_hover'>
          <path
             sodipodi:nodetypes="cccccccccccc"
             id="path1001"
             d="m 96.924076,218.03323 c -0.38076,-0.24134 -0.14996,-1.5234 1.1898,-6.60918 0.9142,-3.47037 1.841245,-6.55203 1.996944,-6.72182 0.15569,-0.16979 1.31485,-0.24186 2.63907,-0.28636 1.32423,-0.0446 2.89384,-0.24322 3.48802,-0.44143 l 1.08034,-0.36038 2.05647,6.21819 c 1.13105,3.42001 2.12638,6.40636 2.21183,6.63633 0.0922,0.24805 -0.43039,0.57091 -1.28472,0.79375 -0.79205,0.20659 -2.05382,0.53437 -2.80394,0.7284 -1.65475,0.42802 -9.913224,0.46126 -10.573814,0.0426 z"
             style="fill:#f1c40f;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a35"
           href="/tdc" @mouseover='hover = "Toile de confiance"' @mouseleave='hover = not_hover'>
          <path
             id="path1003"
             d="m 127.55024,214.11872 c -2.35997,-2.23038 -4.48675,-4.05524 -4.72617,-4.05524 -0.37182,0 -3.33463,2.18332 -3.85936,2.844 -0.097,0.12214 -0.59645,0.44503 -1.10984,0.71751 -0.5134,0.27249 -1.97915,1.10291 -3.25722,1.84537 -1.27807,0.74246 -2.59051,1.29809 -2.91652,1.23472 -0.42239,-0.0821 -1.11714,-1.68689 -2.41713,-5.58327 -2.64771,-7.93583 -2.58954,-7.24446 -0.68051,-8.08892 1.62184,-0.71742 4.38399,-2.69838 4.38399,-3.14411 0,-0.1307 -1.91339,-2.45893 -4.25198,-5.17383 l -4.25198,-4.93619 1.51795,-0.18629 c 2.39765,-0.29425 8.17615,0.0297 8.62255,0.48345 0.80871,0.82195 17.44686,27.47205 17.34362,27.7801 -0.0586,0.17486 -2.03743,-1.50692 -4.3974,-3.7373 z"
             style="fill:#e67e22;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a38"
           href="https://duniter.org/fr/files/licence_g1.txt" @mouseover='hover = "Licence G1"' @mouseleave='hover = not_hover'>
          <path
             sodipodi:nodetypes="ccscccccscccc"
             id="path1678"
             d="m 129.88859,218.25132 1.14281,0.061 -1.14281,-0.061 c -1.83978,-0.0983 1.59274,0.10436 1.14281,0.061 -0.14552,-0.014 -0.5711,0.65255 -1.14281,-0.061 z m -7.12075,-14.70456 -8.70452,-13.78392 2.17814,-0.0116 c 1.19797,-0.006 5.07128,-0.0369 8.60735,-0.0678 3.53608,-0.0309 6.51453,0.0292 6.61878,0.13342 0.10425,0.10426 0.14798,6.33752 0.0972,13.85169 l -0.0924,13.66214 z"
             style="fill:#e74c3c;stroke-width:0.352778" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a41"
           href="/com" @mouseover='hover = "Communication"' @mouseleave='hover = not_hover'>
          <path
             style="fill:#c0392b;fill-opacity:1;stroke:#000000;stroke-width:0.0132723;stroke-opacity:1;image-rendering:auto"
             id="path3777-2"
             d="m 100.66404,223.70827 c -0.10618,0.0664 -0.51762,0.21236 -0.91579,0.33181 -0.86269,0.27871 -1.40686,0.65034 -2.33592,1.59267 -0.7167,0.74325 -0.82288,0.92906 -1.24759,2.42883 -0.30527,1.04851 -0.29199,1.87139 0.0531,2.95972 0.38489,1.26086 1.40686,2.76063 2.11029,3.11898 0.22563,0.11945 0.59725,0.35835 0.79634,0.53089 0.2389,0.19909 0.54416,0.31854 0.83615,0.31854 0.2389,0 0.69016,0.0929 0.98215,0.21235 0.57071,0.22563 0.78306,0.21236 2.25628,-0.18581 1.28742,-0.34508 3.31808,-1.79176 3.31808,-2.36246 0,-0.0531 0.10617,-0.22564 0.2389,-0.37163 0.35835,-0.39817 0.83615,-1.93775 0.84942,-2.76063 0,-0.41144 -0.10618,-1.04851 -0.27872,-1.52631 -0.14599,-0.45126 -0.27871,-0.91579 -0.27871,-1.0087 0,-0.15927 -0.7698,-1.27414 -1.12815,-1.61921 -1.04851,-1.02197 -2.38901,-1.60595 -3.92859,-1.69886 -0.6238,-0.0265 -1.22105,-0.0133 -1.32723,0.0398 z" />
        </a>
        <a
           transform="matrix(2.7389625,0,0,2.7389625,-133.95126,-374.13504)"
           id="a44"
           href="/website" @mouseover='hover = "Sites internet"' @mouseleave='hover = not_hover'>
          <path
             style="fill:#f1c40f;fill-opacity:1;stroke:#000000;stroke-width:0.0132723;stroke-opacity:1;image-rendering:auto"
             id="path3773-5"
             d="m 93.85536,145.99908 c -0.94233,0.63707 -1.87139,1.35377 -2.07048,1.59267 -0.10617,0.13273 -0.50434,0.3849 -0.88924,0.54417 -0.37162,0.17254 -0.7167,0.41144 -0.75652,0.54416 -0.0531,0.13272 -0.27871,0.35835 -0.50435,0.50435 -0.2389,0.14599 -0.51761,0.43798 -0.63706,0.63707 -0.19909,0.37162 -0.19909,0.37162 0.6238,1.15468 0.45125,0.43799 0.91578,0.95561 1.02196,1.16797 0.10618,0.21235 0.41144,0.49107 0.66361,0.61052 0.25218,0.11945 0.50435,0.27872 0.54417,0.34508 0.0796,0.13272 2.08374,1.36704 2.84027,1.75194 0.25217,0.13272 0.67688,0.27872 0.92905,0.31853 0.26545,0.0531 0.65034,0.19909 0.87598,0.34508 0.21235,0.13273 0.50434,0.2389 0.62379,0.2389 0.22563,0 1.73867,0.43799 2.3492,0.67689 0.21235,0.0929 0.34507,0.0929 0.41144,0 0.0531,-0.0929 0.70343,-0.13272 1.85812,-0.0929 1.32722,0.0398 1.96429,0 2.50846,-0.14599 0.41144,-0.11945 1.07505,-0.25217 1.47322,-0.29199 0.39816,-0.0531 0.96888,-0.21236 1.26086,-0.37162 0.70343,-0.35836 1.60595,-0.7698 2.18993,-0.98215 0.25217,-0.10618 0.66361,-0.37163 0.90251,-0.61053 0.23891,-0.2389 0.59726,-0.4778 0.79634,-0.51762 0.19908,-0.0531 0.53089,-0.2389 0.72998,-0.41144 0.21235,-0.15926 0.42471,-0.30526 0.4778,-0.30526 0.0531,0 0.30526,-0.27872 0.57071,-0.63707 0.26544,-0.34508 0.61052,-0.75652 0.75652,-0.91579 0.43798,-0.46453 0.50434,-1.03523 0.14599,-1.32722 -0.17254,-0.13273 -0.4778,-0.42472 -0.69016,-0.66362 -0.21235,-0.22563 -0.58398,-0.49107 -0.80961,-0.58398 -0.42471,-0.15927 -1.08832,-0.67688 -1.9112,-1.45995 -0.50435,-0.49107 -1.64576,-1.31395 -1.81831,-1.31395 -0.0664,0 -0.39816,0.25217 -0.74324,0.55743 -0.88924,0.79634 -1.69886,1.3405 -2.38901,1.61922 -0.33181,0.13272 -0.82288,0.35835 -1.11487,0.50435 -0.45126,0.2389 -0.75653,0.26544 -2.46865,0.26544 -1.67231,0 -2.01738,-0.0398 -2.46864,-0.26544 -0.27872,-0.13273 -0.69016,-0.29199 -0.91579,-0.34508 -0.58398,-0.146 -1.45995,-0.75652 -2.97299,-2.07048 -0.54416,-0.4778 -0.76979,-0.49107 -1.39359,-0.0664 z" />
        </a>
        <path
           style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.0363523;stroke-opacity:1;image-rendering:auto"
           id="path3771-3"
           d="M 133.0756,0.34072939 C 132.38488,0.4497401 129.58577,0.74059052 126.8957,1.0677596 113.88157,2.5218475 98.540923,6.7023809 86.181163,12.118871 60.443734,23.388057 38.050744,42.327601 22.819126,65.811165 10.495712,84.75071 3.0798616,105.07162 0.13531264,127.90085 c -0.9451338,7.27046 -0.9451338,27.2642 0,34.53467 4.32594466,33.55313 18.79413136,62.88944 42.49582536,86.19123 5.561902,5.48918 8.797247,8.28832 13.995633,12.25072 20.429977,15.44973 44.349769,25.15578 70.450689,28.50021 7.27044,0.94514 27.26421,0.94514 34.53465,0 26.10094,-3.34443 50.02073,-13.05048 70.45071,-28.50021 5.19839,-3.9624 8.43374,-6.76154 13.99564,-12.25072 23.70166,-23.30179 38.16988,-52.6381 42.4958,-86.19123 0.94513,-7.27047 0.94513,-27.26421 0,-34.53467 -4.32592,-33.553145 -18.79414,-62.889435 -42.4958,-86.191241 -5.5619,-5.489182 -8.79725,-8.28832 -13.99564,-12.250722 C 211.96002,14.263643 188.62187,4.702993 163.10257,1.1768251 158.70393,0.55883297 155.32318,0.37707542 145.98063,0.30438335 139.58264,0.23180084 133.76629,0.26795516 133.0756,0.34081155 Z M 158.44948,17.753466 c 49.1119,6.28893 89.1721,39.078696 105.16711,85.936754 4.68945,13.77753 6.68884,26.10094 6.68884,41.47795 0,15.37702 -1.99939,27.70044 -6.68884,41.47794 -15.12253,44.31342 -52.23821,76.48519 -97.82394,84.80987 -8.36105,1.49042 -12.39614,1.85394 -22.35665,1.85394 -9.96054,0 -13.99564,-0.36352 -22.35667,-1.85394 -45.585735,-8.32468 -82.701416,-40.49645 -97.82397,-84.80987 -4.689432,-13.7775 -6.688792,-26.10092 -6.688792,-41.47794 0,-15.37701 1.99936,-27.70042 6.688792,-41.47795 15.122554,-44.313399 52.201888,-76.48517 97.82397,-84.809836 4.25322,-0.763404 6.76153,-1.090573 14.35915,-1.817604 3.27171,-0.327168 18.79413,0.14544 23.011,0.690686 z" />
      </svg>
</div>
    </div>
    <h2>Ou cliquez sur un des boutons</h2>
    <choicebox buttons="Blockchain,FAQ,Plateformes d'échange,Licences AGPL,Outils,Toile de Confiance,Charte,Instances et Services,Financements,Communication,Sites internet"
              links="/blockchain,/faq,/change,/agpl,/tools,/tdc,https://duniter.org/fr/files/licence_g1.txt, /services-instances,/finance,/com,/website"></choicebox>
  </div>

</template>

<script>
import choicebox from '@/components/ChoiceBox.vue'
export default {
  components: {
    choicebox,
  },
  data: function(){
    return{
      hover: this.not_hover,
      not_hover: "Passez votre curseur sur une partie du logo g1",
    }
  }
}
</script>
<style>

#home{
  display:flex;
  flex-direction: column;
align-items: center;
}

.svg-container{
  width:300px;
  height:330px;
  display: flex;
  flex-direction:row ;
  margin-right:20px;
}
.choice{
  display: flex;
  flex-direction: column;
align-items:center;
}
.status{
  width:100%;
  height:25px;
  margin-bottom: 50px;
  text-align:center;
}
.ban{
    margin-bottom:50px;
    width:70%;
}
.ban-mobile{
  display:none;
}
@media only screen and (max-width: 500px){
.ban{
  display:none;
}
.ban-mobile{
  display:block;
  width:100%;
}
}

</style>
