<?php
// test 2/10/2021

    // PHP Parameters **********************************************************

    // Previous visits
    if(!isset($_COOKIE['previous_visits'])) 
        {
            setcookie("previous_visits","0",time() + (86400 * 30), "/");
        }
    $came=$_COOKIE["previous_visits"];
    setcookie("previous_visits",$came+1);

    // Local weather

    $weather="cloudy";

?>

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Enhanced Artificial Intelligence by Adveris!</title>
        <meta name="description" content="Experience an outstanding moment! Everybody talks about Artificial intelligence but have you already met one?">
        <link rel="icon" type="image/png" href="favicon.png" />

        
        <!-- CSS-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700,800,900|VT323|Montserrat:200,300,400,500,600,700,800,900|Source+Sans+Pro:400,700,900|PT+Mono|Raleway:200,300,400,500,600,700,800,900|Poiret+One|Averia+Sans+Libre|Dekko|Patrick+Hand|Permanent+Marker|Quicksand:200,400" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet"/>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        
        <!-- Three JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>
  
    </head>
    <body>
    
    <div class="loader" style="position : fixed; z-index: 9999; background : #FFFFFF url('media/loader.gif') 50% 50% no-repeat; top : 0px; left : 0px; height : 100%; width : 100%;"></div>    
    <div id="loaderback" style="position : fixed; z-index: 9998; background : #FFFFFF 50% 50% no-repeat; top : 0px; left : 0px; height : 100%; width : 100%;"></div>    
  
    <!-- Tracking Google Analytics - start -->  
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-103561318-1', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- Tracking Google Analytics - end --> 
    
    <!-- ********************************************************************** SCREEN: INTRO ********************************************************************** -->

    <div id="dream"  style="display:none;">

        <div id="large-header" class="large-header">

            <div id="dreamingtext">
                <h1 id="dreamingtitle"  class="dreamingeffect" style="display:none;"> Artificial Intelligence... live!</h2>
                <p id="dreamingsubtitle" class="dreamingeffect" style="display:none">Everybody talks about Artificial intelligence but have you already met one?<br />This website enables you to talk easily to an AI (<a href="https://fr.wikipedia.org/wiki/Cleverbot" target="_blank" style="color:#333333 !important;">Cleverbot®</a>, used by Amazon and enhanced by JS, TweenMax, WebGL...).</p>
                <br />
                <a id="wake" style="display:none;" onclick="document.getElementById('sound').play();">Wake&nbsp;up&nbsp;the&nbsp;AI</a>
            </div>
            <canvas id="demo-canvas"></canvas>

         </div>

    </div>


    <!-- ********************************************************************** SCREEN: ABOUT ********************************************************************** -->

    <div id="text_about" style="display:none; ">
        
        <h2 id="about1" style="display:none;" class="aitext">You wonder who I am?</h2>

        <img id="about2" style="opacity:0;" src="media/ia1.jpg" style="float:right;clear:none;" width="100%">
        <img id="about3" style="opacity:0" src="media/ia2.jpg" style="float:right;clear:none;" width="100%">
        <img id="about4" style="opacity:0" src="media/ia3.jpg" style="float:right;clear:none;" width="100%">
        <img id="about5" style="opacity:0" src="media/ia4.jpg" style="float:right;clear:none;" width="100%">
        
        <div id="descr_about" style="display:none;">
            <h2 class="aitext" id="textabout1">I'm in front of you... !</h2>
            <p class="aitext" id ="textabout2">More seriously I am an Artificial Intelligence gathering many cutting-edge technologies such as Cleverbot AI, ThreeJS, GSAP, several Javascript detections, random scenarii and a little bit of fun...<br /> This showcase website was created by Adveris agency (Paris). Do not hesitate to contact us: wwww.adveris.fr. </p>
        </div>

    </div>


    <!-- ********************************************************************** SCREEN: MENU ********************************************************************** -->

    <div id="text_menu" style="display:none; ">
        <h2 id="menu1" class="aitext">Where do you wanna go?<br ?><br ?>Am I boring?<br ?><br ?>Come on...</h2>
    </div>


    <!-- ********************************************************************** SCREEN: MAIN CONTENT ********************************************************************** -->


    <button class="hidden-xs hidden-sm" id="sleep" style="display:none;">Switch&nbsp;off&nbsp;the&nbsp;AI</button>

    <div id="all" style="display: none; ">

        <div id="content">

            <!-- ICON MENU -->
            <div class="hidden-xs hidden-sm" id="iconmenu" style="display:none;">        
            <svg  id="burger" width="32" version="1.1" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 64 64">
              <g>
                <g fill="#1D1D1B">
                  <path d="M2.252,10.271h58.871c1.124,0,2.034-0.91,2.034-2.034c0-1.123-0.91-2.034-2.034-2.034H2.252    c-1.124,0-2.034,0.911-2.034,2.034C0.218,9.36,1.128,10.271,2.252,10.271z"/>
                  <path d="m61.123,30.015h-58.871c-1.124,0-2.034,0.912-2.034,2.035 0,1.122 0.91,2.034 2.034,2.034h58.871c1.124,0 2.034-0.912 2.034-2.034-7.10543e-15-1.123-0.91-2.035-2.034-2.035z"/>
                  <path d="m61.123,53.876h-58.871c-1.124,0-2.034,0.91-2.034,2.034 0,1.123 0.91,2.034 2.034,2.034h58.871c1.124,0 2.034-0.911 2.034-2.034-7.10543e-15-1.124-0.91-2.034-2.034-2.034z"/>
                </g>
              </g>
            </svg>
            </div>

            <!-- EYES -->
            <div id="eyes" style="display:none;"> 
                <svg class="eye" width="20" height="20" style="float:left;">
                <circle cx="10" cy="10" r="10" fill="white" />
                </svg>
                <svg class="eye" width="20" height="20" style="float:right;">
                <circle cx="10" cy="10" r="10" fill="white" />
                </svg>
            </div> 

            <!-- HEART -->
            <svg id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 23.217 23.217" style="enable-background:new 0 0 23.217 23.217;  position: absolute; top: 50%; left: 50%; /* poussé de la moitié de hauteur du référent */ transform: translateY(-50%) translateX(-50%);opacity:0;display:none;" xml:space="preserve" width="300px" height="100px">
            <g><g><path d="M11.608,21.997c-22.647-12.354-6.268-27.713,0-17.369C17.877-5.716,34.257,9.643,11.608,21.997z" fill="#ffe28a"/></g></svg>

            <!-- TEXT INTRO -->
            <div id="text" class="type-wrap" style="display:none;">
                <h3 id="guess1" class="aitext">Hey! Welcome<?php $maxcame= min($came, 3); for ($i = 0; $i < $maxcame ; $i++) { ?> back<?php } ?><?php if($came>0) { ?> (for the <?php echo $came+1 ; ?><sup><?php if(substr($came+1, -2)== 11) { echo "th";} elseif(substr($came+1, -2) == 12) { echo "th";} elseif(substr($came+1, -2) == 13) { echo "th";} elseif(substr($came+1, -1) == 1) { echo "st";} elseif(substr($came+1, -1) == 2) { echo "nd";}  elseif(substr($came+1, -1) == 3) { echo "rd";} else { echo "th";}?></sup>   time)<?php } ?>!</h3>
                <h3 id="guess2" class="aitext"><span id="HourMessage"></span></h3>
                <h3 id="guess3" class="aitext"><span id="DayMessage"></span></h3>
                <h3 id="how" class="aitext">How can I help? </h3>
                <h3 id="joke" class="aitext" style="display:none; color:#FFF;">You think I'm your slave?<br /> I'm feeling sad... But I forgive you!</h3> 
            </div>

            <!-- HELP -->
            <div id="help" style="display:;">
                <div id="cleverbot" style="display:none;">
                    <div id="cleverbotcontent" ></div>
                </div>
                <div id="chatbox">
                    <input id="input_text" placeholder="Let's chat..." >
                    <button id="submit">OK</button>
                </div>
           </div>
            <div class="row">
                <div class="hidden-xs hidden-sm" id="footer" style="display:none;">
                        <script src="js/siriwave.js"></script>
                        <div id="iawave"></div>
                        <script>
                            var SW = new SiriWave({
                                style: 'default',
                                speed: 0.05,
                                amplitude: 1,
                                color: 'black',
                                container: document.getElementById('iawave'),
                                autostart: true,
                            });
                        </script>
                        <a id="aboutlink" style="color:#333;cursor:pointer; text-decoration:underline;">About me</a> - 👋 hello@live-ai.com - &#9400; Antoine Gastal & Adveris 2017
                </div>
            </div>
        </div>
    </div>


    <!-- BACKGROUND ANIMATED CUBE (WEBGL/THREE.JS)-->
    <script>
    var scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xffffff );
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    var geometry = new THREE.BoxGeometry(700, 700, 700, 10, 10, 10);
    var material = new THREE.MeshBasicMaterial({color: 0x999999, wireframe: true});
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 1000;        
    function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
    };
    render();
    </script>


    <!-- ******************************************************************************************************************************************************** -->
    <!-- ********************************************************************** JAVASCRIPT ********************************************************************** -->
    <!-- ******************************************************************************************************************************************************** -->


    <!-- ************* CLEVERBOT CHAT ************** -->

    <script type="text/javascript">
    
        var csnew = "default";

        // DISPLAY CLEVERBOT ANSWER
        function ProcessReply (data) {
            if (data.error) 
                console.log ('Error: ' + data.error);
            else 
                {
                csnew = data.cs;
                $('.chatloader').hide();
                $('#cleverbotcontent').append(" <div id='"+ data.key +"' style='float:left; background-color:#000; color:#FFF; padding:0px 20px 10px 20px;clear:both; margin:5px;'><span style='font-size:10px; color:#FFFFFF;margin:0; padding:0'>CLEVERBOT AI:</span><br/><span class='aitext' style='color:#FFF'>" + data.output + "</span></div>");
                //alert ('Reply: ' + data.cs);
                }


        }
    
    </script>  

    <script type="text/javascript">

        // Set variables (API Key, API URL, etc.)
        const
        url = "https://www.cleverbot.com/getreply",
        proxyurl = "",
        // CORS proxy added in August 2020 BUT useless!
        //proxyurl = "https://cors-anywhere.herokuapp.com/",
        key = "YCC1im6l8DwOgn8GIo_M0bdTc7kg";

        // ACTION TRIGGERED BY CLICK
        $("#submit").click(function() {

            let
            cs  = "",
            inputtext = $('#input_text').val(),
            input = encodeURIComponent(inputtext);

            // If Cleverbot answers, previous conversation ID is set
            if (inputtext != "") 

                {
                    cs = csnew;

                    // Add your text to the conversation HTML
                    $('#cleverbotcontent').append(" <div style='float:right; background-color:#FFF; padding:0px 20px 10px 20px;clear:both;margin:5px; color:#000' ><span style='font-size:10px; color:#000000;margin:0; padding:0'>ME:</span><br/>" + inputtext  + "</div>").html();

                    // Ajoute loader
                    function addLoader() { $('#cleverbotcontent').append(" <div style='float:left; background-color:#000; color:#FFF; padding:10px 20px 10px 20px;clear:both; margin:5px;' class='chatloader' >      <img src='media/loading-bars.svg' width='50' height='50' /> </div>");};
                    addLoader();

                    // Sends your text to Cleverbot API
                    const getCleverbotAnswer = async function () {
                        function ProcessReply (data) {
                            csnew = data.cs;
                            $('.chatloader').hide();
                            $('#cleverbotcontent').append(" <div id='"+ data.cs +"' style='float:left; background-color:#000; color:#FFF; padding:0px 20px 10px 20px;clear:both; margin:5px;'><span style='font-size:10px; color:#FFFFFF;margin:0; padding:0'>CLEVERBOT AI:</span><br/><span class='aitext' style='color:#FFF'>" + data.output + "</span></div>");
                            }
                        const response = await fetch(proxyurl + url + '?input=' + input + '&key=' +  key + '&cs=' + cs );
                        const data = await response.json();
                        console.log(data);
                        ProcessReply(data);
                    }
                    getCleverbotAnswer();

                    // Reset input text
                    $('#input_text').val('');
                }
        });

        // PRESS "ENTER" EQUALS CLICK ON SUBMIT BUTTON
        $("#input_text").keypress(function(e) { if(e.which == 13) { $("#submit").click(); } } );

    </script>


    <!-- Music (heart beat)-->
    <audio id="sound" autoplay>
      <source src="media/heartbeat.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>


    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js" integrity="sha512-JO6JyFPJupQKZf7icgZkHwuq/rAQxH7COqvEd4WdK52AtHPedwHog05T69pIelI69jVN/zZbW6TuHfH2mS8j/Q==" crossorigin="anonymous"></script>
    
    <!--CDN links for TweenLite, CSSPlugin, and EasePack-->
    <script src="js/SplitText.min.js" type="text/javascript"></script>


    <!--Load JS-->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script src="js/animated-background.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>

     <script>

        // SLIDE DREAM - BOUTON WAKE 
        $("#wake").click(function() {
                $( "#dream" ).effect( "shake" );
                setTimeout(function(){ tl.play("wake") }, 1000);
        });


        // MENU - DISAPEAR
        $('#iconmenu').hover(
         function() {
            var tlmenu = new TimelineLite();
           tlmenu.to("#burger", 0.7, {x:-100, ease:Expo.easeInOut})
           tlmenu.to("#burger", 0.5, {x:0, ease:Expo.easeInOut}, "+=2");

        });


        // MENU - LEAVE
        $('#iconmenu').click(
         function() {
            var tlmenuclick = new TimelineLite();
            tlmenuclick.to("#content", 3, {x: 2000, ease:Power2.easeOut})
            .to("#text_menu", 0.1, {display:""})
            .from("#menu1", 0.5, {y:2000}, "-=2")
            .to("#text_menu", 2, {display:"none"}, "+=2")
            .to("#content", 2, {x: 0, ease:Elastic.easeInOut});
        });

        // EYES - ANGRY
        $('.eye').click(function() {
            var tleye = new TimelineLite();
            tleye.to("#content", 1.5, {backgroundColor:"#D12F19"})
            .to("#content", 3, {rotationY:360, ease:Elastic.easeInOut})
            .to("#content", 1.5, {backgroundColor:"#ffe28a"}, "+=2");
        });


        // ABOUT
        $('#aboutlink').on("click", 
         function() {
            var tlaboutme = new TimelineLite();
            tl.pause();
            tlaboutme.to("#content", 4, {y: 2000, ease:Bounce.easeOut})
            .to("#text_about", 0, {display:""})
            .to("#about1", 0.1, {display:""})
            .to("#about1", 0, {display:"none"}, "+=3")
            .to("#about2", 0.5, {opacity:1})
            .to("#about2", 0, {display:"none"}, "+=0.5")
            .to("#about3", 0.5, {opacity:1})
            .to("#about3", 0.1, {display:"none"}, "+=0.5")
            .to("#about4", 0.5, {opacity:1})
            .to("#about4", 0.1, {display:"none"}, "+=0.5")
            .to("#about5", 0.5, {opacity:1})
            .to("#about5", 0.1, {display:"none"}, "+=0.5")
            .to("#descr_about", 0, {display:""})
            .staggerFrom("#textabout1", 0.1, {opacity:0}, 0.1)
            .staggerFrom("#textabout2", 0.1, {opacity:0}, 0.1)
            .to("#descr_about", 0.5, {display:"none"}, "+=10")
            .to("#text_about", 0.5, {display:"none"}, "+=1")
            .to("#content", 2, {y:0, ease:Back.easeInOut}, "+=0");
            tl.play();
        });


        // HELP INPUT
        $('#input_text').one("click", 
         function() {
            var tlhelp = new TimelineLite();
            tlhelp.to("#chatbox", 0, {display:"none"})
            .to("#guess1", 0, {display:"none"})
            .to("#guess2", 0, {display:"none"})
            .to("#guess3", 0, {display:"none"})
            .to("#how", 0, {display:"none"})

            <?php 
            // Do no repeat the joke twice
            if($came<1) { ?> 

            .to("#content", 1.5, {backgroundColor:"#D12F19"})
            .to("#joke", 0.5, {display:""})
            .to("#joke", 0.5, {display:"none"}, "+=4")
            .to("#content", 1, {rotation:360, ease:Elastic.easeInOut})
            .to("#content", 0.5, {backgroundColor:"#ffe28a"})
            
            <?php } ?>
            
            .to("#text", 0, {display:"none"})
            .to("#cleverbot", 0, {display:""})
            .to("#chatbox", 0, {display:""})

        });

 
    <!-- ******************************************************************************************************************************************************** -->
    <!-- *********************************************************** JAVASCRIPT ENVIRONMENT DETECTION *********************************************************** -->
    <!-- ******************************************************************************************************************************************************** -->

        // DAY

        var monthNames = [ "January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December" ];
        var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
        var newDate = new Date();

        $('#Date').text(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
        
        $('#Day').text(dayNames[newDate.getDay()]);

        if (dayNames[newDate.getDay()] == "Monday")    { $('#DayMessage').text("I hope you had a great week-end!"); }
        if (dayNames[newDate.getDay()] == "Tuesday")    { $('#DayMessage').text("Good luck, next week-end is still far away..."); }
        if (dayNames[newDate.getDay()] == "Wednesday")    { $('#DayMessage').text("Children would be a good reason not to work today!"); }
        if (dayNames[newDate.getDay()] == "Thursday")    { $('#DayMessage').text("The week-end is in 2 days. Still Friday and you're off :) !"); }
        if (dayNames[newDate.getDay()] == "Friday")    { $('#DayMessage').text("Thanks God it's Friday!"); }
        if (dayNames[newDate.getDay()] == "Saturday")    { $('#DayMessage').text("It's the beginning of the week-end! Enjoy!"); }
        if (dayNames[newDate.getDay()] == "Sunday")    { $('#DayMessage').text("The end of the week-end. So sad... :("); }

        // HOUR
        
        $('#Hour').text(newDate.getHours() + ':' +  newDate.getMinutes());

        if (newDate.getHours() < 8)  { $('#HourMessage').text("It's very early in the morning. You couldn't sleep?"); }
        else if (newDate.getHours() < 11)  { $('#HourMessage').text("Good morning! I hope you're in a good mood today!"); }
        else if (newDate.getHours() < 12)  { $('#HourMessage').text("Are you hungry? It's lunch time pretty soon :)"); }
        else if (newDate.getHours() < 14)  { $('#HourMessage').text("It's lunch time! Come on! Why are you still here?"); }
        else if (newDate.getHours() < 19)  { $('#HourMessage').text("I hope you're enjoying a great afternoon."); }
        else if (newDate.getHours() < 20)  { $('#HourMessage').text("Are you hungry? It's dinner time pretty soon :)"); }
        else if (newDate.getHours() < 22)  { $('#HourMessage').text("It's dinner time! Have a nice dinner!"); }
        else if (newDate.getHours() < 24)  { $('#HourMessage').text("It's pretty late. Why are you still with me? You have no friends?"); }

    </script>

  </body>
</html>
