修复保存client_id时除了判断github_id存在，还需要判断client_id

src/main/resources/log4j2.xml

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--设置log4j2的自身log级别为warn-->
+<!--日志级别以及优先级排序: OFF > FATAL > ERROR > WARN > INFO > DEBUG > TRACE > ALL -->
+<!--Configuration后面的status，这个用于设置log4j2自身内部的信息输出，可以不设置，
+    当设置成trace时，会看到log4j2内部各种详细输出-->
+<!--monitorInterval：Log4j能够自动检测修改配置 文件和重新配置本身，设置间隔秒数-->
+<configuration status="DEBUG" monitorInterval="5">
+    <Properties>
+        <!-- 日志模板 -->
+        <Property name="log_pattern" value="[%d{HH:mm:ss:SSS}] [%p] - %l - %m%n"/>
+        <!-- 存储日志文件路径 -->
+        <Property name="file_path" value="logs/log"/>
+        <!-- 日志文件的最大容量，超过该值就进行备份 -->
+        <Property name="file_max_size" value="30MB"/>
+        <!-- 备份的文件夹名称 -->
+        <Property name="backup_folder" value="$${date:yyyy-MM}"/>
+        <!-- 备份文件的后缀 -->
+        <Property name="backup_file_suffix" value="-%d{yyyy-MM-dd}-%i.log"/>
+    </Properties>
+
+    <!--定义appender-->
+    <appenders>
+
+        <!--控制台的输出配置-->
+        <console name="Console" target="SYSTEM_OUT">
+            <!--输出日志的格式-->
+            <PatternLayout pattern="${log_pattern}"/>
+        </console>
+
+        <!-- 所有级别的日志会存入该文件，当append属性设置为false时，每次启动程序会自动清空 -->
+        <File name="AllLog" fileName="${file_path}/all_log.log" append="false">
+            <!-- <PatternLayout pattern="%d{HH:mm:ss.SSS} %-5level %class{36} %L %M - %msg%xEx%n"/> -->
+            <PatternLayout pattern="${log_pattern}"/>
+        </File>
+
+        <!--
+        该RollingFile存储INFO级别的日志，
+        默认存储到 fileName 文件中
+        超过SizeBasedTriggeringPolicy的设定值，则存储到 filePattern 文件中
+        -->
+        <RollingFile name="RollingFileInfo" fileName="${file_path}/info.log"
+                     filePattern="${file_path}/${backup_folder}/info${backup_file_suffix}">
+            <Filters>
+                <!--控制台只输出level及以上级别的信息（onMatch），其他的直接拒绝（onMismatch）-->
+                <ThresholdFilter level="INFO" onMatch="ACCEPT" onMismatch="DENY"/>
+                <ThresholdFilter level="WARN" onMatch="DENY" onMismatch="NEUTRAL"/>
+            </Filters>
+            <!-- 写入日志文件的模板 -->
+            <PatternLayout pattern="${log_pattern}"/>
+            <Policies>
+                <TimeBasedTriggeringPolicy/>
+                <SizeBasedTriggeringPolicy size="${file_max_size}"/>
+            </Policies>
+            <!-- DefaultRolloverStrategy属性如不设置，则默认为最多同一文件夹下7个文件，超过该数量，会滚动删除前面的记录 -->
+            <DefaultRolloverStrategy max="20"/>
+        </RollingFile>
+
+        <RollingFile name="RollingFileWarn" fileName="${file_path}/warn.log"
+                     filePattern="${file_path}/${backup_folder}/warn${backup_file_suffix}">
+            <Filters>
+                <ThresholdFilter level="WARN" onMatch="ACCEPT" onMismatch="DENY"/>
+                <ThresholdFilter level="ERROR" onMatch="DENY" onMismatch="NEUTRAL"/>
+            </Filters>
+            <PatternLayout pattern="${log_pattern}"/>
+            <Policies>
+                <TimeBasedTriggeringPolicy/>
+                <SizeBasedTriggeringPolicy size="${file_max_size}"/>
+            </Policies>
+        </RollingFile>
+
+        <RollingFile name="RollingFileError" fileName="${file_path}/error.log"
+                     filePattern="${file_path}/${backup_folder}/error${backup_file_suffix}">
+            <ThresholdFilter level="ERROR"/>
+            <PatternLayout pattern="${log_pattern}"/>
+            <Policies>
+                <TimeBasedTriggeringPolicy/>
+                <SizeBasedTriggeringPolicy size="${file_max_size}"/>
+            </Policies>
+        </RollingFile>
+
+    </appenders>
+
+    <!-- 只有定义了logger并使用appender-ref，appender才会生效 -->
+    <loggers>
+        <!--过滤掉spring和hibernate的一些无用的debug信息-->
+        <logger name="org.springframework" level="INFO"/>
+        <logger name="org.mybatis" level="INFO">
+            <!-- 添加如下设置，控制台会再打印一次 -->
+            <AppenderRef ref="Console"/>
+        </logger>
+        <root level="INFO">
+            <appender-ref ref="Console"/>
+            <appender-ref ref="RollingFileInfo"/>
+            <appender-ref ref="RollingFileWarn"/>
+            <appender-ref ref="RollingFileError"/>
+            <appender-ref ref="AllLog"/>
+        </root>
+    </loggers>
+
+</configuration>

