Yumin
/
IoTServer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
							<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
    <link rel="apple-touch-icon" sizes="76x76" href="../static/favicon.ico"/>
    <link rel="icon" type="image/png" href="../static/favicon.ico"/>
    <title>Kinect & IoT</title>
    <!--     Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- CSS Files -->
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/paper-kit.css?v=2.2.0" th:href="@{/css/paper-kit.css?v=2.2.0}" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="../static/css/demo.css" th:href="@{/css/demo.css}" rel="stylesheet"/>
</head>

<body class="index-page sidebar-collapse">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent " color-on-scroll="300">
    <div class="container">
        <div class="navbar-translate">
            <a class="navbar-brand" href="#" rel="tooltip" title="Kinect & IoT" data-placement="bottom" target="_blank">
                Kinect & IoT
            </a>
            <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
                    aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-bar bar1"></span>
                <span class="navbar-toggler-bar bar2"></span>
                <span class="navbar-toggler-bar bar3"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse justify-content-end" id="navigation">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom" href="#"
                       target="_blank">
                        <i class="fa fa-twitter"></i>
                        <p class="d-lg-none">Twitter</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom" href="#"
                       target="_blank">
                        <i class="fa fa-facebook-square"></i>
                        <p class="d-lg-none">Facebook</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom"
                       href="#" target="_blank">
                        <i class="fa fa-instagram"></i>
                        <p class="d-lg-none">Instagram</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" rel="tooltip" title="Star on GitHub" data-placement="bottom"
                       href="https://gogs.minbb.cn/" target="_blank">
                        <i class="fa fa-github"></i>
                        <p class="d-lg-none">GitHub</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/map" target="_blank" class="nav-link"><i class="nc-icon nc-book-bookmark"></i> 定位地图</a>
                </li>
                <li class="nav-item"><a class="btn btn-danger btn-round" href="/">用户登录</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- End Navbar -->
<div class="page-header section-dark" style="background-image: url('https://files-1252373323.cos.ap-beijing.myqcloud.com/images/IronMan.jpg');">
    <div class="filter"></div>
    <div class="content-center">
        <div class="container">
            <div class="title-brand">
                <h1 class="presentation-title">Kinect & IoT</h1>
                <div class="fog-low">
                    <img src="../static/images/fog-low.png" th:src="@{/images/fog-low.png}" alt=""/>
                </div>
                <div class="fog-low right">
                    <img src="../static/images/fog-low.png" th:src="@{/images/fog-low.png}" alt=""/>
                </div>
            </div>
            <h2 class="presentation-subtitle text-center">让你的交互方式 更酷! 更炫! 更精彩! </h2>
        </div>
    </div>
    <div class="moving-clouds" style="background-image: url('/images/clouds.png');"></div>
    <h6 class="category category-absolute">
        Designed and coded by
        <a href="https://www.minbb.cn" target="_blank">
            <img class="creative-tim-logo" src="../static/images/author.png" th:src="@{/images/author.png}" width="80" alt=""/>
        </a>
    </h6>
