add training

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

header.php

@@ -1,13 +1,22 @@
 
-<header class="<?php if(in_array($getQ[0],array('training','monitoring'))){echo "red";}?>">
+<?php
+$redHeader = array('training-pull','training-push','monitoring');
+?>
+
+<header class="<?php if(in_array($getQ[0], $redHeader)){echo "red";}?>">
 
     <div class="container">
         <div class="row">
             <div class="col-2"><img class="logo middle" src="<?= $BASE_URL;?>/images/logo.png"></div>
             
             <?php 
-                if(in_array($getQ[0],array('training','monitoring'))){
-                echo "<div class=\"col-10 font-20 text-white text-right\"><span class=\"middle-right pr-3\">".$getQ[0]."</span></div>";
+                if(in_array($getQ[0], $redHeader)){
+                echo "<div class=\"col-10 font-20 text-white text-right\"><span class=\"middle-right pr-3\">";
+                switch($getQ[0]){
+                    case 'training-pull':
+                    echo "Fomazione pull";
+                }
+                echo "</span></div>";
                 }else{
             ?>
             <div class="col-10 menu">

js/modules.js

@@ -54,7 +54,7 @@ function drop(ev) {
 
         loading.fadeOut()
         window.location = 'compatibility'
-      },6500)
+      },6800)
       once = false
     }
 

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

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

scripts/training-pull.php

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

scripts/training-push.php

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

scss/forms.scss

@@ -50,6 +50,8 @@ button,
     color: $dark-grey;
     border: 2px dotted $dark-grey;
     border-radius: 6px;
+    padding: 5px 15px;
+    margin: 5px;
   }
 }
 

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

scss/sections/sections.scss

@@ -2,4 +2,5 @@
 @import "modules"; 
 @import "compatibility"; 
 @import "plans"; 
+@import "training"; 
 

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

training-pull.php

@@ -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>

training-push.php

@@ -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>

training.php

@@ -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>