coze_demo/plans.php

<div class="plans pattern">

    <div class="row">
        <div class="col-12">
            <p class="font-14 font-bold text-upper text-red p-5">Monitoring dispositivi</p>
        </div>
    </div>
    
    <div class="row mb-5">
        <div class="col-8 mx-auto">
            <div class="row">
                <div class="col-6">
                    <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">
                                <button class="button dotted">Vail al test</button>
                            </div>
                        </div>
                        <div class="input"></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="phone mx-auto" id="usr_sara">
                        <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>
                                Il modulo "differenze culturali" è disponibile.
                            </div>
                            <div class="cloud empty">
                                <button class="button dotted" data-cloud="sarah_1">Ok</button>
                            </div>
                            
                            <div class="cloud left hidden scroll" id="sarah_1">
                                Sorprendentemente l'area del cervello destinata a riflettere sulle nostre opinioni e sui nostri gusti si attiva anche quando cerchiamo di immedesimarci in opinioni e gusti altrui, ma solo in un caso: quando cioè l'altro è "uno come noi", culturalmente o etnicamente.
                            </div>
                            
                            <div class="cloud empty hidden" id="sarah_2">
                                <button class="button dotted" data-cloud="sarah_2">Ok</button>
                            </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>