demos/cat/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-EN" />
        
        <title>CAT DETECTION DEMO</title>
        
        <!-- JEEAR SCRIPT -->
        <script src="../../dist/jeelizAR.js"></script>

        <!-- MAIN SCRIPT : -->
        <script src="./JeelizCat.js"></script>

        <!-- INCLUDE FORK ME ON GITHUB BANNER -->
        <script src="../appearance/widget.js"></script>

        <link rel="stylesheet" href="../appearance/style.css" type="text/css" />

        <style type='text/css'>
            /*increase body height to make pause on scroll testable:*/
            body{
                min-height: 2500px;
            }
            p{
                font-size: 16pt!important; line-height: 1.5em;
                text-align: center;
            }

            .JeelizCatDisplay{
                width: 100%;
            }
            .JeelizCatMarker{
                pointer-events: none;
                border-color: #0c7fc2;
                border-width: 16px;
                position: absolute;
                z-index: 1;
                border-style:dotted;
            }
            #JeelizCatVideoContainer{
                position: relative;
                width: 100vw;
                max-width: 1280px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 24px;
                display: block;
                border-radius: 5px;

                opacity: 0;
                transition-duration: 1s;
                transition-timing-function: ease-in;
            }
            .JeelizCatNotice{
                position: absolute;
                z-index: 2;
                bottom: 0px; left: 0px;
                width: 100%;
                background-color: rgba(255,255,255,0.5);
            }
            .JeelizCatNotice a{
                cursor: pointer;
                color: #0c7fc2!important;
            }
        </style>
    </head>
    <body onload="JeelizCat.init({videoContainerId: 'JeelizCatVideoContainer', onSuccess: function(){console.log('JeelizCat success!!!')}})">
       
       <div id="JeelizCatVideoContainer">
           <div class="JeelizCatNotice">
            <p>
           The cat face is detected in real time,<br/>
           in your browser, using <a href="https://github.com/jeeliz/jeelizAR" target="_blank">JeelizAR</a>.<br/>
           The code is on Github <a href="https://github.com/jeeliz/jeelizAR/tree/master/demos/cat/" target="_blank">here</a>.
            </p>
           </div>
       </div>

       <p class='explanation'>
          Cat detection. This is the header of <a href='https://jeeliz.com' target='_blank'>Jeeliz.com</a>.<br/>
          Video credit: <a href='https://www.shutterstock.com/fr/video/clip-15189682-young-british-tabby-cat-walking-on-bench'>Shutterstock.com</a>.
       </p>
    </body>
</html>