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
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
{% extends 'producto_final/base_final.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="{{asset('manuel/css/camera.css')}}">
{% endblock %}
{% block head %}
<meta property="fb:app_id" content="{{facebookAppId}}" />
<meta property="og:url" content="{{urlSitio}}{{seccionInicio}}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="NutraPharm" />
<meta property="og:description" content="Producto Nutrapharm - Sacate una foto y compara en {{dias}} días!" />
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="{{urlSitio}}imagenes/template/logo.png"/>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
{% endblock %}
{% block body %}
<div class="app-container">
<img class="img-responsive logo-app" src="{{asset('manuel/images/atrevete-desafio.png')}}" alt="Atrévete al desafío" />
<div class="marco-foto">
<div id="tomarFotoContainer" style="display:none">
<div class="form-group">
<div id="cameraContainer" class="camera" style="display: block">
<video id="video">No se encuentra disponible una camara</video>
<button id="startbutton">Tomar Foto</button>
</div>
</div>
<div class="form-group">
<canvas id="canvas" width="auto" height="auto">
</canvas>
</div>
</div>
<div id="output_img_inovage" class="output" style="display: none">
<img id="photo" width="auto" height="auto" alt="Foto Tomada por camara" src="">
</div>
<div id="subirFotoContainer" style="display:none">
<div class="form-group">
<input type='file' id="imgInp" accept="image/*" />
</div>
</div>
<img id="imagenUsuario" width="100%" height="100%" style="display:none" src="#" alt="Imagen subida" />
</div>
<div class="botonera-fotos">
<div>
<button id="tomarFoto" name="tomarFoto" class="tomarFoto" onclick="mostrarTomarFoto(event)">Tomar Foto</button>
<label class=" control-label">Toma una foto con tu cámara aquí</label>
</div>
<div>
<button id="subirFoto" name="subirFoto" class="subirFoto" onclick="openSeleccionadorArchivos(event)">Subir Foto
</button>
<label class=" control-label">Sube una foto desde tu galería </br>o desde tu PC</label>
</div>
</div>
<div id="containerFormulario" class="container-form">
<div>
<p class="control-label b txt-center">Comenta tu foto al <strong>Inicio del tratamiento</strong></p>
<!-- <input id="comentarioFotoUsuario" class="barra-comentario" type="textarea" placeholder="Comentario..." /> -->
<textarea id="comentarioFotoUsuario" class="barra-comentario" name="mytextarea" placeholder="Escribe tu Comentario"></textarea>
</div>
<div class="grilla-datos">
<div>
<input id="nombreUsuario" class="nombre-e" type="text" placeholder="Ingresa tu nombre" />
</div>
<div>
<input id="mailUsuario" class="mail-e" type="text" placeholder="Ingresa tu email" />
</div>
</div>
<div>
<button id="btnGuardar" class="btn-guardar">Guardar</button>
</div>
<div id="mensaje-nutrapharm" style="display:none" class="alert alert-success" role="alert"></div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="{{asset('frontend/js/capture-2.js')}}"></script>
<script>
var imagenSubida = false;
var imagenTomada = false;
var usuarioNutraPharm = "none";
var tipoUsuarioFormulario = 1;
var upload;
</script>
<script>
var fileUpload = $("#imgInp");
function mostrarTomarFoto(event) {
event.preventDefault();
console.log("mostrando tomar foto...");
$("#tomarFotoContainer").show();
$("#cameraContainer").show();
$("#subirFotoContainer").hide();
$("#output_img_inovage").hide();
imagenTomada = false;
imagenTomada = true;
}
function mostrarSubirFoto(event) {
event.preventDefault();
console.log("mostrando subir foto...");
$("#tomarFotoContainer").hide();
$("#cameraContainer").hide();
$("#subirFotoContainer").show();
$("#output_img_inovage").hide();
imagenTomada = false;
imagenSubida = true;
}
function openSeleccionadorArchivos(event){
event.preventDefault();
$("#imgInp").trigger("click");
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagenUsuario').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
$('#imagenUsuario').show();
}
}
fileUpload.on('change', function () {
$("#containerFormulario").show();
readURL(this);
});
var Upload = function (file) {
this.file = file;
};
Upload.prototype.getType = function () {
return this.file.type;
};
Upload.prototype.getSize = function () {
return this.file.size;
};
Upload.prototype.getName = function () {
if (this.file != null)
return this.file.name;
else
return "";
};
Upload.prototype.doUpload = function () {
var that = this;
var url = "{{ path('nutrapharm_upload') }}";
var formData = new FormData();
$("#btnGuardar").prop("disabled", true);
if (imagenTomada == true && imagenSubida == false) {
formData.append("upload_file", 0);
formData.append("imagen", $("#photo").attr('src'));
} else if (imagenSubida == true && imagenTomada == false) {
formData.append("upload_file", 1);
}
console.log(this.file);
if (this.file != null) {
formData.append("imagen", this.file, this.getName());
}
formData.append("nombreUsuario", $("#nombreUsuario").val());
formData.append("mailUsuario", $("#mailUsuario").val());
formData.append("comentarioFotoUsuario", $("#comentarioFotoUsuario").val());
formData.append("tipoUsuarioFormulario", tipoUsuarioFormulario);
formData.append("usuarioNutraPharm", usuarioNutraPharm);
$.ajax
({
type: "POST",
url: url,
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
timeout: 60000,
statusCode: {
400: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html(respuestaJson.msg);
$("#mensaje-nutrapharm").show();
$("#btnGuardar").prop("disabled", false);
},
500: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html(respuestaJson.msg);
$("#mensaje-nutrapharm").show();
$("#btnGuardar").prop("disabled", false);
}
},
success: function (data) {
if (data.tipo === 2) {
tipoUsuarioFormulario = data.tipo;
usuarioNutraPharm = data.usuario;
}
$("#mensaje-nutrapharm").removeClass("alert-danger");
$("#mensaje-nutrapharm").addClass("alert-success");
$("#mensaje-nutrapharm").html(data.msg);
$("#mensaje-nutrapharm").show();
},
complete: function (data) {
$("#btnGuardar").prop("disabled", false);
}
});
};
$("#btnGuardar").click(function (e) {
e.preventDefault();
if (imagenSubida == false && imagenTomada == false) {
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html("Debe seleccionar o tomar una imagen!");
$("#mensaje-nutrapharm").show();
return false;
}
if (typeof upload == "undefined") {
upload = new Upload(null);
}
upload.doUpload();
});
$("#imgInp").on("change", function (e) {
e.preventDefault();
if ($(this)[0].files.length != 0) {
var file = $(this)[0].files[0];
upload = new Upload(file);
console.log(upload)
imagenSubida = true;
} else
upload = new Upload(null);
});
</script>
{% endblock %}
\ No newline at end of file
src/NutrapharmBundle/Controller/DefaultController.php
View file @ 475fec42
......@@ -30,7 +30,7 @@ class DefaultController extends Controller {
$facebookAppId = Utiles::getParametroConfiguracion("facebook_app_id");
$seccionInicio = Utiles::getParametroConfiguracion("seccion_formulario_inicial");
$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) {
......
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 @@
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
var video_constraints = {mandatory: {
maxWidth: 320,
maxHeight: 240,
maxAspectRatio: 4 / 3,
//minWidth: 1280, minHeight: 720, minFrameRate: 30
},
optional: []
};
//navigator.mediaDevices.getUserMedia({video: true, audio: false})
navigator.mediaDevices.getUserMedia({video:video_constraints, audio: false})
.then(function (stream) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function (err) {
.catch(function(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