src/main/resources/mapper/github/GithubMapper.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.qyi.e5.github.mapper.GithubMapper">
+
+</mapper>

src/main/resources/mapper/outlook/OutlookMapper.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.qyi.e5.outlook.mapper.OutlookMapper">
+
+</mapper>

src/main/resources/mapper/outlook_log/OutlookLogMapper.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.qyi.e5.outlook_log.mapper.OutlookLogMapper">
+
+</mapper>

src/main/resources/mapper/user/PermissionMapper.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.qyi.e5.user.mapper.PermissionMapper">
+
+</mapper>

src/main/resources/mapper/user/RoleMapper.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.qyi.e5.user.mapper.RoleMapper">
+
+</mapper>

src/main/resources/mapper/user/UserMapper.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.qyi.e5.user.mapper.UserMapper">
+
+</mapper>

src/main/resources/quartz.properties

@@ -0,0 +1,21 @@
+#org.quartz.jobStore.class = org.quartz.impl.jdbcjobstore.JobStoreTX
+#org.quartz.jobStore.tablePrefix = QRTZ_
+#org.quartz.scheduler.instanceName = MyScheduler
+#org.quartz.jobStore.driverDelegateClass = org.quartz.impl.jdbcjobstore.StdJDBCDelegate
+#org.quartz.jobStore.dataSource = mysqlDatabase
+#
+#org.quartz.dataSource.mysqlDatabase.driver = com.mysql.jdbc.Driver
+#org.quartz.dataSource.mysqlDatabase.URL = jdbc:mysql://localhost:3306/e5?characterEncoding=utf-8
+#org.quartz.dataSource.mysqlDatabase.user = root
+#org.quartz.dataSource.mysqlDatabase.password = 123456
+#org.quartz.dataSource.mysqlDatabase.maxConnections = 10
+#
+#
+#<23>̳߳<DFB3><CCB3><EFBFBD><EFBFBD><EFBFBD>
+org.quartz.threadPool.class = org.quartz.simpl.SimpleThreadPool
+org.quartz.threadPool.threadCount = 10
+org.quartz.threadPool.threadPriority = 5
+org.quartz.threadPool.threadsInheritContextClassLoaderOfInitializingThread = true
+#
+##<23>־û<D6BE><C3BB><EFBFBD><EFBFBD><EFBFBD>
+#org.quartz.jobStore.misfireThreshold = 50000

src/main/resources/static/error/4xx.html

