index.htm

﻿<!DOCTYPE html>
<html>
<head>
    <title>hobbit.js</title>
    <meta http-equiv="refresh" content="2; url=doc/index.htm" />
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <link href="ui/hobbit.ui.css" rel="stylesheet" />
    <style>
        .text {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #c40000;
            text-shadow: 1px 1px 2px #808080;
        }
        .logo {
            background: url(doc/img/logo-red.png) no-repeat center center;
            background-size: 32px 32px;
            -webkit-background-size: 32px 32px;
            width: 32px;
            height: 32px;
            display: inline-block;
            position: relative;
        }
        .logo::after {
            content: '';
            width: 28px;
            height: 28px;
            border-radius: 19px;
            border: dashed #C40000 1px;
            /*border-bottom: solid transparent 1px;*/
            animation: logo-loading 1.5s linear infinite;
            -webkit-animation: logo-loading 1.5s linear infinite;
            position: absolute;
            top: 1px;
            left: 1px;
        }

        @-webkit-keyframes logo-loading {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes logo-loading {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="page doc">
        <div style="position:absolute; top:30%; left:0; right:0; text-align:center;">
            <div class="logo"></div>
            <div class="text">hobbit.js</div>
        </div>
    </div>
</body>
</html>
