<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Chặn search engine index website testing -->
    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet">
    <meta name="googlebot" content="noindex, nofollow">
    <meta id="format-detection" name="format-detection" content="telephone=no">
    <meta id="site-name" name="site-name" content="<?php echo e(config('settings.site_name')); ?>">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <meta http-equiv="Content-Language" content="ja">
    <meta name="google-site-verification" content="" />
    <meta name="google" content="notranslate">

    <title><?php echo e($title); ?></title>

    <meta data-vue-meta="1" data-vmid="keywords" id="keywords" name="keywords" content="<?php echo e($keywords); ?>">
    <meta data-vue-meta="2" data-vmid="description" id="description" name="description" content="<?php echo e($description); ?>">
    <meta data-vue-meta="3" data-vmid="image" id="image" name="image" content="<?php echo e($image); ?>">

    <meta property="og:site_name" content="<?php echo e(config('settings.site_name')); ?>">
    <meta property="og:type" content="website">
    <meta data-vue-meta="4" data-vmid="og_url" id="og_url" property="og:url" content="<?php echo e(url()->current()); ?>">
    <meta data-vue-meta="5" data-vmid="og_title" id="og_title" property="og:title" content="<?php echo e($title); ?>">
    <meta data-vue-meta="6" data-vmid="og_description" id="og_description" property="og:description" content="<?php echo e($description); ?>">
    <meta data-vue-meta="7" data-vmid="og_image" id="og_image" property="og:image" content="<?php echo e($image); ?>">
    <meta data-vue-meta="8" data-vmid="og_fb_app_id" id="og_fb_app_id" property="fb:app_id" content="">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="<?php echo e(config('settings.site_name')); ?>">
    <meta name="twitter:creator" content="Hunters">
    <meta data-vue-meta="9" data-vmid="twitter_title" id="twitter_title" name="twitter:title" content="<?php echo e($title); ?>">
    <meta data-vue-meta="10" data-vmid="twitter_description" id="twitter_description" name="twitter:description" content="<?php echo e($description); ?>">
    <meta data-vue-meta="11" data-vmid="twitter_image" id="twitter_image" name="twitter:image" content="<?php echo e($image); ?>">
    <meta data-vue-meta="12" data-vmid="twitter_image_src" id="twitter_image_src" name="twitter:image:src" content="<?php echo e($image); ?>">
    <meta data-vue-meta="13" data-vmid="twitter_url" id="twitter_url" name="twitter:url" content="<?php echo e(url()->current()); ?>">
    <meta http-equiv="origin-trial" content="AwnOWg2dzaxHPelVjqOT/Y02cSxnG2FkjXO7DlX9VZF0eyD0In8IIJ9fbDFZGXvxNvn6HaF51qFHycDGLOkj1AUAAACAeyJvcmlnaW4iOiJodHRwczovL2NyaXRlby5jb206NDQzIiwiZmVhdHVyZSI6IlByaXZhY3lTYW5kYm94QWRzQVBJcyIsImV4cGlyeSI6MTY5NTE2Nzk5OSwiaXNTdWJkb21haW4iOnRydWUsImlzVGhpcmRQYXJ0eSI6dHJ1ZX0=">

    <!-- icon -->
    <link rel="dns-prefetch" href="//s.w.org">
    <link rel="shortcut icon" href="<?php echo e(url('/')); ?>/favicon.ico">
    <link rel="apple-touch-icon" href="<?php echo e(url('/')); ?>/apple-touch-icon.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">

    <script>
        (function (doc) {
            var ua = navigator.userAgent.toLowerCase();
            if (/ipad/.test(ua) || /android/.test(ua) && !/mobile/.test(ua)) {
                doc.getElementById('viewport').setAttribute('content', 'width=1200');
            } else {
                doc.getElementById('viewport').setAttribute('content', 'width=device-width, initial-scale=1');
            }
        }(document));
    </script>

    <style>
        body {
            font-size: 14px;
            background-color: red;
            margin: 0;
            padding: 0;
        }

        .faceswap {
            display: block;
            width: 100%;
            height: calc(100vh - 120px);
            background-color: #FFF;
            margin: auto;
            padding-bottom: 100px;
        }

        .image-wrap {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #FFF;
            position: relative;
            margin-bottom: 50px;
            background-image: url("/images/image_women_face.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
        }

        .image-wrap > img {
            width: 100%;
            height: 100%;
        }

        .icon-list {
            display: block;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .icon-list .icon-item {
            display: block;
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
            border-radius: 100%;
            border: solid 1px #ccc;
            background-color: #535252;
        }

        .icon-list .icon-item img {
            max-width: 100%;
            max-height: 100%;
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }

        .fixed-menu {
            width: 100%;
            height: 120px;
            position: fixed;
            bottom: 0;
            background-color: #FFF;
            box-shadow: 0px -5px 10px 9px rgba(255,255,255,0.75);
            -webkit-box-shadow: 0px -5px 10px 9px rgba(255,255,255,0.75);
            -moz-box-shadow: 0px -5px 10px 9px rgba(255,255,255,0.75);
        }

        .fixed-menu .wrap-menu {
            display: block;
            height: 100%;
            width: 100%;
            position: relative;
        }

        .fixed-menu .wrap-menu .slider-box {
            display: block;
            width: 100%;
            height: 100px;
            position: absolute;
            top: -30%;
            left: 0;
        }

        .fixed-menu .wrap-menu .slider-box .slider-wrap {
            background-color: #FFF;
            border-radius: 10px;
            padding: 9px 11px;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: space-between;
            align-items: center;
        }

        .slider-wrap ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .slider-wrap ul li {
            list-style-type: none;
            background-color: #efefef;
            padding: 6px;
            margin-right: 5px;
            border-radius: 5px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
        }

        .slider-wrap ul li img {
            width: 45px;
            height: 45px;
        }

        .slider-wrap .info {
            width: 23%;
            height: 57px;
            border-radius: 5px;
            padding: 0 20px;
            background-image: linear-gradient(to right top, #f2f2f2, #f5f5f5, #f8f8f8, #fcfcfc, #ffffff);
        }

        .slider-wrap .info p {
            font-size: 14px;
            margin-bottom: 0;
            margin-top: 0;
        }

        .slider-wrap .info p.lbl-header {
            font-weight: bold;
            font-size: 18px;
            margin-top: 10px;
            margin-bottom: 2px;
        }

        .footer-nav {
            display: flex;
            padding-top: 50px;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

        }

        .footer-nav .menu-item {
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            align-items: center;
        }

        .footer-nav .menu-item span {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .footer-nav .menu-item span i {
            font-size: 30px;
            margin-bottom: 3px
        }
    </style>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Italianno&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body id="body">
<div class="faceswap">
    <div class="image-wrap">
        <div class="icon-list">
            <div class="icon-item">
                <img src="/images/avatar1.png" alt="">
            </div>
            <div class="icon-item">
                <img src="/images/avatar3.png" alt="">
            </div>
        </div>
    </div>
    <div class="fixed-menu">
        <div class="wrap-menu">
            <div class="slider-box">
                <div class="slider-wrap">
                    <ul class="images">
                        <li>
                            <img src="https://img.lovepik.com/element/40108/0378.png_300.png" alt="Face" />
                        </li>
                        <li>
                            <img src="https://e7.pngegg.com/pngimages/131/873/png-clipart-t-shirt-cartoon-baby-short-sleeves-tshirt-baby-announcement-card.png" alt="Face" />
                        </li>
                        <li>
                            <img src="https://cdn.imgbin.com/22/21/18/imgbin-t-shirt-vertebrate-smiley-yellow-sleeve-t-shirt-HWfAumTah1fzrLp7Dq3q09ZFU.jpg" alt="Face" />
                        </li>
                        <li>
                            <img src="https://png.pngtree.com/png-clipart/20190905/original/pngtree-pink-ladies-half-sleeve-png-image_4539875.jpg" alt="Face" />
                        </li>
                    </ul>
                    <div class="info">
                        <p class="lbl-header">20 Pieces</p>
                        <p>Top to edit look</p>
                    </div>
                </div>
            </div>

            <div class="footer-nav">
                <div class="menu-item">
                    <span><i class="fa fa-shopping-basket" aria-hidden="true"></i></span>
                    <span>Shop</span>
                </div>
                <div class="menu-item">
                    <span><i class="fa fa-camera-retro" aria-hidden="true"></i></span>
                    <span>Camera</span>
                </div>
                <div class="menu-item">
                    <span><i class="fa fa-heart" aria-hidden="true"></i></span>
                    <span>Favorite</span>
                </div>
                <div class="menu-item">
                    <span><i class="fa fa-shopping-bag" aria-hidden="true"></i></span>
                    <span>Checkout</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<?php /**PATH /var/www/html/moro-staging/resources/views/demo_face.blade.php ENDPATH**/ ?>