@@ -0,0 +1,835 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>404</title>
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            background: #f2f2f2;
+        }
+
+        canvas {
+            display:block;
+            margin: 50px auto 200px;
+            margin-left: 300px;
+            border: 1px solid #333;
+            box-shadow: 0 0 16px 2px rgba(0,0,0,0.8);
+        }
+
+        p, a {
+            font-family: Helvetica, Arial, sans-serif;
+            font-size: 20px;
+            color: #777;
+            display: block;
+            width: 400px;
+            margin: 0 auto;
+            text-align: center;
+            text-decoration:none;
+        }
+
+        .info {
+            margin:50px auto;
+            text-align: justify;
+            font-size: 20px;
+            color: #999;
+        }
+
+        a {
+            color:#3377ee;
+        }
+        #info{
+            position: absolute;
+            z-index: 55;
+            width: 400px;
+            right: 100px;
+            top: 200px;
+        }
+        /* TENTH BUTTON */
+
+        #tenth>button{
+            letter-spacing:0;
+        }
+
+        #tenth span{
+            letter-spacing:0;
+            display:inline-block;
+            position:relative;
+            width:8px;
+            transition:all .5s ease-in-out;
+        }
+
+        #tenth span:nth-of-type(4){
+            width:5px;
+        }
+
+        #tenth span:nth-of-type(6){
+            width:1px;
+        }
+
+        #tenth span:nth-of-type(8){
+            width:4px;
+        }
+
+        #tenth:hover span:nth-of-type(1){
+            animation:h .5s;
+        }
+
+        #tenth:hover span:nth-of-type(2){
+            animation:o .5s;
+        }
+
+        #tenth:hover span:nth-of-type(3){
+            animation:v .5s;
+        }
+
+        #tenth:hover span:nth-of-type(4){
+            animation:e .5s;
+        }
+
+        #tenth:hover span:nth-of-type(5){
+            animation:r .5s;
+        }
+
+        #tenth:hover span:nth-of-type(7){
+            animation:t .5s;
+        }
+
+        #tenth:hover span:nth-of-type(8){
+            animation:e .5s;
+        }
+
+        #tenth:hover span:nth-of-type(9){
+            animation:n .5s;
+        }
+
+        @keyframes h{
+            0%{transform:translate(0, 0);}
+            50%{transform:translate(50px, 5px);}
+            75%{transform:translate(5px, 5px);}
+            80%{transform:translate(0, 0);}
+            100%{transform:translate(0, 0);}
+        }
+
+        @keyframes o{
+            0%{transform:translate(0, 0);}
+            25%{transform:translate(-4px, 0);}
+            50%{transform:translate(3px, 4px);}
+            80%{transform:translate(0, 0);}
+            100%{transform:translate(0, 0);}
+        }
+
+        @keyframes v{
+            0%{transform:translate(0, 0);}
+            20%{transform:rotate(360deg);}
+            50%{transform:scale(2);}
+            80%{transform:translate(0, 0);}
+            100%{transform:translate(0, 0);}
+        }
+
+        @keyframes e{
+            0%{transform:translate(0, 0);}
+            20%{transform:translate(-10px, -2px);}
+            80%{transform:translate(0, 0);}
+            100%{transform:translate(0, 0);}
+        }
+
+        @keyframes r{
+            0%{transform:translate(0, 0);}
+            20%{transform:translate(0, 10px);}
+            80%{transform:translate(0, 32px);}
+            100%{transform:translate(0, 0);}
+        }
+
+        @keyframes t{
+            0%{transform:translate(0, 0);}
+            20%{transform:translate(0, -10px);}
+            40%{transform:translate(0, 0);}
+            60%{transform:translate(0, -10px);}
+            80%{transform:translate(0, 0);}
+            100%{transform:translate(0, 0);}
+        }
+
+        @keyframes n{
+            0%{transform:translate(0, 0);}
+            50%{transform:skewY(50deg);}
+            80%{transform:translate(0, 0);}
+            100%{transform:translate(0, 0);}
+        }
+        button{
+            position: absolute;
+            right: 400px;
+            top: 500px;
+            z-index: 99;
+            width:180px;
+            height:60px;
+            background:transparent;
+            color:black;
+            font-weight:700;
+            letter-spacing:1px;
+            border:none;
+            font-size:18px;
+            outline:none;
+            cursor: pointer;
+        }    </style>
+</head>
+<body>
+
+<canvas id="canvas"></canvas>
+<div id="info">
+    <p style="color: #333333;font-size: 100px;font-weight: 700;margin-bottom: 50px;">404</p>
+    <p>没找到页面，倒有个小游戏可以先玩一哈。</p>
+    <p class="info">使用左键、右键和上箭头键移动。</p>
+</div>
+
+<div id="tenth" class="buttonBox">
+    <button>
+        <a href="/user/home">
+            <span>返</span>
+            <span>  </span>
+
+            <span>回</span>
+            <span>  </span>
+
+            <span>首</span>
+            <span>  </span>
+
+            <span>页</span>
+        </a>
+    </button>
+</div>
+<script>
+    /* Customisable map data */
+
+    var map = {
+
+        tile_size: 16,
+
+        /*
+
+        Key vairables:
+
+        id       [required] - an integer that corresponds with a tile in the data array.
+        colour   [required] - any javascript compatible colour variable.
+        solid    [optional] - whether the tile is solid or not, defaults to false.
+        bounce   [optional] - how much velocity is preserved upon hitting the tile, 0.5 is half.
+        jump     [optional] - whether the player can jump while over the tile, defaults to false.
+        friction [optional] - friction of the tile, must have X and Y values (e.g {x:0.5, y:0.5}).
+        gravity  [optional] - gravity of the tile, must have X and Y values (e.g {x:0.5, y:0.5}).
+        fore     [optional] - whether the tile is drawn in front of the player, defaults to false.
+        script   [optional] - refers to a script in the scripts section, executed if it is touched.
+
+        */
+
+        keys: [
+            {id: 0, colour: '#333', solid: 0},
+            {id: 1, colour: '#888', solid: 0},
+            {id: 2,colour: '#555',solid: 1,bounce: 0.35},
+            {id: 3,colour: 'rgba(121, 220, 242, 0.4)',friction: {x: 0.9,y: 0.9},gravity: {x: 0,y: 0.1},jump: 1,fore: 1},
+            {id: 4,colour: '#777',jump: 1},
+            {id: 5,colour: '#E373FA',solid: 1,bounce: 1.1},
+            {id: 6,colour: '#666',solid: 1,bounce: 0},
+            {id: 7,colour: '#73C6FA',solid: 0,script: 'change_colour'},
+            {id: 8,colour: '#FADF73',solid: 0,script: 'next_level'},
+            {id: 9,colour: '#C93232',solid: 0,script: 'death'},
+            {id: 10,colour: '#555',solid: 1},
+            {id: 11,colour: '#0FF',solid: 0,script: 'unlock'}
+        ],
+
+        /* An array representing the map tiles. Each number corresponds to a key */
+        data: [
+            [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 6, 6, 6, 6, 6, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 7, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 4, 2, 2, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2, 2, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],
+            [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
+            [2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2],
+            [2, 1, 2, 2, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2],
+            [2, 1, 2, 2, 2, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2],
+            [2, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 8, 1, 1, 1, 2],
+            [2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2],
+            [2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 9, 9, 9, 2, 10, 10, 10, 10, 10, 10, 1, 1, 1, 1, 1, 1, 1, 11, 2, 2, 2, 2, 4, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 10, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2],
+            [2, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 1, 1, 1, 1, 1, 1, 2],
+            [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2],
+            [2, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 6, 6, 2, 2, 2, 2, 2, 2, 6, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
+            [2, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 2, 5, 5, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],
+            [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 5, 5, 5, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],
+            [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
+        ],
+
+        /* Default gravity of the map */
+
+        gravity: {
+            x: 0,
+            y: 0.3
+        },
+
+        /* Velocity limits */
+
+        vel_limit: {
+            x: 2,
+            y: 16
+        },
+
+        /* Movement speed when the key is pressed */
+
+        movement_speed: {
+            jump: 6,
+            left: 0.3,
+            right: 0.3
+        },
+
+        /* The coordinates at which the player spawns and the colour of the player */
+
+        player: {
+            x: 2,
+            y: 2,
+            colour: '#FF9900'
+        },
+
+        /* scripts refered to by the "script" variable in the tile keys */
+
+        scripts: {
+            /* you can just use "this" instead of your engine variable ("game"), but Codepen doesn't like it */
+            change_colour: 'game.player.colour = "#"+(Math.random()*0xFFFFFF<<0).toString(16);',
+            /* you could load a new map variable here */
+            next_level: 'alert("过关啦！");game.load_map(map);',
+            death: 'alert("再来一次？");game.load_map(map);',
+            unlock: 'game.current_map.keys[10].solid = 0;game.current_map.keys[10].colour = "#888";'
+        }
+    };
+
+    /* Clarity engine */
+
+    var Clarity = function () {
+
+        this.alert_errors   = false;
+        this.log_info       = true;
+        this.tile_size      = 16;
+        this.limit_viewport = false;
+        this.jump_switch    = 0;
+
+        this.viewport = {
+            x: 200,
+            y: 200
+        };
+
+        this.camera = {
+            x: 0,
+            y: 0
+        };
+
+        this.key = {
+            left: false,
+            right: false,
+            up: false
+        };
+
+        this.player = {
+
+            loc: {
+                x: 0,
+                y: 0
+            },
+
+            vel: {
+                x: 0,
+                y: 0
+            },
+
+            can_jump: true
+        };
+
+        window.onkeydown = this.keydown.bind(this);
+        window.onkeyup   = this.keyup.bind(this);
+    };
+
+    Clarity.prototype.error = function (message) {
+
+        if (this.alert_errors) alert(message);
+        if (this.log_info) console.log(message);
+    };
+
+    Clarity.prototype.log = function (message) {
+
+        if (this.log_info) console.log(message);
+    };
+
+    Clarity.prototype.set_viewport = function (x, y) {
+
+        this.viewport.x = x;
+        this.viewport.y = y;
+    };
+
+    Clarity.prototype.keydown = function (e) {
+
+        var _this = this;
+
+        switch (e.keyCode) {
+            case 37:
+                _this.key.left = true;
+                break;
+            case 38:
+                _this.key.up = true;
+                break;
+            case 39:
+                _this.key.right = true;
+                break;
+        }
+    };
+
+    Clarity.prototype.keyup = function (e) {
+
+        var _this = this;
+
+        switch (e.keyCode) {
+            case 37:
+                _this.key.left = false;
+                break;
+            case 38:
+                _this.key.up = false;
+                break;
+            case 39:
+                _this.key.right = false;
+                break;
+        }
+    };
+
+    Clarity.prototype.load_map = function (map) {
+
+        if (typeof map      === 'undefined'
+            || typeof map.data === 'undefined'
+            || typeof map.keys === 'undefined') {
+
+            this.error('Error: Invalid map data!');
+
+            return false;
+        }
+
+        this.current_map = map;
+
+        this.current_map.background = map.background || '#333';
+        this.current_map.gravity = map.gravity || {x: 0, y: 0.3};
+        this.tile_size = map.tile_size || 16;
+
+        var _this = this;
+
+        this.current_map.width = 0;
+        this.current_map.height = 0;
+
+        map.keys.forEach(function (key) {
+
+            map.data.forEach(function (row, y) {
+
+                _this.current_map.height = Math.max(_this.current_map.height, y);
+
+                row.forEach(function (tile, x) {
+
+                    _this.current_map.width = Math.max(_this.current_map.width, x);
+
+                    if (tile == key.id)
+                        _this.current_map.data[y][x] = key;
+                });
+            });
+        });
+
+        this.current_map.width_p = this.current_map.width * this.tile_size;
+        this.current_map.height_p = this.current_map.height * this.tile_size;
+
+        this.player.loc.x = map.player.x * this.tile_size || 0;
+        this.player.loc.y = map.player.y * this.tile_size || 0;
+        this.player.colour = map.player.colour || '#000';
+
+        this.key.left  = false;
+        this.key.up    = false;
+        this.key.right = false;
+
+        this.camera = {
+            x: 0,
+            y: 0
+        };
+
+        this.player.vel = {
+            x: 0,
+            y: 0
+        };
+
+        this.log('Successfully loaded map data.');
+
+        return true;
+    };
+
+    Clarity.prototype.get_tile = function (x, y) {
+
+        return (this.current_map.data[y] && this.current_map.data[y][x]) ? this.current_map.data[y][x] : 0;
+    };
+
+    Clarity.prototype.draw_tile = function (x, y, tile, context) {
+
+        if (!tile || !tile.colour) return;
+
+        context.fillStyle = tile.colour;
+        context.fillRect(
+            x,
+            y,
+            this.tile_size,
+            this.tile_size
+        );
+    };
+
+    Clarity.prototype.draw_map = function (context, fore) {
+
+        for (var y = 0; y < this.current_map.data.length; y++) {
+
+            for (var x = 0; x < this.current_map.data[y].length; x++) {
+
+                if ((!fore && !this.current_map.data[y][x].fore) || (fore && this.current_map.data[y][x].fore)) {
+
+                    var t_x = (x * this.tile_size) - this.camera.x;
+                    var t_y = (y * this.tile_size) - this.camera.y;
+
+                    if(t_x < -this.tile_size
+                        || t_y < -this.tile_size
+                        || t_x > this.viewport.x
+                        || t_y > this.viewport.y) continue;
+
+                    this.draw_tile(
+                        t_x,
+                        t_y,
+                        this.current_map.data[y][x],
+                        context
+                    );
+                }
+            }
+        }
+
+        if (!fore) this.draw_map(context, true);
+    };
+
+    Clarity.prototype.move_player = function () {
+
+        var tX = this.player.loc.x + this.player.vel.x;
+        var tY = this.player.loc.y + this.player.vel.y;
+
+        var offset = Math.round((this.tile_size / 2) - 1);
+
+        var tile = this.get_tile(
+            Math.round(this.player.loc.x / this.tile_size),
+            Math.round(this.player.loc.y / this.tile_size)
+        );
+
+        if(tile.gravity) {
+
+            this.player.vel.x += tile.gravity.x;
+            this.player.vel.y += tile.gravity.y;
+
+        } else {
+
+            this.player.vel.x += this.current_map.gravity.x;
+            this.player.vel.y += this.current_map.gravity.y;
+        }
+
+        if (tile.friction) {
+
+            this.player.vel.x *= tile.friction.x;
+            this.player.vel.y *= tile.friction.y;
+        }
+
+        var t_y_up   = Math.floor(tY / this.tile_size);
+        var t_y_down = Math.ceil(tY / this.tile_size);
+        var y_near1  = Math.round((this.player.loc.y - offset) / this.tile_size);
+        var y_near2  = Math.round((this.player.loc.y + offset) / this.tile_size);
+
+        var t_x_left  = Math.floor(tX / this.tile_size);
+        var t_x_right = Math.ceil(tX / this.tile_size);
+        var x_near1   = Math.round((this.player.loc.x - offset) / this.tile_size);
+        var x_near2   = Math.round((this.player.loc.x + offset) / this.tile_size);
+
+        var top1    = this.get_tile(x_near1, t_y_up);
+        var top2    = this.get_tile(x_near2, t_y_up);
+        var bottom1 = this.get_tile(x_near1, t_y_down);
+        var bottom2 = this.get_tile(x_near2, t_y_down);
+        var left1   = this.get_tile(t_x_left, y_near1);
+        var left2   = this.get_tile(t_x_left, y_near2);
+        var right1  = this.get_tile(t_x_right, y_near1);
+        var right2  = this.get_tile(t_x_right, y_near2);        if (tile.jump && this.jump_switch > 15) {
+
+            this.player.can_jump = true;
+
+            this.jump_switch = 0;
+
+        } else this.jump_switch++;
+
+        this.player.vel.x = Math.min(Math.max(this.player.vel.x, -this.current_map.vel_limit.x), this.current_map.vel_limit.x);
+        this.player.vel.y = Math.min(Math.max(this.player.vel.y, -this.current_map.vel_limit.y), this.current_map.vel_limit.y);
+
+        this.player.loc.x += this.player.vel.x;
+        this.player.loc.y += this.player.vel.y;
+
+        this.player.vel.x *= .9;
+
+        if (left1.solid || left2.solid || right1.solid || right2.solid) {
+
+            /* fix overlap */
+
+            while (this.get_tile(Math.floor(this.player.loc.x / this.tile_size), y_near1).solid
+            || this.get_tile(Math.floor(this.player.loc.x / this.tile_size), y_near2).solid)
+                this.player.loc.x += 0.1;
+
+            while (this.get_tile(Math.ceil(this.player.loc.x / this.tile_size), y_near1).solid
+            || this.get_tile(Math.ceil(this.player.loc.x / this.tile_size), y_near2).solid)
+                this.player.loc.x -= 0.1;
+
+            /* tile bounce */
+
+            var bounce = 0;
+
+            if (left1.solid && left1.bounce > bounce) bounce = left1.bounce;
+            if (left2.solid && left2.bounce > bounce) bounce = left2.bounce;
+            if (right1.solid && right1.bounce > bounce) bounce = right1.bounce;
+            if (right2.solid && right2.bounce > bounce) bounce = right2.bounce;
+
+            this.player.vel.x *= -bounce || 0;
+
+        }
+
+        if (top1.solid || top2.solid || bottom1.solid || bottom2.solid) {
+
+            /* fix overlap */
+
+            while (this.get_tile(x_near1, Math.floor(this.player.loc.y / this.tile_size)).solid
+            || this.get_tile(x_near2, Math.floor(this.player.loc.y / this.tile_size)).solid)
+                this.player.loc.y += 0.1;
+
+            while (this.get_tile(x_near1, Math.ceil(this.player.loc.y / this.tile_size)).solid
+            || this.get_tile(x_near2, Math.ceil(this.player.loc.y / this.tile_size)).solid)
+                this.player.loc.y -= 0.1;
+
+            /* tile bounce */
+
+            var bounce = 0;
+
+            if (top1.solid && top1.bounce > bounce) bounce = top1.bounce;
+            if (top2.solid && top2.bounce > bounce) bounce = top2.bounce;
+            if (bottom1.solid && bottom1.bounce > bounce) bounce = bottom1.bounce;
+            if (bottom2.solid && bottom2.bounce > bounce) bounce = bottom2.bounce;
+
+            this.player.vel.y *= -bounce || 0;
+
+            if ((bottom1.solid || bottom2.solid) && !tile.jump) {
+
+                this.player.on_floor = true;
+                this.player.can_jump = true;
+            }
+
+        }
+
+        // adjust camera
+
+        var c_x = Math.round(this.player.loc.x - this.viewport.x/2);
+        var c_y = Math.round(this.player.loc.y - this.viewport.y/2);
+        var x_dif = Math.abs(c_x - this.camera.x);
+        var y_dif = Math.abs(c_y - this.camera.y);
+
+        if(x_dif > 5) {
+
+            var mag = Math.round(Math.max(1, x_dif * 0.1));
+
+            if(c_x != this.camera.x) {
+
+                this.camera.x += c_x > this.camera.x ? mag : -mag;
+
+                if(this.limit_viewport) {
+
+                    this.camera.x =
+                        Math.min(
+                            this.current_map.width_p - this.viewport.x + this.tile_size,
+                            this.camera.x
+                        );
+
+                    this.camera.x =
+                        Math.max(
+                            0,
+                            this.camera.x
+                        );
+                }
+            }
+        }
+
+        if(y_dif > 5) {
+
+            var mag = Math.round(Math.max(1, y_dif * 0.1));
+
+            if(c_y != this.camera.y) {
+
+                this.camera.y += c_y > this.camera.y ? mag : -mag;
+
+                if(this.limit_viewport) {
+
+                    this.camera.y =
+                        Math.min(
+                            this.current_map.height_p - this.viewport.y + this.tile_size,
+                            this.camera.y
+                        );
+
+                    this.camera.y =
+                        Math.max(
+                            0,
+                            this.camera.y
+                        );
+                }
+            }
+        }
+
+        if(this.last_tile != tile.id && tile.script) {
+
+            eval(this.current_map.scripts[tile.script]);
+        }
+
+        this.last_tile = tile.id;
+    };
+
+    Clarity.prototype.update_player = function () {
+
+        if (this.key.left) {
+
+            if (this.player.vel.x > -this.current_map.vel_limit.x)
+                this.player.vel.x -= this.current_map.movement_speed.left;
+        }
+
+        if (this.key.up) {
+
+            if (this.player.can_jump && this.player.vel.y > -this.current_map.vel_limit.y) {
+
+                this.player.vel.y -= this.current_map.movement_speed.jump;
+                this.player.can_jump = false;
+            }
+        }
+
+        if (this.key.right) {
+
+            if (this.player.vel.x < this.current_map.vel_limit.x)
+                this.player.vel.x += this.current_map.movement_speed.left;
+        }
+
+        this.move_player();
+    };
+
+    Clarity.prototype.draw_player = function (context) {
+
+        context.fillStyle = this.player.colour;
+
+        context.beginPath();
+
+        context.arc(
+            this.player.loc.x + this.tile_size / 2 - this.camera.x,
+            this.player.loc.y + this.tile_size / 2 - this.camera.y,
+            this.tile_size / 2 - 1,
+            0,
+            Math.PI * 2
+        );
+
+        context.fill();
+    };
+
+    Clarity.prototype.update = function () {
+
+        this.update_player();
+    };
+
+    Clarity.prototype.draw = function (context) {
+
+        this.draw_map(context, false);
+        this.draw_player(context);
+    };
+
+    /* Setup of the engine */
+
+    window.requestAnimFrame =
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        window.oRequestAnimationFrame ||
+        window.msRequestAnimationFrame ||
+        function(callback) {
+            return window.setTimeout(callback, 1000 / 60);
+        };
+
+    var canvas = document.getElementById('canvas'),
+        ctx = canvas.getContext('2d');
+
+    canvas.width = 600;
+    canvas.height = 600;
+
+    var game = new Clarity();
+    game.set_viewport(canvas.width, canvas.height);
+    game.load_map(map);
+
+    /* Limit the viewport to the confines of the map */
+    game.limit_viewport = true;
+
+    var Loop = function() {
+
+        ctx.fillStyle = '#333';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        game.update();
+        game.draw(ctx);
+
+        window.requestAnimFrame(Loop);
+    };
+
+    Loop();
+</script>
+
+</body>
+</html>

src/main/resources/templates/outlookLog/findLog.ftl

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>日志查询</title>
+<body>
+<table  border="1" cellpadding="3" cellspacing="0">
+    <tr>
+        <th style="width: 15%">调用时间</th>
+        <th style="width: 5%">调用结果</th>
+        <th style="width: 15%">信息</th>
+        <th>原始信息</th>
+    </tr>
+    <#list list_log?sort_by('callTime')?reverse as log>
+    <#--        <span>${log},-->
+    <#--        ${log.result}</span></br>-->
+        <tr>
+            <#assign dlong = (log.callTime + '000')?number?number_to_datetime/>
+            <#--            <td>${num?log.callTime?number_to_datetime?string('yyyy-MM-dd')}</td>-->
+            <td >${dlong?string("yyyy-MM-dd HH:mm:ss")}</td>
+            <#if log.result == '1'>
+                <td >成功</td>
+            <#else >
+                <td style="background: red">失败</td>
+            </#if>
+            <td>${log.msg}</td>
+            <td>${log.originalMsg}</td>
+        </tr>
+    </#list>
+</table>
+</body>
+</html>

src/main/resources/templates/user/authorization_outlook.ftl

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>outlook授权结果</title>
+</head>
+<body>
+<#if result>
+    <h3>授权成功!</h3>
+<#else >
+    <h3>授权失败!</h3>
+    <h4>错误: ${msg}</h4>
+</#if>
+    <a href="/user/home">返回用户中心</a>
+</body>
+</html>

src/main/resources/templates/user/home.ftl

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Home</title>
+    <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
+    <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
+    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
+</head>
+<body class="mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded">
+<header class="mdui-appbar mdui-appbar-fixed">
+    <div class="mdui-toolbar mdui-color-theme">
+        <span class="mdui-typo-title">Office E5 自动续订</span>
+        <div class="mdui-toolbar-spacer"></div>
+    </div>
+</header>
+<div class="mdui-card-media in floats">
+    使用说明
+    <ol>
+        <#--<li>输入 client_id 与 client_secret 保存</li>
+        <li>点击 “授权”，请用不使用的空账号登录授权</li>
+        <li>授权成功后就不用管了，系统会自动调用你的out api</li>-->
+        <li>程序会读取授权的outlook账号邮箱邮件，但不会保存任何信息，仅仅是调用api。</li>
+        <li>请单独创建一个同域 E5 子账号，不要使用此账号进行发送、接收个人邮件，以免发生误会。</li>
+    </ol>
+</div>
+<#--数据输入-->
+<div class="mdui-card-media in floats">
+    <div class="mdui-textfield">
+        <label class="mdui-textfield-label" style="font-weight: 500;">client_id</label>
+        <input id="client_id" class="mdui-textfield-input" type="text" value="${client_id!}"/>
+    </div>
+    <div class="mdui-textfield">
+        <label class="mdui-textfield-label" style="font-weight: 500;">client_secret</label>
+        <input id="client_secret" class="mdui-textfield-input" type="text" value="${client_secret!}"/>
+    </div>
+    <button id="authorization" class="mdui-btn mdui-color-theme-accent mdui-ripple">授权</button>
+    <button id="save" class="mdui-btn mdui-color-theme-accent mdui-ripple">保存</button>
+</div>
+<div class="mdui-divider"></div>
+<#--日志表格-->
+<div class="mdui-table-fluid table-container floats">
+    <p>日志会在每日0点清空。</p>
+    <button id="findLog" class="mdui-btn mdui-color-theme-accent mdui-ripple">查询日志</button>
+</div>
+
+</body>
+<script src="//www.mdui.org/source/dist/js/mdui.min.js"></script>
+<script type="text/javascript">
+    $(document).ready(function () {
+        //日志查询
+        $("#findLog").click(function () {
+            var url = "/outlookLog/findLog"
+            window.open(url,'_blank')
+        })
+        // 授权
+        $("#authorization").click(function () {
+            var url = "/outlook/auth2/getAuthorizeUrl"
+            window.location.href = url;
+        })
+        //保存
+        $("#save").click(function () {
+            var client_id = $("#client_id").val();
+            var client_secret = $("#client_secret").val();
+            if ((client_id || client_secret) == "") {
+                alert("client_id 或 client_secret 不能为空!")
+                return;
+            }
+            ;
+            $.post("/outlook/outlook/save", {
+                client_id: client_id,
+                client_secret: client_secret
+            }, function (data, status) {
+                console.log(data);
+                if (status != "success") {
+                    alert("未知错误，请联系管理员!")
+                    return;
+                }
+                if (data.code == 0) {
+                    alert("保存成功!");
+                } else {
+                    alert("错误: + " + data.msg);
+                }
+
+            })
+        });
+    });
+</script>
+<style>
+    .table-container {
+        border-radius: 15px;
+        background-clip: padding-box;
+        margin: 1% 1%;
+        width: 25%;
+        padding: 35px 35px 15px 35px;
+        background: #fff;
+        border: 1px solid #eaeaea;
+        box-shadow: 0 0 25px #cac6c6;
+    }
+
+    .in {
+        border-radius: 15px;
+        background-clip: padding-box;
+        margin: 1% 1%;
+        width: 25%;
+        padding: 35px 35px 15px 35px;
+        background: #fff;
+        border: 1px solid #eaeaea;
+        box-shadow: 0 0 25px #cac6c6;
+        float: left;
+    }
+
+    .floats {
+        display: inline-block;
+    }
+</style>
+</html>

src/main/resources/templates/user/login.ftl

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>登录</title>
+</head>
+<body class="mdui-theme-primary-indigo mdui-theme-accent-light-blue">
+<div class="mdui-card login-container">
+    <div style="margin: auto;">
+        <a href="/auth2/getGithubUrl" data-hotkey="g d" aria-label="Homepage"
+           data-ga-click="Header, go to dashboard, icon:logo">
+            <svg class="octicon octicon-mark-github v-align-middle" height="64" width="64" viewBox="0 0 16 16"
+                 version="1.1" aria-hidden="true">
+                <path fill-rule="evenodd"
+                      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+            </svg>
+        </a>
+    </div>
+
+</div>
+</body>
+<style>
+    .login-container {
+        border-radius: 15px;
+        background-clip: padding-box;
+        margin: 5% auto;
+        width: 5%;
+        padding: 35px 35px 15px 35px;
+        background: #fff;
+        border: 1px solid #eaeaea;
+        box-shadow: 0 0 25px #cac6c6;
+    }
+</style>
+</html>