Carmine De Rosa
7 years ago
31 changed files with 813 additions and 5 deletions
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 434 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 434 KiB |
@ -0,0 +1,157 @@ |
|||
|
|||
$(document).ready(()=>{ |
|||
|
|||
const training = $('.training') |
|||
const phone = training.find('.phone') |
|||
const clouds = training.find('.cloud') |
|||
const input = phone.find('.input-field') |
|||
const content = phone.find('.content') |
|||
const firstChild = content.find('.cloud').first() |
|||
|
|||
const delay = 1000 |
|||
let timer = 0 |
|||
let cloudCount = 0 |
|||
|
|||
const people = training.find('.people') |
|||
const luca = training.find('.people.luca') |
|||
const sarah = training.find('.people.sarah') |
|||
const fabio = training.find('.people.fabio') |
|||
const maria = training.find('.people.maria') |
|||
const lucia = training.find('.people.lucia') |
|||
const paolo = training.find('.people.paolo') |
|||
|
|||
luca.css({'top': '425px','left': '370px'}).fadeIn(400) |
|||
sarah.css({'top': '415px','left': '390px'}) |
|||
fabio.css({'top': '150px','left': '110px'}).fadeIn(600) |
|||
maria.css({'top': '180px','left': '135px'}) |
|||
lucia.css({'top': '345px','left': '250px'}).fadeIn(700) |
|||
paolo.css({'top': '250px','left': '390px'}) |
|||
|
|||
setTimeout(()=>{ |
|||
clouds.each((index,elem)=>{ |
|||
const el = $(elem) |
|||
timer = index*delay |
|||
|
|||
if(el.hasClass('empty') || el.hasClass('hidden')){ |
|||
timer -= delay |
|||
} |
|||
|
|||
if(!el.hasClass('hidden')){ |
|||
setTimeout(()=>{ |
|||
if(!el.hasClass('empty')){ |
|||
$('#notify1')[0].play() |
|||
} |
|||
el.fadeIn(500) |
|||
},timer) |
|||
} |
|||
}) |
|||
|
|||
|
|||
maria.fadeIn().animate({'top': '195px','left': '165px'},700) |
|||
|
|||
}, delay) |
|||
|
|||
|
|||
input.keypress((event)=> { |
|||
|
|||
if(event.which == 13){ |
|||
cloudCount++ |
|||
let newCloud = $('<div class="cloud right">' + input.val() + '</div>') |
|||
content.append(newCloud) |
|||
newCloud.fadeIn() |
|||
$('#notify1')[0].play() |
|||
input.val("") |
|||
|
|||
|
|||
setTimeout(()=>{ |
|||
switch(cloudCount){ |
|||
case 1: |
|||
|
|||
maria.animate({'top': '180px','left': '230px'},1000, ()=>{ |
|||
maria.animate({'top': '225px','left': '350px'},1500) |
|||
}) |
|||
|
|||
newCloud = $('<div class="cloud left">Dammi informazioni sulla nazionalità.</div>') |
|||
content.append(newCloud) |
|||
newCloud.fadeIn(400,()=>{ |
|||
offset = newCloud.offset().top - content.offset().top - 20 |
|||
firstChild.animate({'margin-top': '-' + offset},400) |
|||
}) |
|||
|
|||
$('#notify1')[0].play() |
|||
|
|||
$('.page-title').text('Richiesta informazioni') |
|||
|
|||
break; |
|||
|
|||
case 2: |
|||
newCloud = $('<div class="cloud left">Su cosa desideri informazioni?</div>') |
|||
content.append(newCloud) |
|||
|
|||
newCloud.fadeIn(400,()=>{ |
|||
offset = newCloud.offset().top - content.offset().top - 20 |
|||
firstChild.animate({'margin-top': '-' + offset},400) |
|||
}) |
|||
|
|||
newCloud = $('<div class="cloud empty">' + |
|||
'<button class="button dotted" onClick="btnClick(this)">Approccio</button>' + |
|||
'<button class="button dotted" onClick="btnClick(this)">Saluti</button>' + |
|||
'<button class="button dotted" onClick="btnClick(this)">Da evitare</button>' + |
|||
'<button class="button dotted" onClick="btnClick(this)">Altro</button>' + |
|||
'</div>') |
|||
|
|||
content.append(newCloud) |
|||
|
|||
newCloud.fadeIn(400,()=>{ |
|||
offset = newCloud.offset().top - content.offset().top - 20 |
|||
firstChild.animate({'margin-top': '-' + offset},400) |
|||
}) |
|||
|
|||
$('#notify1')[0].play() |
|||
break; |
|||
|
|||
} |
|||
},2000) |
|||
|
|||
} |
|||
|
|||
}) |
|||
|
|||
|
|||
$('.next').on('click',()=> { |
|||
window.location = 'training-push' |
|||
}) |
|||
|
|||
}) |
|||
|
|||
|
|||
function btnClick(event){ |
|||
|
|||
const content = $('.training .phone .content') |
|||
const firstChild = content.find('.cloud').first() |
|||
|
|||
newCloud = $('<div class="cloud right">' + $(event).text() + '</div>') |
|||
content.append(newCloud) |
|||
|
|||
newCloud.fadeIn(400,()=>{ |
|||
|
|||
offset = newCloud.offset().top - content.offset().top - 20 |
|||
firstChild.animate({'margin-top': '-' + offset},400) |
|||
|
|||
}) |
|||
|
|||
$('#notify1')[0].play() |
|||
|
|||
setTimeout(()=>{ |
|||
|
|||
newCloud = $('<div class="cloud left">Ricordati di non avvicinarti eccessivamente</div>') |
|||
content.append(newCloud) |
|||
newCloud.fadeIn(400,()=>{ |
|||
offset = newCloud.offset().top - content.offset().top - 20 |
|||
firstChild.animate({'margin-top': '-' + offset},400) |
|||
}) |
|||
|
|||
$('#notify1')[0].play() |
|||
|
|||
},2000) |
|||
} |
|||
@ -0,0 +1,97 @@ |
|||
|
|||
$(document).ready(()=>{ |
|||
|
|||
const training = $('.training') |
|||
const phone = training.find('.phone') |
|||
const clouds = training.find('.cloud') |
|||
const input = phone.find('.input-field') |
|||
const content = phone.find('.content') |
|||
const firstChild = content.find('.cloud').first() |
|||
|
|||
const delay = 1000 |
|||
let timer = 0 |
|||
let cloudCount = 0 |
|||
|
|||
const people = training.find('.people') |
|||
const luca = training.find('.people.luca') |
|||
const sarah = training.find('.people.sarah') |
|||
const fabio = training.find('.people.fabio') |
|||
const maria = training.find('.people.maria') |
|||
const lucia = training.find('.people.lucia') |
|||
const paolo = training.find('.people.paolo') |
|||
|
|||
luca.css({'top': '425px','left': '370px'}) |
|||
sarah.css({'top': '415px','left': '390px'}).fadeIn(400) |
|||
maria.css({'top': '180px','left': '135px'}) |
|||
fabio.css({'top': '150px','left': '110px'}) |
|||
lucia.css({'top': '285px','left': '300px'}).fadeIn(700) |
|||
paolo.css({'top': '250px','left': '390px'}) |
|||
|
|||
setTimeout(()=>{ |
|||
clouds.each((index,elem)=>{ |
|||
const el = $(elem) |
|||
timer = index*delay |
|||
|
|||
if(el.hasClass('empty') || el.hasClass('hidden')){ |
|||
timer -= delay |
|||
} |
|||
|
|||
if(!el.hasClass('hidden')){ |
|||
setTimeout(()=>{ |
|||
if(!el.hasClass('empty')){ |
|||
$('#notify1')[0].play() |
|||
} |
|||
el.fadeIn(500) |
|||
},timer) |
|||
} |
|||
}) |
|||
|
|||
lucia.fadeIn().animate({'top': '345px','left': '250px'},700) |
|||
|
|||
}, delay) |
|||
|
|||
|
|||
input.keypress((event)=> { |
|||
|
|||
if(event.which == 13){ |
|||
cloudCount++ |
|||
let newCloud = $('<div class="cloud right">' + input.val() + '</div>') |
|||
content.append(newCloud) |
|||
newCloud.fadeIn() |
|||
$('#notify1')[0].play() |
|||
input.val("") |
|||
|
|||
|
|||
setTimeout(()=>{ |
|||
switch(cloudCount){ |
|||
case 1: |
|||
|
|||
newCloud = $('<div class="cloud left">Uomo, Donna, Bambino.</div>') |
|||
content.append(newCloud) |
|||
newCloud.fadeIn(400) |
|||
/* |
|||
newCloud.fadeIn(400,()=>{ |
|||
offset = newCloud.offset().top - content.offset().top - 20 |
|||
firstChild.animate({'margin-top': '-' + offset},400) |
|||
}) |
|||
*/ |
|||
$('#notify1')[0].play() |
|||
|
|||
$('.page-title').text('Richiesta informazioni') |
|||
|
|||
break; |
|||
|
|||
} |
|||
},2000) |
|||
|
|||
} |
|||
|
|||
}) |
|||
|
|||
|
|||
$('.next').on('click',()=> { |
|||
window.location = 'monitoring' |
|||
}) |
|||
|
|||
}) |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
|
|||
<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/training-pull.js"></script> |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
|
|||
<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/training-push.js"></script> |
|||
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,173 @@ |
|||
|
|||
|
|||
.training{ |
|||
width: 100%; |
|||
|
|||
.phone{ |
|||
position: relative; |
|||
height: 570px; |
|||
width: 245px; |
|||
background-image: url(../images/phone.png); |
|||
background-position: center bottom; |
|||
background-repeat: no-repeat; |
|||
background-size: 245px 500px; |
|||
|
|||
.name{ |
|||
position: absolute; |
|||
left: 60px; |
|||
top: 5px; |
|||
font-size: $font-12; |
|||
font-weight: 700; |
|||
} |
|||
.rule{ |
|||
position: absolute; |
|||
left: 60px; |
|||
top: 25px; |
|||
font-size: $font-10; |
|||
} |
|||
.avatar{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 50px; |
|||
width: 50px; |
|||
img{ |
|||
height: 50px; |
|||
width: 50px; |
|||
} |
|||
} |
|||
|
|||
.content{ |
|||
position: absolute; |
|||
top: 145px; |
|||
left: 12px; |
|||
height: 371px; |
|||
width: 223px; |
|||
overflow: hidden; |
|||
|
|||
.cloud{ |
|||
display: none; |
|||
position: relative; |
|||
width: 80%; |
|||
font-size: $font-12; |
|||
font-weight: 500; |
|||
padding: 10px; |
|||
margin: 10px 0; |
|||
border-radius: 8px; |
|||
|
|||
img{ |
|||
width: 100%; |
|||
padding: 5px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&.left{ |
|||
left: 15px; |
|||
background: $pink; |
|||
border: 1px solid $dark-pink; |
|||
&:before{ |
|||
content: ''; |
|||
border: solid 8px transparent; |
|||
border-right-color: $dark-pink; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translate(-100%, -50%); |
|||
} |
|||
&:after{ |
|||
content: ''; |
|||
border: solid 7px transparent; |
|||
border-right-color: $pink; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translate(-100%, -50%); |
|||
} |
|||
} |
|||
|
|||
&.right{ |
|||
left: calc(20% - 13px); |
|||
background: $azure; |
|||
border: 1px solid $dark-azure; |
|||
&:before{ |
|||
content: ''; |
|||
border: solid 8px transparent; |
|||
border-left-color: $dark-azure; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50%; |
|||
transform: translate(100%, -50%); |
|||
} |
|||
&:after{ |
|||
content: ''; |
|||
border: solid 7px transparent; |
|||
border-left-color: $azure; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50%; |
|||
transform: translate(100%, -50%); |
|||
} |
|||
} |
|||
|
|||
&.empty{ |
|||
width: 100%; |
|||
text-align: center; |
|||
padding: 0; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.input{ |
|||
position: absolute; |
|||
top: 516px; |
|||
left: 12px; |
|||
height: 42px; |
|||
width: 223px; |
|||
border-radius: 0 0 26px 26px; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
|
|||
input{ |
|||
border: none; |
|||
width: 85%; |
|||
height: 25px; |
|||
padding: 0 10px; |
|||
border-radius: 8px; |
|||
color: black; |
|||
margin: 8px auto; |
|||
font-size: $font-16; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.store{ |
|||
position: relative; |
|||
height: 600px; |
|||
width: 700px; |
|||
background-image: url(../images/store.png); |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
|
|||
.people{ |
|||
display: none; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
height: 120px; |
|||
width: 50px; |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
background-position: center; |
|||
|
|||
&.luca{background-image: url(../images/people/luca.png);} |
|||
&.sarah{background-image: url(../images/people/sarah.png);} |
|||
&.maria{background-image: url(../images/people/maria.png);} |
|||
&.fabio{background-image: url(../images/people/fabio.png);} |
|||
&.lucia{background-image: url(../images/people/lucia.png);} |
|||
&.paolo{background-image: url(../images/people/paolo.png);} |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
<div class="training pattern"> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<p class="font-14 p-5 page-title">Un cliente straniero è appena entrato in negozio, Luca ha bisogno di informazioni!</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row mb-5"> |
|||
<div class="col-10 mx-auto"> |
|||
<div class="row"> |
|||
<div class="col-8"> |
|||
<div class="store"> |
|||
<div class="people luca"></div> |
|||
<div class="people sarah"></div> |
|||
<div class="people fabio"></div> |
|||
<div class="people maria"></div> |
|||
<div class="people lucia"></div> |
|||
<div class="people paolo"></div> |
|||
</div> |
|||
</div> |
|||
<div class="col-4"> |
|||
<div class="phone mx-auto" id="usr_luca"> |
|||
<div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/luca.png"></div> |
|||
<div class="name">Luca</div> |
|||
<div class="rule">Stagista</div> |
|||
<div class="content"> |
|||
<div class="cloud left"> |
|||
Ciao Luca! |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="input"> |
|||
<input type="text" class="input-field" name="input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<audio id="notify1"> |
|||
<source src="<?= $BASE_URL;?>/sounds/message.wav" type="audio/wav"> |
|||
</audio> |
|||
|
|||
<div class="next"><i class="fa fa-arrow-right"></i></div> |
|||
@ -0,0 +1,50 @@ |
|||
<div class="training pattern"> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<p class="font-14 p-5 page-title">COZe invia a SARAH una informazione in tempo reale</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row mb-5"> |
|||
<div class="col-10 mx-auto"> |
|||
<div class="row"> |
|||
<div class="col-8"> |
|||
<div class="store"> |
|||
<div class="people luca"></div> |
|||
<div class="people sarah"></div> |
|||
<div class="people fabio"></div> |
|||
<div class="people maria"></div> |
|||
<div class="people lucia"></div> |
|||
<div class="people paolo"></div> |
|||
</div> |
|||
</div> |
|||
<div class="col-4"> |
|||
<div class="phone mx-auto" id="usr_luca"> |
|||
<div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/sara.png"></div> |
|||
<div class="name">Sarah</div> |
|||
<div class="rule">Venditore</div> |
|||
<div class="content"> |
|||
<div class="cloud left"> |
|||
Ciao Sarah!<br> |
|||
Ricordati che oggi promuoviamo la nuova collezione. |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="input"> |
|||
<input type="text" class="input-field" name="input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<audio id="notify1"> |
|||
<source src="<?= $BASE_URL;?>/sounds/message.wav" type="audio/wav"> |
|||
</audio> |
|||
|
|||
<div class="next"><i class="fa fa-arrow-right"></i></div> |
|||
@ -0,0 +1,56 @@ |
|||
<div class="plans pattern"> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<p class="font-14 font-bold p-4">Un cliente straniero è appena entrato in negozio, Luca ha bisogno di informazioni!</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row mb-5"> |
|||
<div class="col-10 mx-auto"> |
|||
<div class="row"> |
|||
<div class="col-8 border"> |
|||
a |
|||
</div> |
|||
<div class="col-4"> |
|||
<div class="phone mx-auto" id="usr_luca"> |
|||
<div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/luca.png"></div> |
|||
<div class="name">Luca</div> |
|||
<div class="rule">Stagista</div> |
|||
<div class="content"> |
|||
<div class="cloud left"> |
|||
Ciao Luca!<br> |
|||
Il modulo "differenze culturali" è disponibile. |
|||
</div> |
|||
<div class="cloud empty"> |
|||
<button class="button dotted" data-cloud="luca_1">Ok</button> |
|||
</div> |
|||
|
|||
<div class="cloud empty hidden scroll" id="luca_1"> |
|||
<img src="<?= $BASE_URL;?>/images/video.png" class="video-opener" data-video="video1"> |
|||
</div> |
|||
|
|||
<div class="video" id="video1"> |
|||
<div class="video-close button" data-cloud="luca_2"></div> |
|||
<video width="400" controls> |
|||
<source src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" type="video/mp4"> |
|||
</video> |
|||
</div> |
|||
|
|||
<div class="cloud empty hidden" id="luca_2"> |
|||
<a class="text-black" href="<?= $BASE_URL;?>/training"><i class="fa fa-check px-1"></i>Vail al test</a> |
|||
</div> |
|||
</div> |
|||
<div class="input"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<audio id="notify1"> |
|||
<source src="<?= $BASE_URL;?>/sounds/message.wav" type="audio/wav"> |
|||
</audio> |
|||
Loading…
Reference in new issue