diff --git a/TMP/smartwatch.png b/TMP/smartwatch.png new file mode 100644 index 0000000..44276c1 Binary files /dev/null and b/TMP/smartwatch.png differ diff --git a/css/styles.css b/css/styles.css index 521d785..cd45d83 100644 --- a/css/styles.css +++ b/css/styles.css @@ -15438,3 +15438,209 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu .training .store .people.paolo { background-image: url(../images/people/paolo.png); } + +/* line 3, sections/monitoring.scss */ +.monitoring { + width: 100%; +} +/* line 6, sections/monitoring.scss */ +.monitoring .phone, +.monitoring .smartwatch { + position: relative; +} +/* line 10, sections/monitoring.scss */ +.monitoring .phone .name, +.monitoring .smartwatch .name { + position: absolute; + left: 60px; + top: 5px; + font-size: 0.75rem; + font-weight: 700; +} +/* line 17, sections/monitoring.scss */ +.monitoring .phone .rule, +.monitoring .smartwatch .rule { + position: absolute; + left: 60px; + top: 25px; + font-size: 0.625rem; +} +/* line 23, sections/monitoring.scss */ +.monitoring .phone .avatar, +.monitoring .smartwatch .avatar { + position: absolute; + left: 0; + top: 0; + height: 50px; + width: 50px; +} +/* line 29, sections/monitoring.scss */ +.monitoring .phone .avatar img, +.monitoring .smartwatch .avatar img { + height: 50px; + width: 50px; +} +/* line 35, sections/monitoring.scss */ +.monitoring .phone .content, +.monitoring .smartwatch .content { + position: absolute; + top: 145px; + left: 12px; + height: 371px; + width: 223px; + overflow: hidden; +} +/* line 43, sections/monitoring.scss */ +.monitoring .phone .content .cloud, +.monitoring .smartwatch .content .cloud { + display: none; + position: relative; + width: 80%; + font-size: 0.75rem; + font-weight: 500; + padding: 10px; + margin: 10px 0; + border-radius: 8px; +} +/* line 53, sections/monitoring.scss */ +.monitoring .phone .content .cloud img, +.monitoring .smartwatch .content .cloud img { + width: 100%; + padding: 5px; + cursor: pointer; +} +/* line 59, sections/monitoring.scss */ +.monitoring .phone .content .cloud.left, +.monitoring .smartwatch .content .cloud.left { + left: 15px; + background: #f6e7ea; + border: 1px solid #c8bcbe; +} +/* line 63, sections/monitoring.scss */ +.monitoring .phone .content .cloud.left:before, +.monitoring .smartwatch .content .cloud.left:before { + content: ''; + border: solid 8px transparent; + border-right-color: #c8bcbe; + position: absolute; + left: 0; + top: 50%; + transform: translate(-100%, -50%); +} +/* line 72, sections/monitoring.scss */ +.monitoring .phone .content .cloud.left:after, +.monitoring .smartwatch .content .cloud.left:after { + content: ''; + border: solid 7px transparent; + border-right-color: #f6e7ea; + position: absolute; + left: 0; + top: 50%; + transform: translate(-100%, -50%); +} +/* line 83, sections/monitoring.scss */ +.monitoring .phone .content .cloud.right, +.monitoring .smartwatch .content .cloud.right { + left: calc(20% - 13px); + background: #d4eeed; + border: 1px solid #b0c8c6; +} +/* line 87, sections/monitoring.scss */ +.monitoring .phone .content .cloud.right:before, +.monitoring .smartwatch .content .cloud.right:before { + content: ''; + border: solid 8px transparent; + border-left-color: #b0c8c6; + position: absolute; + right: 0; + top: 50%; + transform: translate(100%, -50%); +} +/* line 96, sections/monitoring.scss */ +.monitoring .phone .content .cloud.right:after, +.monitoring .smartwatch .content .cloud.right:after { + content: ''; + border: solid 7px transparent; + border-left-color: #d4eeed; + position: absolute; + right: 0; + top: 50%; + transform: translate(100%, -50%); +} +/* line 107, sections/monitoring.scss */ +.monitoring .phone .content .cloud.empty, +.monitoring .smartwatch .content .cloud.empty { + width: 100%; + text-align: center; + padding: 0; +} +/* line 118, sections/monitoring.scss */ +.monitoring .phone { + height: 570px; + width: 245px; + background-image: url(../images/phone.png); + background-position: center bottom; + background-repeat: no-repeat; + background-size: 245px 500px; +} +/* line 127, sections/monitoring.scss */ +.monitoring .smartwatch { + height: 500px; + width: 245px; + background-image: url(../images/smartwatch.png); + background-position: center bottom; + background-repeat: no-repeat; + background-size: 90%; +} +/* line 135, sections/monitoring.scss */ +.monitoring .smartwatch .content { + top: 225px; + left: 13px; + height: 170px; + width: 208px; +} +/* line 143, sections/monitoring.scss */ +.monitoring .store { + position: relative; + height: 600px; + width: 700px; + background-image: url(../images/store.png); + background-repeat: no-repeat; + background-size: contain; +} +/* line 151, sections/monitoring.scss */ +.monitoring .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 162, sections/monitoring.scss */ +.monitoring .store .people.luca { + background-image: url(../images/people/luca.png); +} +/* line 163, sections/monitoring.scss */ +.monitoring .store .people.sarah { + background-image: url(../images/people/sarah.png); +} +/* line 164, sections/monitoring.scss */ +.monitoring .store .people.maria { + background-image: url(../images/people/maria.png); +} +/* line 165, sections/monitoring.scss */ +.monitoring .store .people.fabio { + background-image: url(../images/people/fabio.png); +} +/* line 166, sections/monitoring.scss */ +.monitoring .store .people.lucia { + background-image: url(../images/people/lucia.png); +} +/* line 167, sections/monitoring.scss */ +.monitoring .store .people.paolo { + background-image: url(../images/people/paolo.png); +} diff --git a/header.php b/header.php index 28682c2..49ecaec 100755 --- a/header.php +++ b/header.php @@ -1,6 +1,6 @@
"> @@ -14,7 +14,15 @@ $redHeader = array('training-pull','training-push','monitoring'); echo "
"; switch($getQ[0]){ case 'training-pull': - echo "Fomazione pull"; + echo "Fomazione pull"; + break; + case 'training-push': + echo "Fomazione push"; + break; + case 'monitoring-intern': + case 'monitoring-seller': + echo "Monitoring"; + break; } echo "
"; }else{ diff --git a/images/smartwatch.png b/images/smartwatch.png new file mode 100644 index 0000000..44276c1 Binary files /dev/null and b/images/smartwatch.png differ diff --git a/js/monitoring-intern.js b/js/monitoring-intern.js new file mode 100644 index 0000000..dd13f0e --- /dev/null +++ b/js/monitoring-intern.js @@ -0,0 +1,54 @@ + +$(document).ready(()=>{ + + const monitoring = $('.monitoring') + const smartwatch = monitoring.find('.smartwatch') + const clouds = monitoring.find('.cloud') + const content = smartwatch.find('.content') + const firstChild = content.find('.cloud').first() + + const delay = 1200 + let timer = 0 + let cloudCount = 0 + + const people = monitoring.find('.people') + const luca = monitoring.find('.people.luca') + const sarah = monitoring.find('.people.sarah') + const fabio = monitoring.find('.people.fabio') + const maria = monitoring.find('.people.maria') + const lucia = monitoring.find('.people.lucia') + const paolo = monitoring.find('.people.paolo') + + luca.css({'top': '425px','left': '370px'}).fadeIn(400) + sarah.css({'top': '415px','left': '390px'}) + maria.css({'top': '180px','left': '135px'}) + fabio.css({'top': '150px','left': '110px'}) + lucia.css({'top': '285px','left': '300px'}) + paolo.css({'top': '205px','left': '300px'}).fadeIn(700) + + setTimeout(()=>{ + paolo.animate({'top': '260px','left': '395px'},2000) + }, delay) + + setTimeout(()=>{ + paolo.animate({'top': '275px','left': '420px'},1900) + }, delay*2) + + setTimeout(()=>{ + paolo.animate({'top': '245px','left': '390px'},1800) + }, delay*3) + + setTimeout(()=>{ + clouds.fadeIn() + $('#notify1')[0].play() + }, delay*6) + + + + + $('.next').on('click',()=> { + window.location = 'monitoring-seller' + }) + +}) + diff --git a/js/monitoring-seller.js b/js/monitoring-seller.js new file mode 100644 index 0000000..462beb9 --- /dev/null +++ b/js/monitoring-seller.js @@ -0,0 +1,54 @@ + +$(document).ready(()=>{ + + const monitoring = $('.monitoring') + const smartwatch = monitoring.find('.smartwatch') + const clouds = monitoring.find('.cloud') + const content = smartwatch.find('.content') + const firstChild = content.find('.cloud').first() + + const delay = 1200 + let timer = 0 + let cloudCount = 0 + + const people = monitoring.find('.people') + const luca = monitoring.find('.people.luca') + const sarah = monitoring.find('.people.sarah') + const fabio = monitoring.find('.people.fabio') + const maria = monitoring.find('.people.maria') + const lucia = monitoring.find('.people.lucia') + const paolo = monitoring.find('.people.paolo') + + luca.css({'top': '425px','left': '370px'}) + sarah.css({'top': '415px','left': '390px'}).fadeIn() + maria.css({'top': '180px','left': '135px'}) + fabio.css({'top': '150px','left': '110px'}).fadeIn() + lucia.css({'top': '340px','left': '250px'}).fadeIn() + paolo.css({'top': '240px','left': '370px'}).fadeIn() + + setTimeout(()=>{ + paolo.fadeOut(800) + }, delay) + + setTimeout(()=>{ + lucia.fadeOut(800) + }, delay*2) + + setTimeout(()=>{ + fabio.fadeOut(800) + }, delay*3) + + setTimeout(()=>{ + clouds.fadeIn() + $('#notify1')[0].play() + }, delay*6) + + + + + $('.next').on('click',()=> { + window.location = 'monitoring-seller' + }) + +}) + diff --git a/js/training-push.js b/js/training-push.js index 67140c1..e6e45d3 100644 --- a/js/training-push.js +++ b/js/training-push.js @@ -90,7 +90,7 @@ $(document).ready(()=>{ $('.next').on('click',()=> { - window.location = 'monitoring' + window.location = 'monitoring-intern' }) }) diff --git a/monitoring-intern.php b/monitoring-intern.php new file mode 100644 index 0000000..2b0fb98 --- /dev/null +++ b/monitoring-intern.php @@ -0,0 +1,46 @@ +
+ +
+
+

COZe Monitora l'ambiente e invia informazioni contestuali per aumentare le prestazioni dei dipendenti

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Luca
+
Stagista
+
+ + +
+
+
+
+
+
+
+ + + + + + diff --git a/monitoring-seller.php b/monitoring-seller.php new file mode 100644 index 0000000..d0ebb69 --- /dev/null +++ b/monitoring-seller.php @@ -0,0 +1,49 @@ +
+ +
+
+

Lo store è vuoto - COZe notifica latri corsi!

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Sarah
+
Venditore
+
+ + + +
+
+
+
+
+
+
+ + + + + diff --git a/scripts/monitoring-intern.php b/scripts/monitoring-intern.php new file mode 100644 index 0000000..4de3846 --- /dev/null +++ b/scripts/monitoring-intern.php @@ -0,0 +1,3 @@ + + + diff --git a/scripts/monitoring-seller.php b/scripts/monitoring-seller.php new file mode 100644 index 0000000..6d21c5a --- /dev/null +++ b/scripts/monitoring-seller.php @@ -0,0 +1,3 @@ + + + diff --git a/scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc b/scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc index 9c60738..cde5a67 100644 Binary files a/scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc and b/scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc differ diff --git a/scss/sections/monitoring.scss b/scss/sections/monitoring.scss new file mode 100644 index 0000000..688cef8 --- /dev/null +++ b/scss/sections/monitoring.scss @@ -0,0 +1,171 @@ + + +.monitoring{ + width: 100%; + + .phone, + .smartwatch{ + position: relative; + + .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; + } + + } + } + } + + + .phone{ + height: 570px; + width: 245px; + background-image: url(../images/phone.png); + background-position: center bottom; + background-repeat: no-repeat; + background-size: 245px 500px; + } + + .smartwatch{ + height: 500px; + width: 245px; + background-image: url(../images/smartwatch.png); + background-position: center bottom; + background-repeat: no-repeat; + background-size: 90%; + + .content{ + top: 225px; + left: 13px; + height: 170px; + width: 208px; + } + } + + .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/scss/sections/sections.scss b/scss/sections/sections.scss index 6e07ad8..173ca33 100644 --- a/scss/sections/sections.scss +++ b/scss/sections/sections.scss @@ -3,4 +3,5 @@ @import "compatibility"; @import "plans"; @import "training"; +@import "monitoring";