portal/cache/2ceceb7f863713618c737c0f3e8b66d8b628d314.php

<div id="menu">
  <canvas class="border" width="100" height="100"></canvas>
  <nav>
    <a class="diseño" href="<?php echo e($urls->base); ?>/diseño">
      <img src="<?php echo e($urls->images); ?>/diseño.svg" />
    </a>
    <a class="programacion" href="<?php echo e($urls->base); ?>/programacion">
      <img src="<?php echo e($urls->images); ?>/programacion.svg" />
    </a>
    <a class="portafolios" href="<?php echo e($urls->base); ?>/portafolio">
      <img src="<?php echo e($urls->images); ?>/portafolio.svg" />
    </a>
    <a class="contactos" href="<?php echo e($urls->base); ?>/contacto">
      <img src="<?php echo e($urls->images); ?>/contacto.svg" />
    </a>
  </nav>
  <div class="semi">
    <canvas class="img_semi" width="100" height="100"></canvas>
    <img src="<?php echo e($urls->images); ?>/fotos/1.jpg" />
  </div>
</div>

<?php $__env->startPush('scripts'); ?>
  <script type="text/javascript">
    let menu = {
      context: null,
      width: 0,
      height: 0,
      line: 0,
      segmentos: [
        'diseño',
        'programacion',
        'portafolios',
        'contactos',
        'final'
      ],
      colors: {
        diseño: colores.verde_1,
        programacion: colores.verde_2,
        portafolios: colores.verde_agua,
        contactos: colores.celeste_logo,
        final: colores.azul_logo
      },
      angulos: {
        diseño: [
          180,
          180+45+10
        ],
        programacion: [
          180+45+10,
          180+90-15
        ],
        portafolios: [
          180+90-15,
          180+90+15
        ],
        contactos: [
          180+90+15,
          360-45-10
        ],
        final: [
          360-45-10,
          360
        ]
      },
      images: {
        diseño: [.25, .4, 1/14],
        programacion: [.37, .1, 1/14],
        portafolios: [.55, .1, 1/14],
        contactos: [.67, .4, 1/14]
      },
      setup: function() {
        let canvas = $('#menu .border').get(0)
        canvas.width = window.innerWidth
        canvas.height = Math.max(canvas.height, window.innerWidth/14*3)
        this.width = canvas.width
        this.height = canvas.height
        this.line = canvas.height / 17
        this.context = canvas.getContext('2d')
      },
      drawArc: function(x, y, r, start, end, width, counter, color) {
        this.context.beginPath()
        this.context.arc(x, y, r, start*Math.PI/180, end*Math.PI/180, counter)
        this.context.lineWidth = width
        this.context.strokeStyle = color
        this.context.stroke()
      },
      draw: function() {
        $('#menu').height($('#menu .border').height())
        $.each(menu.segmentos, function(i, el) {
          if (menu.images[el]) {
            $('#menu .' + el + ' img').css('left', menu.images[el][0] * menu.width)
            $('#menu .' + el + ' img').css('top', menu.images[el][1] * menu.height)
            $('#menu .' + el + ' img').width(menu.images[el][2] * menu.width)
          }
          menu.drawArc(menu.width/2, menu.height*1.75, menu.width/3, menu.angulos[el][0], menu.angulos[el][1], menu.line, false, menu.colors[el])
        })
      },
      reDraw: function() {
        this.context.canvas.width = window.innerWidth
        this.context.canvas.height = Math.max(100, window.innerWidth/14*3)
        this.width = this.context.canvas.width
        this.height = this.context.canvas.height
        this.line = this.context.canvas.height / 17

        this.draw()
      }
    }
    let semi = {
      img: '',
      w: 0,
      h: 0,
      ctx: null,
      setup: function() {
        this.img = $('#menu .semi img').attr('src')
        let canvas = $('#menu .semi .img_semi').get(0)
        canvas.width = $('#menu .semi').width()
        canvas.height = $('#menu .semi').width()
        this.w = canvas.width
        this.h = canvas.height
        this.ctx = canvas.getContext('2d')
      },
      draw: function() {
        this.ctx.save()
        this.ctx.beginPath()
        this.ctx.arc(this.w, this.h, this.w, Math.PI/180*(180+45), Math.PI/180*(360-45), false)
        this.ctx.closePath()
        this.strokeStype = colores.amarillo
        this.lineWidth = 5
        this.stroke()
        this.ctx.clip()

        this.ctx.drawImage(this.img, 0, 0, this.w/2, this.h/4)
        this.ctx.restore()
      }
    }
    $(document).ready(() => {
      menu.setup()
      semi.setup()
      menu.draw()
      $(window).resize(() => {
        menu.reDraw()
      })
    })
  </script>
<?php $__env->stopPush(); ?>
<?php /**PATH F:\Z\Workspace\git\provm\portal\resources\views/home/menu.blade.php ENDPATH**/ ?>