Version nueva

resources/views/home.blade.php

@@ -0,0 +1,6 @@
+@extends('layout.base')
+
+@section('page_content')
+  @include('home.logo')
+  @include('home.menu')
+@endsection

resources/views/home/logo.blade.php

@@ -0,0 +1,3 @@
+<div id="logo">
+  <img class="logo" src="{{$urls->images}}/logo.svg" />
+</div>

resources/views/home/menu.blade.php

@@ -0,0 +1,146 @@
+<div id="menu">
+  <canvas class="border" width="100" height="100"></canvas>
+  <nav>
+    <a class="diseño" href="{{$urls->base}}/diseño">
+      <img src="{{$urls->images}}/diseño.svg" />
+    </a>
+    <a class="programacion" href="{{$urls->base}}/programacion">
+      <img src="{{$urls->images}}/programacion.svg" />
+    </a>
+    <a class="portafolios" href="{{$urls->base}}/portafolio">
+      <img src="{{$urls->images}}/portafolio.svg" />
+    </a>
+    <a class="contactos" href="{{$urls->base}}/contacto">
+      <img src="{{$urls->images}}/contacto.svg" />
+    </a>
+  </nav>
+  <div class="semi">
+    <canvas class="img_semi" width="100" height="100"></canvas>
+    <img src="{{$urls->images}}/fotos/1.jpg" />
+  </div>
+</div>
+
+@push('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>
+@endpush

resources/views/layout/base.blade.php

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="{{$page_language}}">
+@include('layout.head')
+@include('layout.body')
+</html>

resources/views/layout/body.blade.php

@@ -0,0 +1,5 @@
+<body>
+  @yield('page_content')
+
+  @include('layout.scripts')
+</body>

resources/views/layout/head.blade.php

@@ -0,0 +1,6 @@
+<head>
+  <meta charset="utf8" />
+  <title>ProVM</title>
+  <meta name="description" content="Web developers" />
+  <link rel="stylesheet" href="{{$urls->styles}}/home.css" />
+</head>

resources/views/layout/scripts.blade.php

@@ -0,0 +1,4 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
+<script type="text/javascript" src="{{$urls->scripts}}/build.js"></script>
+
+@stack('scripts')