</div>
<div class="main">
    <div class="section pt-o" id="carousel">
        <div class="container">
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto">
                    <div class="card page-carousel">
                        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner" role="listbox">
                                <div class="carousel-item active">
                                    <img class="d-block img-fluid"
                                         src="https://files-1252373323.cos.ap-beijing.myqcloud.com/images/Car.jpg" alt=""/>
                                    <div class="carousel-caption d-none d-md-block">
                                        <p>体感交互汽车</p>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block img-fluid"
                                         src="https://files-1252373323.cos.ap-beijing.myqcloud.com/images/KinectCar_windows.jpg" alt=""/>
                                    <div class="carousel-caption d-none d-md-block">
                                        <p>Windows 客户端应用程序</p>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block img-fluid"
                                         src="https://files-1252373323.cos.ap-beijing.myqcloud.com/images/IoT_android.png" alt=""/>
                                    <div class="carousel-caption d-none d-md-block">
                                        <p>Android 客户端应用程序</p>
                                    </div>
                                </div>
                            </div>
                            <a class="left carousel-control carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                <span class="fa fa-angle-left"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                <span class="fa fa-angle-right"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section section-dark section-nucleo-icons">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <h2 class="title">Kinect & IoT</h2>
                    <br/>
                    <p class="description">
                        继鼠标和多点触摸技术之后，Kinect体感交互技术或将成为“第三次人机交互革命的原点”，不仅仅是因为它全新的操作方式，更是因为其背后所蕴含的创新精神。得益于这种新的人机交互技术，人对机器的使用门槛在进一步降低，因为计算机已经越来越能读懂人在自然状态所传递的命令。 当前，体感交互技术从众多的自然人机交互技术中脱颖而出，成为最为前沿的研究领域之一。 体感交互技术是一种不需要借助任何复杂的控制器，可直接通过肢体动作与周边数字设备装置和环境实现身临其境的互动、随心所欲地操控的智能技术，通常需要运动追踪、手势识别、运动捕捉、面部表情识别等一系列技术支撑。与其它人机交互手段相比，当前的体感交互技术无论是在硬件方面还是软件方面都有了较大提升。在交互过程中不需要发生直接接触，大大降低了对用户的约束，提高了人机交互的沉浸感，使得交互过程更加自然，使用起来更加简便。
                    </p>
                    <br/>
                    <a href="https://files-1252373323.cos.ap-beijing.myqcloud.com/app/KinectCar.zip" class="btn btn-danger btn-round" target="_blank">下载 Windows 客户端</a>
                    <a href="https://files-1252373323.cos.ap-beijing.myqcloud.com/app/IoT.apk" class="btn btn-outline-danger btn-round" target="_blank">下载 Android APP</a>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="icons-container">
                        <i class="nc-icon nc-time-alarm"></i>
                        <i class="nc-icon nc-atom"></i>
                        <i class="nc-icon nc-camera-compact"></i>
                        <i class="nc-icon nc-watch-time"></i>
                        <i class="nc-icon nc-key-25"></i>
                        <i class="nc-icon nc-diamond"></i>
                        <i class="nc-icon nc-user-run"></i>
                        <i class="nc-icon nc-layout-11"></i>
                        <i class="nc-icon nc-badge"></i>
                        <i class="nc-icon nc-bulb-63"></i>
                        <i class="nc-icon nc-favourite-28"></i>
                        <i class="nc-icon nc-planet"></i>
                        <i class="nc-icon nc-tie-bow"></i>
                        <i class="nc-icon nc-zoom-split"></i>
                        <i class="nc-icon nc-cloud-download-93"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section section-dark">
        <div class="container">
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto text-center">
                    <h2 class="title">人机交互新起点</h2>
                    <p class="description">
                        基于体感交互技术的汽车控制系统。黑科技超乎你的想象！
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="section section-dark">
        <div class="container">
            <div class="row example-page">
                <div class="col-md-6 text-center">
                    <a href="#" target="_blank">
                        <img class="img-rounded img-responsive" src="https://files-1252373323.cos.ap-beijing.myqcloud.com/images/Kinect.ico"
                             alt="" style="width: 100%">
                        <a href="#" class="btn btn-outline-neutral btn-round" target="_blank">Kinect</a>
                    </a>
                </div>
                <div class="col-md-6 text-center">
                    <a href="#" target="_blank">
                        <img class="img-rounded img-responsive" src="https://files-1252373323.cos.ap-beijing.myqcloud.com/images/IoT_red.png"
                             alt="" style="width: 100%">
                        <a href="#" class="btn btn-outline-neutral btn-round" target="_blank">IoT</a>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="section">
        <div class="container text-center">
            <div class="row">
                <div class="col-md-8 ml-auto mr-auto text-center">
                    <h2 class="title">有兴趣尝试吗?</h2>
                    <p class="description">当然，如果你尝试一下，你一定会发现一个全新的世界！</p>
                </div>
                <div class="col-md-5 ml-auto mr-auto download-area">
                    <a href="https://files-1252373323.cos.ap-beijing.myqcloud.com/app/KinectCar.zip" class="btn btn-danger btn-round">下载体感识别软件</a>
                </div>
            </div>
            <div class="row text-center upgrade-pro">
                <div class="col-md-8 ml-auto mr-auto">
                    <h2 class="title">想了解更多吗?</h2>
                    <p class="description">
                        我们刚刚推出了
                        <a class="text-danger" href="#" target="_blank">Kinect & IoT Car</a>，
                        它是一个真正的集成了物联网与体感识别技术的汽车控制系统。
                    </p>
                </div>
                <div class="col-sm-5 ml-auto mr-auto">
                    <a class="btn btn-info btn-round" href="#" target="_blank">
                        <i class="nc-icon nc-spaceship" aria-hidden="true"></i> 详细了解
                    </a>
                </div>
            </div>
            <div class="row justify-content-md-center sharing-area text-center">
                <div class="text-center col-md-12 col-lg-8">
                    <h3>非常感谢您对我们的支持!</h3>
                </div>
                <div class="text-center col-md-12 col-lg-8">
                    <a href="#" class="btn btn-twitter-bg twitter-sharrre btn-round" rel="tooltip" title="Tweet!">
                        <i class="fa fa-twitter"></i> Twitter
                    </a>
                    <a href="#" class="btn btn-google-bg linkedin-sharrre btn-round" rel="tooltip" title="Share!">
                        <i class="fa fa-google-plus"></i> Google
                    </a>
                    <a href="#" class="btn btn-facebook-bg facebook-sharrre btn-round" rel="tooltip" title="Share!">
                        <i class="fa fa-facebook-square"></i> Facebook
                    </a>
                    <a href="https://github.com/creativetimofficial/paper-kit" class="btn btn-github-bg btn-github sharrre btn-round" rel="tooltip"
                       title="Star on Github">
                        <i class="fa fa-github"></i> Star
                    </a>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer footer-black  footer-white ">
        <div class="container">
            <div class="row">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="https://www.minbb.cn/yumin/resume" target="_blank">作者</a></li>
                        <li><a href="https://www.minbb.cn/blog" target="_blank">博客</a></li>
                        <li><a href="https://www.creative-tim.com/license" target="_blank">许可</a></li>
                    </ul>
                </nav>
                <div class="credits ml-auto">
                    <span class="copyright">
                        ©<script>document.write(new Date().getFullYear())</script>,
                        made with <i class="fa fa-heart heart"></i> by Wang Yumin
                    </span>
                </div>
            </div>
        </div>
    </footer>
    <!--   Core JS Files   -->
    <script src="../static/js/core/jquery.min.js" th:src="@{/js/core/jquery.min.js}" type="text/javascript"></script>
    <script src="../static/js/core/popper.min.js" th:src="@{/js/core/popper.min.js}" type="text/javascript"></script>
    <script src="../static/js/core/bootstrap.min.js" th:src="@{/js/core/bootstrap.min.js}" type="text/javascript"></script>
    <!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
    <script src="../static/js/plugins/bootstrap-switch.js" th:src="@{/js/plugins/bootstrap-switch.js}"></script>
    <!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
    <script src="../static/js/plugins/nouislider.min.js" th:src="@{/js/plugins/nouislider.min.js}" type="text/javascript"></script>
    <!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
    <script src="../static/js/plugins/moment.min.js" th:src="@{/js/plugins/moment.min.js}"></script>
    <script src="../static/js/plugins/bootstrap-datepicker.js" th:src="@{/js/plugins/bootstrap-datepicker.js}" type="text/javascript"></script>
    <!-- Control Center for Paper Kit: parallax effects, scripts for the example pages etc -->
    <script src="../static/js/paper-kit.js?v=2.2.0" th:src="@{/js/paper-kit.js?v=2.2.0}" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            if ($("#datetimepicker").length != 0) {
                $('#datetimepicker').datetimepicker({
                    icons: {
                        time: "fa fa-clock-o",
                        date: "fa fa-calendar",
                        up: "fa fa-chevron-up",
                        down: "fa fa-chevron-down",
                        previous: 'fa fa-chevron-left',
                        next: 'fa fa-chevron-right',
                        today: 'fa fa-screenshot',
                        clear: 'fa fa-trash',
                        close: 'fa fa-remove'
                    }
                });
            }

            function scrollToDownload() {
                if ($('.section-download').length != 0) {
                    $("html, body").animate({
                        scrollTop: $('.section-download').offset().top
                    }, 1000);
                }
            }
        });
    </script>
</body>

</html>