diff --git a/TMP/g42072.png b/TMP/g42072.png new file mode 100644 index 0000000..2ccaf53 Binary files /dev/null and b/TMP/g42072.png differ diff --git a/TMP/g42973.png b/TMP/g42973.png new file mode 100644 index 0000000..0156d65 Binary files /dev/null and b/TMP/g42973.png differ diff --git a/TMP/g43100.png b/TMP/g43100.png new file mode 100644 index 0000000..f230c95 Binary files /dev/null and b/TMP/g43100.png differ diff --git a/TMP/g45216-4.png b/TMP/g45216-4.png new file mode 100644 index 0000000..617cc11 Binary files /dev/null and b/TMP/g45216-4.png differ diff --git a/TMP/store.png b/TMP/store.png new file mode 100644 index 0000000..75e463f Binary files /dev/null and b/TMP/store.png differ diff --git a/TMP/use41625.png b/TMP/use41625.png new file mode 100644 index 0000000..d7b7421 Binary files /dev/null and b/TMP/use41625.png differ diff --git a/TMP/use41627.png b/TMP/use41627.png new file mode 100644 index 0000000..26eeed9 Binary files /dev/null and b/TMP/use41627.png differ diff --git a/css/styles.css b/css/styles.css index fdd9f65..521d785 100644 --- a/css/styles.css +++ b/css/styles.css @@ -14614,6 +14614,13 @@ a:hover { top: calc(50% + 140px); } +/* line 142, global.scss */ +.next { + position: absolute; + bottom: 10px; + right: 10px; +} + @keyframes pop-up { 0% { transform: scale(0); @@ -14717,6 +14724,8 @@ button.dotted, color: #2f2f2f; border: 2px dotted #2f2f2f; border-radius: 6px; + padding: 5px 15px; + margin: 5px; } /* line 2, header.scss */ @@ -15235,3 +15244,197 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu border-radius: 0 0 26px 26px; overflow: hidden; } + +/* line 3, sections/training.scss */ +.training { + width: 100%; +} +/* line 6, sections/training.scss */ +.training .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; +} +/* line 15, sections/training.scss */ +.training .phone .name { + position: absolute; + left: 60px; + top: 5px; + font-size: 0.75rem; + font-weight: 700; +} +/* line 22, sections/training.scss */ +.training .phone .rule { + position: absolute; + left: 60px; + top: 25px; + font-size: 0.625rem; +} +/* line 28, sections/training.scss */ +.training .phone .avatar { + position: absolute; + left: 0; + top: 0; + height: 50px; + width: 50px; +} +/* line 34, sections/training.scss */ +.training .phone .avatar img { + height: 50px; + width: 50px; +} +/* line 40, sections/training.scss */ +.training .phone .content { + position: absolute; + top: 145px; + left: 12px; + height: 371px; + width: 223px; + overflow: hidden; +} +/* line 48, sections/training.scss */ +.training .phone .content .cloud { + display: none; + position: relative; + width: 80%; + font-size: 0.75rem; + font-weight: 500; + padding: 10px; + margin: 10px 0; + border-radius: 8px; +} +/* line 58, sections/training.scss */ +.training .phone .content .cloud img { + width: 100%; + padding: 5px; + cursor: pointer; +} +/* line 64, sections/training.scss */ +.training .phone .content .cloud.left { + left: 15px; + background: #f6e7ea; + border: 1px solid #c8bcbe; +} +/* line 68, sections/training.scss */ +.training .phone .content .cloud.left:before { + content: ''; + border: solid 8px transparent; + border-right-color: #c8bcbe; + position: absolute; + left: 0; + top: 50%; + transform: translate(-100%, -50%); +} +/* line 77, sections/training.scss */ +.training .phone .content .cloud.left:after { + content: ''; + border: solid 7px transparent; + border-right-color: #f6e7ea; + position: absolute; + left: 0; + top: 50%; + transform: translate(-100%, -50%); +} +/* line 88, sections/training.scss */ +.training .phone .content .cloud.right { + left: calc(20% - 13px); + background: #d4eeed; + border: 1px solid #b0c8c6; +} +/* line 92, sections/training.scss */ +.training .phone .content .cloud.right:before { + content: ''; + border: solid 8px transparent; + border-left-color: #b0c8c6; + position: absolute; + right: 0; + top: 50%; + transform: translate(100%, -50%); +} +/* line 101, sections/training.scss */ +.training .phone .content .cloud.right:after { + content: ''; + border: solid 7px transparent; + border-left-color: #d4eeed; + position: absolute; + right: 0; + top: 50%; + transform: translate(100%, -50%); +} +/* line 112, sections/training.scss */ +.training .phone .content .cloud.empty { + width: 100%; + text-align: center; + padding: 0; +} +/* line 121, sections/training.scss */ +.training .phone .input { + position: absolute; + top: 516px; + left: 12px; + height: 42px; + width: 223px; + border-radius: 0 0 26px 26px; + overflow: hidden; + text-align: center; +} +/* line 131, sections/training.scss */ +.training .phone .input input { + border: none; + width: 85%; + height: 25px; + padding: 0 10px; + border-radius: 8px; + color: black; + margin: 8px auto; + font-size: 1rem; +} +/* line 145, sections/training.scss */ +.training .store { + position: relative; + height: 600px; + width: 700px; + background-image: url(../images/store.png); + background-repeat: no-repeat; + background-size: contain; +} +/* line 153, sections/training.scss */ +.training .store .people { + display: none; + position: absolute; + top: 0; + left: 0; + height: 120px; + width: 50px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} +/* line 164, sections/training.scss */ +.training .store .people.luca { + background-image: url(../images/people/luca.png); +} +/* line 165, sections/training.scss */ +.training .store .people.sarah { + background-image: url(../images/people/sarah.png); +} +/* line 166, sections/training.scss */ +.training .store .people.maria { + background-image: url(../images/people/maria.png); +} +/* line 167, sections/training.scss */ +.training .store .people.fabio { + background-image: url(../images/people/fabio.png); +} +/* line 168, sections/training.scss */ +.training .store .people.lucia { + background-image: url(../images/people/lucia.png); +} +/* line 169, sections/training.scss */ +.training .store .people.paolo { + background-image: url(../images/people/paolo.png); +} diff --git a/header.php b/header.php index fd63516..28682c2 100755 --- a/header.php +++ b/header.php @@ -1,13 +1,22 @@ -
"> + + +
">
".$getQ[0]."
"; + if(in_array($getQ[0], $redHeader)){ + echo "
"; + switch($getQ[0]){ + case 'training-pull': + echo "Fomazione pull"; + } + echo "
"; }else{ ?>
diff --git a/images/people/fabio.png b/images/people/fabio.png new file mode 100644 index 0000000..ae4a346 Binary files /dev/null and b/images/people/fabio.png differ diff --git a/images/people/luca.png b/images/people/luca.png new file mode 100644 index 0000000..f230c95 Binary files /dev/null and b/images/people/luca.png differ diff --git a/images/people/lucia.png b/images/people/lucia.png new file mode 100644 index 0000000..7c55a37 Binary files /dev/null and b/images/people/lucia.png differ diff --git a/images/people/maria.png b/images/people/maria.png new file mode 100644 index 0000000..0156d65 Binary files /dev/null and b/images/people/maria.png differ diff --git a/images/people/paolo.png b/images/people/paolo.png new file mode 100644 index 0000000..617cc11 Binary files /dev/null and b/images/people/paolo.png differ diff --git a/images/people/sarah.png b/images/people/sarah.png new file mode 100644 index 0000000..5d964e0 Binary files /dev/null and b/images/people/sarah.png differ diff --git a/images/store.png b/images/store.png new file mode 100644 index 0000000..75e463f Binary files /dev/null and b/images/store.png differ diff --git a/js/modules.js b/js/modules.js index e799165..6a0f6ad 100644 --- a/js/modules.js +++ b/js/modules.js @@ -54,7 +54,7 @@ function drop(ev) { loading.fadeOut() window.location = 'compatibility' - },6500) + },6800) once = false } diff --git a/js/training-pull.js b/js/training-pull.js new file mode 100644 index 0000000..ad1c38b --- /dev/null +++ b/js/training-pull.js @@ -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 = $('
' + input.val() + '
') + 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 = $('
Dammi informazioni sulla nazionalità.
') + 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 = $('
Su cosa desideri informazioni?
') + content.append(newCloud) + + newCloud.fadeIn(400,()=>{ + offset = newCloud.offset().top - content.offset().top - 20 + firstChild.animate({'margin-top': '-' + offset},400) + }) + + newCloud = $('
' + + '' + + '' + + '' + + '' + + '
') + + 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 = $('
' + $(event).text() + '
') + 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 = $('
Ricordati di non avvicinarti eccessivamente
') + content.append(newCloud) + newCloud.fadeIn(400,()=>{ + offset = newCloud.offset().top - content.offset().top - 20 + firstChild.animate({'margin-top': '-' + offset},400) + }) + + $('#notify1')[0].play() + + },2000) +} diff --git a/js/training-push.js b/js/training-push.js new file mode 100644 index 0000000..67140c1 --- /dev/null +++ b/js/training-push.js @@ -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 = $('
' + input.val() + '
') + content.append(newCloud) + newCloud.fadeIn() + $('#notify1')[0].play() + input.val("") + + + setTimeout(()=>{ + switch(cloudCount){ + case 1: + + newCloud = $('
Uomo, Donna, Bambino.
') + 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' + }) + +}) + diff --git a/scripts/training-pull.php b/scripts/training-pull.php new file mode 100644 index 0000000..9d47551 --- /dev/null +++ b/scripts/training-pull.php @@ -0,0 +1,3 @@ + + + diff --git a/scripts/training-push.php b/scripts/training-push.php new file mode 100644 index 0000000..2b159e8 --- /dev/null +++ b/scripts/training-push.php @@ -0,0 +1,3 @@ + + + diff --git a/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/forms.scssc b/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/forms.scssc index 898b936..cdca90e 100644 Binary files a/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/forms.scssc and b/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/forms.scssc differ diff --git a/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/global.scssc b/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/global.scssc index ee03753..a15bcd7 100644 Binary files a/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/global.scssc and b/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/global.scssc differ diff --git a/scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc b/scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc index 6626485..9c60738 100644 Binary files a/scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc and b/scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc differ diff --git a/scss/forms.scss b/scss/forms.scss index 157055b..cf3a4ce 100644 --- a/scss/forms.scss +++ b/scss/forms.scss @@ -50,6 +50,8 @@ button, color: $dark-grey; border: 2px dotted $dark-grey; border-radius: 6px; + padding: 5px 15px; + margin: 5px; } } diff --git a/scss/global.scss b/scss/global.scss index 7d8f000..825f334 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -139,7 +139,11 @@ a{ } } - +.next{ + position: absolute; + bottom: 10px; + right: 10px; +} @keyframes pop-up{ 0% {transform: scale(0);} @@ -147,6 +151,7 @@ a{ 95% {transform: scale(1);} 100% {transform: scale(0);} } + @keyframes fade{ 0% {opacity: 0;} 10% {opacity: 1;} diff --git a/scss/sections/sections.scss b/scss/sections/sections.scss index e071508..6e07ad8 100644 --- a/scss/sections/sections.scss +++ b/scss/sections/sections.scss @@ -2,4 +2,5 @@ @import "modules"; @import "compatibility"; @import "plans"; +@import "training"; diff --git a/scss/sections/training.scss b/scss/sections/training.scss new file mode 100644 index 0000000..bc5b23f --- /dev/null +++ b/scss/sections/training.scss @@ -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);} + + } + } +} diff --git a/training-pull.php b/training-pull.php new file mode 100644 index 0000000..348d34d --- /dev/null +++ b/training-pull.php @@ -0,0 +1,49 @@ +
+ +
+
+

Un cliente straniero è appena entrato in negozio, Luca ha bisogno di informazioni!

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Luca
+
Stagista
+
+
+ Ciao Luca! +
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + diff --git a/training-push.php b/training-push.php new file mode 100644 index 0000000..838c0c0 --- /dev/null +++ b/training-push.php @@ -0,0 +1,50 @@ +
+ +
+
+

COZe invia a SARAH una informazione in tempo reale

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Sarah
+
Venditore
+
+
+ Ciao Sarah!
+ Ricordati che oggi promuoviamo la nuova collezione. +
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + diff --git a/training.php b/training.php new file mode 100644 index 0000000..2f0dbde --- /dev/null +++ b/training.php @@ -0,0 +1,56 @@ +
+ +
+
+

Un cliente straniero è appena entrato in negozio, Luca ha bisogno di informazioni!

+
+
+ +
+
+
+
+ a +
+
+
+
+
Luca
+
Stagista
+
+
+ Ciao Luca!
+ Il modulo "differenze culturali" è disponibile. +
+
+ +
+ + + +
+
+ +
+ + +
+
+
+
+
+
+
+
+ + + +