Proyectos y parte de Proyecto

resources/assets/sass/home.scss

@@ -145,17 +145,3 @@
     }
   }
 }
-
-#contacto {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-
-  .header {
-    color: #0d103c !important;
-    font-weight: 900;
-  }
-  .form .button {
-    background-color: #429ab7;
-    color: white;
-  }
-}

resources/assets/sass/main.scss

@@ -56,6 +56,20 @@ a {
   color: inherit !important;
 }
 
+#contacto {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
+  .header {
+    color: #0d103c !important;
+    font-weight: 900;
+  }
+  .form .button {
+    background-color: #429ab7;
+    color: white;
+  }
+}
+
 footer {
   background-color: #429ab7;
   color: white;

resources/assets/sass/proyecto.scss

@@ -0,0 +1,84 @@
+#proyecto {
+  background-color: #a7a9ab;
+  padding-bottom: 2rem;
+
+  .titulo {
+    color: #404041;
+    .header {
+      color: #0d103c !important;
+    }
+    .direccion {
+      padding-left: 2rem;
+    }
+    .publicado {
+      padding-top: .5rem;
+    }
+    padding-bottom: 1rem;
+  }
+
+  #galeria {
+    padding-bottom: 4rem;
+
+    &>.image img {
+      max-height: 60rem;
+    }
+
+    .grid {
+      padding-top: 2rem;
+    }
+  }
+  #buscar {
+    color: #404041 !important;
+    padding-top: 2rem;
+
+    .header {
+      color: inherit;
+    }
+    .divider {
+      background-color: white;
+    }
+    .field {
+      input[type='text'] {
+        background-color: inherit !important;
+      }
+    }
+    .slider {
+      .track-fill {
+        background-color: #0d103c !important;
+      }
+    }
+    .price_label {
+      margin-top: -1rem;
+      float: right;
+    }
+  }
+  #datos {
+    .tabular {
+      .item {
+        background-color: #a7a9ab !important;
+        border: thin solid white;
+
+        &:not(.active) {
+          border: thin solid #a7a9ab;
+          background-color: white !important;
+        }
+        &:last-child {
+          margin-left: 1rem;
+        }
+      }
+    }
+    .segment {
+      border: none !important;
+
+      .informacion {
+        .row {
+          border-bottom: thin dotted white;
+
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
+}

resources/assets/sass/proyectos.scss

@@ -0,0 +1,60 @@
+#proyectos {
+  background-color: #a7a9ab;
+  padding-top: 2rem;
+
+  .titulo {
+    color: #0d103c;
+  }
+
+  .tabular.menu .item {
+    color: #404041 !important;
+  }
+
+  .grid {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+
+    .ficha {
+      border-radius: 0;
+      border: 0;
+      box-shadow: none !important;
+
+      .content {
+        .segment {
+          background-color: #e6e6e7 !important;
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+          font-weight: 300;
+        }
+        .button {
+          font-family: inherit !important;
+          font-weight: 900;
+          padding-top: 0.3rem !important;
+          padding-bottom: 0.3rem !important;
+          background-color: #0d103c !important;
+        }
+      }
+      .image {
+        overflow: hidden;
+      }
+      .overlay {
+        background-color: #0d103c;
+        color: white;
+        opacity: 0.8;
+        text-align: center;
+        position: absolute;
+        z-index: 999;
+        top: 1.9rem;
+        right: -2.2rem;
+        width: 10rem;
+        padding-top: .3rem;
+        padding-bottom: .3rem;
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+    }
+  }
+}

resources/routes/web/proyectos.php

@@ -2,8 +2,11 @@
 use ProVM\KI\Common\Controller\Web\Proyectos;
 
 $app->group('/proyectos', function($app) {
+  $app->get('/segmento/{segmento}', [Proyectos::class, 'segmento']);
   $app->get('/destacados/{page}', [Proyectos::class, 'destacados']);
+  $app->get('[/]', Proyectos::class);
 });
 $app->group('/proyecto/{proyecto}', function($app) {
   $app->get('/ficha', [Proyectos::class, 'ficha']);
+  $app->get('[/]', [Proyectos::class, 'show']);
 });

resources/views/home.blade.php

@@ -7,7 +7,6 @@
   @include('home.segmentos')
   @include('home.resumen')
   @include('home.indicadores')
-  @include('home.contacto')
 @endsection
 
 @push('styles')

resources/views/layout/contacto.blade.php

@@ -0,0 +1,67 @@
+<div id="contacto">
+  <div class="ui container">
+    <div class="ui header">
+      CONTACTO
+    </div>
+    <div class="ui two columns stackable grid">
+      <div class="column">
+        <form id="contacto_form" method="post" class="ui form">
+          <div class="ui grid">
+            <div class="eight wide column">
+              <div class="input">
+                <input type="text" name="nombre" placeholder="Nombre" />
+              </div>
+            </div>
+            <div class="eight wide column">
+              <div class="input">
+                <input type="text" name="mail" placeholder="Mail" />
+              </div>
+            </div>
+            <div class="sixteen wide column">
+              <div class="input">
+                <textarea name="mensaje" rows="2" placeholder="Mensaje"></textarea>
+              </div>
+            </div>
+            <div class="four wide column">
+              <button class="ui button">
+                Enviar
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="column">
+        <div class="ui center aligned grid">
+          <div class="eight wide column left aligned">
+            <p>
+              Av. Calle 123, Comuna, RM
+              <br />
+              <a href="mailto:contacto@capitalinvestments.cl">
+                contacto@capitalinvestments.cl
+              </a>
+              <br />
+              <a href="tel:56222222222">+56 2 2222 2222</a>
+            </p>
+            <p>
+              <a href="youtube">
+                <i class="youtube icon"></i>
+              </a>
+              <a href="instagram">
+                <i class="instagram icon"></i>
+              </a>
+              <a href="facebook">
+                <i class="facebook f icon"></i>
+              </a>
+              <a href="linkedin">
+                <i class="linkedin icon"></i>
+              </a>
+              <a href="twitter">
+                <i class="twitter icon"></i>
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

resources/views/layout/footer.blade.php

@@ -1,3 +1,4 @@
+@include('layout.contacto')
 <footer>
   <div class="ui container">
     <div class="ui tiny text menu">
@@ -10,7 +11,7 @@
           N° Visitas
           <div class="ui label" >
             <i class="users icon"></i>
-            {{$visitas}}
+            {{$footer->visitas}}
           </div>
         </div>
       </div>

resources/views/layout/header/franja.blade.php

@@ -18,13 +18,13 @@
       </div>
       <div class="spacer"></div>
       <div class="item">
-        UF Hoy: ${{$valor_uf}}.-
+        UF Hoy: {{$header->uf}}.-
       </div>
       <div class="spacer"></div>
       <div class="item">
-        {{$fecha}}
+        {{$header->fecha}}
         &thinsp;
-        {{$hora}}
+        {{$header->hora}}
       </div>
       <div class="right menu">
         <div class="item">

resources/views/layout/header/menu.blade.php

@@ -9,7 +9,7 @@
       <a class="item">
         NOSOTROS
       </a>
-      <a class="item">
+      <a class="item" href="{{$urls->base}}/proyectos">
         PRODUCTOS
       </a>
       <a class="item">

resources/views/proyectos/ficha.blade.php

@@ -48,9 +48,11 @@
       Entrega Estimada
     </div>
     <span class="right floated">
-      <button class="ui inverted brand button">
-        Ver
-      </button>
+      <a href="{{$urls->base}}/proyecto/{{$proyecto->id}}">
+        <button class="ui inverted brand button">
+          Ver
+        </button>
+      </a>
     </span>
   </div>
 </div>

resources/views/proyectos/list.blade.php

@@ -0,0 +1,79 @@
+@extends('layout.base')
+
+@section('page_content')
+  <div id="proyectos">
+    <div class="ui container">
+      <div class="ui header titulo">
+        PRODUCTOS
+      </div>
+      <div class="ui top attached tabular menu">
+        <a class="active item" data-tab="todo">
+          Todo
+        </a>
+        @foreach ($segmentos as $segmento)
+          <a class="item" data-tab="{{mb_strtolower($segmento->titulo)}}">
+            {{$segmento->titulo}}
+          </a>
+        @endforeach
+      </div>
+      <div class="ui active tab bottom attached" data-tab="todo">
+        <div class="ui four column stackable grid"></div>
+      </div>
+      @foreach ($segmentos as $segmento)
+        <div class="ui tab bottom attached" data-tab="{{mb_strtolower($segmento->titulo)}}">
+          <div class="ui four column stackable grid"></div>
+        </div>
+      @endforeach
+    </div>
+  </div>
+@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/proyectos.css" />
+@endpush
+
+@push('scripts')
+  <script type="text/javascript">
+    function loadSegmento(segmento) {
+      var name = segmento
+      if (name.indexOf(' ') > -1) {
+        name = name.replaceAll(' ', '_')
+      }
+      var url = '{{$urls->base}}/proyectos/segmento/' + name
+      $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
+      $.getJSON(url, (data) => {
+        $(".tab[data-tab='" + segmento + "']").find('.grid').append(
+          $('<div></div>').attr('class', 'ui active centered inline loader')
+        )
+        $.each(data.proyectos, (i, el) => {
+          getProyecto(segmento, el)
+        })
+      })
+    }
+    function getProyecto(segmento, id_proyecto) {
+      var url = '{{$urls->base}}/proyecto/' + id_proyecto + '/ficha'
+      $.ajax({
+        url: url,
+        success: (data) => {
+          if ($(".tab[data-tab='" + segmento + "']").find('.grid').find('.loader').length > 0) {
+            $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
+          }
+          $(".tab[data-tab='" + segmento + "']").find('.grid').append(
+            $('<div></div>').attr('class', 'column').append(data)
+          )
+        }
+      })
+    }
+    $(document).ready(() => {
+      loadSegmento('todo')
+      $('#proyectos').find('.tabular.menu .item').tab({
+        onFirstLoad: (tabPath, parameterArray, historyEvent) => {
+          if (tabPath == 'todo') {
+            return
+          }
+          loadSegmento(tabPath)
+        }
+      })
+    })
+  </script>
+@endpush

resources/views/proyectos/proyecto/buscar.blade.php

@@ -0,0 +1,54 @@
+<div id="buscar">
+  <div class="ui header">
+    Buscar
+  </div>
+  <hr class="ui divider" />
+  <form class="ui form">
+    <div class="ui field">
+      <label>Estado:</label>
+      <input type="text" name="estado" />
+    </div>
+    <div class="ui field">
+      <label>Tipo:</label>
+      <input type="text" name="tipo" />
+    </div>
+    <div class="ui field">
+      <label>Ubicaci&oacute;n:</label>
+      <input type="text" name="ubicacion" />
+    </div>
+    <div class="ui field">
+      <label>Precio:</label>
+      <div class="ui range slider" id="precio"></div>
+      <input type="hidden" name="precio" value="1.000 - 30.000" />
+      <div class="price_label">
+        1.000 - 30.000 UF
+      </div>
+    </div>
+    <button class="ui fluid button">Buscar</button>
+  </form>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    function changePrice(min, max) {
+      $("input[name='precio']").val(min + '-' + max)
+      formatter = new Intl.NumberFormat('de-DE')
+      $('.price_label').html(formatter.format(min) + ' - ' + formatter.format(max) + ' UF')
+    }
+    var gMin = 1000
+    var gMax = 30000
+    $(document).ready(() => {
+      changePrice(gMin, gMax)
+      $('#precio').slider({
+        min: gMin,
+        max: gMax,
+        start: gMin,
+        end: gMax,
+        step: 500,
+        onChange: (range, min, max) => {
+          changePrice(min, max)
+        }
+      })
+    })
+  </script>
+@endpush

resources/views/proyectos/proyecto/datos.blade.php

@@ -0,0 +1,108 @@
+<div id="datos">
+  <div class="ui top attached tabular menu">
+    <a class="active item" data-tab="informacion">Informaci&oacute;n</a>
+    <a class="item" data-tab="mapa">Ver Mapa</a>
+    <a class="item" data-tab="video">Video</a>
+    <a class="item" data-tab="estado">Estado del Proyecto</a>
+  </div>
+  <div class="ui bottom attached basic segment active tab" data-tab="informacion">
+    <div class="ui grid">
+      <div class="four wide column">
+        <div class="ui two columns grid informacion">
+          <div class="row">
+            <div class="column">
+              Precio:
+            </div>
+            <div class="column">
+              {{$proyecto->valor}} UF
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Estado:
+            </div>
+            <div class="column">
+              {{$proyecto->estado}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Tipo:
+            </div>
+            <div class="column">
+              {{$proyecto->segmento}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Ubicaci&oacute;n:
+            </div>
+            <div class="column">
+              {{$proyecto->comuna}}, {{$proyecto->ciudad}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Unidades:
+            </div>
+            <div class="column">
+              {{$proyecto->unidades}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Modelos:
+            </div>
+            <div class="column">
+              {{$proyecto->modelos}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Tama&ntilde;o
+            </div>
+            <div class="column">
+              {{$proyecto->tamaño}}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="twelve wide column">
+        {{$proyecto->descripcion}}
+      </div>
+    </div>
+  </div>
+  <div class="ui bottom attached basic segment tab" data-tab="mapa">
+    <div class="ui fluid placeholder">
+      <div class="image"></div>
+    </div>
+  </div>
+  <div class="ui bottom attached basic segment tab" data-tab="video">
+    <div class="ui fluid placeholder">
+      <div class="image"></div>
+    </div>
+  </div>
+  <div class="ui bottom attached basic segment tab" data-tab="estado">
+    <div class="ui fluid placeholder">
+      <div class="paragraph">
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    $(document).ready(() => {
+      $('#datos').find('.tabular .item').tab()
+    })
+  </script>
+@endpush

resources/views/proyectos/proyecto/galeria.blade.php

@@ -0,0 +1,38 @@
+<div id="galeria">
+  <div class="ui image" data-id="0">
+    <img src="{{$urls->images}}/{{mb_strtolower($proyecto->edificio)}}/{{$proyecto->imagen}}" />
+  </div>
+  <div class="ui grid">
+    @foreach ($proyecto->images as $i => $image)
+      @if ($i == 0)
+        @continue
+      @endif
+      <div class="three wide column">
+        <div class="ui image" data-id="{{$i}}">
+          <img src="{{$urls->images}}/{{mb_strtolower($proyecto->edificio)}}/{{$image}}" />
+        </div>
+      </div>
+    @endforeach
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var images = [
+      @foreach ($proyecto->images as $image)
+        '{{$urls->images}}/{{mb_strtolower($proyecto->edificio)}}/{{$image}}',
+      @endforeach
+    ]
+    $(document).ready(() => {
+      $('#galeria').find('.grid .image').click(function(e) {
+        var id = $(this).attr('data-id')
+        var big = $('#galeria>.image')
+        var big_id = big.attr('data-id')
+        big.find('img').attr('src', images[id])
+        big.attr('data-id', id)
+        $(this).find('img').attr('src', images[big_id])
+        $(this).attr('data-id', big_id)
+      })
+    })
+  </script>
+@endpush

resources/views/proyectos/show.blade.php

@@ -0,0 +1,32 @@
+@extends('layout.base')
+
+@section('page_content')
+  <div id="proyecto">
+    <div class="ui container">
+      <div class="ui grid">
+        <div class="thirteen wide column">
+          <div class="titulo">
+            <span class="ui header">
+              {{$proyecto->edificio}}
+            </span>
+            <span class="direccion">
+              {{$proyecto->direccion}}, {{$proyecto->comuna}}, {{$proyecto->ciudad}}
+            </span>
+            <div class="publicado">
+              Publicado el {{$proyecto->publicacion}}
+            </div>
+          </div>
+          @include('proyectos.proyecto.galeria')
+        </div>
+        <div class="three wide column">
+          @include('proyectos.proyecto.buscar')
+        </div>
+      </div>
+      @include('proyectos.proyecto.datos')
+    </div>
+  </div>
+@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/proyecto.css" />
+@endpush