backoffice setup

7 years ago · 9371ec2195
71 changed files with 26890 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+node_modules
+socket/node_modules
+scss/.sass-cache
+socket/public/node_modules
+socket/public/scss/.sass-cache
--- a/.htaccess
+++ b/.htaccess
@ -0,0 +1,10 @@
+
+RewriteEngine On
+
+Rewritebase /
+
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]
+
+
--- a/apis/getMessages.php
+++ b/apis/getMessages.php
@ -0,0 +1,67 @@
+<?php
+
+    @include '../cgi-bin/conn.conn';
+    @include '../cgi-bin/functions.inc';
+    @include '../cgi-bin/params.inc';
+
+    $GLOBALS['sid']=$_GET['sid'];
+    $GLOBALS['conn'];
+
+    $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+    mysqli_set_charset($conn, "utf8");
+
+    $qs=mysqli_query($conn, "SELECT * FROM `session` WHERE link='$sid'");
+    $rs=mysqli_fetch_array($qs);
+
+    $session->name = $rs['name'];
+    $session->start = $rs['start'];
+    $session->stop = $rs['stop'];
+    $session->enabled = $rs['enabled'];
+
+    $messages = array();
+
+    $qmMaxProgress=mysqli_query($conn, "SELECT MAX(progress) FROM messages WHERE sid=".$rs['id']);
+    $rmMaxProgress=mysqli_fetch_array($qmMaxProgress);
+    $qmProgressN=mysqli_query($conn, "SELECT COUNT(progress) FROM messages WHERE progress!=0 AND sid=".$rs['id']);
+    $rmProgressN=mysqli_fetch_array($qmProgressN);
+
+    $session->progress_n = $rmProgressN[0];
+    $session->progress_max = $rmMaxProgress[0];
+    $session->duration = strtotime($rs['stop']) - strtotime($rs['start']);
+    $progressCnt=0;
+    $stepDuration=$session->duration/($session->progress_n+1);
+
+    $session->step_duration = $stepDuration;
+
+    $qm=mysqli_query($conn, "SELECT * FROM messages WHERE sid=".$rs['id']." ORDER BY progress");
+    while($rm=mysqli_fetch_array($qm)){
+        if($rm['progress']){$progressCnt++;}
+
+        $timer = ($rm['progress']!=0) ?
+                    date("Y-m-d H:i:s",strtotime($session->start)+($progressCnt*$stepDuration)) :
+                    date("Y-m-d H:i:s",strtotime($session->start)+timeSeconds($rm['timer']));
+
+        $singleMessage = array("id"=>$rm['id'],
+                "title"=>$rm['title'],
+                "short_text"=>$rm['short_text'],
+                "long_text"=>$rm['long_text'],
+                "image"=>$rm['image'],
+                "actions"=>$rm['actions'],
+                "timer"=>$timer
+
+                );
+        array_push($messages, $singleMessage);
+
+    }
+
+    $session->messages = $messages;
+
+
+    header('Access-Control-Allow-Origin: *');
+    header('Content-Type: application/json');
+
+    $json = json_encode($session);
+    echo $json;
+
+
+?>
--- a/cb_message_add.php
+++ b/cb_message_add.php
@ -0,0 +1,247 @@
+<?php
+
+    session_start();
+
+    @include 'cgi-bin/conn.conn';
+    @include 'cgi-bin/functions.inc';
+    @include 'cgi-bin/params.inc';
+
+    $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+    mysqli_set_charset($conn, "utf8");
+
+?>
+
+
+<!DOCTYPE html>
+<html>
+<head>
+
+    <title>COZe</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="COZe">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+
+    <base href="<?php echo $BASE_URL;?>/">
+    <?php
+    @include 'cssvendors.php';
+    ?>
+
+</head>
+<body>
+
+    <div id="MainContent" class="container">
+        <form method="post" enctype="multipart/form-data" class="add_message_form">
+
+        <?php
+
+            if($_POST['title']) {
+                $image=0;
+                $imagePath="";
+                $text = explode("%break%", $_POST['text']);
+                if(is_uploaded_file($_FILES['image']['tmp_name'])){
+                    $image = date("YmdHis");
+                    save_photo($_FILES['image']['tmp_name'],"images/upload/",$image);
+                    $imagePath = "/images/upload/$image.jpg";
+                }
+
+                $actions = array();
+
+                if($_POST['action_title'][0] != ""){
+                    foreach ($_POST['action_title'] as $index => $message) {
+                        $action_title = $_POST['action_title'][$index];
+                        $action_description = $_POST['action_description'][$index];
+                        $action_message = $_POST['action_message'][$index];
+                        mysqli_query($conn, "INSERT INTO actions VALUES(null, '".$action_title."', '".$action_description."',".$action_message.")");
+                        $actions[$index] = mysqli_insert_id($conn);
+                    }
+                }
+
+                $q = mysqli_query($conn, "INSERT INTO messages VALUES(null, '".$_POST['session']."', '".convert($_POST['title'])."',
+                                            '".convert_mce($text[0])."', '".convert_mce($text[1])."', '$imagePath',
+                                            '".implode(",", $actions)."', '".$_POST['hours'].":".$_POST['minutes'].":".$_POST['seconds']."',
+                                            ".$_POST['progress'].")");
+
+
+                echo "<script>parent.window.location=parent.window.location</script>";
+
+            } else {
+        ?>
+
+            <div class="row">
+                <div class="col-12">
+                    <span class="font-12 text-grey">Session</span>
+                    <div class="row">
+                        <div class="col">
+                            <select name="session">
+                            <?php
+                                $qs = mysqli_query($conn, "SELECT * FROM `session` ORDER BY name");
+
+                                while($rs = mysqli_fetch_array($qs)){
+                                    echo "<option value=\"".$rs['id']."\">".$rs['name']."</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <span class="font-12 text-grey">Message title</span>
+                    <input type="text" name="title">
+                </div>
+                <div class="col-12">
+                    <span class="font-12 text-grey">Message text</span>
+                    <textarea class="mce" name="text"></textarea>
+                </div>
+                <div class="col-12 mt-3">
+                    <span class="font-12 text-grey">Image<br></span>
+                    <input type="file" name="image">
+                </div>
+
+                <div class="col-12">
+                    <span class="font-12 text-grey">Actions</span>
+                    <div class="row item">
+                            <div class="col-3 font-10 text-grey">
+                                Label
+                            </div>
+                            <div class="col-4 font-10 text-grey">
+                                Description
+                            </div>
+                            <div class="col-4 font-10 text-grey">
+                                Link to
+                            </div>
+                            <div class="col-1"></div>
+                        </div>
+                    </div>
+                    <div class="actions col-12">
+                        <div class="row item">
+                            <div class="col-3">
+                                <input type="text" name="action_title[]" placeholder="No action">
+                            </div>
+                            <div class="col-4">
+                                <input type="text" name="action_description[]">
+                            </div>
+                            <div class="col-4">
+                                <select name="action_message[]">
+                                <?php
+                                 $qm = mysqli_query($conn, "SELECT * FROM messages ORDER BY title");
+                                    while($rm = mysqli_fetch_array($qm)){
+                                        echo "<option value=\"".$rm['id']."\">".$rm['title']."</option>\n";
+                                    }
+                                ?>
+                                </select>
+                            </div>
+                            <div class="col-1">
+                                <button class="button grey del-row mx-0" disabled><i class="fa fa-minus"></i></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <div class="row">
+                        <div class="col-12 text-left p-0">
+                            <button class="button grey add-row mx-0"><i class="fa fa-plus"></i></button>
+                        </div>
+                    </div>
+                </div>
+
+
+
+                <div class="col-12 px-0">
+                    <hr>
+                    <span class="font-12 text-grey">Schedule</span>
+                    <div class="row">
+                        <div class="col">
+                            <button class="button discard big full mx-0" id="btn_none">Not scheduled</button>
+                        </div>
+                        <div class="col">
+                            <button class="button grey big full mx-0" id="btn_progress">Schedule</button>
+                        </div>
+                        <div class="col">
+                            <button class="button grey big full mx-0" id="btn_timer">Start after</button>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div class="col-6 mx-auto my-5 d-none" id="div_timer">
+                    <span class="font-12 text-grey">Start after (HH:MM:SS)</span>
+                    <div class="row">
+                        <div class="col">
+                            <select name="hours" class="text-center hours">
+                            <?php
+                                for($i=0;$i<24;$i++){
+                                    echo "<option value=\"".sprintf("%02d", $i)."\">".sprintf("%02d", $i)."</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                        <div class="col hseparator">
+                            <select name="minutes" class="text-center minutes">
+                            <?php
+                                for($i=0;$i<60;$i++){
+                                    echo "<option value=\"".sprintf("%02d", $i)."\">".sprintf("%02d", $i)."</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                        <div class="col hseparator">
+                            <select name="seconds" class="text-center seconds">
+                            <?php
+                                for($i=0;$i<60;$i++){
+                                    echo "<option value=\"".sprintf("%02d", $i)."\">".sprintf("%02d", $i)."</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-6 mx-auto my-5 d-none" id="div_progress">
+                    <span class="font-12 text-grey">Progress</span>
+                    <div class="row">
+                        <div class="col">
+                            <select name="progress" class="text-center schedule">
+                            <option value="0" style="display: none; opacity:0">0</option>
+                            <?php
+                                for($i=1;$i<60;$i++){
+                                    echo "<option value=\"$i\">$i</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-6 mx-auto my-5 text-center" id="div_none">
+                    <span class="font-12 text-grey">Not scheduled</span>
+                </div>
+
+
+
+                <div class="col-12 text-center p4 px-0">
+                    <button type="submit" class="button big full confirm mx-0">Add message</button>
+                </div>
+            </div>
+
+        <?php
+            }
+        ?>
+
+        </form>
+    </div>
+
+    <?php
+        @include 'jsvendors.php';
+        @include 'scripts/'.$getQ[0].'.php';
+    ?>
+
+
+</body>
+</html>
+
+
+
+<?php
+mysqli_close($conn);
+?>
--- a/cb_message_edit.php
+++ b/cb_message_edit.php
@ -0,0 +1,327 @@
+<?php
+
+    session_start();
+
+    @include 'cgi-bin/conn.conn';
+    @include 'cgi-bin/functions.inc';
+    @include 'cgi-bin/params.inc';
+
+    $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+    mysqli_set_charset($conn, "utf8");
+
+?>
+
+
+<!DOCTYPE html>
+<html>
+<head>
+
+    <title>COZe</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="COZe">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+
+    <base href="<?php echo $BASE_URL;?>/">
+    <?php
+    @include 'cssvendors.php';
+    ?>
+
+</head>
+<body>
+
+    <div id="MainContent" class="container">
+        <form method="post" enctype="multipart/form-data" class="add_message_form">
+
+        <?php
+
+            if($_POST['title']) {
+                $image=0;
+                $text = explode("%break%", $_POST['text']);
+                if(is_uploaded_file($_FILES['image']['tmp_name'])){
+                    $image = date("YmdHis");
+                    $imagePath = "/images/upload/$image.jpg";
+                    save_photo($_FILES['image']['tmp_name'],"images/upload/",$image);
+                }
+
+                if($_POST['del-img']){
+                    $imagePath="";
+                }
+
+                $actions = array();
+
+                if($_POST['action_title'][0] != ""){
+                    foreach ($_POST['action_title'] as $index => $message) {
+                        $action_title = $_POST['action_title'][$index];
+                        $action_description = $_POST['action_description'][$index];
+                        $action_message = $_POST['action_message'][$index];
+                        $action_id = $_POST['action_id'][$index];
+                        if($action_id == 0){
+                            mysqli_query($conn, "INSERT INTO actions VALUES(null, '".$action_title."', '".$action_description."',".$action_message.")");
+                            $actions[$index] = mysqli_insert_id($conn);
+                        }else{
+                            mysqli_query($conn, "UPDATE actions SET label='".$action_title."', description='".$action_description."', mid=".$action_message." WHERE id=$action_id");
+                            $actions[$index] = $action_id;
+                        }
+                    }
+                }
+
+                $q = mysqli_query($conn, "UPDATE messages SET sid='".$_POST['session']."', title='".convert($_POST['title'])."',
+                                            short_text='".convert_mce($text[0])."', long_text='".convert_mce($text[1])."',
+                                            image='$imagePath', actions='".implode(",", $actions)."',
+                                            timer='".$_POST['hours'].":".$_POST['minutes'].":".$_POST['seconds']."',
+                                            progress=".$_POST['progress']." WHERE id=".$_POST['id']);
+
+
+                echo "<script>parent.window.location=parent.window.location</script>";
+
+            } else {
+
+                $q = mysqli_query($conn, "SELECT * FROM messages WHERE id=".$_GET['id']."");
+                $r = mysqli_fetch_array($q);
+        ?>
+
+            <div class="row">
+                <div class="col-12">
+                    <span class="font-12 text-grey">Session</span>
+                    <div class="row">
+                        <div class="col">
+                            <select name="session">
+                            <?php
+                                $qs = mysqli_query($conn, "SELECT * FROM `session` ORDER BY name");
+
+                                while($rs = mysqli_fetch_array($qs)){
+                                    echo "<option value=\"".$rs['id']."\" ";
+                                    if($r['sid'] == $rs['id']){echo "selected";}
+                                    echo ">".$rs['name']."</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <span class="font-12 text-grey">Message title</span>
+                    <input type="text" name="title" value="<?= $r['title'];?>">
+                    <input type="hidden" name="id" value="<?= $_GET['id'];?>">
+                </div>
+                <div class="col-12">
+                    <span class="font-12 text-grey">Message text</span>
+                    <textarea class="mce" name="text"><?= $r['short_text']."%break%".$r['long_text'];?></textarea>
+                </div>
+                <div class="col-10 mt-3">
+                    <span class="font-12 text-grey">Image<br></span>
+                    <input type="file" name="image">
+                </div>
+                <div class="col-1 mt-3">
+                    <?php
+                        if($r['image']){
+                            echo "<img src=\"".$r['image']."\" width=\"100%\">";
+                        }
+                    ?>
+                </div>
+                <div class="col-1">
+                    <?php
+                        if($r['image']){
+                            echo "<input type=\"checkbox\" name=\"del-img\" class=\"full-middle\" value=\"".$r['id']."\">";
+                        }
+                    ?>
+                </div>
+
+                <div class="col-12">
+                    <span class="font-12 text-grey">Actions</span>
+                    <div class="row item">
+                            <div class="col-3 font-10 text-grey">
+                                Label
+                            </div>
+                            <div class="col-4 font-10 text-grey">
+                                Description
+                            </div>
+                            <div class="col-4 font-10 text-grey">
+                                Link to
+                            </div>
+                            <div class="col-1"></div>
+                        </div>
+                    </div>
+                    <div class="actions col-12">
+                        <?php
+                            if($r['actions']){
+                                $cnt=0;
+                                $qpa = mysqli_query($conn, "SELECT * FROM actions WHERE id IN(".$r['actions'].")");
+                                while($rpa = mysqli_fetch_array($qpa)){
+                                $cnt++;
+                            ?>
+
+                                <div class="row item">
+                                    <div class="col-3">
+                                        <input type="hidden" name="action_id[]" value="<?= $rpa['id'];?>">
+                                        <input type="text" name="action_title[]" value="<?= $rpa['label'];?>">
+                                    </div>
+                                    <div class="col-4">
+                                        <input type="text" name="action_description[]" value="<?= $rpa['description'];?>">
+                                    </div>
+                                    <div class="col-4">
+                                        <select name="action_message[]">
+                                        <?php
+                                        $qm = mysqli_query($conn, "SELECT * FROM messages ORDER BY title");
+                                            while($rm = mysqli_fetch_array($qm)){
+                                                echo "<option value=\"".$rm['id']."\" ";
+                                                if($rpa['mid'] == $rm['id']){echo "selected";}
+                                                echo ">".$rm['title']."</option>\n";
+                                            }
+                                        ?>
+                                        </select>
+                                    </div>
+                                    <div class="col-1">
+                                        <button class="button grey del-row mx-0" <?php if($cnt==1){echo "disabled";}?>><i class="fa fa-minus"></i></button>
+                                    </div>
+                                </div>
+
+                            <?php
+                                }
+                            }else{
+                        ?>
+                        <div class="row item">
+                            <div class="col-3">
+                                <input type="hidden" name="action_id[]" value="0">
+                                <input type="text" name="action_title[]" placeholder="No action">
+                            </div>
+                            <div class="col-4">
+                                <input type="text" name="action_description[]">
+                            </div>
+                            <div class="col-4">
+                                <select name="action_message[]">
+                                <?php
+                                 $qm = mysqli_query($conn, "SELECT * FROM messages ORDER BY title");
+                                    while($rm = mysqli_fetch_array($qm)){
+                                        echo "<option value=\"".$rm['id']."\">".$rm['title']."</option>\n";
+                                    }
+                                ?>
+                                </select>
+                            </div>
+                            <div class="col-1">
+                                <button class="button grey del-row mx-0" disabled><i class="fa fa-minus"></i></button>
+                            </div>
+                        </div>
+                        <?php
+                            }
+                        ?>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <div class="row">
+                        <div class="col-12 text-left p-0">
+                            <button class="button grey add-row mx-0"><i class="fa fa-plus"></i></button>
+                        </div>
+                    </div>
+                </div>
+
+
+
+                <div class="col-12 px-0">
+                    <hr>
+                    <span class="font-12 text-grey">Schedule</span>
+                    <div class="row">
+                        <div class="col">
+                            <button class="button <?php if($r['timer']=='00:00:00' && $r['progress']==0){echo "discard";}else{echo "grey";}?> big full mx-0" id="btn_none">Not scheduled</button>
+                        </div>
+                        <div class="col">
+                            <button class="button <?php if($r['progress']!=0){echo "discard";}else{echo "grey";}?> big full mx-0" id="btn_progress">Schedule</button>
+                        </div>
+                        <div class="col">
+                            <button class="button <?php if($r['timer']!='00:00:00' && $r['progress']==0){echo "discard";}else{echo "grey";}?> big full mx-0" id="btn_timer">Start after</button>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div class="col-6 mx-auto my-5 <?php if($r['timer']=='00:00:00'){echo "d-none";}?>" id="div_timer">
+                    <span class="font-12 text-grey">Start after (HH:MM:SS)</span>
+                    <div class="row">
+                        <div class="col">
+                            <select name="hours" class="text-center hours">
+                            <?php
+                                $timer = explode(':',$r['timer']);
+                                for($i=0;$i<24;$i++){
+                                    echo "<option value=\"".sprintf("%02d", $i)."\" ";
+                                    if($timer[0]==sprintf("%02d", $i)){echo "selected";}
+                                    echo ">".sprintf("%02d", $i)."</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                        <div class="col hseparator">
+                            <select name="minutes" class="text-center minutes">
+                            <?php
+                                for($i=0;$i<60;$i++){
+                                    echo "<option value=\"".sprintf("%02d", $i)."\" ";
+                                    if($timer[1]==sprintf("%02d", $i)){echo "selected";}
+                                    echo ">".sprintf("%02d", $i)."</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                        <div class="col hseparator">
+                            <select name="seconds" class="text-center seconds">
+                            <?php
+                                for($i=0;$i<60;$i++){
+                                    echo "<option value=\"".sprintf("%02d", $i)."\" ";
+                                    if($timer[2]==sprintf("%02d", $i)){echo "selected";}
+                                    echo ">".sprintf("%02d", $i)."</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-6 mx-auto my-5 <?php if($r['progress']==0){echo "d-none";}?>" id="div_progress">
+                    <span class="font-12 text-grey">Progress</span>
+                    <div class="row">
+                        <div class="col">
+                            <select name="progress" class="text-center schedule">
+                            <option value="0" style="display: none; opacity:0">0</option>
+                            <?php
+                                for($i=1;$i<60;$i++){
+                                    echo "<option value=\"$i\" ";
+                                    if($r['progress']!=0 && $r['progress']==$i){echo "selected";}
+                                    echo ">$i</option>\n";
+                                }
+                            ?>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-6 mx-auto my-5 text-center <?php if($r['timer']!='00:00:00' || $r['progress']!=0){echo "d-none";}?>" id="div_none">
+                    <span class="font-12 text-grey">Not scheduled</span>
+                </div>
+
+
+
+                <div class="col-12 text-center p4 px-0">
+                    <button type="submit" class="button big full confirm mx-0">Update message</button>
+                </div>
+            </div>
+
+        <?php
+            }
+        ?>
+
+        </form>
+    </div>
+
+    <?php
+        @include 'jsvendors.php';
+        @include 'scripts/'.$getQ[0].'.php';
+    ?>
+
+
+</body>
+</html>
+
+
+
+<?php
+mysqli_close($conn);
+?>
--- a/cb_session_action.php
+++ b/cb_session_action.php
@ -0,0 +1,84 @@
+<?php
+
+    session_start();
+
+    @include 'cgi-bin/conn.conn';
+    @include 'cgi-bin/functions.inc';
+    @include 'cgi-bin/params.inc';
+
+    $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+    mysqli_set_charset($conn, "utf8");
+
+?>
+
+
+<!DOCTYPE html>
+<html>
+<head>
+
+    <title>COZe</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="COZe">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+
+    <base href="<?php echo $BASE_URL;?>/">
+    <?php
+    @include 'cssvendors.php';
+    ?>
+
+</head>
+<body>
+
+    <div id="MainContent" class="container">
+        <form method="post">
+
+        <?php
+            if($_POST['id']) {
+
+            $q = mysqli_query($conn, "UPDATE `session` SET enabled=".intval($_POST['go'])." WHERE id=".$_POST['id']."");
+            //echo "UPDATE `session` SET enabled=".intval($_POST['go'])." WHERE id=".$_POST['id']."";
+            echo "<script>parent.window.location=parent.window.location</script>";
+
+            } else {
+
+                if($_GET['status']){
+                    $action_text = "Disable session";
+                }else{
+                    $action_text = "Enable session";
+                }
+        ?>
+
+         <div class="row">
+            <div class="col-12 text-center p-4">
+                <span class="font-24"><?= $action_text;?></span>
+                <input type="hidden" name="id" value="<?= $_GET['id'];?>">
+                <input type="hidden" name="go" value="<?= !intval($_GET['status']);?>">
+            </div>
+
+            <div class="col-12 text-center p4">
+                <button type="submit" class="button big confirm mx-0">Go</button>
+            </div>
+        </div>
+
+        <?php
+            }
+        ?>
+
+        </form>
+    </div>
+
+    <?php
+        @include 'jsvendors.php';
+        @include 'scripts/'.$getQ[0].'.php';
+    ?>
+
+
+</body>
+</html>
+
+
+
+<?php
+mysqli_close($conn);
+?>
--- a/cb_session_add.php
+++ b/cb_session_add.php
@ -0,0 +1,95 @@
+<?php
+
+    session_start();
+
+    @include 'cgi-bin/conn.conn';
+    @include 'cgi-bin/functions.inc';
+    @include 'cgi-bin/params.inc';
+
+    $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+    mysqli_set_charset($conn, "utf8");
+
+?>
+
+
+<!DOCTYPE html>
+<html>
+<head>
+
+    <title>COZe</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="COZe">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+
+    <base href="<?php echo $BASE_URL;?>/">
+    <?php
+    @include 'cssvendors.php';
+    ?>
+
+</head>
+<body>
+
+    <div id="MainContent" class="container">
+        <form method="post">
+
+        <?php
+            if($_POST['name']) {
+
+            $q = mysqli_query($conn, "INSERT INTO session VALUES(null, '".convert($_POST['name'])."', '".convert_url($_POST['name'])."', '".$_POST['start']."', '".$_POST['stop']."', ".$_POST['enabled'].")");
+
+             echo "<script>parent.window.location=parent.window.location</script>";
+
+            } else {
+        ?>
+
+         <div class="row">
+                <div class="col-12">
+                    <span class="font-12 text-grey">Session title</span>
+                    <input type="text" name="name">
+                </div>
+<!--                <div class="col-12">
+                    <span class="font-12 text-grey">Session link</span>
+                    <input type="text" id="link" name="link" value="<?= $BASE_URL;?>" readonly>
+                </div>-->
+                <div class="col-6">
+                    <span class="font-12 text-grey">Session start</span>
+                    <input type="text" name="start" class="datepicker">
+                </div>
+                <div class="col-6">
+                    <span class="font-12 text-grey">Session end</span>
+                    <input type="text" name="stop" class="datepicker">
+                </div>
+                <div class="col-6">
+                    <span class="font-12 text-grey">Status</span>
+                    <select class="select" name="enabled">
+                        <option value="1">Enabled</option>
+                        <option value="0">NOT enabled</option>
+                    </select>
+                </div>
+                <div class="col-12">
+                    <button type="submit" class="button big full confirm mx-0">Add session</button>
+                </div>
+            </div>
+
+        <?php
+            }
+        ?>
+
+        </form>
+    </div>
+
+    <?php
+        @include 'jsvendors.php';
+        @include 'scripts/'.$getQ[0].'.php';
+    ?>
+
+
+</body>
+</html>
+
+
+
+<?php
+mysqli_close($conn);
+?>
--- a/cb_session_edit.php
+++ b/cb_session_edit.php
@ -0,0 +1,97 @@
+<?php
+
+    session_start();
+
+    @include 'cgi-bin/conn.conn';
+    @include 'cgi-bin/functions.inc';
+    @include 'cgi-bin/params.inc';
+
+    $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+    mysqli_set_charset($conn, "utf8");
+
+?>
+
+
+<!DOCTYPE html>
+<html>
+<head>
+
+    <title>COZe</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="COZe">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+
+    <base href="<?php echo $BASE_URL;?>/">
+    <?php
+    @include 'cssvendors.php';
+    ?>
+
+</head>
+<body>
+
+    <div id="MainContent" class="container">
+        <form method="post">
+
+        <?php
+            if($_POST['name']) {
+
+            $q = mysqli_query($conn, "UPDATE session SET name='".convert($_POST['name'])."', link='".convert_url($_POST['name'])."',
+                                    start='".$_POST['start']."', stop='".$_POST['stop']."', enabled=".$_POST['enabled']."
+                                    WHERE id=".$_POST['id']."");
+
+             echo "<script>parent.window.location=parent.window.location</script>";
+
+            } else {
+
+                $q = mysqli_query($conn, "SELECT * FROM session WHERE id=".$_GET['id']."");
+                $r = mysqli_fetch_array($q);
+        ?>
+
+         <div class="row">
+                <div class="col-12">
+                    <span class="font-12 text-grey">Session title</span>
+                    <input type="text" name="name" value="<?= $r['name'];?>">
+                    <input type="hidden" name="id" value="<?= $_GET['id'];?>">
+                </div>
+                <div class="col-6">
+                    <span class="font-12 text-grey">Session start</span>
+                    <input type="text" name="start" class="datepicker" value="<?= $r['start'];?>">
+                </div>
+                <div class="col-6">
+                    <span class="font-12 text-grey">Session end</span>
+                    <input type="text" name="stop" class="datepicker" value="<?= $r['stop'];?>">
+                </div>
+                <div class="col-6">
+                    <span class="font-12 text-grey">Status</span>
+                    <select class="select" name="enabled">
+                        <option value="1" <?php if($r['enabled'] == 1){echo "selected";}?>>Enabled</option>
+                        <option value="0" <?php if($r['enabled'] == 0){echo "selected";}?>>NOT enabled</option>
+                    </select>
+                </div>
+                <div class="col-12">
+                    <button type="submit" class="button big full confirm mx-0">Update session</button>
+                </div>
+            </div>
+
+        <?php
+            }
+        ?>
+
+        </form>
+    </div>
+
+    <?php
+        @include 'jsvendors.php';
+        @include 'scripts/'.$getQ[0].'.php';
+    ?>
+
+
+</body>
+</html>
+
+
+
+<?php
+mysqli_close($conn);
+?>
--- a/cgi-bin/conn.conn
+++ b/cgi-bin/conn.conn
@ -0,0 +1,9 @@
+<?php
+
+$DATAhst="localhost";
+$DATAusr="coze_training";
+$DATApwd="COZeMyPwd";
+$DATAdtb="coze_training";
+
+
+?>
--- a/cgi-bin/functions.inc
+++ b/cgi-bin/functions.inc
@ -0,0 +1,75 @@
+<?php
+
+function conv_date($od){
+    $tmp=explode("-",substr($od,0,10));
+    $stres = $tmp[2]."/".$tmp[1]."/".$tmp[0]."";
+    return $stres;
+}
+
+
+
+function convert($stringa){
+    $strres = $stringa;
+    $strres = str_replace("'","&#039;",$strres);
+    return stripslashes(nl2br($strres));
+}
+
+
+function convert_mce($stringa){
+    $strres = $stringa;
+    $strres = str_replace("'","&#039;",$strres);
+    return stripslashes($strres);
+}
+
+function convert_url($text){
+    $entities = array('+','%21', '%2A', '%27', '%28', '%29', '%3B', '%3A', '%40', '%26', '%3D', '%2B', '%24', '%2C', '%2F', '%3F', '%25', '%23', '%5B', '%5D');
+    $replacements = array('-','_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_', '_',);
+    return str_replace($entities, $replacements, urlencode($text));
+}
+
+function get_filesize($path){
+    return filesize(realpath($_SERVER["DOCUMENT_ROOT"])."".$path);
+}
+
+
+function save_photo($foto,$basepath,$id){
+
+    $filename = $foto;
+    // Get new sizes
+    list($width, $height) = getimagesize($filename);
+    $percent=800/$width;
+    $newwidth = $width * $percent;
+    $newheight = $height * $percent;
+
+    // Load
+    $thumb = imagecreatetruecolor($newwidth, $newheight);
+
+    switch(exif_imagetype($filename)){
+        case 1:
+        $source = imagecreatefromgif($filename);
+        break;
+
+        case 2:
+        $source = imagecreatefromjpeg($filename);
+        break;
+
+        case 3:
+        $source = imagecreatefrompng($filename);
+        break;
+
+    }
+    // Resize
+    imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
+
+    // Output
+    imagejpeg($thumb, $basepath."$id.jpg");
+
+}
+
+function timeSeconds($time) {
+    list($h, $m, $s) = explode(':', $time);
+    return ($h * 3600) + ($m * 60) + $s;
+}
+
+
+?>
--- a/cgi-bin/params.inc
+++ b/cgi-bin/params.inc
@ -0,0 +1,6 @@
+<?php
+
+    $BASE_URL="http://".$_SERVER['HTTP_HOST']."";
+    $ROOT = realpath($_SERVER["DOCUMENT_ROOT"]);
+    
+?>
--- a/css/styles.css
+++ b/css/styles.css
--- a/cssvendors.php
+++ b/cssvendors.php
@ -0,0 +1,3 @@
+    <link href="<?php echo $BASE_URL;?>/node_modules/flatpickr/dist/flatpickr.min.css" rel="stylesheet" type="text/css"/>
+    <link href="<?php echo $BASE_URL;?>/node_modules/flatpickr/dist/themes/material_red.css" rel="stylesheet" type="text/css"/>
+    <link href="<?php echo $BASE_URL;?>/css/styles.css" rel="stylesheet" type="text/css"/>
--- a/header.php
+++ b/header.php
@ -0,0 +1,14 @@
+
+<header>
+    <div class="container">
+        <div class="row">
+            <div class="col-2"><img class="logo middle" src="<?= $BASE_URL;?>/images/logo.png"></div>
+            <div class="col-10 menu">
+                <ul class="middle">
+                    <li class="<?php if($getQ[0]=="sessions"){echo "active";}?>"><a href="<?= $BASE_URL;?>/sessions">Sessioni</a></li>
+                    <li class="<?php if($getQ[0]=="messages"){echo "active";}?>"><a href="<?= $BASE_URL;?>/messages">Messaggi</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</header>
--- a/images/logo.png
+++ b/images/logo.png
--- a/images/menu.png
+++ b/images/menu.png
--- a/images/pattern.jpg
+++ b/images/pattern.jpg
--- a/images/phone.png
+++ b/images/phone.png
--- a/images/smartwatch.png
+++ b/images/smartwatch.png
--- a/images/upload/20180318201537.jpg
+++ b/images/upload/20180318201537.jpg
--- a/images/upload/20180324075448.jpg
+++ b/images/upload/20180324075448.jpg
--- a/images/upload/20180325083500.jpg
+++ b/images/upload/20180325083500.jpg
--- a/images/upload/20180325110958.jpg
+++ b/images/upload/20180325110958.jpg
--- a/index.php
+++ b/index.php
@ -1,4 +1,75 @@
 <?php

-echo "coze_training";
+    session_start();
+
+    @include 'cgi-bin/conn.conn';
+    @include 'cgi-bin/functions.inc';
+    @include 'cgi-bin/params.inc';
+
+    $GLOBALS['getQ'][0]="home";
+    $GLOBALS['conn'];
+
+    $conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+    mysqli_set_charset($conn, "utf8");
+
+    if(@$_GET['q']){
+        $GLOBALS['getQ']=explode("/",$_GET['q']);
+    }
+
+    if($getQ[0]!="home"){ $isHome = false; }
+
+
+    if($getQ[0]=="logout"){
+        unset($_SESSION['AUTH']);
+        session_destroy();
+        header('Location: '.$BASE_URL);
+    }
+
+?>
+
+
+<!DOCTYPE html>
+<html>
+<head>
+
+    <title>COZe</title>
+
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="COZe">
+    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+
+    <base href="<?php echo $BASE_URL;?>/">
+    <?php
+    @include 'cssvendors.php';
+    ?>
+
+</head>
+<body>
+
+    <?php
+        @include 'header.php';
+    ?>
+    <section class="pt-5">
+        <div id="MainContent" class="container">
+            <?php
+                @include $getQ[0].'.php';
+            ?>
+        </div>
+    </section>
+
+
+
+    <?php
+        @include 'jsvendors.php';
+        @include 'scripts/'.$getQ[0].'.php';
+    ?>
+
+
+</body>
+</html>
+
+
+
+<?php
+mysqli_close($conn);
 ?>
--- a/js/messages.js
+++ b/js/messages.js
@ -0,0 +1,107 @@
+$(document).ready(function(){
+
+  const add_message_form = $('.add_message_form');
+  const btn_progress = add_message_form.find('#btn_progress');
+  const btn_timer = add_message_form.find('#btn_timer');
+  const btn_none = add_message_form.find('#btn_none');
+  const btn_add_row = add_message_form.find('.add-row');
+  const btn_del_row = add_message_form.find('.del-row');
+
+  const div_progress = add_message_form.find('#div_progress');
+  const div_timer = add_message_form.find('#div_timer');
+  const div_none = add_message_form.find('#div_none');
+
+  const hh = add_message_form.find('.hours');
+  const mm = add_message_form.find('.minutes');
+  const ss = add_message_form.find('.seconds');
+  const sk = add_message_form.find('.schedule');
+
+  btn_progress.on('click', (e)=> {
+    e.preventDefault();
+    btn_progress.removeClass('grey').addClass('discard');
+    btn_timer.removeClass('discard').addClass('grey');
+    btn_none.removeClass('discard').addClass('grey');
+
+    hh.val('00');
+    mm.val('00');
+    ss.val('00');
+    sk.val('0');
+
+    div_timer.addClass('d-none');
+    div_none.addClass('d-none');
+    div_progress.removeClass('d-none');
+
+    $('html, body').animate({scrollTop: $('body').height()}, 400);
+  });
+
+  btn_timer.on('click', (e)=> {
+    e.preventDefault();
+    btn_timer.removeClass('grey').addClass('discard');
+    btn_progress.removeClass('discard').addClass('grey');
+    btn_none.removeClass('discard').addClass('grey');
+
+    hh.val('00');
+    mm.val('00');
+    ss.val('00');
+    sk.val('0');
+
+    div_progress.addClass('d-none');
+    div_none.addClass('d-none');
+    div_timer.removeClass('d-none');
+
+    $('html, body').animate({scrollTop: $('body').height()}, 400);
+  });
+
+  btn_none.on('click', (e)=> {
+    e.preventDefault();
+    btn_none.removeClass('grey').addClass('discard');
+    btn_progress.removeClass('discard').addClass('grey');
+    btn_timer.removeClass('discard').addClass('grey');
+
+    hh.val('00');
+    mm.val('00');
+    ss.val('00');
+    sk.val('0');
+
+    div_progress.addClass('d-none');
+    div_timer.addClass('d-none');
+    div_none.removeClass('d-none');
+
+    $('html, body').animate({scrollTop: $('body').height()}, 400);
+  });
+
+  btn_add_row.on('click', (e)=> {
+    e.preventDefault();
+    const self = $(e.currentTarget);
+    const add_message_form = $('.add_message_form');
+    const actions = add_message_form.find('.actions');
+    const item = actions.find('.item').first();
+    const clone = item.clone();
+
+    $(clone).find('[name="action_id[]"]').val(0);
+    $(clone).find('[name="action_title[]"]').val("");
+    $(clone).find('[name="action_description[]"]').val("");
+
+    actions.append(clone);
+
+
+    const btn_del_row = clone.find('.del-row');
+    btn_del_row.removeAttr('disabled');
+    btn_del_row.on('click', (e)=> {
+      e.preventDefault();
+      const self = $(e.currentTarget);
+      const item = self.closest('.item');
+      item.remove();
+    });
+
+  });
+
+
+  btn_del_row.on('click', (e)=> {
+    e.preventDefault();
+    const self = $(e.currentTarget);
+    const item = self.closest('.item');
+    item.remove();
+  });
+
+});
--- a/js/scripts.js
+++ b/js/scripts.js
@ -0,0 +1,32 @@
+$(document).ready(function(){
+
+  $(".cbOpen").colorbox({iframe:true, width:"95%", height:"95%"});
+  $(".cbOpenSmall").colorbox({iframe:true, width:"500px", height:"400px"});
+
+  tinymce.init({
+    selector: '.mce',
+    height: 200,
+    theme: 'modern',
+    menubar: false,
+//     language: 'it',
+    forced_root_block : '',
+    force_br_newlines : true,
+    pagebreak_separator: '%break%',
+    plugins: [
+      'advlist autolink pagebreak lists paste'
+    ],
+    toolbar: 'bold italic underline | bullist numlist pagebreak | removeformat',
+    image_advtab: false,
+    content_css: [
+      '//fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i',
+    ]
+  });
+
+  $( ".datepicker" ).flatpickr({
+    time_24hr: true,
+    enableTime: true,
+    dateFormat: "Y-m-d H:i:ss",
+  });
+
+
+});
--- a/jsvendors.php
+++ b/jsvendors.php
@ -0,0 +1,8 @@
+
+    <script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/jquery/dist/jquery.min.js"></script>
+    <script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/tinymce/tinymce.min.js"></script>
+    <script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/flatpickr/dist/flatpickr.min.js"></script>
+    <script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/jquery-colorbox/jquery.colorbox-min.js"></script>
+
+    <script type="text/javascript" src="<?php echo $BASE_URL;?>/js/scripts.js"></script>
+    <script type="text/javascript" src="<?php echo $BASE_URL;?>/js/messages.js"></script>
--- a/messages.php
+++ b/messages.php
@ -0,0 +1,40 @@
+
+
+<div class="messages">
+
+    <div class="row <?= $bgcolor;?> py-2 text-right">
+        <div class="col-12"><a href="/cb_message_add.php" class="cbOpen button big confirm mx-0">Add new message</a></div>
+    </div>
+
+    <div class="row <?= $bgcolor;?> p-2 text-upper text-grey">
+        <div class="col-5 font-12">Message title</div>
+        <div class="col-4 font-12">Session</div>
+        <div class="col-1 font-12 text-center">Timer</div>
+        <div class="col-1 font-12 text-center">Prog.</div>
+        <div class="col-1 text-right"></div>
+    </div>
+
+    <?php
+        $cnt=0;
+        $q=mysqli_query($conn, "SELECT messages.*, session.name AS session_name FROM `messages`, session WHERE messages.sid = session.id ORDER BY session_name,messages.title DESC");
+        while($r=mysqli_fetch_array($q)){
+        $cnt++;
+        $bgcolor = ($cnt%2) ? "bg-grey" : "bg-white";
+    ?>
+
+    <div class="row items <?= $bgcolor;?> p-2">
+        <div class="col-5 font-12"><?= $r['title'];?></div>
+        <div class="col-4 font-12"><?= $r['session_name'];?></div>
+        <div class="col-1 font-12 text-center"><?= $r['timer'];?></div>
+        <div class="col-1 font-12 text-center"><?= $r['progress'];?></div>
+        <div class="col-1 text-right">
+            <a href="/cb_message_edit.php?id=<?= $r['id'];?>" class="cbOpen text-black"><i class="fa fa-pencil-square ml-2"></i></a>
+        </div>
+    </div>
+
+    <?php
+        }
+    ?>
+
+
+</div>
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,46 @@
+{
+  "name": "coze_training",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "bootstrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
+      "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA=="
+    },
+    "flatpickr": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.3.2.tgz",
+      "integrity": "sha1-akdwQ8B17zbD/1T620m5NqZNY18="
+    },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
+    "jquery-colorbox": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/jquery-colorbox/-/jquery-colorbox-1.6.4.tgz",
+      "integrity": "sha1-eZRSUjpsSUg5Ik73AugH3rnAbMU=",
+      "requires": {
+        "jquery": "3.3.1"
+      }
+    },
+    "popper.js": {
+      "version": "1.12.9",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz",
+      "integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM="
+    },
+    "tinymce": {
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-4.7.9.tgz",
+      "integrity": "sha512-JGN0Hn8cYINgyHTw6ztnO086hez4SIWbkny+3S5tesyvggNFg6He1GSIHPZgSB3+ydCqO8J6qhjGSIyi0LPwpQ=="
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,25 @@
+{
+  "name": "coze_training",
+  "version": "1.0.0",
+  "description": "COZe Training",
+  "main": "index.js",
+  "dependencies": {
+    "bootstrap": "^4.0.0",
+    "flatpickr": "^4.3.2",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.3.1",
+    "jquery-colorbox": "^1.6.4",
+    "popper.js": "^1.12.9",
+    "tinymce": "^4.7.9"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@185.104.124.137:/docs/git/coze_training.git"
+  },
+  "author": "Dslak",
+  "license": "ISC"
+}
--- a/scss/colorbox.scss
+++ b/scss/colorbox.scss
@ -0,0 +1,151 @@
+
+#colorbox,
+#cboxOverlay,
+#cboxWrapper{
+  position:fixed;
+  top:0;
+  left:0;
+  z-index:9999;
+  overflow:hidden;
+  -webkit-transform: translate3d(0,0,0);
+}
+
+#cboxWrapper {
+  max-width:none;
+}
+
+#cboxOverlay{
+  position:fixed;
+  width:100%;
+  height:100%;
+  background: rgba(0,0,0,0.9);
+}
+
+#cboxMiddleLeft,
+#cboxBottomLeft{
+  clear:left;
+}
+
+#cboxContent{
+  position:relative;
+}
+
+#cboxLoadedContent{
+  overflow:auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+#cboxTitle{
+  margin:0;
+}
+
+#cboxLoadingOverlay,
+#cboxLoadingGraphic{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+}
+
+#cboxPrevious,
+#cboxNext,
+#cboxClose,
+#cboxSlideshow{
+  cursor:pointer;
+}
+
+.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;border-radius: 5px;}
+.cboxIframe{background:#fff; width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
+#colorbox,
+#cboxContent,
+#cboxLoadedContent{
+  box-sizing:content-box;
+  -moz-box-sizing:content-box;
+  -webkit-box-sizing:content-box;
+}
+
+#colorbox{
+  outline:0;
+}
+
+#cboxContent{
+  background:#fff;
+  overflow:hidden;
+  border: 10px solid white;
+  border-radius: 5px;
+}
+
+#cboxLoadedContent{
+  margin-top: 30px;
+}
+
+#cboxTitle{
+  position:absolute;
+  top:4px;
+  left:0;
+  text-align:center;
+  width:100%;
+  color:#949494;
+}
+
+#cboxCurrent{
+  position:absolute;
+  top:4px;
+  left:58px;
+  color:#949494;
+}
+
+#cboxLoadingOverlay{
+  background:url(../images/colorbox/loading_background.png) no-repeat center center;
+}
+
+#cboxLoadingGraphic{
+  background:url(../images/colorbox/loading.gif) no-repeat center center;
+}
+
+#cboxPrevious,
+#cboxNext,
+#cboxSlideshow,
+#cboxClose {
+  border:0;
+  padding:0;
+  margin:0;
+  overflow:visible;
+  width:auto;
+  background:none;
+  &:active{
+    outline:0;
+  }
+}
+
+
+#cboxSlideshow{}
+#cboxPrevious{}
+#cboxNext{}
+#cboxClose{
+  position:absolute;
+  top: -5px;
+  right: -2px;
+  width: 20px;
+
+  &:before{
+    content: '\f057';
+    font-family: 'FontAwesome';
+    font-size: 20px;
+    color: black;
+  }
+
+}
+
+
+.cboxIE #cboxTopLeft,
+.cboxIE #cboxTopCenter,
+.cboxIE #cboxTopRight,
+.cboxIE #cboxBottomLeft,
+.cboxIE #cboxBottomCenter,
+.cboxIE #cboxBottomRight,
+.cboxIE #cboxMiddleLeft,
+.cboxIE #cboxMiddleRight {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
+}
--- a/scss/flatpickr.scss
+++ b/scss/flatpickr.scss
@ -0,0 +1,690 @@
+.flatpickr-calendar {
+  background: transparent;
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  visibility: hidden;
+  text-align: center;
+  padding: 0;
+  -webkit-animation: none;
+          animation: none;
+  direction: ltr;
+  border: 0;
+  display: none;
+  font-size: $font-14;
+  border-radius: 5px;
+  position: absolute;
+  width: 280px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  -webkit-box-shadow: 0 3px 13px rgba(0,0,0,0.08);
+          box-shadow: 0 3px 13px rgba(0,0,0,0.08);
+}
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  opacity: 1;
+  visibility: visible;
+  overflow: visible;
+  max-height: 640px;
+}
+.flatpickr-calendar.open {
+  display: inline-block;
+  z-index: 99999;
+}
+.flatpickr-calendar.animate.open {
+  -webkit-animation: fpFadeInDown 200ms cubic-bezier(0.23, 1, 0.32, 1);
+          animation: fpFadeInDown 200ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.flatpickr-calendar.inline {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+.flatpickr-calendar.static {
+  position: absolute;
+  top: calc(100% + 2px);
+}
+.flatpickr-calendar.static.open {
+  z-index: 999;
+  display: block;
+}
+.flatpickr-calendar.hasWeeks {
+  width: auto;
+}
+.flatpickr-calendar .hasWeeks .dayContainer,
+.flatpickr-calendar .hasTime .dayContainer {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.flatpickr-calendar .hasWeeks .dayContainer {
+  border-left: 0;
+}
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
+  height: 40px;
+  border-top: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-innerContainer {
+  border-bottom: 0;
+}
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
+  border: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: auto;
+}
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  border: solid transparent;
+  content: '';
+  height: 0;
+  width: 0;
+  left: 22px;
+}
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.rightMost:after {
+  left: auto;
+  right: 22px;
+}
+.flatpickr-calendar:before {
+  border-width: 5px;
+  margin: 0 -5px;
+}
+.flatpickr-calendar:after {
+  border-width: 4px;
+  margin: 0 -4px;
+}
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+  bottom: 100%;
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: rgba(72,72,72,0.2);
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: $red;
+}
+.flatpickr-calendar.arrowBottom:before,
+.flatpickr-calendar.arrowBottom:after {
+  top: 100%;
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: rgba(72,72,72,0.2);
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: $red;
+}
+.flatpickr-calendar:focus {
+  outline: 0;
+}
+.flatpickr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.flatpickr-month {
+  border-radius: 5px 5px 0 0;
+  background: $red;
+  color: $white;
+  fill: $white;
+  height: 28px;
+  line-height: 1;
+  text-align: center;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  overflow: hidden;
+}
+.flatpickr-prev-month,
+.flatpickr-next-month {
+  text-decoration: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  line-height: 16px;
+  height: 28px;
+  padding: 10px calc(3.57% - 1.5px);
+  z-index: 3;
+}
+.flatpickr-prev-month i,
+.flatpickr-next-month i {
+  position: relative;
+}
+.flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-next-month.flatpickr-prev-month {
+  left: 0;
+}
+
+.flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-next-month.flatpickr-next-month {
+  right: 0;
+}
+
+.flatpickr-prev-month:hover,
+.flatpickr-next-month:hover {
+  color: #bbb;
+}
+.flatpickr-prev-month:hover svg,
+.flatpickr-next-month:hover svg {
+  fill: $red;
+}
+.flatpickr-prev-month svg,
+.flatpickr-next-month svg {
+  width: 14px;
+  height: 14px;
+}
+.flatpickr-prev-month svg path,
+.flatpickr-next-month svg path {
+  -webkit-transition: fill 0.1s;
+  transition: fill 0.1s;
+  fill: inherit;
+}
+.numInputWrapper {
+  position: relative;
+  height: auto;
+}
+.numInputWrapper input,
+.numInputWrapper span {
+  display: inline-block;
+}
+.numInputWrapper input {
+  width: 100%;
+}
+.numInputWrapper input::-ms-clear {
+  display: none;
+}
+.numInputWrapper span {
+  position: absolute;
+  right: 0;
+  width: 14px;
+  padding: 0 4px 0 2px;
+  height: 50%;
+  line-height: 50%;
+  opacity: 0;
+  cursor: pointer;
+  border: 1px solid rgba(72,72,72,0.15);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.numInputWrapper span:hover {
+  background: rgba(0,0,0,0.1);
+}
+.numInputWrapper span:active {
+  background: rgba(0,0,0,0.2);
+}
+.numInputWrapper span:after {
+  display: block;
+  content: "";
+  position: absolute;
+}
+.numInputWrapper span.arrowUp {
+  top: 0;
+  border-bottom: 0;
+}
+.numInputWrapper span.arrowUp:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid rgba(72,72,72,0.6);
+  top: 26%;
+}
+.numInputWrapper span.arrowDown {
+  top: 50%;
+}
+.numInputWrapper span.arrowDown:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid rgba(72,72,72,0.6);
+  top: 40%;
+}
+.numInputWrapper span svg {
+  width: inherit;
+  height: auto;
+}
+.numInputWrapper span svg path {
+  fill: rgba(255,255,255,0.5);
+}
+.numInputWrapper:hover {
+  background: rgba(0,0,0,0.05);
+}
+.numInputWrapper:hover span {
+  opacity: 1;
+}
+.flatpickr-current-month {
+  font-size: 135%;
+  line-height: inherit;
+  font-weight: 300;
+  color: inherit;
+  position: absolute;
+  width: 75%;
+  left: 12.5%;
+  padding: 6.16px 0 0 0;
+  line-height: 1;
+  height: 28px;
+  display: inline-block;
+  text-align: center;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+}
+.flatpickr-current-month span.cur-month {
+  font-family: inherit;
+  font-weight: 700;
+  color: inherit;
+  display: inline-block;
+  margin-left: 0.5ch;
+  padding: 0;
+}
+.flatpickr-current-month span.cur-month:hover {
+  background: rgba(0,0,0,0.05);
+}
+.flatpickr-current-month .numInputWrapper {
+  width: 6ch;
+  width: 7ch\0;
+  display: inline-block;
+}
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: $white;
+}
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: $white;
+}
+.flatpickr-current-month input.cur-year {
+  background: transparent;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  cursor: text;
+  padding: 0 0 0 0.5ch;
+  margin: 0;
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: inherit;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  vertical-align: initial;
+}
+.flatpickr-current-month input.cur-year:focus {
+  outline: 0;
+}
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  font-size: 100%;
+  color: rgba(255,255,255,0.5);
+  background: transparent;
+  pointer-events: none;
+}
+.flatpickr-weekdays {
+  background: $red;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+}
+span.flatpickr-weekday {
+  cursor: default;
+  font-size: 90%;
+  background: $red;
+  color: rgba(0,0,0,0.54);
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-weight: bolder;
+}
+.dayContainer,
+.flatpickr-weeks {
+  padding: 1px 0 0 0;
+}
+.flatpickr-days {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  border-left: 1px solid rgba(72,72,72,0.2);
+  border-right: 1px solid rgba(72,72,72,0.2);
+  padding: 4px 0;
+}
+.flatpickr-days:focus {
+  outline: 0;
+}
+.dayContainer {
+  padding: 0;
+  outline: 0;
+  text-align: left;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: inline-block;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-around;
+          justify-content: space-around;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+  opacity: 1;
+}
+.flatpickr-day {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 150px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: #484848;
+  cursor: pointer;
+  font-weight: 400;
+  width: 14.2857143%;
+  -webkit-flex-basis: 14.2857143%;
+      -ms-flex-preferred-size: 14.2857143%;
+          flex-basis: 14.2857143%;
+  max-width: 35px;
+  height: 35px;
+  line-height: 35px;
+  margin: 2px 0;
+  display: inline-block;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  text-align: center;
+}
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  cursor: pointer;
+  outline: 0;
+  background: #e2e2e2;
+  border-color: #e2e2e2;
+}
+.flatpickr-day.today {
+  border-color: #bbb;
+}
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: #bbb;
+  background: #bbb;
+  color: $white;
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: $red;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: $white;
+  border-color: $red;
+}
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 50px 0 0 50px;
+}
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0 50px 50px 0;
+}
+.flatpickr-day.selected.startRange + .endRange,
+.flatpickr-day.startRange.startRange + .endRange,
+.flatpickr-day.endRange.startRange + .endRange {
+  -webkit-box-shadow: -10px 0 0 $red;
+          box-shadow: -10px 0 0 $red;
+}
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: 50px;
+}
+.flatpickr-day.inRange {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2;
+          box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2;
+}
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(72,72,72,0.3);
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover {
+  cursor: not-allowed;
+  color: rgba(72,72,72,0.1);
+}
+.flatpickr-day.week.selected {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 $red, 5px 0 0 $red;
+          box-shadow: -5px 0 0 $red, 5px 0 0 $red;
+}
+.rangeMode .flatpickr-day {
+  margin-top: 1px;
+}
+.flatpickr-weekwrapper {
+  display: inline-block;
+  float: left;
+}
+.flatpickr-weekwrapper .flatpickr-weeks {
+  padding: 0 12px;
+  border-left: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-weekwrapper .flatpickr-weekday {
+  float: none;
+  width: 100%;
+  line-height: 28px;
+}
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  display: block;
+  width: 100%;
+  max-width: none;
+  color: rgba(72,72,72,0.3);
+  background: transparent;
+  cursor: default;
+  border: none;
+}
+.flatpickr-innerContainer {
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  background: $white;
+  border-bottom: 1px solid rgba(72,72,72,0.2);
+}
+.flatpickr-rContainer {
+  display: inline-block;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time {
+  text-align: center;
+  outline: 0;
+  display: block;
+  height: 0;
+  line-height: 40px;
+  max-height: 40px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background: $white;
+  border-radius: 0 0 5px 5px;
+}
+.flatpickr-time:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.flatpickr-time .numInputWrapper {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 40%;
+  height: 40px;
+  float: left;
+}
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #484848;
+}
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: #484848;
+}
+.flatpickr-time.hasSeconds .numInputWrapper {
+  width: 26%;
+}
+.flatpickr-time.time24hr .numInputWrapper {
+  width: 49%;
+}
+.flatpickr-time input {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  color: #484848;
+  font-size: 14px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time input.flatpickr-hour {
+  font-weight: bold;
+}
+.flatpickr-time input.flatpickr-minute,
+.flatpickr-time input.flatpickr-second {
+  font-weight: 400;
+}
+.flatpickr-time input:focus {
+  outline: 0;
+  border: 0;
+}
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  height: inherit;
+  display: inline-block;
+  float: left;
+  line-height: inherit;
+  color: #484848;
+  font-weight: bold;
+  width: 2%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.flatpickr-time .flatpickr-am-pm {
+  outline: 0;
+  width: 18%;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 400;
+}
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #ececec;
+}
+.flatpickr-input[readonly] {
+  cursor: pointer;
+}
+@-webkit-keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
--- a/scss/fonts.scss
+++ b/scss/fonts.scss
@ -0,0 +1,61 @@
+
+
+.font-light{
+    font-weight: 300 !important;
+}
+.font-regular{
+    font-weight: 400 !important;
+}
+.font-medium{
+    font-weight: 500 !important;
+}
+.font-semibold{
+    font-weight: 600 !important;
+}
+.font-bold{
+    font-weight: 700 !important;
+}
+.font-extrabold{
+    font-weight: 800 !important;
+}
+.font-normal {
+    font-style: normal !important;
+}
+.font-italic {
+    font-style: italic !important;
+}
+
+
+.text-right{
+    text-align: right !important;
+}
+.text-center{
+    text-align: center !important;
+}
+.text-left{
+    text-align: left !important;
+}
+
+.text-white{
+    color: white !important;
+}
+.text-black{
+    color: black !important;
+}
+.text-red{
+    color: $red !important;
+}
+.text-green{
+    color: $green !important;
+}
+.text-grey{
+    color: $grey !important;
+}
+.text-light-grey{
+    color: $light-grey !important;
+}
+
+
+.text-upper{
+  text-transform: uppercase !important;
+}
--- a/scss/forms.scss
+++ b/scss/forms.scss
@ -0,0 +1,80 @@
+
+select,
+input,button{
+    border: none;
+    border-radius: 3px;
+    margin: 5px 0;
+    -webkit-appearance: none;
+    &::-ms-clear {
+        display: none;
+    }
+    &:focus {outline:none;}
+    &::-moz-focus-inner {border:0;}
+    color: black;
+    background: white;
+}
+
+select,
+input[type=text],
+input[type=password]{
+    border: 1px solid $grey;
+    padding: 5px 20px;
+    width: 100%;
+    text-align: left;
+    box-sizing: border-box;
+
+    &.input-login{
+      border: 1px solid $red;
+      border-radius: 5px;
+      color: black;
+    }
+}
+
+input[type=button],
+input[type=submit],
+button,
+.button{
+  padding: 5px 20px;
+  margin: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  font-size: $font-10;
+  text-transform: uppercase;
+  transition: .4s;
+  color: white;
+
+  &:hover{
+    opacity: .6;
+  }
+
+  &:disabled{
+    opacity: .4;
+  }
+
+  &.full{
+    width: 100%;
+  }
+  &.big{
+    padding: 10px 25px;
+  }
+
+  &.confirm{
+    background: $red;
+  }
+  &.discard{
+    background: black;
+  }
+  &.grey{
+    background: $dark-grey;
+  }
+  &.dotted{
+    background: white;
+    color: $dark-grey;
+    border: 2px dotted $dark-grey;
+    border-radius: 6px;
+    padding: 5px 15px;
+    margin: 5px;
+  }
+}
+
--- a/scss/global.scss
+++ b/scss/global.scss
@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900');
+
+body{
+    font-family: 'Montserrat';
+    font-weight: 600;
+}
+
+p,
+label{
+    margin: 0;
+}
+
+a{
+    color: white;
+    text-decoration: none;
+    transition: .4s;
+    outline: none;
+    &:active,
+    &:visited,
+    &:hover,
+    &:focus{
+      outline: none;
+      color: white;
+      text-decoration: none;
+    }
+    &:hover{
+        color: $grey;
+    }
+}
+
+
+.container{
+    width: 100%;
+    padding: 0 20px;
+}
+
+.border{
+    border: 1px solid red;
+}
+
+
+.middle{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.middle-right{
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.full-middle{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.pattern{
+    background: white;
+    background-image: url(../images/pattern.jpg);
+    background-repeat: repeat-x;
+    background-position: center bottom;
+}
+
+.radius{
+    border-radius: 3px;
+}
+
+.radius-bottom{
+    border-radius: 0 0 3px 3px;
+}
+
+
+#MainContent{
+    padding-top: 30px;
+    z-index: 0;
+    overflow: hidden;
+}
+
+
+.hseparator{
+  &:after{
+    content: ':';
+    position: absolute;
+    left: -2px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.bg-white{
+  background: white;
+}
+
+.bg-grey{
+  background: $light-grey;
+}
--- a/scss/header.scss
+++ b/scss/header.scss
@ -0,0 +1,60 @@
+
+header{
+  background: $dark-grey;
+  height: 50px;
+  width: 100%;
+  position: fixed;
+  z-index: 100;
+
+  &.red{
+    background: $red;
+  }
+
+  .container{
+    .row{
+      height: 50px;
+      
+      .logo{
+          height: 25px;
+      }
+      
+      .menu{
+        text-align: right;
+        ul{
+          list-style: none;
+          margin: 0;
+          right: 10px;
+          li{
+            display: inline-block;
+            color: white;
+            margin: 10px;
+            padding: 7px 0 2px 0;
+            font-size: $font-12;
+            letter-spacing: 1px;
+            font-weight: bold;
+            text-transform: uppercase;
+            border-bottom: 4px solid $dark-grey;
+            cursor: pointer;
+            transition: .4s;
+            
+            a{
+              .fa{
+                font-size: $font-14;
+              }
+            }
+            
+            &.active,
+            &:hover{
+              border-bottom: 4px solid $red;
+              a{
+                &:hover{
+                    color: white;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+} 
--- a/scss/main.scss
+++ b/scss/main.scss
@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+@import "variables";
+
+@import "../node_modules/bootstrap/scss/bootstrap";
+@import "../node_modules/font-awesome/scss/font-awesome";
+
+@import "colorbox";
+@import "fonts";
+@import "global";
+@import "forms";
+@import "header";
+@import "navigation";
+@import "flatpickr";
+
+@import "sections/sections";
+
+//@import "mediaqueries/mediaqueries";
--- a/scss/navigation.scss
+++ b/scss/navigation.scss
--- a/scss/sass.sh
+++ b/scss/sass.sh
@ -0,0 +1,68 @@
+#!/bin/bash
+
+# input folder
+src=""
+# input file
+src+="main.scss"
+
+# output folders
+dest="../css/"
+# output filename
+dev=$dest"styles.css"
+prod=$dest"styles.min.css"
+custom=$dest"styles.custom.css"
+
+#help message
+usage="
+Usage:\n
+sass.sh [environment|watch-mode] [watch-mode|other-switches]\n\n
+Examples:\n
+1) watch mode with develop environment presets\n
+./sass.sh dev --watch\n
+---\n
+2) 1 time compiling for production\n
+./sass.sh prod\n
+---\n\n
+to modify input/output paths edit sass.sh\n
+"
+
+# check for output directories
+if [[ ! -e $dest ]]; then
+    mkdir -p $dest
+elif [[ ! -d $dest ]]; then
+    echo "$dest already exists but is not a directory." 1>&2
+fi
+
+# don't edit below this line
+if (( $# == 0 )); then
+    echo -e $usage
+    exit
+else
+    case $1 in
+        --h*|--\? )
+            echo -e $usage
+            exit
+            ;;
+        "dev" )
+            echo "compiling for developement"
+            sass $2 $src:$dev --line-numbers --sourcemap=none --style expanded ${@:3}
+            exit
+            ;;
+        "prod"|"min" )
+            echo "compiling for production"
+            sass $2 $src:$prod  --sourcemap=none --style compressed ${@:3}
+            exit
+            ;;
+        --w* )
+            echo "compiling with given switches in --watch mode"
+            sass $1 $src:$custom ${@:2}
+            exit
+            ;;
+        * )
+            echo "compiling with given switches"
+            sass $src:$custom ${@:1}
+            exit
+            ;;
+    esac
+    echo -e $usage
+fi
--- a/scss/sections/messages.scss
+++ b/scss/sections/messages.scss
@ -0,0 +1,19 @@
+
+.messages{
+  width: 100%;
+
+  .items{
+    transition: .4s;
+    &:hover{
+      opacity: .6;
+    }
+  }
+}
+
+
+.add_message_form{
+
+  .actions{
+    width: 100%;
+  }
+}
--- a/scss/sections/sections.scss
+++ b/scss/sections/sections.scss
@ -0,0 +1,4 @@
+
+@import "sessions";
+@import "messages";
+
--- a/scss/sections/sessions.scss
+++ b/scss/sections/sessions.scss
@ -0,0 +1,11 @@
+
+.sessions{
+  width: 100%;
+
+  .items{
+    transition: .4s;
+    &:hover{
+      opacity: .6;
+    }
+  }
+}
--- a/scss/variables.scss
+++ b/scss/variables.scss
@ -0,0 +1,62 @@
+// Bootstrap Settings
+$grid-columns: 12;
+$grid-gutter-width: 20px;
+
+$grid-breakpoints: (
+    xs: 0,      // Mobile Portrait
+    sm: 768px,  // Tablet Portrait
+    md: 1024px, // Tablet landscape/Small desktop
+    lg: 1280px, // Desktop
+    xl: 1600px, // Large desktop
+);
+
+
+$container-max-widths: (
+  sm: 708px,
+  md: 984px,
+  lg: 1240px,
+  xl: 1560px
+);
+
+$fa-font-path: '../node_modules/font-awesome/fonts/';
+
+$font-8: 0.5rem;         /* 8px */
+$font-10: 0.625rem;     /* 10px */
+$font-12: 0.75rem;      /* 12px */
+$font-13: 0.812rem;     /* 13px */
+$font-14: 0.875rem;     /* 14px */
+$font-15: 0.937rem;     /* 15px */
+$font-16: 1rem;         /* 16px */
+$font-18: 1.125rem;     /* 18px */
+$font-20: 1.25rem;      /* 20px */
+$font-22: 1.375rem;     /* 22px */
+$font-24: 1.5rem;       /* 24px */
+$font-26: 1.625rem;     /* 26px */
+$font-28: 1.75rem;      /* 28px */
+$font-30: 1.875rem;     /* 30px */
+$font-34: 2.125rem;     /* 34px */
+$font-40: 2.5rem;       /* 40px */
+$font-45: 2.812rem;     /* 45px */
+$font-48: 3rem;         /* 48px */
+$font-53: 3.312rem;     /* 53px */
+$font-alert: 8rem;     /* ?px */
+
+$icon:  'FontAwesome';
+
+@each $size in 8, 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 34, 40, 45, 48, 53 {
+    .font-#{$size} {font-size: #{$size/16}rem !important;}
+}
+
+
+$alpha:         rgba(255,255,255,0.6);
+$green:         #4e984a;
+$light-green:   #71986e;
+$red:           #bf0f3d;
+$grey:          #999;
+$light-grey:    #f2f2f2;
+$dark-grey:     #2f2f2f;
+
+$pink:          #f6e7ea;
+$dark-pink:     #c8bcbe;
+$azure:         #d4eeed;
+$dark-azure:    #b0c8c6;
--- a/sessions.php
+++ b/sessions.php
@ -0,0 +1,43 @@
+
+
+<div class="sessions">
+
+    <div class="row <?= $bgcolor;?> py-2 text-right">
+        <div class="col-12"><a href="/cb_session_add.php" class="cbOpen button big confirm mx-0">Add new session</a></div>
+    </div>
+
+    <div class="row <?= $bgcolor;?> p-2 text-upper text-grey">
+        <div class="col-3 font-12">Session name</div>
+        <div class="col-4 font-12">Session link</div>
+        <div class="col-2 font-12">Session start</div>
+        <div class="col-2 font-12">Session end</div>
+        <div class="col-1 text-right"></div>
+    </div>
+
+    <?php
+        $cnt=0;
+        $q=mysqli_query($conn, "SELECT * FROM session ORDER BY enabled DESC, id DESC");
+        while($r=mysqli_fetch_array($q)){
+        $cnt++;
+        $bgcolor = ($cnt%2) ? "bg-grey" : "bg-white";
+    ?>
+
+    <div class="row items <?= $bgcolor;?> p-2">
+        <div class="col-3 font-12"><?= $r['name'];?></div>
+        <div class="col-4 font-12"><a href="<?= $BASE_URL.":3000/".$r['link'];?>" target="_blank" class="text-black"><?= $BASE_URL.":3000/".$r['link'];?></a></div>
+        <div class="col-2 font-12"><?= $r['start'];?></div>
+        <div class="col-2 font-12"><?= $r['stop'];?></div>
+        <div class="col-1 text-right">
+            <a href="/cb_session_action.php?id=<?= $r['id'];?>&status=<?= $r['enabled'];?>" class="cbOpenSmall">
+            <?= $r['enabled'] ? "<i class=\"fa fa-play text-green\"></i>" : "<i class=\"fa fa-pause text-grey\"></i>";?>
+            </a>
+            <a href="/cb_session_edit.php?id=<?= $r['id'];?>" class="cbOpen text-black"><i class="fa fa-pencil-square ml-2"></i></a>
+        </div>
+    </div>
+
+    <?php
+        }
+    ?>
+
+
+</div>
--- a/socket/START.sh
+++ b/socket/START.sh
@ -0,0 +1 @@
+node index.js
--- a/socket/index.js
+++ b/socket/index.js
@ -0,0 +1,21 @@
+
+const express = require('express');
+const app = express();
+const http = require('http').Server(app);
+const io = require('socket.io')(http);
+const port = process.env.PORT || 3001;
+
+app.use(express.static(__dirname + '/public'));
+
+function onConnection(socket){
+  socket.on('cloudIndex', (data) => socket.broadcast.emit('cloudIndex', data));
+  socket.on('reset', (data) => socket.broadcast.emit('reset', data));
+  socket.on('message', (data) => socket.broadcast.emit('message', data));
+  socket.on('response', (data) => socket.broadcast.emit('response', data));
+  socket.on('actions', (data) => socket.broadcast.emit('actions', data));
+  socket.on('display', (data) => socket.broadcast.emit('display', data));
+}
+
+io.on('connection', onConnection);
+
+http.listen(port, () => console.log('listening on port ' + port));
--- a/socket/package-lock.json
+++ b/socket/package-lock.json
--- a/socket/package.json
+++ b/socket/package.json
@ -0,0 +1,23 @@
+{
+  "name": "coze_socket",
+  "version": "1.0.0",
+  "description": "COZe socket",
+  "main": "index.js",
+  "keywords": [
+    "socket.io"
+  ],
+  "dependencies": {
+    "express": "latest",
+    "font-awesome": "latest",
+    "ms": "github:zeit/ms",
+    "pillarjs": "latest",
+    "send": "github:pillarjs/send",
+    "socket.io": "latest",
+    "zeit": "latest"
+  },
+  "scripts": {
+    "start": "node index"
+  },
+  "author": "Dslak",
+  "license": "MIT"
+}
--- a/socket/public/control.html
+++ b/socket/public/control.html
@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>COZe</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body style="text-align: center">
+
+    <div id="controls">
+        <select id="gotoCloud">
+            <option value="0">0</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+            <option value="5">5</option>
+        </select>
+
+        <button id="reset">Reset</button>
+
+        <input id="message" type="text" >
+    </div>
+
+  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="/control.js"></script>
+</body>
+</html>
--- a/socket/public/control.js
+++ b/socket/public/control.js
@ -0,0 +1,63 @@
+$(document).ready(()=>{
+
+    const socket = io();
+
+
+//    socket.emit('cloudIndex', getURLParameter('cloud'));
+    if(getURLParameter('cloud')){
+      socket.emit('cloudIndex', getURLParameter('cloud'));
+    }
+
+    if(getURLParameter('message')){
+      socket.emit('message', getURLParameter('message'));
+    }
+
+    if(getURLParameter('response')){
+      socket.emit('response', getURLParameter('response'));
+    }
+
+    if(getURLParameter('actions')){
+      socket.emit('actions', getURLParameter('actions'));
+    }
+
+    if(getURLParameter('display')){
+      socket.emit('display', getURLParameter('display'));
+    }
+
+    if(getURLParameter('reset')){
+      socket.emit('reset', 1);
+    }
+
+    $('#gotoCloud').on('change', function(){
+        current = $(this).val();
+        socket.emit('cloudIndex', current);
+    });
+
+    $('#reset').on('click', function(){
+        socket.emit('reset', 1);
+        console.log('RESET');
+    });
+
+    $('#message').on('keypress', function(event){
+      if(event.which == 13){
+        socket.emit('message', $(this).val());
+        console.log('message', $(this).val());
+      }
+    });
+
+});
+
+
+
+
+function getURLParameter(sParam){
+  const sPageURL = window.location.search.substring(1);
+  const sURLVariables = sPageURL.split('&');
+
+  for (let i = 0; i < sURLVariables.length; i++){
+    const sParameterName = sURLVariables[i].split('=');
+    if (sParameterName[0] == sParam){
+      return sParameterName[1];
+    }
+  }
+}
--- a/socket/public/css/styles.css
+++ b/socket/public/css/styles.css
--- a/socket/public/fonts/FontAwesome.otf
+++ b/socket/public/fonts/FontAwesome.otf
--- a/socket/public/fonts/fontawesome-webfont.eot
+++ b/socket/public/fonts/fontawesome-webfont.eot
--- a/socket/public/fonts/fontawesome-webfont.svg
+++ b/socket/public/fonts/fontawesome-webfont.svg
--- a/socket/public/fonts/fontawesome-webfont.ttf
+++ b/socket/public/fonts/fontawesome-webfont.ttf
--- a/socket/public/fonts/fontawesome-webfont.woff
+++ b/socket/public/fonts/fontawesome-webfont.woff
--- a/socket/public/fonts/fontawesome-webfont.woff2
+++ b/socket/public/fonts/fontawesome-webfont.woff2
--- a/socket/public/images/.directory
+++ b/socket/public/images/.directory
@ -0,0 +1,4 @@
+[Dolphin]
+PreviewsShown=true
+Timestamp=2017,10,21,18,38,1
+Version=4
--- a/socket/public/images/logo.png
+++ b/socket/public/images/logo.png
--- a/socket/public/images/menu.png
+++ b/socket/public/images/menu.png
--- a/socket/public/images/photo-compare.jpg
+++ b/socket/public/images/photo-compare.jpg
--- a/socket/public/images/video.png
+++ b/socket/public/images/video.png
--- a/socket/public/scss/fonts.scss
+++ b/socket/public/scss/fonts.scss
@ -0,0 +1,58 @@
+
+
+.font-light{
+    font-weight: 300 !important;
+}
+.font-regular{
+    font-weight: 400 !important;
+}
+.font-medium{
+    font-weight: 500 !important;
+}
+.font-semibold{
+    font-weight: 600 !important;
+}
+.font-bold{
+    font-weight: 700 !important;
+}
+.font-extrabold{
+    font-weight: 800 !important;
+}
+.font-normal {
+    font-style: normal !important;
+}
+.font-italic {
+    font-style: italic !important;
+}
+ 
+ 
+.text-right{
+    text-align: right !important;
+}
+.text-center{
+    text-align: center !important;
+}
+.text-left{
+    text-align: left !important;
+}
+
+.text-white{
+    color: white !important;
+} 
+.text-black{
+    color: black !important;
+} 
+.text-red{
+    color: $red !important;
+}
+.text-grey{
+    color: $grey !important;
+}
+.text-light-grey{
+    color: $light-grey !important;
+}
+
+
+.text-upper{
+  text-transform: uppercase !important;
+}
--- a/socket/public/scss/forms.scss
+++ b/socket/public/scss/forms.scss
@ -0,0 +1,66 @@
+
+
+input,button{
+    border: none;
+    border-radius: 3px;
+    margin: 5px 0;
+    -webkit-appearance: none;
+    &::-ms-clear {
+        display: none;
+    }
+    &:focus {outline:none;}
+    &::-moz-focus-inner {border:0;}
+}
+
+input[type=text],
+input[type=password]{
+    border: 1px solid $grey;
+    color: $grey;
+    padding: 5px 20px;
+    width: 100%;
+    text-align: left;
+    box-sizing: border-box;
+    
+    &.input-login{
+      border: 1px solid $red;
+      border-radius: 5px;
+      color: black;
+    }
+}
+
+input[type=button],
+input[type=submit],
+button,
+.button{
+  padding: 5px 20px;
+  margin: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  font-size: $font-10;
+  text-transform: uppercase;
+  color: white;
+  
+  &.big{
+    padding: 10px 25px;
+  }
+  
+  &.confirm{
+    background: $red;
+  }      
+  &.discard{
+    background: black;
+  }     
+  &.grey{
+    background: $dark-grey;
+  }  
+  &.dotted{
+    background: white;
+    color: $dark-grey;
+    border: 2px dotted $dark-grey;
+    border-radius: 6px;
+    padding: 5px 15px;
+    margin: 5px;
+  }
+}
+
--- a/socket/public/scss/main.scss
+++ b/socket/public/scss/main.scss
@ -0,0 +1,218 @@
+@charset "UTF-8";
+@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900');
+
+@import "variables";
+
+@import "../../node_modules/font-awesome/scss/font-awesome";
+
+@import "fonts";
+@import "forms";
+
+
+body{
+  font-family: 'Montserrat';
+  font-weight: 600;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+p,
+label{
+  margin: 0;
+}
+
+a{
+  color: white;
+  text-decoration: none;
+  transition: .4s;
+  outline: none;
+  &:active,
+  &:visited,
+  &:hover,
+  &:focus{
+    outline: none;
+    color: white;
+    text-decoration: none;
+  }
+  &:hover{
+      color: $grey;
+  }
+}
+
+.content{
+  overflow: hidden;
+  position: fixed;
+  height: 100vh;
+  overflow-y: scroll;
+  width: calc(100vw + 17px);
+
+  .cloud{
+    display: none;
+    position: relative;
+    width: 70%;
+    font-size: $font-12;
+    font-weight: 500;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 8px;
+    line-height: 18px;
+    color: $dark-grey;
+
+    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(30% - 38px);
+      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;
+    }
+
+  }
+
+
+  &.client{
+    top: 50px;
+    height: calc(100vh - 100px);
+    .cloud{
+      &.right{
+        left: calc(30% - 58px);
+      }
+    }
+  }
+
+}
+
+
+.video{
+  display: none;
+  position: fixed;
+  top: 0;
+  left:0;
+  height: 100vh;
+  width: 100%;
+  background: black;
+  z-index: 10;
+  .video-close{
+    position: absolute;
+    top: 0;
+    right: 3px;
+    height: 20px;
+    width: 20px;
+    cursor: pointer;
+    padding: 0;
+    z-index: 10;
+
+    &:after{
+      content: '\f00d';
+      font-family: $icon;
+      font-size: $font-20;
+      color: white;
+    }
+  }
+  video{
+    height: 100vh;
+    width: 100%;
+  }
+}
+
+.iframeGET{
+  display: none;
+}
+
+.header{
+  position: fixed;
+  height: 50px;
+  width: 100%;
+  left: 0;
+  top: 0;
+  background: black;
+
+  .logo{
+    height: 25px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .menu{
+    height: 20px;
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.footer{
+  position: fixed;
+  height: 50px;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  background: black;
+
+  input{
+    width: 95%;
+    height: 35px;
+    border-radius: 4px;
+    border: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin: 0;
+    transform: translate(-50%, -50%);
+  }
+}
--- a/socket/public/scss/sass.sh
+++ b/socket/public/scss/sass.sh
@ -0,0 +1,68 @@
+#!/bin/bash
+
+# input folder
+src=""
+# input file
+src+="main.scss"
+
+# output folders
+dest="../css/"
+# output filename
+dev=$dest"styles.css"
+prod=$dest"styles.min.css"
+custom=$dest"styles.custom.css"
+
+#help message
+usage="
+Usage:\n
+sass.sh [environment|watch-mode] [watch-mode|other-switches]\n\n
+Examples:\n
+1) watch mode with develop environment presets\n
+./sass.sh dev --watch\n
+---\n
+2) 1 time compiling for production\n
+./sass.sh prod\n
+---\n\n
+to modify input/output paths edit sass.sh\n
+"
+
+# check for output directories
+if [[ ! -e $dest ]]; then
+    mkdir -p $dest
+elif [[ ! -d $dest ]]; then
+    echo "$dest already exists but is not a directory." 1>&2
+fi
+
+# don't edit below this line
+if (( $# == 0 )); then
+    echo -e $usage
+    exit
+else
+    case $1 in
+        --h*|--\? )
+            echo -e $usage
+            exit
+            ;;
+        "dev" )
+            echo "compiling for developement"
+            sass $2 $src:$dev --line-numbers --sourcemap=none --style expanded ${@:3}
+            exit
+            ;;
+        "prod"|"min" )
+            echo "compiling for production"
+            sass $2 $src:$prod  --sourcemap=none --style compressed ${@:3}
+            exit
+            ;;
+        --w* )
+            echo "compiling with given switches in --watch mode"
+            sass $1 $src:$custom ${@:2}
+            exit
+            ;;
+        * )
+            echo "compiling with given switches"
+            sass $src:$custom ${@:1}
+            exit
+            ;;
+    esac
+    echo -e $usage
+fi
--- a/socket/public/scss/variables.scss
+++ b/socket/public/scss/variables.scss
@ -0,0 +1,62 @@
+// Bootstrap Settings
+$grid-columns: 12;
+$grid-gutter-width: 20px;
+
+$grid-breakpoints: (
+    xs: 0,      // Mobile Portrait
+    sm: 768px,  // Tablet Portrait
+    md: 1024px, // Tablet landscape/Small desktop
+    lg: 1280px, // Desktop
+    xl: 1600px, // Large desktop
+);
+
+
+$container-max-widths: (
+  sm: 708px,
+  md: 984px,
+  lg: 1240px,
+  xl: 1560px
+);
+
+$fa-font-path: '/fonts';
+
+$font-8: 0.5rem;         /* 8px */
+$font-10: 0.625rem;     /* 10px */
+$font-12: 0.75rem;      /* 12px */
+$font-13: 0.812rem;     /* 13px */
+$font-14: 0.875rem;     /* 14px */
+$font-15: 0.937rem;     /* 15px */
+$font-16: 1rem;         /* 16px */
+$font-18: 1.125rem;     /* 18px */
+$font-20: 1.25rem;      /* 20px */
+$font-22: 1.375rem;     /* 22px */
+$font-24: 1.5rem;       /* 24px */
+$font-26: 1.625rem;     /* 26px */
+$font-28: 1.75rem;      /* 28px */
+$font-30: 1.875rem;     /* 30px */
+$font-34: 2.125rem;     /* 34px */
+$font-40: 2.5rem;       /* 40px */
+$font-45: 2.812rem;     /* 45px */
+$font-48: 3rem;         /* 48px */
+$font-53: 3.312rem;     /* 53px */
+$font-alert: 8rem;     /* ?px */
+
+$icon:  'FontAwesome';
+
+@each $size in 8, 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 34, 40, 45, 48, 53 {
+    .font-#{$size} {font-size: #{$size/16}rem !important;}
+}
+
+
+$alpha:         rgba(255,255,255,0.6);
+$green:         #4e984a;
+$light-green:   #71986e;
+$red:           #bf0f3d;
+$grey:          #ccc;
+$light-grey:    #f2f2f2;
+$dark-grey:     #2f2f2f;
+
+$pink:          #f6e7ea;
+$dark-pink:     #c8bcbe;
+$azure:         #d4eeed;
+$dark-azure:    #b0c8c6;
--- a/socket/public/smartphone.html
+++ b/socket/public/smartphone.html
@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <title>COZe</title>
+  <meta charset="UTF-8">
+  <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+  <link rel="stylesheet" href="/css/styles.css">
+</head>
+<body>
+    <div class="header">
+        <img class="menu" src="/images/menu.png">
+        <img class="logo" src="/images/logo.png">
+    </div>
+
+    <div class="content client">
+    </div>
+
+
+    <audio id="notify1">
+        <source src="../sounds/message.ogg" type="audio/ogg">
+    </audio>
+
+    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="/smartphone.js"></script>
+
+    <iframe class="iframeGET" src=""></iframe>
+<!--
+    <div class="footer">
+        <input type="text">
+    </div>-->
+</body>
+</html>
--- a/socket/public/smartphone.js
+++ b/socket/public/smartphone.js
@ -0,0 +1,192 @@
+$(document).ready(()=>{
+
+  const socket = io();
+  const baseUrl = "http://coze-training.local";
+  const serverPath = "http://" + window.location.hostname + ":" + window.location.port + "/";// "http://coze.dev:3000/";
+  const canVibrate = "vibrate" in navigator || "mozVibrate" in navigator;
+  if (canVibrate && !("vibrate" in navigator)){navigator.vibrate = navigator.mozVibrate;}
+
+  const content = $('.content')
+
+  const urlString = window.location.href
+  const url = new URL(urlString);
+  const sid = url.searchParams.get("sid");
+
+  $.getJSON( baseUrl + "/apis/getMessages.php", {
+    sid: sid
+  }).done( (data)=> {
+    console.log(data);
+
+
+
+
+  });
+
+/*
+
+  socket.on('cloudIndex', showCloud);
+  socket.on('reset', reset);
+  socket.on('message', showMessage);
+  socket.on('response', showResponse);
+  socket.on('actions', showActions);
+  socket.on('display', showHtml);
+
+
+
+  function reset(index){
+    cloudCount = 0
+    console.log('RESET:', index)
+    content.empty()
+    parent.postMessage(cloudCount, "*")
+  }
+
+  function showCloud(index){
+    console.log('RECEIVE:', index);
+
+    const thisCloud = $(clouds.get(index));
+    let offset = 0;
+
+    if(!thisCloud.hasClass('empty')){
+      notify(true);
+    }
+    thisCloud.fadeIn(400,()=>{
+        if(thisCloud.hasClass('scroll')){
+          offset = thisCloud.offset().top
+
+          content.animate({
+              scrollTop: offset
+          }, 400);
+        }
+      })
+
+  }
+
+  function showMessage(message){
+    let newCloud = $('<div class="cloud right">' + decodeURIComponent(message) + '</div>');
+    content.append(newCloud);
+    newCloud.fadeIn();
+    content.animate({
+        scrollTop: newCloud.offset().top
+    }, 400);
+    notify(false);
+
+    cloudCount++
+    parent.postMessage(cloudCount, "*")
+  }
+
+  function showResponse(message){
+      let newCloud = $('<div class="cloud left">' + decodeURIComponent(message) + '</div>');
+      content.append(newCloud);
+      newCloud.fadeIn();
+      content.animate({
+          scrollTop: newCloud.offset().top
+      }, 400);
+      notify(true);
+  }
+
+  function showActions(actions){
+
+      const actionsArray = decodeURIComponent(actions).split("|");
+      let token = "";
+      let buttons = "";
+      let text = "";
+      let side = "";
+
+      $.each(actionsArray, (index, val)=>{
+        if(index==0){
+          token = val;
+        }else{
+          buttons += "<button class= \"button dotted\">"+val+"</button>";
+        }
+      });
+
+      let newCloud = $('<div class="cloud empty">' + buttons + '</div>');
+      content.append(newCloud);
+      newCloud.fadeIn();
+      content.animate({
+          scrollTop: newCloud.offset().top
+      }, 400);
+
+      newCloud.find('button').on('click', ()=>{
+        $('.iframeGET').attr('src', serverPath + 'control.html?display='+token);
+      });
+  }
+
+
+  function showHtml(token){
+
+    switch(token){
+      case "plans_1":
+        side = "empty";
+        text = "<img src=\""+serverPath.replace(":3000", "")+"images/video.png\" class=\"video-opener\">";
+      break;
+      case "pull_1":
+        side = "left";
+        text = "Ricordati di non avvicinarti eccessivamente.";
+      break;
+      case "monit_1":
+        side = "left";
+        text = "<b>TEMA 3 COMPETENZE DI VENDITA - REGOLA#1<br><br>"+
+                "Non rispondere a domande non fatte</b><br><br>"+
+                "Il cliente chiede di un prodotto. È meglio limitarsi a domandare cosa il cliente voglia sapere del prodotto.<br>"+
+                "<b>Ad esempio, colore, materiale, taglia.</b>"+
+                "<img src=\""+serverPath.replace(":3000", "")+"images/photo-compare2.jpg\" width=\"100%\">";
+      break;
+    }
+
+    if(tokenOnce.indexOf(token) < 0){
+
+      let newCloud = $('<div class="cloud '+side+'">' + text + '</div>');
+      setTimeout( ()=>{
+        content.append(newCloud);
+        newCloud.fadeIn();
+        content.animate({
+            scrollTop: newCloud.offset().top
+        }, 400);
+
+        content.find('.video-opener').on('click', (e)=>{
+
+          const show = $('#video')
+          const video = show.find('video')
+          const close = show.find('.video-close')
+
+          show.fadeIn()
+          video.get(0).play()
+
+          close.on('click', (e)=>{
+            const elem = $(e.currentTarget)
+            const video = elem.siblings('video')
+
+            video.get(0).pause()
+            elem.parent().fadeOut()
+
+          })
+
+        });
+
+        notify(true);;
+      },1000);
+
+      tokenOnce.push(token);
+    }
+
+  }
+
+
+  function notify(vibrate){
+
+    if(vibrate){
+      navigator.vibrate(500);
+    }
+
+    $('#notify1')[0].play();
+  }
+*/
+
+
+});
+
+
+
+
+
--- a/socket/public/sounds/message.ogg
+++ b/socket/public/sounds/message.ogg
--- a/socket/public/sounds/message.wav
+++ b/socket/public/sounds/message.wav