Skip to content

GitLab

N
nutrapharm_producto
Commit 475fec42 authored by Cristian Mauricio Diaz Canales's avatar Cristian Mauricio Diaz Canales 💬
Browse files
Options

Commit primera pagina nutrapharm - cambio de diseño

parent 3a4fad61
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 990 additions and 13 deletions
app/Resources/views/producto_final/base_final.html.twig 0 → 100644
View file @ 475fec42
<!DOCTYPE html>
<!--[if IE 8]> <html lang="es" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="es">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>Nutrapharm -Inovage</title>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<meta content="Gearlabs SPA" name="description" />
<meta content="Cristian Diaz - Miguel Moyano" name="author" />
<!-- ================== BEGIN BASE CSS STYLE ================== -->
<!-- ================== END BASE CSS STYLE ================== -->
<link rel="stylesheet" href="{{asset('manuel/css/style.css')}}">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
{% block stylesheets %}
{% endblock %}
<!-- ================== BEGIN BASE JS ================== -->
<!-- ================== END BASE JS ================== -->
<!-- <h2>COMIENZA TU TRATAMIENTO CON INOVAGE</h2> -->
<div class="header-top">
<img class="img-responsive" src="{{asset('manuel/images/header-i.png')}}" alt="INOVAGE Selfie Nutrapharm" />
</div>
{% block head %}
{% endblock %}
</head>
<body>
<!-- end #header -->
<!-- begin #content -->
<div id="content" class="content">
{% block body %}
{% endblock %}
</div>
<!-- end page container -->
<!-- ================== BEGIN BASE JS ================== -->
<script src="{{ asset('backend/plugins/jquery/jquery-1.9.1.min.js')}}"></script>
<!--[if lt IE 9]>
<![endif]-->
<!-- ================== END BASE JS ================== -->
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
{% block javascripts %}
{% endblock %}
<!-- ================== END PAGE LEVEL JS ================== -->
{% block jsApp %}
{% endblock %}
</body>
{% block docready %}
{% endblock %}
</html>
app/Resources/views/producto_final/landing_producto.html.twig 0 → 100644
View file @ 475fec42
This diff is collapsed.
src/NutrapharmBundle/Controller/DefaultController.php
View file @ 475fec42
...@@ -30,7 +30,7 @@ class DefaultController extends Controller { ...@@ -30,7 +30,7 @@ class DefaultController extends Controller {
$facebookAppId = Utiles::getParametroConfiguracion("facebook_app_id"); $facebookAppId = Utiles::getParametroConfiguracion("facebook_app_id");
$seccionInicio = Utiles::getParametroConfiguracion("seccion_formulario_inicial"); $seccionInicio = Utiles::getParametroConfiguracion("seccion_formulario_inicial");
$dias = Utiles::getParametroConfiguracion("dias_comparacion"); $dias = Utiles::getParametroConfiguracion("dias_comparacion");
return $this->render('producto/landing_producto.html.twig', array("urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId, "seccionInicio" => $seccionInicio, "dias" => $dias)); return $this->render('producto_final/landing_producto.html.twig', array("urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId, "seccionInicio" => $seccionInicio, "dias" => $dias));
} }
public function subirCambioAction(Request $request) { public function subirCambioAction(Request $request) {
......
web/frontend/js/capture-2.js 0 → 100644
View file @ 475fec42
(function () {
var width = 1200; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.then(function (stream) {
video.srcObject = stream;
video.play();
})
.catch(function (err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function (ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function (ev) {
takepicture();
ev.preventDefault();
showForm();
hidePhotoButtons();
}, false);
clearphoto();
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
console.log(data);
photo.setAttribute('src', data);
} else {
clearphoto();
}
$("#cameraContainer").hide();
$("#output_img_inovage").show();
}
function showForm() {
$("#containerFormulario").show();
}
function hidePhotoButtons() {
$("#tomarFotoContainer").show();
$("#subirFotoContainer").hide();
}
window.addEventListener('load', startup, false);
})();
web/frontend/js/capture.js
View file @ 475fec42
...@@ -24,21 +24,16 @@ ...@@ -24,21 +24,16 @@
canvas = document.getElementById('canvas'); canvas = document.getElementById('canvas');
photo = document.getElementById('photo'); photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton'); startbutton = document.getElementById('startbutton');
var video_constraints = {mandatory: {
maxWidth: 320, navigator.mediaDevices.getUserMedia({
maxHeight: 240, video: true,
maxAspectRatio: 4 / 3, audio: false
//minWidth: 1280, minHeight: 720, minFrameRate: 30 })
}, .then(function(stream) {
optional: []
};
//navigator.mediaDevices.getUserMedia({video: true, audio: false})
navigator.mediaDevices.getUserMedia({video:video_constraints, audio: false})
.then(function (stream) {
video.srcObject = stream; video.srcObject = stream;
video.play(); video.play();
}) })
.catch(function (err) { .catch(function(err) {
console.log("An error occurred: " + err); console.log("An error occurred: " + err);
}); });
......
web/manuel/css/camera.css 0 → 100644
View file @ 475fec42
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 07-sep-2020, 13:40:28
Author : cdiaz
*/
/* CSS comes here */
#video {
border: 1px solid black;
width: 100%;
height: 100%;
}
#photo {
border: 1px solid black;
width: 100%;
height: 100%;
}
#canvas {
display: none;
}
.camera {
width: 100%;
display: inline-block;
}
.output {
width: 100%;
display: inline-block;
}
#startbutton {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
bottom: 36px;
padding: 5px;
background-color: #6a67ce;
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 14px;
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}
.contentarea {
font-size: 16px;
font-family: Arial;
text-align: center;
}
web/manuel/css/style.css 0 → 100644
View file @ 475fec42
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*** CSS Reset ***/
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.img-responsive {
width: 100%;
height: auto;
display: block;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 1.4em;
font-weight: bold;
}
p {
font-size: 16px;
line-height: 1.5em;
color: #333333;
}
strong {
font-weight: bolder;
}
.app-container {
/* display: flex;
flex-flow: column nowrap; */
max-width: 860px;
margin: 0 auto;
}
.header-top {
display: flex;
flex-flow: row nowrap;
justify-content: center;
width: 100%;
height: 100%;
}
.header-top img {
align-self: center;
/* max-width: 768px; */
}
.header-top {
height: auto;
}
.logo-app {
max-width: 300px;
margin: -30px auto 0 auto;
}
.marco-foto {
border:6px solid #f5a800;
width: 480px;
margin:0 auto 2em auto;
height: 360px;
}
.botonera-fotos {
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin-bottom:2em;
padding: 0;
}
.botonera-fotos div {
text-align: center;
padding: 0 1em;
}
.botonera-fotos div label {
font-size: 0.8em;
color:#BBBBBB;
}
button.tomarFoto {
cursor: pointer;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: bold;
margin: 0.5em 0 1em 0;
text-transform: uppercase;
color: #ffffff;
background: #f5a800;
padding: 0.8em 1.1em;
width: 100%;
}
button.subirFoto {
cursor: pointer;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: bold;
margin:0.5em 0 1em 0;
text-transform: uppercase;
color: #ffffff;
background: #f5a800;
padding: 0.8em 1.2em;
width:100%;
}
/** Formulario **/
.container-form div label.b {
text-align: center;
color: #555555;
font-size: 1em;
}
.container-comentarios{
align-items: center;
width: 100%;
margin: 0 0;
}
.container-form {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 100%;
height: 100%;
}
.barra-comentario {
border: 3px solid #f5a800;
padding: 1em;
margin: 1em 0 2em 0;
width: -webkit-fill-available;
font-family: 'Open Sans', sans-serif;
}
.container-datanombre {
display: flex;
flex-flow: row nowrap;
margin-bottom: 2em;
padding: 0 0;
width: 100%;
}
.container-datanombre div {
text-align: center;
padding: 0 0;
flex: 1;
width: -webkit-fill-available;
}
.grilla-datos {
display: flex;
flex-flow: row nowrap;
margin-bottom: 2em;
padding: 0 0;
}
.grilla-datos div:nth-child(1) {
text-align: center;
padding: 0 1em 0 0;
flex: 1;
}
.grilla-datos div:nth-child(2) {
text-align: center;
padding: 0 0 0 1em;
flex: 1;
}
.mail-e, .nombre-e {
border:3px solid #f5a800;
font-size: 0.9em;
margin: 0;
color: #555555;
padding: 0.8em 1.2em;
width: -webkit-fill-available;
}
.btn-guardar {
cursor: pointer;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: bold;
margin:0.5em 0 3em 0;
text-transform: uppercase;
color: #ffffff;
background: #f5a800;
padding: 0.8em 1.2em;
width:100%;
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.btn-guardar:hover {
border:none;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
/* background:#fcc607; */
}
.txt-foto-anterior {
font-size: 1em;
text-align: center;
font-weight: bold;
margin: 0.5em 0 1em 0;
text-transform: uppercase;
color: #f5a800;
padding: 0.8em 1.2em;
}
.contenedor-compara-fotos {
display: flex;
flex-flow: row nowrap;
position: relative;
z-index: 5;
margin-top: -25em;
margin-bottom: 1em;
}
.contenedor-compara-fotos div {
margin:0 0.1em 1.5em 0.1em;
flex: 1;
}
.marco-foto-adaptable {
border:6px solid #f5a800;
background-color: #ffffff;
max-width: 480px;
margin:0 auto 2em auto;
height: 360px;
}
.header-top-adaptable {
display: flex;
flex-flow: column wrap;
justify-content: center;
width: 100%;
height: 100%;
}
img.desafio-inovage {
width: 350px;
align-self: center;
z-index: 2
}
.fondo-adaptable {
z-index: 1;
margin-top:-240px;
align-self: center;
/* max-width: 860px; */
}
button.subirFoto-adaptable {
cursor: pointer;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: bold;
margin:0.5em 0 1em 0;
text-transform: uppercase;
color: #ffffff;
background: #f5a800;
padding: 0.8em 1.2em;
width:100%;
}
.rrss-icons {
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: 1em 0 2em 0;
}
/* .rrss-icons a:nth-child(1) {
width: 45px;
height:45px;
display: block;
background: url("../images/insta-icon.png") no-repeat;
background-size: 45px;
margin-right: 10px;
} */
.rrss-icons a {
width: 45px;
height:45px;
display: block;
background: url("../images/face-icon.png") no-repeat;
background-size: 45px;
margin-left: 10px;
}
.txt-comparte {
font-size: 1.2em;
line-height: 1.2em ;
text-align:center;
color: #999999;
margin-bottom: 2em;
}
.txt-comparte strong {
text-align:center;
color: #f5a800;
margin-bottom: 2em;
}
div .txt-center {
margin-bottom:1em;
}
.txt-center {
color: #555555;
font-size:0.9em;
text-align:center;
}
@media(max-width:1430px){
.fondo-adaptable {
margin-top: -120px;
}
.contenedor-compara-fotos {
margin-top: -20em;
}
img.desafio-inovage {
width: 250px;
}
}
/*** MEDIA QUERIES ***/
@media(max-width:768px){
img.desafio-inovage {
width: 250px;
}
.app-container {
margin: 0 auto;
padding: 0 1em;
}
.container-datanombre {
display: flex;
flex-flow: column nowrap;
}
.grilla-datos {
flex-flow: column nowrap;
}
.grilla-datos div:nth-child(1) {
text-align: center;
padding: 0 0 1em 0;
flex: 1;
}
.grilla-datos div:nth-child(2) {
text-align: center;
padding: 0 0 0 0;
flex: 1;
}
.barra-comentario {
margin-bottom:1em;
}
.logo-app {
max-width: 200px;
}
.marco-foto {
width: 100%;
max-width: 320px;
}
.botonera-fotos div:nth-child(1) {
padding: 0 0.5em 0 0;
}
.botonera-fotos div:nth-child(2) {
padding: 0 0 0 0.5em;
}
button.subirFoto, button.tomarFoto {
padding: 0.8em 1em;
font-size: 0.8em;
}
.contenedor-compara-fotos div {
margin: 0 5px 0.8em 5px;
flex: 1;
}
.fondo-adaptable {
margin-top: -4em;
}
.contenedor-compara-fotos {
margin-top: -8em;
}
.txt-foto-anterior {
font-size: 0.8em;
}
button.subirFoto-adaptable {
font-size: 0.8em;
margin:0 0 1em 0;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment