add monitoring

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);
+}

header.php

@@ -1,6 +1,6 @@
 
 <?php
-$redHeader = array('training-pull','training-push','monitoring');
+$redHeader = array('training-pull','training-push','monitoring-intern','monitoring-seller');
 ?>
 
 <header class="<?php if(in_array($getQ[0], $redHeader)){echo "red";}?>">
@@ -15,6 +15,14 @@ $redHeader = array('training-pull','training-push','monitoring');
                 switch($getQ[0]){
                     case 'training-pull':
                         echo "Fomazione pull";
+                    break;
+                    case 'training-push':
+                        echo "Fomazione push";
+                    break;
+                    case 'monitoring-intern':
+                    case 'monitoring-seller':
+                        echo "Monitoring";
+                    break;
                 }
                 echo "</span></div>";
                 }else{

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'
+  })
+
+}) 
+

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'
+  })
+
+}) 
+

js/training-push.js

@@ -90,7 +90,7 @@ $(document).ready(()=>{
   
   
   $('.next').on('click',()=> {
-    window.location = 'monitoring'
+    window.location = 'monitoring-intern'
   })
 
 }) 

monitoring-intern.php

@@ -0,0 +1,46 @@
+<div class="monitoring pattern">
+
+    <div class="row">
+        <div class="col-12">
+            <p class="font-14 p-5 page-title">COZe Monitora l'ambiente e invia informazioni contestuali per aumentare le prestazioni dei dipendenti</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="smartwatch 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 hidden">
+                                Un cliente sta da tempo osservando un prodotto nella zona giacche, potrebbe aver bisogno di aiuto!
+                            </div>
+                            
+                        </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>

monitoring-seller.php

@@ -0,0 +1,49 @@
+<div class="monitoring pattern">
+
+    <div class="row">
+        <div class="col-12">
+            <p class="font-14 p-5 page-title">Lo store è vuoto - COZe notifica latri corsi!</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 hidden">
+                                Ciao Sarah!<br>
+                                Il modulo differenze culturali è disponibile.
+                            </div>
+                            <div class="cloud empty hidden" id="sarah_2">
+                                <button class="button dotted" data-cloud="sarah_2">Ok</button>
+                            </div>
+                            
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+        
+        
+        
+<audio id="notify1">
+  <source src="<?= $BASE_URL;?>/sounds/message.wav" type="audio/wav">
+</audio> 
+

scripts/monitoring-intern.php

@@ -0,0 +1,3 @@
+
+<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/monitoring-intern.js"></script>
+

scripts/monitoring-seller.php

@@ -0,0 +1,3 @@
+
+<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/monitoring-seller.js"></script>
+

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);}      
+
+    }
+  }
+} 

scss/sections/sections.scss

@@ -3,4 +3,5 @@
 @import "compatibility"; 
 @import "plans"; 
 @import "training"; 
+@import "monitoring";