ff

build.gradle

@@ -0,0 +1,31 @@
+buildscript {
+    repositories {
+        maven{ url 'http://maven.aliyun.com/repository/public'}
+    }
+    ext {
+        springBootVersion = '1.5.18.RELEASE'
+    }
+    dependencies {
+        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
+    }
+}
+
+allprojects {
+    repositories {
+        maven{ url 'http://maven.aliyun.com/repository/public'}
+    }
+}
+
+subprojects {
+    apply plugin: 'java'
+    apply plugin: 'org.springframework.boot'
+
+    sourceCompatibility = JavaVersion.VERSION_1_8
+    targetCompatibility = JavaVersion.VERSION_1_8
+
+    buildscript {
+        repositories {
+            maven{ url 'http://maven.aliyun.com/repository/public'}
+        }
+    }
+}

gradle.properties

@@ -0,0 +1,3 @@
+org.gradle.daemon=true
+org.gradle.parallel=true
+org.gradle.configureondemand=true

gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-bin.zip

gradlew

@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

gradlew.bat

@@ -0,0 +1,84 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

settings.gradle

@@ -0,0 +1,6 @@
+rootProject.name = 'whepi'
+
+include "yvan-core"
+include "yvan-platform"
+
+include "whepi-web"

whepi-doc/whepi.sql

@@ -0,0 +1,33 @@
+/*
+create user whepi_test@'%' identified by '123456';
+flush privileges;
+
+CREATE DATABASE IF NOT EXISTS whepi_test default charset utf8 COLLATE utf8_general_ci;
+grant all privileges on whepi_test.* to whepi_test;
+flush privileges;
+*/
+
+drop table if exists tb_user
+;
+create table tb_user
+(
+  user_id             BIGINT          not null             comment '用户编号',
+  login_name          VARCHAR(50)     not null default ''  comment '登录账户',
+  login_pwd           VARCHAR(50)     not null default '123456'  comment '登录密码',
+  phone               VARCHAR(11)     not null default ''  comment '用户手机号',
+  user_type           VARCHAR(1)      not null             comment '角色 A=管理员 / C=收银员 / S=销售',
+  staff_name          VARCHAR(20)     not null             comment '用户姓名',
+  place_id            BIGINT          not null default 0   comment '场地id',
+  version             CHAR(19)        not null             comment 'token版本',
+  login_count         INTEGER         not null default '0' comment '登录次数',
+  last_login_time     TIMESTAMP NOT NULL COMMENT '最后登录时间',
+
+  be_active           CHAR(1)         not null default 'Y' comment '是否活动 Y=活动/N=禁用/D=删除',
+  create_at TIMESTAMP NOT NULL COMMENT '建立时间',
+  update_at TIMESTAMP NOT NULL COMMENT '更新日期',
+  primary key ( user_id )
+)
+  ENGINE=InnoDB
+  DEFAULT CHARSET=utf8
+  COMMENT = '用户资料'
+;

whepi-ui/ok.html

@@ -0,0 +1 @@
+ok23

whepi-ui/static/css/bootstrap-table.css

@@ -0,0 +1,306 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * version: 1.11.0
+ * https://github.com/wenzhixin/bootstrap-table/
+ */
+
+.bootstrap-table .table {
+    margin-bottom: 0 !important;
+    border-bottom: 1px solid #dddddd;
+    border-collapse: collapse !important;
+    border-radius: 1px;
+}
+
+.bootstrap-table .table:not(.table-condensed),
+.bootstrap-table .table:not(.table-condensed) > tbody > tr > th,
+.bootstrap-table .table:not(.table-condensed) > tfoot > tr > th,
+.bootstrap-table .table:not(.table-condensed) > thead > tr > td,
+.bootstrap-table .table:not(.table-condensed) > tbody > tr > td,
+.bootstrap-table .table:not(.table-condensed) > tfoot > tr > td {
+    padding: 8px;
+}
+
+.bootstrap-table .table.table-no-bordered > thead > tr > th,
+.bootstrap-table .table.table-no-bordered > tbody > tr > td {
+    border-right: 2px solid transparent;
+}
+
+.bootstrap-table .table.table-no-bordered > tbody > tr > td:last-child {
+    border-right: none;
+}
+
+.fixed-table-container {
+    position: relative;
+    clear: both;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+}
+
+.fixed-table-container.table-no-bordered {
+    border: 1px solid transparent;
+}
+
+.fixed-table-footer,
+.fixed-table-header {
+    overflow: hidden;
+}
+
+.fixed-table-footer {
+    border-top: 1px solid #dddddd;
+}
+
+.fixed-table-body {
+    overflow-x: auto;
+    overflow-y: auto;
+    height: 100%;
+}
+
+.fixed-table-container table {
+    width: 100%;
+}
+
+.fixed-table-container thead th {
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border-left: 1px solid #dddddd;
+}
+
+.fixed-table-container thead th:focus {
+    outline: 0 solid transparent;
+}
+
+.fixed-table-container thead th:first-child {
+    border-left: none;
+    border-top-left-radius: 4px;
+    -webkit-border-top-left-radius: 4px;
+    -moz-border-radius-topleft: 4px;
+}
+
+.fixed-table-container thead th .th-inner,
+.fixed-table-container tbody td .th-inner {
+    padding: 8px;
+    line-height: 24px;
+    vertical-align: top;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fixed-table-container thead th .sortable {
+    cursor: pointer;
+    background-position: right;
+    background-repeat: no-repeat;
+    padding-right: 30px;
+}
+
+.fixed-table-container thead th .both {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC');
+}
+
+.fixed-table-container thead th .asc {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==');
+}
+
+.fixed-table-container thead th .desc {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ');
+}
+
+.fixed-table-container th.detail {
+    width: 30px;
+}
+
+.fixed-table-container tbody td {
+    border-left: 1px solid #dddddd;
+}
+
+.fixed-table-container tbody tr:first-child td {
+    border-top: none;
+}
+
+.fixed-table-container tbody td:first-child {
+    border-left: none;
+}
+
+/* the same color with .active */
+.fixed-table-container tbody .selected td {
+    background-color: #f5f5f5;
+}
+
+.fixed-table-container .bs-checkbox {
+    text-align: center;
+}
+
+.fixed-table-container .bs-checkbox .th-inner {
+    padding: 8px 0;
+}
+
+.fixed-table-container input[type="radio"],
+.fixed-table-container input[type="checkbox"] {
+    margin: 0 auto !important;
+}
+
+.fixed-table-container .no-records-found {
+    text-align: center;
+}
+
+.fixed-table-pagination div.pagination,
+.fixed-table-pagination .pagination-detail {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.fixed-table-pagination div.pagination .pagination {
+    margin: 0;
+}
+
+.fixed-table-pagination .pagination a {
+    padding: 6px 12px;
+    line-height: 1.428571429;
+}
+
+.fixed-table-pagination .pagination-info {
+    line-height: 34px;
+    margin-right: 5px;
+}
+
+.fixed-table-pagination .btn-group {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.fixed-table-pagination .dropup .dropdown-menu {
+    margin-bottom: 0;
+}
+
+.fixed-table-pagination .page-list {
+    display: inline-block;
+}
+
+.fixed-table-toolbar .columns-left {
+    margin-right: 5px;
+}
+
+.fixed-table-toolbar .columns-right {
+    margin-left: 5px;
+}
+
+.fixed-table-toolbar .columns label {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.428571429;
+}
+
+.fixed-table-toolbar .bs-bars,
+.fixed-table-toolbar .search,
+.fixed-table-toolbar .columns {
+    position: relative;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    line-height: 34px;
+}
+
+.fixed-table-pagination li.disabled a {
+    pointer-events: none;
+    cursor: default;
+}
+
+.fixed-table-loading {
+    display: none;
+    position: absolute;
+    top: 42px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    background-color: #fff;
+    text-align: center;
+}
+
+.fixed-table-body .card-view .title {
+    font-weight: bold;
+    display: inline-block;
+    min-width: 30%;
+    text-align: left !important;
+}
+
+/* support bootstrap 2 */
+.fixed-table-body thead th .th-inner {
+    box-sizing: border-box;
+}
+
+.table th, .table td {
+    vertical-align: middle;
+    box-sizing: border-box;
+}
+
+.fixed-table-toolbar .dropdown-menu {
+    text-align: left;
+    max-height: 300px;
+    overflow: auto;
+}
+
+.fixed-table-toolbar .btn-group > .btn-group {
+    display: inline-block;
+    margin-left: -1px !important;
+}
+
+.fixed-table-toolbar .btn-group > .btn-group > .btn {
+    border-radius: 0;
+}
+
+.fixed-table-toolbar .btn-group > .btn-group:first-child > .btn {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.fixed-table-toolbar .btn-group > .btn-group:last-child > .btn {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.bootstrap-table .table > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 1px solid #ddd;
+}
+
+/* support bootstrap 3 */
+.bootstrap-table .table thead > tr > th {
+    padding: 0;
+    margin: 0;
+}
+
+.bootstrap-table .fixed-table-footer tbody > tr > td {
+    padding: 0 !important;
+}
+
+.bootstrap-table .fixed-table-footer .table {
+    border-bottom: none;
+    border-radius: 0;
+    padding: 0 !important;
+}
+
+.pull-right .dropdown-menu {
+    right: 0;
+    left: auto;
+}
+
+/* calculate scrollbar width */
+p.fixed-table-scroll-inner {
+    width: 100%;
+    height: 200px;
+}
+
+div.fixed-table-scroll-outer {
+    top: 0;
+    left: 0;
+    visibility: hidden;
+    width: 200px;
+    height: 150px;
+    overflow: hidden;
+}

whepi-ui/static/css/daterangepicker.css

@@ -0,0 +1,269 @@
+.daterangepicker {
+  position: absolute;
+  color: inherit;
+  background: #fff;
+  border-radius: 4px;
+  width: 278px;
+  padding: 4px;
+  margin-top: 1px;
+  top: 100px;
+  left: 20px;
+  /* Calendars */ }
+  .daterangepicker:before, .daterangepicker:after {
+    position: absolute;
+    display: inline-block;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    content: ''; }
+  .daterangepicker:before {
+    top: -7px;
+    border-right: 7px solid transparent;
+    border-left: 7px solid transparent;
+    border-bottom: 7px solid #ccc; }
+  .daterangepicker:after {
+    top: -6px;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent; }
+  .daterangepicker.opensleft:before {
+    right: 9px; }
+  .daterangepicker.opensleft:after {
+    right: 10px; }
+  .daterangepicker.openscenter:before {
+    left: 0;
+    right: 0;
+    width: 0;
+    margin-left: auto;
+    margin-right: auto; }
+  .daterangepicker.openscenter:after {
+    left: 0;
+    right: 0;
+    width: 0;
+    margin-left: auto;
+    margin-right: auto; }
+  .daterangepicker.opensright:before {
+    left: 9px; }
+  .daterangepicker.opensright:after {
+    left: 10px; }
+  .daterangepicker.dropup {
+    margin-top: -5px; }
+    .daterangepicker.dropup:before {
+      top: initial;
+      bottom: -7px;
+      border-bottom: initial;
+      border-top: 7px solid #ccc; }
+    .daterangepicker.dropup:after {
+      top: initial;
+      bottom: -6px;
+      border-bottom: initial;
+      border-top: 6px solid #fff; }
+  .daterangepicker.dropdown-menu {
+    max-width: none;
+    z-index: 3001; }
+  .daterangepicker.single .ranges, .daterangepicker.single .calendar {
+    float: none; }
+  .daterangepicker.show-calendar .calendar {
+    display: block; }
+  .daterangepicker .calendar {
+    display: none;
+    max-width: 270px;
+    margin: 4px; }
+    .daterangepicker .calendar.single .calendar-table {
+      border: none; }
+    .daterangepicker .calendar th, .daterangepicker .calendar td {
+      white-space: nowrap;
+      text-align: center;
+      min-width: 32px; }
+  .daterangepicker .calendar-table {
+    border: 1px solid #fff;
+    padding: 4px;
+    border-radius: 4px;
+    background: #fff; }
+  .daterangepicker table {
+    width: 100%;
+    margin: 0; }
+  .daterangepicker td, .daterangepicker th {
+    text-align: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    cursor: pointer; }
+    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
+      background-color: #eee;
+      border-color: transparent;
+      color: inherit; }
+    .daterangepicker td.week, .daterangepicker th.week {
+      font-size: 80%;
+      color: #ccc; }
+  .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+    background-color: #fff;
+    border-color: transparent;
+    color: #999; }
+  .daterangepicker td.in-range {
+    background-color: #ebf4f8;
+    border-color: transparent;
+    color: #000;
+    border-radius: 0; }
+  .daterangepicker td.start-date {
+    border-radius: 4px 0 0 4px; }
+  .daterangepicker td.end-date {
+    border-radius: 0 4px 4px 0; }
+  .daterangepicker td.start-date.end-date {
+    border-radius: 4px; }
+  .daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #357ebd;
+    border-color: transparent;
+    color: #fff; }
+  .daterangepicker th.month {
+    width: auto; }
+  .daterangepicker td.disabled, .daterangepicker option.disabled {
+    color: #999;
+    cursor: not-allowed;
+    text-decoration: line-through; }
+  .daterangepicker select.monthselect, .daterangepicker select.yearselect {
+    font-size: 12px;
+    padding: 1px;
+    height: auto;
+    margin: 0;
+    cursor: default; }
+  .daterangepicker select.monthselect {
+    margin-right: 2%;
+    width: 56%; }
+  .daterangepicker select.yearselect {
+    width: 40%; }
+  .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+    width: 50px;
+    margin-bottom: 0; }
+  .daterangepicker .input-mini {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    color: #555;
+    height: 30px;
+    line-height: 30px;
+    display: block;
+    vertical-align: middle;
+    margin: 0 0 5px 0;
+    padding: 0 6px 0 28px;
+    width: 100%; }
+    .daterangepicker .input-mini.active {
+      border: 1px solid #08c;
+      border-radius: 4px; }
+  .daterangepicker .daterangepicker_input {
+    position: relative; }
+    .daterangepicker .daterangepicker_input i {
+      position: absolute;
+      left: 8px;
+      top: 8px; }
+  .daterangepicker.rtl .input-mini {
+    padding-right: 28px;
+    padding-left: 6px; }
+  .daterangepicker.rtl .daterangepicker_input i {
+    left: auto;
+    right: 8px; }
+  .daterangepicker .calendar-time {
+    text-align: center;
+    margin: 5px auto;
+    line-height: 30px;
+    position: relative;
+    padding-left: 28px; }
+    .daterangepicker .calendar-time select.disabled {
+      color: #ccc;
+      cursor: not-allowed; }
+
+.ranges {
+  font-size: 11px;
+  float: none;
+  margin: 4px;
+  text-align: left; }
+  .ranges ul {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%; }
+  .ranges li {
+    font-size: 13px;
+    background: #f5f5f5;
+    border: 1px solid #f5f5f5;
+    border-radius: 4px;
+    color: #08c;
+    padding: 3px 12px;
+    margin-bottom: 8px;
+    cursor: pointer; }
+    .ranges li:hover {
+      background: #08c;
+      border: 1px solid #08c;
+      color: #fff; }
+    .ranges li.active {
+      background: #08c;
+      border: 1px solid #08c;
+      color: #fff; }
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .daterangepicker {
+    width: auto; }
+    .daterangepicker .ranges ul {
+      width: 160px; }
+    .daterangepicker.single .ranges ul {
+      width: 100%; }
+    .daterangepicker.single .calendar.left {
+      clear: none; }
+    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
+      float: left; }
+    .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
+      float: right; }
+    .daterangepicker.ltr {
+      direction: ltr;
+      text-align: left; }
+      .daterangepicker.ltr .calendar.left {
+        clear: left;
+        margin-right: 0; }
+        .daterangepicker.ltr .calendar.left .calendar-table {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0; }
+      .daterangepicker.ltr .calendar.right {
+        margin-left: 0; }
+        .daterangepicker.ltr .calendar.right .calendar-table {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0; }
+      .daterangepicker.ltr .left .daterangepicker_input {
+        padding-right: 12px; }
+      .daterangepicker.ltr .calendar.left .calendar-table {
+        padding-right: 12px; }
+      .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
+        float: left; }
+    .daterangepicker.rtl {
+      direction: rtl;
+      text-align: right; }
+      .daterangepicker.rtl .calendar.left {
+        clear: right;
+        margin-left: 0; }
+        .daterangepicker.rtl .calendar.left .calendar-table {
+          border-left: none;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0; }
+      .daterangepicker.rtl .calendar.right {
+        margin-right: 0; }
+        .daterangepicker.rtl .calendar.right .calendar-table {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0; }
+      .daterangepicker.rtl .left .daterangepicker_input {
+        padding-left: 12px; }
+      .daterangepicker.rtl .calendar.left .calendar-table {
+        padding-left: 12px; }
+      .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
+        text-align: right;
+        float: right; } }
+@media (min-width: 730px) {
+  .daterangepicker .ranges {
+    width: auto; }
+  .daterangepicker.ltr .ranges {
+    float: left; }
+  .daterangepicker.rtl .ranges {
+    float: right; }
+  .daterangepicker .calendar.left {
+    clear: none !important; } }

whepi-ui/static/css/demo.css

@@ -0,0 +1,65 @@
+.container hr {
+    margin-top: 5px;
+    margin-bottom: 15px;
+    border: 0;
+    border-bottom: 1px dashed #ddd;
+}
+.newList .section .part1 p, .newList .section .part2 p, .newList .section .part3 p {
+    line-height: 22px;
+}
+.newList .section .part2 {
+    padding-top: 18px;
+    width: 180px;
+    margin-right: 25px;
+}
+.newList .section p {
+    margin: 0;
+    padding: 0;
+}
+.c55 {
+    color: #555555;
+}
+.fs12 {
+    font-size: 12px;
+}
+.ofh {
+    white-space: nowrap;
+    word-wrap: normal;
+    word-break: normal;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    overflow: hidden;
+}
+.newList .section .part3 {
+    width: 170px;
+    padding-top: 18px;
+    margin-right: 25px;
+}
+.cc9 {
+    color: #999999;
+}
+.cff {
+    color: #ff3300;
+}
+
+.selector-value {
+    white-space: nowrap;
+    margin-right: 12px;
+    line-height: 20px;
+}
+.footer0 {
+    line-height: 35px;
+    text-align: center;
+    padding-bottom: 20px;
+    font-size: 1.4rem;
+    background-color: #ffffff;
+    color: #666;
+}
+.footer0 li {
+    display: inline;
+    padding: 5px 10px;
+}
+.footer0 ul {
+    margin-top: 0;
+    margin-bottom: 10px;
+}

whepi-ui/static/css/font.css

@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/sourcesanspro/sourcesanspro-light.woff') format('woff');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/sourcesanspro/sourcesanspro.woff') format('woff');
+}
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/sourcesanspro/sourcesanspro-bold.woff') format('woff');
+}

whepi-ui/static/css/mobiscroll.android-holo-light.css

@@ -0,0 +1,200 @@
+.mbsc-android-holo-light .dwwr,
+.mbsc-android-holo-light .dw-cal-sc-c {
+    background: rgb(245,245,245);
+}
+.mbsc-android-holo-light .dwwr,
+.mbsc-android-holo-light .dwb,
+.mbsc-android-holo-light .dw-li,
+.mbsc-android-holo-light .dw-dr,
+.mbsc-android-holo-light .dw-cal-tabs .dw-i {
+    color: rgb(0,0,0);
+}
+.mbsc-android-holo-light .dwv {
+    color: rgb(49,183,232);
+    border-bottom: 2px solid rgb(49,183,232);
+}
+.mbsc-android-holo-light .dw-hl {
+    background: rgb(49,183,232);
+    background: rgba(49,183,232,.5);
+}
+.mbsc-android-holo-light .dwwb {
+    color: rgb(125,125,125);
+    background: rgb(245,245,245);
+}
+.mbsc-android-holo-light .dwwl .dwb-a {
+    color: rgb(49,154,189);
+    background: rgb(245,245,245);
+}
+.mbsc-android-holo-light .dwwol {
+    border-top: 2px solid rgb(49,183,232);
+    border-bottom: 2px solid rgb(49,183,232);
+}
+.mbsc-android-holo-light .dwb-a {
+    background: rgb(40,121,156);
+    color: #fff;
+}
+.mbsc-android-holo-light .dwwms .dw-li:after {
+    border-color: rgb(217,213,217);
+}
+.mbsc-android-holo-light .dw-msel:before {
+    color: rgb(49,183,232);
+    text-shadow: 0 0 5px rgb(40,121,156);
+}
+.mbsc-android-holo-light .dwwo {    
+    background: -webkit-gradient(linear,left bottom,left top,from(rgb(245,245,245)),color-stop(0.52,rgba(245,245,245,0)),color-stop(0.48,rgba(245,245,245,0)),to(rgb(245,245,245)));
+    background: -webkit-linear-gradient(rgb(245,245,245),rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,rgb(245,245,245));
+    background: -moz-linear-gradient(rgb(245,245,245),rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,rgb(245,245,245));
+    background: linear-gradient(rgb(245,245,245),rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,rgb(245,245,245));
+}
+.mbsc-android-holo-light .dwbc,
+.mbsc-android-holo-light .dwbw .dwb  { 
+    border-color: rgb(217,213,217);
+}
+/* Bubble positioning */
+.mbsc-android-holo-light .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent rgb(245,245,245) transparent;
+}
+.mbsc-android-holo-light .dw-bubble-top .dw-arr {
+    border-color: rgb(245,245,245) transparent transparent transparent;
+}
+/* Calendar */
+.mbsc-android-holo-light .dw-cal-day-m {
+    border-color: rgb(49,183,232) rgb(49,183,232) transparent transparent;
+}
+.mbsc-android-holo-light .dw-cal-m-bottom .dw-cal-day-m {
+    background: rgb(49,183,232);
+}
+.mbsc-android-holo-light .dw-cal .dw-sel .dw-i {
+    background: rgb(49,183,232);
+    background: rgba(49,183,232,.5);
+}
+.mbsc-android-holo-light .dwb-a .dw-cal-btn-txt {
+    color: rgb(49,154,189);
+}
+.mbsc-android-holo-light .dw-cal-tabs .dw-sel {
+    border-bottom: 5px solid rgb(49,183,232);
+}
+.mbsc-android-holo-light .dw-cal-event-color {
+    background: rgb(49,183,232);
+}
+.mbsc-android-holo-light .dw-cal .dw-cal-day-hl .dw-i {
+    background: rgb(49,183,232);
+    color: #fff;
+}
+.mbsc-android-holo-light .dw-cal-tabs {
+    background: rgb(230,230,230);
+}
+.mbsc-android-holo-light .dw-cal-tab {
+    border-color: rgb(230,230,230);
+}
+.mbsc-android-holo-light .dw-cal-tabs .dw-i,
+.mbsc-android-holo-light .dw-cal-day,
+.mbsc-android-holo-light .dw-cal-sc-m-cell {
+    border-color: rgb(217,217,217);
+}
+.mbsc-android-holo-light .dw-cal-btn-txt {
+    color: rgb(125,125,125);
+}
+.mbsc-android-holo-light .dw-week-nrs-c {
+    background: rgb(245,245,245);
+}
+.mbsc-android-holo-light .dw-week-nr-i {
+    border-color: rgb(217,217,217);
+    color: rgb(125,125,125);
+}
+.mbsc-android-holo-light .dw-cal th {
+    color: rgb(125,125,125);
+}
+.mbsc-android-holo-light .dw-cal-events {
+    background: rgb(0,0,0);
+    background: rgba(0,0,0,0.8);
+}
+.mbsc-android-holo-light .dw-cal-events-arr {
+    border-color: rgba(0,0,0,0.8) transparent transparent;
+}
+.mbsc-android-holo-light .dw-cal-events-b .dw-cal-events-arr {
+    border-color: transparent transparent rgba(0,0,0,0.8);
+}
+.mbsc-android-holo-light .dw-cal-event {
+    background: rgb(125,125,125);
+    color: #fff;
+}
+/* Rangepicker */
+.mbsc-android-holo-light .dw-dr {
+    background: rgb(217,217,217);
+}
+.mbsc-android-holo-light .dw-sel .dw-dr {
+    background: rgb(49,183,232);
+    color: #fff;
+}
+/* Timer */
+.mbsc-android-holo-light.dw-timer .dwl {
+    color: rgb(49,183,232);
+}
+/* Rating */
+.mbsc-android-holo-light .mbsc-rating-icon {
+    color: rgb(49,183,232);
+}
+/* Numpad */
+.mbsc-android-holo-light .mbsc-np-hdr {
+    border-color: rgb(217,217,217);
+}
+/* Listview */
+.mbsc-lv-android-holo-light {
+    background: rgb(219,219,219);
+}
+.mbsc-lv-android-holo-light .mbsc-lv .mbsc-lv-item.mbsc-lv-item-dragging  {
+    background: rgb(49,183,232);
+    background: rgba(49,183,232,.5);
+    border-color: rgba(49,183,232,.5);
+}
+.mbsc-lv-android-holo-light .mbsc-lv-item,
+.mbsc-lv-android-holo-light .mbsc-lv-gr-title {
+    background: rgb(245,245,245);
+    color: rgb(0,0,0);
+}
+.mbsc-lv-android-holo-light.mbsc-lv-alt-row .mbsc-lv-item:nth-child(even) {
+    background: rgb(237,237,237);
+}
+.mbsc-lv-android-holo-light .mbsc-lv-item {
+    border-color: rgb(219,219,219);
+}
+.mbsc-lv-android-holo-light .mbsc-lv-gr-title {
+    border-color: rgb(219,219,219);
+}
+.mbsc-lv-android-holo-light .mbsc-lv .mbsc-lv-item.mbsc-lv-item-active {
+    background: rgb(219,219,219);
+}
+.mbsc-lv-android-holo-light .mbsc-lv-handle-bar-c,
+.mbsc-lv-android-holo-light.mbsc-lv-handle-left .mbsc-lv-handle-bar-c {
+    border-color: rgb(178,178,178);
+}
+.mbsc-lv-android-holo-light .mbsc-lv-handle-bar {
+    background: rgb(178,178,178);
+}
+/* Menustrip */
+.mbsc-android-holo-light.mbsc-ms-c {
+    color: rgb(0,0,0);
+    background: rgb(245,245,245);
+}
+.mbsc-android-holo-light.mbsc-ms-a .mbsc-ms-item-sel .mbsc-ms-item-i{
+    color: rgb(49,183,232);
+}
+.mbsc-android-holo-light.mbsc-ms-b.mbsc-ms-top {
+    border-color: rgb(49,183,232);
+}
+.mbsc-android-holo-light.mbsc-ms-b.mbsc-ms-bottom {
+    border-color: rgb(49,183,232);
+}
+.mbsc-android-holo-light.mbsc-ms-b .mbsc-ms-item-sel .mbsc-ms-item-i {
+    border-bottom-color: rgb(49,183,232);
+}
+.mbsc-android-holo-light.mbsc-ms-b.mbsc-ms-bottom .mbsc-ms-item-sel .mbsc-ms-item-i {
+    border-top-color: rgb(49,183,232);
+}
+.mbsc-android-holo-light.mbsc-ms-b .mbsc-ms-item-i-c {
+    border-color: rgb(217,217,217);
+}
+.mbsc-android-holo-light .mbsc-btn-a .mbsc-ms-item-i {
+    background: rgb(40,121,156);
+}

whepi-ui/static/css/mobiscroll.animation.css

@@ -0,0 +1,656 @@
+.dw-trans .dw-persp {
+    overflow: hidden;
+    -webkit-perspective: 1000px;
+    -moz-perspective: 1000px;
+    perspective: 1000px;
+}
+.dw-trans .dw,
+.dw-trans .dwo {
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-duration: 200ms;
+    -moz-animation-fill-mode: forwards;
+    -moz-animation-duration: 200ms;
+    animation-fill-mode: forwards;
+    animation-duration: 200ms;
+}
+.dw-trans .dwo { 
+    -webkit-backface-visibility: hidden; 
+}
+.dw-in .dw {
+    -webkit-animation-timing-function: ease-out;
+    -moz-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+}
+.dw-out .dw {
+    -webkit-animation-timing-function: ease-in;
+    -moz-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+}
+.dw-in .dwo {
+    -webkit-animation-name: dw-f-in;
+    -moz-animation-name: dw-f-in;
+    animation-name: dw-f-in;
+}
+.dw-out .dwo {
+    -webkit-animation-name: dw-f-out;
+    -moz-animation-name: dw-f-out;
+    animation-name: dw-f-out;
+}
+.dw-flip,
+.dw-swing,
+.dw-slidehorizontal,
+.dw-slidevertical,
+.dw-slidedown,
+.dw-slideup,
+.dw-fade {
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: translateX(0);
+    -moz-backface-visibility: hidden;
+    -moz-transform: translateX(0);
+    backface-visibility: hidden;
+    transform: translateX(0);
+}
+.dw-swing,
+.dw-slidehorizontal,
+.dw-slidevertical,
+.dw-slidedown,
+.dw-slideup,
+.dw-fade {
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    transform-origin: 0 0;
+}
+.dw-flip,
+.dw-pop {
+    -webkit-transform-origin: 50% 50%;
+    -moz-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+}
+.dw-in .dw-pop {
+    opacity: 1;
+    -webkit-animation-name: dw-p-in;
+    -webkit-transform: scale(1);
+    -moz-animation-name: dw-p-in;
+    -moz-transform: scale(1);
+    transform: scale(1);
+    animation-name: dw-p-in;
+}
+.dw-out .dw-pop {
+    opacity: 0;
+    -webkit-animation-name: dw-p-out;
+    -moz-animation-name: dw-p-out;
+    animation-name: dw-p-out;
+}
+.dw-in .dw-flip {
+    opacity: 1;
+    -webkit-animation-name: dw-fl-in;
+    -webkit-transform: scale(1);
+    -moz-animation-name: dw-fl-in;
+    -moz-transform: scale(1);
+    animation-name: dw-fl-in;
+    transform: scale(1);
+}
+.dw-out .dw-flip {
+    opacity: 0;
+    animation-name: dw-fl-out;
+    -webkit-animation-name: dw-fl-out;
+    -moz-animation-name: dw-fl-out;
+}
+.dw-in .dw-swing {
+    opacity: 1;
+    -webkit-animation-name: dw-sw-in;
+    -webkit-transform: scale(1);
+    -moz-animation-name: dw-sw-in;
+    -moz-transform: scale(1);
+    transform: scale(1);
+    animation-name: dw-sw-in;
+}
+.dw-out .dw-swing {
+    opacity: 0;
+    -webkit-animation-name: dw-sw-out;
+    -moz-animation-name: dw-sw-out;
+    animation-name: dw-sw-out;
+}
+.dw-in .dw-slidehorizontal {
+    opacity: 1;
+    -webkit-animation-name: dw-sh-in;
+    -webkit-transform: scale(1);
+    -moz-animation-name: dw-sh-in;
+    -moz-transform: scale(1);
+    transform: scale(1);
+    animation-name: dw-sh-in;
+}
+.dw-out .dw-slidehorizontal {
+    opacity: 0;
+    -webkit-animation-name: dw-sh-out;
+    -moz-animation-name: dw-sh-out;
+    animation-name: dw-sh-out;
+}
+.dw-in .dw-slidevertical {
+    opacity: 1;
+    -webkit-animation-name: dw-sv-in;
+    -webkit-transform: scale(1);
+    -moz-animation-name: dw-sv-in;
+    -moz-transform: scale(1);
+    animation-name: dw-sv-in;
+    transform: scale(1);
+}
+.dw-out .dw-slidevertical {
+    opacity: 0;
+    -webkit-animation-name: dw-sv-out;
+    -moz-animation-name: dw-sv-out;
+    animation-name: dw-sv-out;
+}
+.dw-in .dw-slidedown {
+    -webkit-animation-name: dw-sd-in;
+    -webkit-transform: scale(1);
+    -moz-animation-name: dw-sd-in;
+    -moz-transform: scale(1);
+    animation-name: dw-sd-in;
+    transform: scale(1);
+}
+.dw-out .dw-slidedown {
+    animation-name: dw-sd-out;
+    -webkit-animation-name: dw-sd-out;
+    -webkit-transform: translateY(-100%);
+    -moz-animation-name: dw-sd-out;
+    -moz-transform: translateY(-100%);
+}
+.dw-in .dw-slideup {
+    -webkit-animation-name: dw-su-in;
+    -webkit-transform: scale(1);
+    -moz-animation-name: dw-su-in;
+    -moz-transform: scale(1);
+    transform: scale(1);
+    animation-name: dw-su-in;
+}
+.dw-out .dw-slideup {
+    animation-name: dw-su-out;
+    -webkit-animation-name: dw-su-out;
+    -webkit-transform: translateY(100%);
+    -moz-animation-name: dw-su-out;
+    -moz-transform: translateY(100%);
+}
+.dw-in .dw-fade {
+    opacity: 1;
+    -webkit-animation-name: dw-f-in;
+    -moz-animation-name: dw-f-in;
+    animation-name: dw-f-in;
+}
+.dw-out .dw-fade {
+    opacity: 0;
+    -webkit-animation-name: dw-f-out;
+    -moz-animation-name: dw-f-out;
+    animation-name: dw-f-out;
+}
+/* Fade in */
+@keyframes dw-f-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@-webkit-keyframes dw-f-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@-moz-keyframes dw-f-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+/* Fade out */
+@keyframes dw-f-out {
+    from {
+        visibility: visible;
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+@-webkit-keyframes dw-f-out {
+    from {
+        visibility: visible;
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+@-moz-keyframes dw-f-out {
+    from {
+        visibility: visible;
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+/* Pop in */
+@keyframes dw-p-in {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@-webkit-keyframes dw-p-in {
+    from {
+        opacity: 0;
+        -webkit-transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: scale(1);
+    }
+}
+@-moz-keyframes dw-p-in {
+    from {
+        opacity: 0;
+        -moz-transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        -moz-transform: scale(1);
+    }
+}
+/* Pop out */
+@keyframes dw-p-out {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+@-webkit-keyframes dw-p-out {
+    from {
+        opacity: 1;
+        -webkit-transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale(0.8);
+    }
+}
+@-moz-keyframes dw-p-out {
+    from {
+        opacity: 1;
+        -moz-transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        -moz-transform: scale(0.8);
+    }
+}
+/* Flip in */
+@keyframes dw-fl-in {
+    from {
+        opacity: 0;
+        transform: rotateY(90deg);
+    }
+    to {
+        opacity: 1;
+        transform: rotateY(0);
+    }
+}
+@-webkit-keyframes dw-fl-in {
+    from {
+        opacity: 0;
+        -webkit-transform: rotateY(90deg);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: rotateY(0);
+    }
+}
+@-moz-keyframes dw-fl-in {
+    from {
+        opacity: 0;
+        -moz-transform: rotateY(90deg);
+    }
+    to {
+        opacity: 1;
+        -moz-transform: rotateY(0);
+    }
+}
+/* Flip out */
+@keyframes dw-fl-out {
+    from {
+        opacity: 1;
+        transform: rotateY(0deg);
+    }
+    to {
+        opacity: 0;
+        transform: rotateY(-90deg);
+    }
+}
+@-webkit-keyframes dw-fl-out {
+    from {
+        opacity: 1;
+        -webkit-transform: rotateY(0deg);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: rotateY(-90deg);
+    }
+}
+@-moz-keyframes dw-fl-out {
+    from {
+        opacity: 1;
+        -moz-transform: rotateY(0deg);
+    }
+    to {
+        opacity: 0;
+        -moz-transform: rotateY(-90deg);
+    }
+}
+/* Swing in */
+@keyframes dw-sw-in {
+    from {
+        opacity: 0;
+        transform: rotateY(-90deg);
+    }
+    to {
+        opacity: 1;
+        transform: rotateY(0deg);
+    }
+}
+@-webkit-keyframes dw-sw-in {
+    from {
+        opacity: 0;
+        -webkit-transform: rotateY(-90deg);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: rotateY(0deg);
+    }
+}
+@-moz-keyframes dw-sw-in {
+    from {
+        opacity: 0;
+        -moz-transform: rotateY(-90deg);
+    }
+    to {
+        opacity: 1;
+        -moz-transform: rotateY(0deg);
+    }
+}
+/* Swing out */
+@keyframes dw-sw-out {
+    from {
+        opacity: 1;
+        transform: rotateY(0deg);
+    }
+    to {
+        opacity: 0;
+        transform: rotateY(-90deg);
+    }
+}
+@-webkit-keyframes dw-sw-out {
+    from {
+        opacity: 1;
+        -webkit-transform: rotateY(0deg);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: rotateY(-90deg);
+    }
+}
+@-moz-keyframes dw-sw-out {
+    from {
+        opacity: 1;
+        -moz-transform: rotateY(0deg);
+    }
+    to {
+        opacity: 0;
+        -moz-transform: rotateY(-90deg);
+    }
+}
+/* Slide horizontal in */
+@keyframes dw-sh-in {
+    from {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+@-webkit-keyframes dw-sh-in {
+    from {
+        opacity: 0;
+        -webkit-transform: translateX(-100%);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+    }
+}
+@-moz-keyframes dw-sh-in {
+    from {
+        opacity: 0;
+        -moz-transform: translateX(-100%);
+    }
+    to {
+        opacity: 1;
+        -moz-transform: translateX(0);
+    }
+}
+/* Slide horizontal out */
+@keyframes dw-sh-out {
+    from {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+}
+@-webkit-keyframes dw-sh-out {
+    from {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translateX(100%);
+    }
+}
+@-moz-keyframes dw-sh-out {
+    from {
+        opacity: 1;
+        -moz-transform: translateX(0);
+    }
+    to {
+        opacity: 0;
+        -moz-transform: translateX(100%);
+    }
+}
+/* Slide vertical in */
+@keyframes dw-sv-in {
+    from {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@-webkit-keyframes dw-sv-in {
+    from {
+        opacity: 0;
+        -webkit-transform: translateY(-100%);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+    }
+}
+@-moz-keyframes dw-sv-in {
+    from {
+        opacity: 0;
+        -moz-transform: translateY(-100%);
+    }
+    to {
+        opacity: 1;
+        -moz-transform: translateY(0);
+    }
+}
+/* Slide vertical out */
+@keyframes dw-sv-out {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+}
+@-webkit-keyframes dw-sv-out {
+    from {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translateY(100%);
+    }
+}
+@-moz-keyframes dw-sv-out {
+    from {
+        opacity: 1;
+        -moz-transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        -moz-transform: translateY(100%);
+    }
+}
+/* Slide Down In */
+@keyframes dw-sd-in {
+    from {
+        transform: translateY(-100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+@-webkit-keyframes dw-sd-in {
+    from {
+        opacity: 1;
+        -webkit-transform: translateY(-100%);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+    }
+}
+@-moz-keyframes dw-sd-in {
+    from {
+        -moz-transform: translateY(-100%);
+    }
+    to {
+        -moz-transform: translateY(0);
+    }
+}
+/* Slide down out */
+@keyframes dw-sd-out {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(-100%);
+    }
+}
+@-webkit-keyframes dw-sd-out {
+    from {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translateY(-100%);
+    }
+}
+@-moz-keyframes dw-sd-out {
+    from {
+        -moz-transform: translateY(0);
+    }
+    to {
+        -moz-transform: translateY(-100%);
+    }
+}
+/* Slide Up In */
+@keyframes dw-su-in {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+@-webkit-keyframes dw-su-in {
+    from {
+        opacity: 1;
+        -webkit-transform: translateY(100%);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+    }
+}
+@-moz-keyframes dw-su-in {
+    from {
+        -moz-transform: translateY(100%);
+    }
+    to {
+        -moz-transform: translateY(0);
+    }
+}
+/* Slide up out */
+@keyframes dw-su-out {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(100%);
+    }
+}
+@-webkit-keyframes dw-su-out {
+    from {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translateY(100%);
+    }
+}
+@-moz-keyframes dw-su-out {
+    from {
+        -moz-transform: translateY(0);
+    }
+    to {
+        -moz-transform: translateY(100%);
+    }
+}

whepi-ui/static/css/mobiscroll.frame.android-holo.css

@@ -0,0 +1,64 @@
+.mbsc-android-holo .dwwr {
+    background: #292829;
+    color: #fff;
+    border-radius: .1875em;
+    font-size: 16px;
+}
+.mbsc-android-holo .dwv {
+    color: #31b6e7;
+    padding: 0 .5em;
+    min-height: 2em;
+    line-height: 2em;
+    border-bottom: 2px solid #31b6e7;
+    font-size: 1.125em;
+}
+/* Buttons */
+.mbsc-android-holo .dwbc {
+    border-top: 1px solid #424542;
+}
+.mbsc-android-holo .dwb {
+    height: 2.6em;
+    line-height: 2.6em;
+    color: #fff;
+    font-size: .875em;
+}
+.mbsc-android-holo .dwb-a {
+    background: #29799c;
+}
+.mbsc-android-holo .dwbw .dwb {
+    border-left: 1px solid #424542;
+}
+.mbsc-android-holo .dwbw:first-child .dwb {
+    border: 0;
+    border-radius: 0 0 0 .1875em;
+}
+.mbsc-android-holo .dwbw:last-child .dwb {
+    border-radius: 0 0 .1875em 0;
+}
+.mbsc-android-holo .dw-rtl .dwbw .dwb {
+    border: 0;
+    border-right: 1px solid #424542;
+}
+.mbsc-android-holo .dw-rtl .dwbw:last-child .dwb {
+    border-radius: 0 0 0 .1875em;
+}
+.mbsc-android-holo .dw-rtl .dwbw:first-child .dwb {
+    border: 0;
+    border-radius: 0 0 .1875em 0;
+}
+/* Top, bottom mode */
+.mbsc-android-holo.dw-liq .dwwr, 
+.mbsc-android-holo.dw-top .dwwr, 
+.mbsc-android-holo.dw-bottom .dwwr,
+.mbsc-android-holo.dw-liq .dwbw .dwb,
+.mbsc-android-holo.dw-top .dwbw .dwb,
+.mbsc-android-holo.dw-bottom .dwbw .dwb {
+    border-radius: 0;
+}
+/* Bubble positioning */
+.mbsc-android-holo .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent #292829 transparent;
+}
+.mbsc-android-holo .dw-bubble-top .dw-arr {
+    border-color: #292829 transparent transparent transparent;
+}

whepi-ui/static/css/mobiscroll.frame.android.css

@@ -0,0 +1,60 @@
+/* Android Skin */
+.mbsc-android .dw {
+    border: 2px solid #555;
+}
+.mbsc-android .dwv {
+    padding: 10px;
+    border-bottom: 1px solid #333;
+    font-size: 14px;
+    min-height: 17px;
+}
+.mbsc-android .dwwr {
+    color: #fff;
+    background: #000;
+}
+/* Buttons */
+.mbsc-android .dwbc {
+    padding: 4px 2px;
+    background: #9c9c9c;
+}
+.mbsc-android .dwb {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 15px;
+    margin: 0 2px;
+    font-size: 14px;
+    color: #000;
+    background: #ccc;
+    background: -webkit-gradient(linear,left bottom,left top,from(#ccc),to(#eee));
+    background: -webkit-linear-gradient(#eee,#ccc);
+    background: -moz-linear-gradient(#eee,#ccc);
+    background: linear-gradient(#eee,#ccc);
+    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+}
+.mbsc-android .dw .dwb-a {
+    background: #ffb25a;
+    background: -webkit-gradient(linear,left bottom,left top,from(#ef6100),to(#ffb25a));
+    background: -webkit-linear-gradient(#ffb25a,#ef6100);
+    background: -moz-linear-gradient(#ffb25a,#ef6100);
+    background: linear-gradient(#ffb25a,#ef6100);
+}
+/* Bubble positioning */
+.mbsc-android .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent #000 transparent;
+}
+.mbsc-android .dw-bubble-top .dw-arr {
+    border-color: #9c9c9c transparent transparent transparent;
+}
+/* Docked */
+.mbsc-android.dw-top .dw,
+.mbsc-android.dw-bottom .dw {
+    border-right: 0;
+    border-left: 0;
+}
+.mbsc-android.dw-top .dw {
+    border-top: 0;
+}
+.mbsc-android.dw-bottom .dw {
+    border-bottom: 0;
+}

whepi-ui/static/css/mobiscroll.frame.css

@@ -0,0 +1,219 @@
+.dw, 
+.dwo {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.dw {
+    max-width: 98%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    font-size: 12px;
+    text-shadow: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -ms-touch-action: none;
+    user-select: none;
+    /*touch-action: none;*/ /* Kills native scroll in Chrome >=35 */
+}
+.dw:focus {
+    /*outline-color: transparent;*/
+    outline: none;
+}
+.dw :focus {
+    outline-offset: -2px;
+}
+.dw-rtl {
+    direction: rtl;
+}
+/* Box sizing */
+.dw,
+.dwbc {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.dwwr {
+    min-width: 170px;
+    zoom: 1;
+    overflow: hidden;
+    text-align: center;
+    font-family: arial, verdana, sans-serif;
+}
+/* Modal overlay */
+.dw-persp, 
+.dwo {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.dw-persp {
+    z-index: 99998;
+}
+.dwo {
+    z-index: 1;
+    background: #000;
+    background: rgba(0,0,0,.7);
+    filter: Alpha(Opacity=70);
+}
+/* Liquid mode */
+.dw-liq .dw {
+    max-width: 100%;
+}
+/* Top/Bottom mode */
+.dw-top .dw, 
+.dw-bottom .dw {
+    width: 100%;
+    max-width: 100%;
+}
+/* Inline mode */
+.dw-inline .dw {
+    position: static;
+    display: inline-block;
+    max-width: 100%;
+}
+.dw-inline.dw-liq .dw-persp .dw {
+    display: block;
+}
+.dw-inline .dw-persp {
+    position: static;
+}
+/* Bubble mode */
+.dw-bubble .dw {
+    margin: 20px 0;
+}
+.dw-bubble .dw-arrw {
+    position: absolute;
+    left: 0;
+    width: 100%;
+}
+.dw-bubble-top .dw-arrw {
+    bottom: -36px;
+}
+.dw-bubble-bottom .dw-arrw {
+    top: -36px;
+}
+.dw-bubble .dw-arrw-i {
+    margin: 0 30px;
+    position: relative;
+    height: 36px;
+}
+.dw-bubble .dw-arr {
+    display: block;
+}
+.dw-arr {
+    display: none;
+    position: absolute;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-width: 18px 18px;
+    border-style: solid;
+    margin-left: -18px;
+}
+.dw-bubble-bottom .dw-arr {
+    top: 0;
+}
+.dw-bubble-top .dw-arr {
+    bottom: 0;
+}
+.dw-hidden {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+}
+/* Header */
+.dwv {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* Buttons */
+.dwb {
+    overflow: hidden;
+    display: block;
+    text-decoration: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+.dwb-e {
+    cursor: pointer;
+}
+.dwb-d {
+    cursor: default;
+}
+/* Button container */
+.dwbc {
+    display: table;
+    width: 100%;
+    text-align: center;
+}
+/* Button wrapper */
+.dwbw  {
+    vertical-align: top;
+    display: table-cell;
+    position: relative;
+    z-index: 5;
+}
+.dwbw .dwb:before {
+    padding: .375em;
+}
+/* Widget content styling */
+.mbsc-wdg .dwcc {
+    padding: .5em 1em;
+    font-size: 14px;
+    text-align: left;
+    white-space: normal;
+}
+
+/* Default theme */
+.mbsc-mobiscroll .dwwr {
+    min-width: 220px;
+    background: #f7f7f7;
+    color: #454545;
+    font-size: 16px;
+}
+.mbsc-mobiscroll .dwv {
+    padding: 0 .6666em;
+    padding-top: .6666em;
+    color: #4eccc4;
+    font-size: .75em;
+    text-transform: uppercase;
+    min-height: 2em;
+    line-height: 2em;
+}
+.mbsc-mobiscroll .dwbc {
+    display: block;
+    overflow: hidden;
+    text-align: right;
+    padding: 0 .5em .5em .5em;
+}
+.mbsc-mobiscroll .dwbw {
+    display: block;
+    float: right;
+}
+.mbsc-mobiscroll .dw-rtl .dwbw {
+    float: left;
+}
+.mbsc-mobiscroll .dwb {
+    height: 2.5em;
+    line-height: 2.5em;
+    padding: 0 1em;
+    color: #4eccc4;
+    text-transform: uppercase;
+}
+.mbsc-mobiscroll .dwb-a {
+    background: rgba(78,204,196,.3);
+}
+.mbsc-mobiscroll .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent #f7f7f7 transparent;
+}
+.mbsc-mobiscroll .dw-bubble-top .dw-arr {
+    border-color: #f7f7f7 transparent transparent transparent;
+}

whepi-ui/static/css/mobiscroll.frame.ios-classic.css

@@ -0,0 +1,129 @@
+/* iOS Skin */
+.mbsc-ios-classic .dw {
+    min-width: 134px;
+    border: 1px solid #2d3034;
+}
+.mbsc-ios-classic .dwo {
+    background: none;
+}
+.mbsc-ios-classic .dwwr {
+    position: relative;
+    padding: 0 6px;
+    margin-top: 40px;
+    background: -webkit-gradient(linear,left top,left bottom,from(#9f9fa6),color-stop(0.5, #484a55),color-stop(0.5, #272836),to(#282a39));
+    background: -webkit-linear-gradient(#9f9fa6,#484a55 50%,#272836 50%,#282a39);
+    background: -moz-linear-gradient(#9f9fa6,#484a55 50%,#272836 50%,#282a39);
+    background: linear-gradient(#9f9fa6,#484a55 50%,#272836 50%,#282a39);
+    background-color: #9f9fa6;
+    background-repeat: no-repeat;
+    color: #fff;
+    overflow: visible;
+}
+.mbsc-ios-classic.dw-nobtn .dwwr {
+    margin-top: 0;
+}
+.mbsc-ios-classic .dwv {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+}
+/* Buttons */
+.mbsc-ios-classic .dwbc {
+    display: block;
+    position: absolute;
+    top: -40px;
+    left: 0;
+    width: 100%;
+    height: 28px;
+    padding: 5px 0;
+    background: #454545;
+    background: -webkit-gradient(linear,left top,left bottom,from(rgba(69,69,69,0.7)),color-stop(0.5, rgba(37,37,37,0.7)),color-stop(0.5, rgba(16,16,16,0.7)),to(rgba(0,0,0,0.7)));
+    background: -webkit-linear-gradient(rgba(69,69,69,0.7),rgba(37,37,37,0.7) 50%,rgba(16,16,16,0.7) 50%,rgba(0,0,0,0.7));
+    background: -moz-linear-gradient(rgba(69,69,69,0.7),rgba(37,37,37,0.7) 50%,rgba(16,16,16,0.7) 50%,rgba(0,0,0,0.7));
+    background: linear-gradient(rgba(69,69,69,0.7),rgba(37,37,37,0.7) 50%,rgba(16,16,16,0.7) 50%,rgba(0,0,0,0.7));
+    border-bottom: 1px solid #888;
+    border-bottom: 1px solid rgba(255,255,255,0.5);
+    border-top: 1px solid #888;
+    border-top: 1px solid rgba(255,255,255,0.5);
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+.mbsc-ios-classic .dwb {
+    margin: 0 5px;
+    padding: 0 10px;
+    display: inline-block;
+    font-size: 12px;
+    font-weight: bold;
+    height: 26px;
+    line-height: 26px;
+    color: #fff;
+    border: 1px solid #1f1f1f;
+    background: #1a1a1a;
+    background: -webkit-gradient(linear,left top,left bottom,from(#7b7b7b),color-stop(0.5, #1a1a1a),color-stop(0.5, #000));
+    background: -webkit-linear-gradient(#7b7b7b,#1a1a1a 50%,#000 50%);
+    background: -moz-linear-gradient(#7b7b7b,#1a1a1a 50%,#000 50%);
+    background: linear-gradient(#7b7b7b,#1a1a1a 50%,#000 50%);
+    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3);
+    border-radius: 5px;
+    box-shadow: 0 1px 0 rgba(255,255,255,0.3);
+}
+.mbsc-ios-classic .dwb-s .dwb {
+    border: 1px solid #194aab;
+    background: #194aab;
+    background: -webkit-gradient(linear,left top,left bottom,from(#82aaff),color-stop(0.5,#3162c4),color-stop(0.5,#194aab));
+    background: -webkit-linear-gradient(#82aaff,#3162c4 50%,#194aab 50%);
+    background: -moz-linear-gradient(#82aaff,#3162c4 50%,#194aab 50%);
+    background: linear-gradient(#82aaff,#3162c4 50%,#194aab 50%);
+}
+.mbsc-ios-classic .dwb-a {
+    opacity: .8;
+    filter: alpha(opacity=80);
+}
+.mbsc-ios-classic .dwbw {
+    display: block;
+    float: right;
+}
+.mbsc-ios-classic .dwb-c {
+    float: left;
+}
+/* Bubble positioning */
+.mbsc-ios-classic.dw-bubble .dw {
+    padding: 6px;
+    background: #afafaf;
+    background: -webkit-gradient(linear,left top,left bottom,from(#afafaf),color-stop(0.3, #1b2530));
+    background: -webkit-linear-gradient(#afafaf, #1b2530 30%);
+    background: -moz-linear-gradient(#afafaf, #1b2530 30%);
+    background: linear-gradient(#afafaf, #1b2530 30%);
+    -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.7);
+    border-radius: 5px;
+    box-shadow: 0 0 25px rgba(0,0,0,0.7);
+}
+.mbsc-ios-classic .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent #2d3034 transparent;
+}
+.mbsc-ios-classic .dw-bubble-bottom .dw-arr:after {
+    content: '';
+    position: absolute;
+    top: -16px;
+    left: -17px;
+    border: 17px solid #afafaf;
+    border-color: transparent transparent #afafaf transparent;
+}
+.mbsc-ios-classic .dw-bubble-top .dw-arr {
+    border-color: #1b2530 transparent transparent transparent;
+}
+/* Widget */
+.mbsc-ios-classic.mbsc-wdg .dwwr {
+    padding: 6px;
+}
+.mbsc-ios-classic.mbsc-wdg .dwcc {
+    background: #fff;
+    color: #000;
+    -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.3), 0 1px 5px rgba(0, 0, 0, 0.90) inset, 0 -1px 1px rgba(0, 0, 0, 0.90) inset;
+    box-shadow: 0 1px 1px rgba(255,255,255,.3), 0 1px 5px rgba(0, 0, 0, 0.90) inset, 0 -1px 1px rgba(0, 0, 0, 0.90) inset;
+    border-radius: .5em;
+}

whepi-ui/static/css/mobiscroll.frame.ios.css

@@ -0,0 +1,60 @@
+.mbsc-ios .dwo {
+    background: rgba(0,0,0,.2);
+    filter: Alpha(Opacity=20);
+}
+.mbsc-ios .dwwr {
+    position: relative;
+    background: #f7f7f7;
+    color: #000;
+    padding-top: 40px;
+}
+.mbsc-ios .dwv {
+    padding: 0 5px;
+    color: #9d9d9d;
+    line-height: 30px;
+    min-height: 30px;
+    font-size: 12px;
+    border-bottom: 1px solid #acacac;
+}
+.mbsc-ios .dwbc {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    border-bottom: 1px solid #acacac;
+}
+.mbsc-ios .dwb {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+    display: inline-block;
+    color: #007aff;
+    font-size: 17px;
+}
+.mbsc-ios .dwb-a {
+    opacity: .5;
+}
+.mbsc-ios .dwbw {
+    display: block;
+    float: right;
+}
+.mbsc-ios .dwb-c {
+    float: left;
+}
+.mbsc-ios .dwb-s .dwb {
+    font-weight: bold;
+}
+/* Bubble arrow */
+.mbsc-ios .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent #f7f7f7 transparent;
+}
+.mbsc-ios .dw-bubble-top .dw-arr {
+    border-color: #f7f7f7 transparent transparent transparent;
+}
+.mbsc-ios.dw-bubble .dwwr {
+    border-radius: 8px;
+}
+/* Inline display */
+.mbsc-ios.dw-nobtn .dwwr {
+    padding-top: 0;
+}

whepi-ui/static/css/mobiscroll.frame.jqm.css

@@ -0,0 +1,59 @@
+.mbsc-jqm .dwo {
+    background: none;
+}
+.mbsc-jqm .dwv {
+    position: static;
+    width: auto;
+    border: 0;
+    padding: 5px;
+    font-size: 14px;
+    min-height: 18px;
+}
+.mbsc-jqm .dwwr {
+    border: 0;
+    overflow: visible;
+    font-family: inherit;
+}
+/* Buttons */
+.mbsc-jqm .dwbc {
+    font-size: 12px;
+    padding: 0 2px 4px 2px;
+}
+.mbsc-jqm .dwbc .ui-btn {
+    margin: 0 2px;
+}
+.mbsc-jqm .dwbc .ui-btn-inner {
+    font-size: 12px;
+}
+/* Bubble positioning */
+.mbsc-jqm .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent #222 transparent;
+}
+.mbsc-jqm .dw-bubble-top .dw-arr {
+    border-color: #222 transparent transparent transparent;
+}
+.mbsc-jqm.dw-bubble .dw {
+    background: #222;
+    border: 0;
+    padding: 6px;
+}
+/* Top / bottom mode */
+.mbsc-jqm.dw-liq .dw,
+.mbsc-jqm.dw-top .dw,
+.mbsc-jqm.dw-bottom .dw, 
+.mbsc-jqm.dw-liq .dwwr,
+.mbsc-jqm.dw-top .dwwr,
+.mbsc-jqm.dw-bottom .dwwr {
+    padding: 0;
+    border-radius: 0;
+}
+.mbsc-jqm.dw-top .dw {
+    border-right: 0;
+    border-top: 0;
+    border-left: 0;
+}
+.mbsc-jqm.dw-bottom .dw {
+    border-bottom: 0;
+    border-right: 0;
+    border-left: 0;
+}

whepi-ui/static/css/mobiscroll.frame.sense-ui.css

@@ -0,0 +1,62 @@
+.mbsc-sense-ui .dwwr {
+    color: #fff;
+    background: #333;
+    border: 2px solid #fff;
+    border-radius: 3px;
+}
+.mbsc-sense-ui .dwv {
+    padding: 5px 10px;
+    border-bottom: 1px solid #666;
+    font-size: 14px;
+    text-align: left;
+    min-height: 17px;
+}
+/* Buttons */
+.mbsc-sense-ui .dwbc {
+    padding: 4px 2px;
+    background: #000;
+    background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #000),color-stop(0.5, #666));
+    background: -webkit-linear-gradient(#666 50%,#000 50%);
+    background: -moz-linear-gradient(#666 50%,#000 50%);
+    background: linear-gradient(#666 50%,#000 50%);
+}
+.mbsc-sense-ui .dwb {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 15px;
+    margin: 0 2px;
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    border: 1px solid #333;
+    background: #222;
+    background: -webkit-gradient(linear,left bottom,left top,from(#000),to(#444));
+    background: -webkit-linear-gradient(#444,#000);
+    background: -moz-linear-gradient(#444,#000);
+    background: linear-gradient(#444,#000);
+    box-shadow: inset 0 0 5px #000;
+    border-radius: 5px;
+}
+.mbsc-sense-ui .dw .dwb-a {
+    background: #3c7500;
+    background: -webkit-gradient(linear,left bottom,left top,from(#3c7500),to(#94c840));
+    background: -webkit-linear-gradient(#94c840,#3c7500);
+    background: -moz-linear-gradient(#94c840,#3c7500);
+    background: linear-gradient(#94c840,#3c7500);
+}
+/* Bubble mode */
+.mbsc-sense-ui .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent #fff transparent;
+}
+.mbsc-sense-ui .dw-bubble-top .dw-arr {
+    border-color: #fff transparent transparent transparent;
+}
+/* Docked */
+.mbsc-sense-ui.dw-top .dwwr,
+.mbsc-sense-ui.dw-bottom .dwwr {
+    border: 0;
+    border-radius: 0;
+}
+.mbsc-sense-ui.dw-bottom .dwwr {
+    border-top: 1px solid #666;
+}

whepi-ui/static/css/mobiscroll.frame.wp.css

@@ -0,0 +1,67 @@
+.mbsc-wp .dwwr {
+    padding: .625em;
+    background: #1f1f1f;
+    color: #fff;
+    font-size: 16px;
+}
+.mbsc-wp .dwv {
+    font-size: .75em;
+    padding: .833em;
+    min-height: 14px;
+    padding-top: 0;
+}
+.mbsc-wp .dwbc {
+    display: block;
+}
+.mbsc-wp .dwbw {
+    display: inline-block;
+}
+.mbsc-wp .dwb,
+.mbsc-wp .mbsc-ic:before {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+.mbsc-wp .dwb {
+    position: relative;
+    top: 0;
+    min-width: 2.9em;
+    display: inline-block;
+    height: 1.818em;
+    padding: 2.636em .455em 0 .455em;
+    color: #fff;
+    line-height: 1.818em;
+    font-size: 0.688em;
+    text-transform: lowercase;
+    -webkit-transition: all .1s linear;
+    -moz-transition: all .1s linear;
+    transition: all .1s linear;
+}
+.mbsc-wp .dwb:before {
+    position: absolute;
+    top: .3em;
+    left: 50%;
+    width: 2.2em;
+    height: 2.2em;
+    margin: 0 -1.3em;
+    padding: 0;
+    border: 2px solid #fff;
+    line-height: 2.2em;
+    font-size: .909em;
+    text-align: center;
+    border-radius: 1000px;
+}
+.mbsc-wp .dwb-a {
+    top: -.3em;
+}
+.mbsc-wp .dwb-a:before {
+    background: #fff;
+    color: #1f1f1f;
+}
+/* Bubble positioning */
+.mbsc-wp .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent #1f1f1f transparent;
+}
+.mbsc-wp .dw-bubble-top .dw-arr {
+    border-color: #1f1f1f transparent transparent transparent;
+}

whepi-ui/static/css/mobiscroll.image.css

@@ -0,0 +1,31 @@
+.dw-ltr .mbsc-img-w { 
+    text-align: left; 
+}
+.dw-ltr .mbsc-img-txt {
+    margin: 0 0 0 .5em; 
+}
+.dw-rtl .mbsc-img-w { 
+    text-align: right; 
+}
+.dw-rtl .mbsc-img-txt {
+    margin: 0 .5em 0 0; 
+}
+.mbsc-img-w .mbsc-ic {
+    display: inline-block;
+    margin: 0 .5em;
+}
+.mbsc-img-txt { 
+    display: inline-block; 
+}
+.mbsc-img-c { 
+    min-width: 50px; 
+    height: 28px; 
+    margin-top: -2px; 
+    display: inline-block; 
+    text-align: center; 
+    vertical-align: middle; 
+    line-height: normal; 
+}
+.mbsc-img { 
+    max-height: 28px; 
+}

whepi-ui/static/css/mobiscroll.mobiscroll-dark.css

@@ -0,0 +1,200 @@
+/* Higlighted */
+.mbsc-mobiscroll-dark .dwwr {
+    background: rgb(38,50,56); /*background*/
+    color: rgb(247,247,247);  /*text*/
+}
+.mbsc-mobiscroll-dark .dwv,
+.mbsc-mobiscroll-dark .dwl {
+    color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .dwwol {
+    border-color: rgb(79,204,196); /*accent*/
+}
+.mbsc-mobiscroll-dark .dwb-a {
+    background: rgba(79,204,196, 0.3);
+}
+.mbsc-mobiscroll-dark .dw-hl {
+    background: rgba(79,204,196, 0.3);
+}
+.mbsc-mobiscroll-dark .dwb {
+    color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .dwwb {
+    color: rgb(79,204,196);
+    background: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark .dwwb.dwb-a:before {
+    background: rgba(79,204,196,0.3);
+}
+.mbsc-mobiscroll-dark .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent rgb(38,50,56) transparent;
+}
+.mbsc-mobiscroll-dark .dw-bubble-top .dw-arr {
+    border-color: rgb(38,50,56) transparent transparent transparent;
+}
+.mbsc-mobiscroll-dark .dw-msel:before {
+    color: rgb(79,204,196);
+}
+/* Calendar */
+.mbsc-mobiscroll-dark  .dw-cal .dw-sel .dw-i {
+    background: rgb(79,204,196);
+    color: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark  .dw-cal-days {
+    color: rgb(79,204,196);
+    border-color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark  .dw-cal-btn-txt {
+    color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .dw-cal-event-color {
+    background: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .dw-cal-events {
+    color: rgb(38,50,56);
+    background: rgb(255,255,255);
+}
+.mbsc-mobiscroll-dark .dw-cal-events-arr {
+    border-color: rgb(255,255,255) transparent transparent transparent;
+}
+.mbsc-mobiscroll-dark .dw-cal-events-b .dw-cal-events-arr {
+    border-color: transparent transparent rgb(255,255,255) transparent;
+}
+.mbsc-mobiscroll-dark .dw-cal-event-time {
+    color: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark .dw-cal-event-dur {
+    color: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark .dw-cal-day-hl .dw-i {
+    border-color: rgb(79,204,196); 
+}
+.mbsc-mobiscroll-dark .dw-week-nrs-c {
+    color: rgb(79,204,196);
+    background: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark .dw-cal-day-m {
+    background: rgb(247,247,247); 
+}
+.mbsc-mobiscroll-dark .dw-sel .dw-cal-day-m {
+    background: rgb(38,50,56); 
+}
+.mbsc-mobiscroll-dark .dw-cal-day-m-c {
+    background: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .dw-sel .dw-cal-day-m-c {
+    background: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark .dw-cal-day-txt {
+    color: rgb(38,50,56);
+    background: rgb(247,247,247);
+}
+.mbsc-mobiscroll-dark .dw-cal-tab {
+    border-color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .dw-cal-tab .dw-i {
+    color: rgb(247,247,247);
+}
+.mbsc-mobiscroll-dark .dw-cal-tabs .dw-sel {
+    background: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .dw-cal-tabs .dw-sel .dw-i {
+    color: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark .dw-cal-sc-c {
+    background: rgb(38,50,56);
+}
+/* Rangepicker */
+.mbsc-mobiscroll-dark .dw-dr {
+    border-color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .dw-sel .dw-dr {
+    background: rgb(79,204,196);
+    color: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark.dw-range .dw-cal-table .dw-sel .dw-i {
+    color: rgb(247,247,247);
+    background: rgba(79,204,196, 0.3);
+}
+.mbsc-mobiscroll-dark.dw-range .dw-cal-table .dw-cal-day-hl .dw-i {
+    background: rgb(79,204,196);
+    color: rgb(38,50,56);
+}
+
+/* Rating */
+.mbsc-mobiscroll-dark .mbsc-rating-icon {
+    color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark .mbsc-rating-icon-unf {
+    color: rgba(79,204,196, 0.3);
+}
+.mbsc-mobiscroll-dark .mbsc-rating-circle {
+    background: rgb(79,204,196);
+    color: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark .mbsc-rating-circle-unf {
+    background: none;
+    border-color: rgb(79,204,196);
+}
+/* Numpad */
+.mbsc-mobiscroll-dark .mbsc-np-del {
+    color: rgb(79,204,196);
+}
+/* Colorpicker */
+.mbsc-mobiscroll-dark .dw-color {
+    border-color: rgb(38,50,56);
+}
+/* Listview */
+.mbsc-lv-mobiscroll-dark .mbsc-lv-item {
+    background: rgb(38,50,56);
+    color: rgb(247,247,247);
+}
+.mbsc-lv-mobiscroll-dark .mbsc-lv-gr-title {
+    background: rgb(79,204,196);
+    color: rgb(38,50,56);
+}
+.mbsc-lv-mobiscroll-dark .mbsc-lv-arr {
+    color: rgb(79,204,196);
+}
+.mbsc-lv-mobiscroll-dark .mbsc-lv-handle-bar {
+    background: rgb(79,204,196);
+}
+.mbsc-lv-mobiscroll-dark .mbsc-lv-item-active::after {
+    background: rgba(79,204,196, 0.3);
+}
+.mbsc-lv-mobiscroll-dark.mbsc-lv-alt-row .mbsc-lv-item:nth-child(even) {
+    background: rgb(29,38,43);
+}
+.mbsc-lv-mobiscroll-dark .mbsc-lv-item.mbsc-lv-item-dragging {
+    background: rgb(79,204,196);
+    color: rgb(38,50,56);
+}
+.mbsc-lv-mobiscroll-dark .mbsc-lv-item-dragging .mbsc-lv-handle-bar {
+    background: rgb(38,50,56);
+}
+.mbsc-lv-mobiscroll-dark .mbsc-lv-item-dragging .mbsc-lv-arr {
+    color: rgb(38,50,56);
+}
+/* Menustrip */
+.mbsc-mobiscroll-dark.mbsc-ms-c {
+    color: rgb(247,247,247);
+    background: rgb(38,50,56);
+}
+.mbsc-mobiscroll-dark .mbsc-btn-a .mbsc-ms-item-i {
+    background: rgba(79,204,196,.3);
+}
+.mbsc-mobiscroll-dark.mbsc-ms-a .mbsc-ms-item-sel .mbsc-ms-item-i {
+    color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark.mbsc-ms-b.mbsc-ms-top {
+    border-color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark.mbsc-ms-b.mbsc-ms-bottom {
+    border-color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark.mbsc-ms-b .mbsc-ms-item-sel .mbsc-ms-item-i {
+    border-bottom-color: rgb(79,204,196);
+}
+.mbsc-mobiscroll-dark.mbsc-ms-b.mbsc-ms-bottom .mbsc-ms-item-sel .mbsc-ms-item-i {
+    border-top-color: rgb(79,204,196);
+}

whepi-ui/static/css/mobiscroll.scroller.android-holo.css

@@ -0,0 +1,98 @@
+/* Android Holo skin */
+.mbsc-android-holo .dwc {
+    padding: 1.875em .625em .063em .625em;
+}
+.mbsc-android-holo .dwl {
+    font-size: .75em;
+}
+.mbsc-android-holo .dwhl {
+    padding: .0625em .625em;
+}
+.mbsc-android-holo .dw-li {
+    color: #fff;
+    font-size: 1.125em;
+}
+.mbsc-android-holo .dw-hl {
+    background: rgba(49,182,231,.5);
+}
+.mbsc-android-holo .dwwo {
+    background: -webkit-gradient(linear,left bottom,left top,from(#282828),color-stop(0.52, rgba(40,40,40,0)),color-stop(0.48, rgba(40,40,40,0)),to(#282828));
+    background: -webkit-linear-gradient(#282828,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828);
+    background: -moz-linear-gradient(#282828,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828);
+    background: linear-gradient(#282828,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828);
+}
+.mbsc-android-holo .dwwb {
+    color: #7e7e7e;
+    background: #292829;
+}
+.mbsc-android-holo .dwwb span {
+    display: none;
+}
+.mbsc-android-holo .dwwb:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    font-size: 1.625em;
+    text-align: center;
+}
+.mbsc-android-holo .dwwbm {
+    top: 0;
+    bottom: auto;
+}
+.mbsc-android-holo .dwwbp {
+    bottom: 0;
+    top: auto;
+}
+.mbsc-android-holo .dwwl .dwb-a {
+    background: #292829;
+    color: #319abd;
+}
+.mbsc-android-holo .dwwol {
+    display: block;
+    width: 60%;
+    left: 20%;
+    border-top: 2px solid #31b6e7;
+    border-bottom: 2px solid #31b6e7;
+}
+/* Multiple select */
+.mbsc-android-holo .dwwms .dwwo,
+.mbsc-android-holo .dwwms .dwwol {
+    display: none;
+}
+.mbsc-android-holo .dwwms .dw-li {
+    padding: 0 2.25em;
+}
+.mbsc-android-holo .dwwms .dw-li:after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: auto;
+    right: .625em;
+    width: .875em;
+    height: .875em;
+    margin-top: -.5625em;
+    border: 1px solid #424542;
+}
+.mbsc-android-holo .dw-msel:before {
+    z-index: 2;
+    top: 50%;
+    left: auto;
+    right: .625em;
+    width: .875em;
+    color: #31b6e7;
+    margin-top: -.625em;
+    line-height: .875em;
+    text-shadow: 0 0 .375em #29799c;
+}
+/* Group select */
+.mbsc-android-holo .dww .dw-w-gr {
+    padding: 0 .375em;
+    font-size: 1em;
+    font-weight: normal;
+}
+.mbsc-android-holo .dww .dw-w-gr:after {
+    display: none;
+}
+

whepi-ui/static/css/mobiscroll.scroller.android.css

@@ -0,0 +1,87 @@
+/* Android Skin */
+.mbsc-android .dwc {
+    padding: 32px 2px 6px 2px;
+}
+.mbsc-android .dwhl {
+    padding-top: 6px;
+}
+/* Wheel items */
+.mbsc-android .dw-li {
+    font-size: 26px;
+    text-shadow: 0 1px 1px #000;
+}
+/* Higlighted */
+.mbsc-android .dw-hl {
+    background: rgba(255,255,255,.3);
+}
+/* Scroller mode */
+.mbsc-android .dwwl {
+    padding: 0 2px;
+    margin: 0 2px;
+    background: #888;
+    background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.35, #333),color-stop(0.50, #888),color-stop(0.65, #333),to(#000));
+    background: -webkit-linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
+    background: -moz-linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
+    background: linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
+}
+.mbsc-android .dww {
+    color: #fff;
+    background: #444;
+    background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.45, #444),color-stop(0.55, #444),to(#000));
+    background: -webkit-linear-gradient(#000,#444 45%, #444 55%, #000);
+    background: -moz-linear-gradient(#000,#444 45%, #444 55%, #000);
+    background: linear-gradient(#000,#444 45%, #444 55%, #000);
+}
+.mbsc-android .dwwo {
+    background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.52, rgba(44,44,44,0)),color-stop(0.48, rgba(44,44,44,0)),to(#000));
+    background: -webkit-linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
+    background: -moz-linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
+    background: linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
+}
+.mbsc-android .dwwol {
+    height: 0;
+    margin-top: -1px;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #555;
+}
+/* Clickpick mode */
+.mbsc-android .dwpm .dwwl {
+    padding: 0;
+    background: #fff;
+}
+.mbsc-android .dwpm .dww {
+    color: #000;
+    background: #fff;
+    border-radius: 3px;
+}
+.mbsc-android .dwpm .dw-li {
+    text-shadow: none;
+}
+.mbsc-android .dwwb {
+    background: #ccc;
+    color: #888;
+    text-shadow: 0 -1px 1px #333;
+    -webkit-box-shadow: 0 0 5px #333;
+    box-shadow: 0 0 5px #333;
+}
+.mbsc-android .dwwbp {
+    background: -webkit-gradient(linear,left bottom,left top,from(#bdbdbd),to(#f7f7f7));
+    background: -webkit-linear-gradient(#f7f7f7,#bdbdbd);
+    background: -moz-linear-gradient(#f7f7f7,#bdbdbd);
+    background: linear-gradient(#f7f7f7,#bdbdbd);
+    border-radius: 3px 3px 0 0;
+    font-size: 40px;
+}
+.mbsc-android .dwwbm {
+    background: -webkit-gradient(linear,left bottom,left top,from(#f7f7f7),to(#bdbdbd));
+    background: -webkit-linear-gradient(#bdbdbd,#f7f7f7);
+    background: -moz-linear-gradient(#bdbdbd,#f7f7f7);
+    background: linear-gradient(#bdbdbd,#f7f7f7);
+    border-radius: 0 0 3px 3px;
+    font-size: 32px;
+    font-weight: bold;
+}
+/* Group select */
+.mbsc-android .dw-w-gr {
+    font-size: 20px;
+}

whepi-ui/static/css/mobiscroll.scroller.css

@@ -0,0 +1,263 @@
+.dwwb,
+.dwwo,
+.dwwol {
+    /*-webkit-backface-visibility: hidden;*/
+    -webkit-transform: translateZ(0);
+}
+/* Wheel container wrapper */
+.dwc {
+    max-width: 100%;
+    vertical-align: middle;
+    display: inline-block;
+    overflow: hidden;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+/* Wheel label */
+.dwl {
+    line-height: 30px;
+    height: 30px;
+    top: -30px;
+    left: 0;
+    text-align: center;
+    white-space: nowrap;
+    position: absolute;
+    width: 100%;
+}
+/* Wheel container */
+.dwwc {
+    margin: 0 auto;
+    position: relative;
+    zoom: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+	display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+.dwfl {
+    max-width: 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 auto;
+    -ms-flex: 1 auto;
+	flex: 1 auto;
+}
+/* Wheels */
+.dwwl {
+    position: relative;
+    z-index: 5;
+}
+.dwww {
+    position: relative;
+    padding: 1px;
+    /*overflow: hidden;*/
+}
+.dww {
+    overflow: hidden;
+    position: relative;
+}
+.dw-bf {
+    -webkit-backface-visibility: hidden;
+    -webkit-perspective: 1000px;
+    backface-visibility: hidden;
+    perspective: 1000px;
+}
+.dw-ul {
+    position: relative;
+    z-index: 3;
+}
+.dw-li {
+    padding: 0 5px;
+    position: relative;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: bottom;
+    opacity: .3;
+    filter: Alpha(Opacity=30);
+    cursor: pointer;
+}
+/* Valid entry */
+.dw-li.dw-v,
+.dw-li.dw-fv {
+    opacity: 1;
+    filter: Alpha(Opacity=100);
+}
+/* Hidden entry */
+.dw-li.dw-h {
+    visibility: hidden;
+}
+.dw-i {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* Clickpick mode */
+.dwwb {
+    position: absolute;
+    z-index: 4;
+    left: 0;
+    cursor: pointer;
+    width: 100%;
+    text-decoration: none;
+    text-align: center;
+    opacity: 1;
+    -webkit-transition: opacity .2s linear;
+    transition: opacity .2s linear;
+}
+.dwa .dwwb {
+    opacity: 0;
+}
+.dwpm .dwwbp {
+    top: 0;
+}
+.dwpm .dwwbm {
+    bottom: 0;
+}
+.dwpm .dwwol {
+    display: none;
+}
+/* Wheel overlay */
+.dwwo {
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+/* Background line */
+.dwwol {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    pointer-events: none;
+}
+/* Liquid mode */
+.dw-liq .dwc {
+    display: block;
+}
+.dw-liq .dw-tbl {
+    width: 100%;
+    table-layout: fixed;
+}
+/* Hidden label */
+.dwhl .dwl {
+    display: none;
+}
+/* Hidden select element */
+.dw-hsel {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    left: 0;
+    overflow: hidden;
+    clip: rect(1px,1px,1px,1px);
+}
+/* Multiple lines */
+.dw-ml .dw-li {
+    overflow: hidden;
+}
+.dw-ml .dw-li .dw-i {
+    width: 100%;
+    height: auto;
+    display: inline-block;
+    vertical-align: middle;
+    white-space: normal;
+}
+/* Multiple selection */
+.dwwms .dw-li {
+    padding: 0 40px;
+}
+.dwwms .dwwol {
+    display: none;
+}
+.dw-msel:before {
+    width: 40px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+/* Select groups */
+.dww .dw-w-gr {
+    padding: 0 5px;
+    opacity: 1;
+    font-weight: bold;
+    text-align: left;
+}
+
+
+/* Default theme */
+.mbsc-mobiscroll .dwc {
+    padding: 2em .25em 0 .25em;
+}
+.mbsc-mobiscroll .dwl {
+    color: #4eccc4;
+    font-size: .75em;
+    text-transform: uppercase;
+}
+.mbsc-mobiscroll .dwhl {
+    padding-top: 0;
+}
+.mbsc-mobiscroll .dwfl {
+    padding: .5em .25em;
+}
+.mbsc-mobiscroll .dw-li {
+    font-size: 1.375em;
+}
+.mbsc-mobiscroll .dw-hl {
+    background: rgba(78,204,196,.3);
+}
+.mbsc-mobiscroll .dwwol {
+    border-top: 1px solid #4eccc4;
+    border-bottom: 1px solid #4eccc4;
+}
+/* Clickpick mode */
+.mbsc-mobiscroll .dwpm .dwwol {
+    display: block;
+}
+.mbsc-mobiscroll .dwwb {
+    color: #4eccc4;
+    background: #f7f7f7;
+}
+.mbsc-mobiscroll .dwwbp {
+    bottom: 0;
+    top: auto;
+}
+.mbsc-mobiscroll .dwwbm {
+    top: 0;
+    bottom: auto;
+}
+.mbsc-mobiscroll .dwwb span {
+    display: none;
+}
+.mbsc-mobiscroll .dwwb:before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    font-size: 24px;
+    text-align: center;
+}
+.mbsc-mobiscroll .dwwb.dwb-a:before {
+    background: rgba(78,204,196,.3);
+}
+/* Group select */
+/* Multiple select */
+.mbsc-mobiscroll .dw-w-gr {
+    font-size: 1.125em;
+}
+.mbsc-mobiscroll .dw-msel:before {
+    font-size: 40px;
+    color: #4eccc4;
+}
+.mbsc-mobiscroll .dwwms .dwwol {
+    display: none;
+}

whepi-ui/static/css/mobiscroll.scroller.ios-classic.css

@@ -0,0 +1,129 @@
+.mbsc-ios-classic .dwc {
+    padding: 30px 2px 10px 2px;
+}
+.mbsc-ios-classic .dwhl {
+    padding: 10px 2px;
+}
+.mbsc-ios-classic .dwwl {
+    padding: 0 2px;
+    border-left: 1px solid #000;
+    border-right: 1px solid #000;
+    background: #cbcce0;
+    background: -webkit-gradient(linear,left bottom,left top,from(#2c2c38),color-stop(0.35, #cbcce0),color-stop(0.65, #cbcce0),to(#2c2c38));
+    background: -webkit-linear-gradient(#2c2c38,#cbcce0 35%, #cbcce0 65%,#2c2c38);
+    background: -moz-linear-gradient(#2c2c38,#cbcce0 35%, #cbcce0 65%,#2c2c38);
+    background: linear-gradient(#2c2c38,#cbcce0 35%, #cbcce0 65%,#2c2c38);
+    -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.3);
+    box-shadow: 0 1px 1px rgba(255,255,255,0.3);
+}
+.mbsc-ios-classic .dw-ltr .dwsc .dwfl:first-child .dwwl,
+.mbsc-ios-classic .dw-rtl .dwsc .dwfl:last-child .dwwl {
+    -webkit-border-top-left-radius: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+.mbsc-ios-classic .dw-ltr .dwsc .dwfl:last-child .dwwl,
+.mbsc-ios-classic .dw-rtl .dwsc .dwfl:first-child .dwwl {
+    -webkit-border-top-right-radius: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+.mbsc-ios-classic .dwsc .dww {
+    background: #fff;
+    background: -webkit-gradient(linear,left bottom,left top,from(#333),color-stop(0.10, #999),color-stop(0.30, #fff),color-stop(0.70, #fff),color-stop(0.90, #999),to(#333));
+    background: -webkit-linear-gradient(#333,#999 10%,#fff 30%,#fff 70%,#999 90%,#333);
+    background: -moz-linear-gradient(#333,#999 10%,#fff 30%,#fff 70%,#999 90%,#333);
+    background: linear-gradient(#333,#999 10%,#fff 30%,#fff 70%,#999 90%,#333);
+    border-radius: 0;
+}
+.mbsc-ios-classic .dwpm .dwwl {
+    margin: 4px 2px;
+    border: 1px solid #000;
+    border-radius: 3px;
+}
+.mbsc-ios-classic .dwpm .dww {
+    background: -webkit-gradient(linear,left bottom,left top,from(#333),color-stop(0.48, #fff),color-stop(0.52, #fff),to(#333));
+    background: -webkit-linear-gradient(#333,#fff 48%,#fff 52%,#333);
+    background: -moz-linear-gradient(#333,#fff 48%,#fff 52%,#333);
+    background: linear-gradient(#333,#fff 48%,#fff 52%,#333);
+}
+.mbsc-ios-classic .dw-li {
+    color: #000;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: right;
+    text-shadow: none;
+}
+.mbsc-ios-classic .dw-li.dw-hl {
+    background: -webkit-gradient(linear,left bottom,left top,from(#0288f3),to(#005de6));
+    background: -webkit-linear-gradient(#0288f3,#005de6);
+    background: -moz-linear-gradient(#0288f3,#005de6);
+    background: linear-gradient(#0288f3,#005de6);
+    color: #fff;
+}
+.mbsc-ios-classic .dwwo {
+    background: -webkit-gradient(linear,left bottom,left top,from(#333),color-stop(0.1, rgba(153,153,153,0)),color-stop(0.9, rgba(153,153,153,0)),to(#333));
+    background: -webkit-linear-gradient(#333,rgba(153,153,153,0) 10%, rgba(153,153,153,0) 90%, #333);
+    background: -moz-linear-gradient(#333,rgba(153,153,153,0) 10%, rgba(153,153,153,0) 90%, #333);
+    background: linear-gradient(#333,rgba(153,153,153,0) 10%, rgba(153,153,153,0) 90%, #333);
+}
+.mbsc-ios-classic .dwwol {
+    height: 28px;
+    padding: 1px;
+    margin-top: -16px;
+    border-top: 1px solid #7b8699;
+    border-bottom: 1px solid #7b8699;
+    background: #6f75b0;
+    background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, rgba(111, 117, 176, 0.5)),color-stop(0.5, rgba(151, 157, 197, 0.5)));
+    background: -webkit-linear-gradient(rgba(151, 157, 197, 0.5) 50%,rgba(111, 117, 176, 0.5) 50%);
+    background: -moz-linear-gradient(rgba(151, 157, 197, 0.5) 50%,rgba(111, 117, 176, 0.5) 50%);
+    background: linear-gradient(rgba(151, 157, 197, 0.5) 50%,rgba(111, 117, 176, 0.5) 50%);
+    z-index: 10;
+    left: -1px;
+    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    filter: alpha(opacity=50);
+}
+.mbsc-ios-classic .dwwb {
+    color: #fff;
+    background: #3f4e68;
+    background: -webkit-gradient(linear,left bottom,left top,from(#3f4e68),color-stop(0.5, #75859f),color-stop(0.5, #808ea6),to(#c7d1e2));
+    background: -webkit-linear-gradient(#c7d1e2,#808ea6 50%,#75859f 50%,#3f4e68);
+    background: -moz-linear-gradient(#c7d1e2,#808ea6 50%,#75859f 50%,#3f4e68);
+    background: linear-gradient(#c7d1e2,#808ea6 50%,#75859f 50%,#3f4e68);
+}
+.mbsc-ios-classic .dwwbp {
+    border-radius: 3px 3px 0 0;
+    font-size: 40px;
+}
+.mbsc-ios-classic .dwwbm {
+    border-radius: 0 0 3px 3px;
+    font-size: 32px;
+    font-weight: bold;
+}
+.mbsc-ios-classic .dwwl .dwb-a {
+    background: #252c36;
+    background: -webkit-gradient(linear,left bottom,left top,from(#252c36),color-stop(0.5, #171e28),color-stop(0.5, #272e38),to(#6b6e75));
+    background: -webkit-linear-gradient(#6b6e75,#272e38 50%,#171e28 50%,#252c36);
+    background: -moz-linear-gradient(#6b6e75,#272e38 50%,#171e28 50%,#252c36);
+    background: linear-gradient(#6b6e75,#272e38 50%,#171e28 50%,#252c36);
+}
+/* Multiple select */
+.mbsc-ios-classic.dwms .dww {
+    padding: 10px 0;
+}
+.mbsc-ios-classic .dwwms .dw-li {
+    padding: 0 5px 0 40px;
+    text-align: left;
+}
+.mbsc-ios-classic .dw-msel {
+    color: #215085;
+}
+/* Group select */
+.mbsc-ios-classic .dww .dw-w-gr {
+    padding: 0 5px;
+    color: #777;
+    text-align: left;
+}

whepi-ui/static/css/mobiscroll.scroller.ios.css

@@ -0,0 +1,89 @@
+.mbsc-ios .dwl {
+    text-align: left;
+    text-indent: 5px;
+    color: #ababab;
+}
+.mbsc-ios .dwwc {
+    padding: 30px 10px 10px 10px;
+}
+.mbsc-ios .dwhl .dwwc {
+    padding-top: 10px;
+}
+.mbsc-ios .dwwo {
+    background: -webkit-gradient(linear,left bottom,left top,from(#f7f7f7),color-stop(0.52, rgba(245,245,245,0)),color-stop(0.48, rgba(245,245,245,0)),to(#f7f7f7));
+    background: -webkit-linear-gradient(#f7f7f7,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f7f7f7);
+    background: -moz-linear-gradient(#f7f7f7,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f7f7f7);
+    background: linear-gradient(#f7f7f7,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f7f7f7);
+}
+.mbsc-ios .dwwol {
+    padding: 0 10px;
+    height: 34px;
+    margin: -18px 0 0 -10px;
+    border-top: 1px solid #dbdbdb;
+    border-bottom: 1px solid #dbdbdb;
+}
+.mbsc-ios .dw-li {
+    color: #9d9d9d;
+    font-size: 22px;
+    text-align: left;
+}
+.mbsc-ios .dw-hl {
+    background: rgba(0,122,255,.2);
+}
+.mbsc-ios .dw-sel {
+    color: #000;
+}
+/* Clickpick mode */
+.mbsc-ios .dwpm .dw-li {
+    text-align: center;
+}
+.mbsc-ios .dwpm .dwwol {
+    display: block;
+}
+.mbsc-ios .dwwb {
+    color: #007aff;
+    background: #f7f7f7;
+}
+.mbsc-ios .dwwbp {
+    bottom: 0;
+    top: auto;
+}
+.mbsc-ios .dwwbm {
+    top: 0;
+    bottom: auto;
+}
+.mbsc-ios .dwwb span {
+    display: none;
+}
+.mbsc-ios .dwwb:before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    font-size: 24px;
+    text-align: center;
+}
+/* Select */
+.mbsc-ios.dw-select .dwwo {
+    display: none;
+}
+/* Multiple select */
+.mbsc-ios .dwwms .dw-li {
+    padding: 0 5px 0 40px;
+    color: #000;
+}
+.mbsc-ios .dwwms .dw-msel {
+    color: #007aff;
+}
+.mbsc-ios .dw-msel:before {
+    font-size: 40px;
+}
+/* Group select */
+.mbsc-ios .dw-select-gr .dw-li {
+    padding-left: 40px;
+}
+.mbsc-ios .dw-select-gr .dw-w-gr {
+    padding-left: 5px;
+    font-weight: normal;
+    font-size: 18px;
+}

whepi-ui/static/css/mobiscroll.scroller.jqm.css

@@ -0,0 +1,78 @@
+.mbsc-jqm .dwc {
+    padding: 30px 2px 4px 2px;
+    overflow: visible;
+}
+.mbsc-jqm .dwhl {
+    padding-top: 4px;
+}
+.mbsc-jqm .dwl {
+    border: 0;
+    background: none;
+    top: -31px;
+}
+.mbsc-jqm .dwfl {
+    padding: 4px 2px 1px 2px;
+}
+.mbsc-jqm .dwwl {
+    border-radius: 4px;
+}
+.mbsc-jqm14 .dwwl {
+    border: 1px solid transparent;
+}
+.mbsc-jqm .dwwol {
+    z-index: 3;
+    border-left: 0;
+    border-right: 0;
+    padding: 0 3px;
+    margin: 0 -3px;
+    opacity: .3;
+    filter: Alpha(Opacity=30);
+}
+.mbsc-jqm .dw-ltr .dwfl:first-child .dwwol,
+.mbsc-jqm .dw-rtl .dwfl:last-child .dwwol {
+    padding-left: 5px;
+    margin-left: -5px;
+}
+.mbsc-jqm .dw-ltr .dwfl:last-child .dwwol,
+.mbsc-jqm .dw-rtl .dwfl:first-child .dwwol {
+    padding-right: 5px;
+    margin-right: -5px;
+}
+.mbsc-jqm .dw-li {
+    font-size: 26px;
+}
+.mbsc-jqm .dw-hl {
+    background: rgba(0,0,0,.1);
+}
+/* Clickpick mode */
+.mbsc-jqm .dwwb {
+    margin: -1px;
+    padding: 0;
+}
+.mbsc-jqm .dwwb span {
+    padding: 0;
+}
+.mbsc-jqm .dwwb .ui-btn-inner {
+    margin-top: -1px;
+}
+.mbsc-jqm .dwwbp {
+    border-radius: 4px 4px 0 0;
+}
+.mbsc-jqm .dwwbm {
+    border-radius: 0 0 4px 4px;
+}
+.mbsc-jqm .dwwbp span {
+    font-size: 40px;
+    font-weight: normal;
+}
+.mbsc-jqm .dwwbm span {
+    font-size: 32px;
+}
+.mbsc-jqm .dwpm .dwl {
+    border: 0;
+    background: none;
+}
+/* Group select */
+.mbsc-jqm .dw-w-gr {
+    font-size: 20px;
+}

whepi-ui/static/css/mobiscroll.scroller.sense-ui.css

@@ -0,0 +1,89 @@
+.mbsc-sense-ui .dwc {
+    padding: 30px 2px 4px 2px;
+}
+.mbsc-sense-ui .dwhl {
+    padding-top: 4px;
+}
+.mbsc-sense-ui .dwfl {
+    padding: 0 2px;
+}
+/* Wheel items */
+.mbsc-sense-ui .dw-li {
+    font-size: 26px;
+    text-shadow: 0 1px 1px #000;
+}
+/* Higlighted */
+.mbsc-sense-ui .dw-hl {
+    background: rgba(255,255,255,.3);
+}
+/* Scroller mode */
+.mbsc-sense-ui .dwwl {
+    padding: 0 2px;
+    background: #888;
+    background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.35, #333),color-stop(0.50, #888),color-stop(0.65, #333),to(#000));
+    background: -webkit-linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
+    background: -moz-linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
+    background: linear-gradient(#000,#333 35%, #888 50%,#333 65%,#000);
+    border-radius: 3px;
+}
+.mbsc-sense-ui .dww {
+    color: #fff;
+    background: #444;
+    background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.45, #444),color-stop(0.55, #444),to(#000));
+    background: -webkit-linear-gradient(#000,#444 45%, #444 55%, #000);
+    background: -moz-linear-gradient(#000,#444 45%, #444 55%, #000);
+    background: linear-gradient(#000,#444 45%, #444 55%, #000);
+}
+.mbsc-sense-ui .dwwo {
+    background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.52, rgba(44,44,44,0)),color-stop(0.48, rgba(44,44,44,0)),to(#000));
+    background: -webkit-linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
+    background: -moz-linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
+    background: linear-gradient(#000,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000);
+}
+.mbsc-sense-ui .dwwol {
+    height: 0;
+    margin-top: -1px;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #555;
+}
+/* Clickpick mode */
+.mbsc-sense-ui .dwpm .dwwl {
+    padding: 0;
+    background: #fff;
+}
+.mbsc-sense-ui .dwpm .dww {
+    color: #000;
+    background: #fff;
+    border-radius: 3px;
+}
+.mbsc-sense-ui .dwpm .dw-li {
+    text-shadow: none;
+}
+.mbsc-sense-ui .dwwb {
+    background: #ccc;
+    color: #888;
+    text-shadow: 0 -1px 1px #333;
+    -webkit-box-shadow: 0 0 5px #333;
+    box-shadow: 0 0 5px #333;
+}
+.mbsc-sense-ui .dwwbp {
+    background: -webkit-gradient(linear,left bottom,left top,from(#bdbdbd),to(#f7f7f7));
+    background: -webkit-linear-gradient(#f7f7f7,#bdbdbd);
+    background: -moz-linear-gradient(#f7f7f7,#bdbdbd);
+    background: linear-gradient(#f7f7f7,#bdbdbd);
+    border-radius: 3px 3px 0 0;
+    font-size: 40px;
+}
+.mbsc-sense-ui .dwwbm {
+    background: -webkit-gradient(linear,left bottom,left top,from(#f7f7f7),to(#bdbdbd));
+    background: -webkit-linear-gradient(#bdbdbd,#f7f7f7);
+    background: -moz-linear-gradient(#bdbdbd,#f7f7f7);
+    background: linear-gradient(#bdbdbd,#f7f7f7);
+    border-radius: 0 0 3px 3px;
+    font-size: 32px;
+    font-weight: bold;
+}
+/* Group select */
+.mbsc-sense-ui .dw-w-gr {
+    font-size: 20px;
+}

whepi-ui/static/css/mobiscroll.scroller.wp.css

@@ -0,0 +1,164 @@
+/* Box sizing */
+.mbsc-wp .dw-li,
+.mbsc-wp .dwwb {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.mbsc-wp .dwl {
+    font-size: .75em;
+}
+.mbsc-wp .dwc {
+    padding: 1.875em 0 0 0;
+}
+.mbsc-wp .dwhl {
+    padding: 0;
+}
+.mbsc-wp .dwwc {
+    padding: .188em;
+}
+.mbsc-wp .dwwl {
+    padding: 0 .125em;
+}
+.mbsc-wp .dw-li {
+    padding: 0;
+    font-size: 1.625em;
+    letter-spacing: -.038em;
+    text-align: left;
+    opacity: 0;
+    filter: Alpha(Opacity=0);
+}
+.mbsc-wp .dw-i {
+    position: relative;
+    top: 4%;
+    height: 92%;
+    padding: 0 .192em;
+    border: 2px solid #4c4c4c;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    filter: inherit;
+}
+.mbsc-wp .dw-li .dw-i {
+    /*width: 99.5%;*/
+    color: #fff;
+}
+.mbsc-wp .wpa .dw-li, 
+.mbsc-wp .dwa .dw-li {
+    opacity: .3;
+    filter: Alpha(Opacity=30);
+}
+.mbsc-wp .wpa .dw-v, 
+.mbsc-wp .wpa .dw-fv,
+.mbsc-wp .dwa .dw-v,
+.mbsc-wp .dwa .dw-fv { 
+    opacity: 1;
+    filter: Alpha(Opacity=100);
+}
+.mbsc-wp .dw-day, 
+.mbsc-wp .dw-mon {
+    display: block;
+    line-height: 1.636em;
+    font-size: .423em;
+    letter-spacing: normal;
+    position: absolute;
+    bottom: 0;
+    filter: inherit;
+}
+.mbsc-wp .dw-sel {
+    opacity: 1;
+    filter: Alpha(Opacity=100);
+}
+.mbsc-wp .dw-sel .dw-i,
+.mbsc-wp .dw-hl .dw-i {
+    color: #fff;
+    background: #4c4c4c;
+}
+.mbsc-wp .dwwo {
+    display: none;
+}
+.mbsc-wp .dwwol {
+    display: none;
+}
+/* +/- buttons */
+.mbsc-wp .dwwb {
+    background: #1f1f1f;
+}
+.mbsc-wp .dwwb:before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 2em;
+    height: 2em;
+    margin: -1.182em 0 0 -1.182em;
+    color: #fff;
+    line-height: 2em;
+    font-size: .688em;
+    text-align: center;
+    border: 2px solid #fff;
+    border-radius: 1.182em;
+}
+.mbsc-wp .dwwl .dwb-a {
+    top: auto;
+    background: #1f1f1f;
+}
+.mbsc-wp .dwwl .dwb-a:before {
+    color: #000;
+}
+.mbsc-wp .dwwb span {
+    display: none;
+}
+/* Multiple select */
+.mbsc-wp .dwwms .dw-li {
+    padding: 0;
+    opacity: .3;
+    filter: Alpha(Opacity=30);
+}
+.mbsc-wp .dwwms .dw-v {
+    opacity: 1;
+    filter: Alpha(Opacity=100);
+}
+.mbsc-wp .dwwms .dw-li .dw-i {
+    color: #fff;
+    border: 0;
+    padding-left: 1.538em;
+    background: none;
+}
+.mbsc-wp .dwwms .dw-li:after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: .192em;
+    width: .769em;
+    height: .769em;
+    margin-top: -.385em;
+    border: 2px solid #fff;
+}
+.mbsc-wp .dwwms .dw-msel:before {
+    z-index: 2;
+    top: 50%;
+    left: .313em;
+    width: 1.375em;
+    margin-top: -.5em;
+    font-size: .615em;
+    line-height: 1.25em;
+    color: #fff;
+}
+/* Group select */
+.mbsc-wp .dw-select-gr.wpa .dw-w-gr {
+    font-size: 22px;
+    font-weight: normal;
+    opacity: 1;
+    filter: Alpha(Opacity=100);
+}
+.mbsc-wp .dw-select-gr .dw-w-gr .dw-i {
+    border: 0;
+    padding-left: 5px;
+}
+.mbsc-wp .dw-select-gr .dw-w-gr:after {
+    display: none;
+}
+
+
+

whepi-ui/static/css/mobiscroll.wp-light.css

@@ -0,0 +1,174 @@
+.mbsc-wp-light .dwwr, 
+.mbsc-wp-light .dw-dr,
+.mbsc-wp-light .dwb,
+.mbsc-wp-light .dw-cal-tabs .dw-i {
+    color: rgb(0,0,0);
+}
+.mbsc-wp-light .dwwr {
+    background: rgb(222,222,222);
+}
+.mbsc-wp-light .dw-i {
+    border-color: rgb(166,166,166);
+}
+.mbsc-wp-light .dw-li .dw-i {
+    color: rgb(0,0,0);
+}
+.mbsc-wp-light .dw-sel .dw-i,
+.mbsc-wp-light .dw-hl .dw-i {
+    color: #000;
+    background: rgb(181,181,181);
+    border-color: rgb(181,181,181);
+}
+/* Clickpick-mode */ 
+.mbsc-wp-light .dwwb {
+    background: rgb(222,222,222);
+}
+.mbsc-wp-light .dwwb:before {
+    color: rgb(0,0,0);
+    border-color: rgb(0,0,0);
+}
+.mbsc-wp-light .dwwl .dwb-a {
+    background: rgb(222,222,222);
+}
+.mbsc-wp-light .dwwl .dwb-a:before {
+    color: rgb(222,222,222);
+}
+/* Bubble positioning */
+.mbsc-wp-light .dw-bubble-bottom .dw-arr {
+    border-color: transparent transparent rgb(222,222,222) transparent;
+}
+.mbsc-wp-light .dw-bubble-top .dw-arr {
+    border-color: rgb(222,222,222) transparent transparent transparent;
+}
+/* Multiple select */
+.mbsc-wp-light .dwwms .dw-li .dw-i {
+    color: rgb(0,0,0);
+}
+.mbsc-wp-light .dwwms .dw-li:after {
+    border-color: rgb(0,0,0);
+}
+.mbsc-wp-light .dwwms .dw-msel:before {
+    color: rgb(0,0,0);
+}
+
+/* Override accents */
+.mbsc-wp-light .dwa .dw-i {
+    color: rgb(0,0,0);
+    border-color: rgb(166,166,166);
+    background: none;
+}
+.mbsc-wp-light .dwwms .dw-i {
+    background: none;
+}
+
+/* Calendar */
+.mbsc-wp-light .dw-cal-sc-m-cell {
+    background: rgb(222,222,222);
+}
+.mbsc-wp-light .dw-cal-event {
+    background: rgb(166,166,166);
+    color: #000;
+}
+.mbsc-wp-light .dw-cal-events {
+    background: rgb(0,0,0);
+    background: rgba(0,0,0, .8);
+}
+.mbsc-wp-light .dw-cal-events-arr {
+    border-color: rgba(0,0,0, .8) transparent transparent;
+}
+.mbsc-wp-light .dw-cal-events-b .dw-cal-events-arr {
+    border-color: transparent transparent rgba(0,0,0, .8);
+}
+.mbsc-wp-light .dw-cal-day-m {
+    border-color: rgb(0,0,0) rgb(0,0,0) transparent transparent;
+}
+.mbsc-wp-light .dw-cal-day-fg {
+    border-color: rgb(166,166,166);
+}
+.mbsc-wp-light .dw-cal-day-hl .dw-cal-day-fg {
+    background: rgb(0,0,0);
+    border-color: rgb(0,0,0);
+    color: rgb(222,222,222);
+}
+.mbsc-wp-light .dwb-a:before,
+.mbsc-wp-light .dwb-a .dw-cal-btn-txt:before  {
+    background: rgb(0,0,0);
+}
+.mbsc-wp-light .dwb.dwb-a:before ,
+.mbsc-wp-light .dwb-a .dw-cal-btn-txt:before {
+    color: rgb(222,222,222);
+}
+.mbsc-wp-light .dwb:before,
+.mbsc-wp-light .dw-cal-btn-txt:before {
+    color: rgb(0,0,0);
+    border-color:  rgb(0,0,0);
+}
+.mbsc-wp-light .dw-week-nrs-c {
+    background: rgb(222,222,222);
+}
+/* Rating */
+.mbsc-wp-light .mbsc-rating-icon {
+    color: inherit;
+}
+.mbsc-wp-light .mbsc-rating-circle {
+    background: rgb(0,0,0);
+    color: rgb(222,222,222);
+}
+.mbsc-wp-light .mbsc-rating-circle-unf {
+    background: #646464;
+}
+/* Timer */
+.mbsc-wp-light.dw-timespan .dwl,
+.mbsc-wp-light.dw-timer .dwl {
+    color: #000;
+}
+/* Numpad */
+.mbsc-wp-light .mbsc-np-btn {
+    background: rgb(204,204,204);
+    border: 2px solid rgb(222,222,222);
+}
+.mbsc-wp-light .mbsc-np-btn.dwb-a {
+    background: rgb(181,181,181);
+    color: #000;
+}
+.mbsc-wp-light .mbsc-np-btn.dwb-d {
+    color: rgb(0,0,0);
+    opacity: .5;
+}
+.mbsc-wp-light .mbsc-np-del.dwb-a:before {
+    color: rgb(0,0,0);
+}
+.mbsc-wp-light .mbsc-np-btn-empty {
+    background: none;
+}
+/* Listview */
+.mbsc-lv-wp-light .mbsc-lv-item,
+.mbsc-lv-wp-light .mbsc-lv-gr-title {
+    background: rgb(222,222,222);
+    color: rgb(0,0,0);
+}
+.mbsc-lv-wp-light.mbsc-lv-alt-row .mbsc-lv-item:nth-child(even) {
+    background: rgb(240,240,240);
+}
+/* Menustrip */
+.mbsc-wp-light.mbsc-ms-c {
+    background: rgb(222,222,222);
+    color: rgb(0,0,0);
+}
+.mbsc-wp-light .mbsc-ms-item {
+    color: rgb(166,166,166);
+}
+.mbsc-wp-light .mbsc-ms-ic:before {
+    border-color: rgb(0,0,0);
+}
+.mbsc-wp-light .mbsc-ms-item-sel .mbsc-ms-ic:before,
+.mbsc-wp-light .mbsc-btn-a .mbsc-ms-ic:before {
+    background: rgb(0,0,0);
+    color: rgb(222,222,222);
+}
+.mbsc-wp-light.mbsc-ms-icons .mbsc-ms-item {
+    color: rgb(0,0,0);
+}
+.mbsc-wp-light .mbsc-ms-item-sel {
+    color: rgb(0,0,0);
+}

whepi-ui/static/js/app.plugin.js

@@ -0,0 +1,166 @@
++function ($) { "use strict";
+
+  $(function(){
+ 	
+	// sparkline
+	var sr, sparkline = function($re){
+		$(".sparkline").each(function(){
+			var $data = $(this).data();
+			if($re && !$data.resize) return;
+			($data.type == 'pie') && $data.sliceColors && ($data.sliceColors = eval($data.sliceColors));
+			($data.type == 'bar') && $data.stackedBarColor && ($data.stackedBarColor = eval($data.stackedBarColor));
+			$data.valueSpots = {'0:': $data.spotColor};
+			$(this).sparkline('html', $data);
+		});
+	};
+	$(window).resize(function(e) {
+		clearTimeout(sr);
+		sr = setTimeout(function(){sparkline(true)}, 500);
+	});
+	sparkline(false);
+
+	// easypie
+	var easypie = function(){
+	$('.easypiechart').each(function(){
+		var $this = $(this), 
+		$data = $this.data(), 
+		$step = $this.find('.step'), 
+		$target_value = parseInt($($data.target).text()),
+		$value = 0;
+		$data.barColor || ( $data.barColor = function($percent) {
+	        $percent /= 100;
+	        return "rgb(" + Math.round(200 * $percent) + ", 200, " + Math.round(200 * (1 - $percent)) + ")";
+	    });
+		$data.onStep =  function(value){
+			$value = value;
+			$step.text(parseInt(value));
+			$data.target && $($data.target).text(parseInt(value) + $target_value);
+		}
+		$data.onStop =  function(){
+			$target_value = parseInt($($data.target).text());
+			$data.update && setTimeout(function() {
+		        $this.data('easyPieChart').update(100 - $value);
+		    }, $data.update);
+		}
+			$(this).easyPieChart($data);
+		});
+	};
+	easypie();
+  
+	// datepicker
+	$(".datepicker-input").each(function(){ $(this).datepicker();});
+
+	// dropfile
+	$('.dropfile').each(function(){
+		var $dropbox = $(this);
+		if (typeof window.FileReader === 'undefined') {
+		  $('small',this).html('File API & FileReader API not supported').addClass('text-danger');
+		  return;
+		}
+
+		this.ondragover = function () {$dropbox.addClass('hover'); return false; };
+		this.ondragend = function () {$dropbox.removeClass('hover'); return false; };
+		this.ondrop = function (e) {
+		  e.preventDefault();
+		  $dropbox.removeClass('hover').html('');
+		  var file = e.dataTransfer.files[0],
+		      reader = new FileReader();
+		  reader.onload = function (event) {
+		  	$dropbox.append($('<img>').attr('src', event.target.result));
+		  };
+		  reader.readAsDataURL(file);
+		  return false;
+		};
+	});
+
+	// slider
+	$('.slider').each(function(){
+		$(this).slider();
+	});
+
+	// sortable
+	if ($.fn.sortable) {
+	  $('.sortable').sortable();
+	}
+
+	// slim-scroll
+	$('.no-touch .slim-scroll').each(function(){
+		var $self = $(this), $data = $self.data(), $slimResize;
+		$self.slimScroll($data);
+		$(window).resize(function(e) {
+			clearTimeout($slimResize);
+			$slimResize = setTimeout(function(){$self.slimScroll($data);}, 500);
+		});
+    $(document).on('updateNav', function(){
+      $self.slimScroll($data);
+    });
+	});	
+
+	// portlet
+	$('.portlet').each(function(){
+		$(".portlet").sortable({
+	        connectWith: '.portlet',
+            iframeFix: false,
+            items: '.portlet-item',
+            opacity: 0.8,
+            helper: 'original',
+            revert: true,
+            forceHelperSize: true,
+            placeholder: 'sortable-box-placeholder round-all',
+            forcePlaceholderSize: true,
+            tolerance: 'pointer'
+	    });
+    });
+
+	// docs
+  $('#docs pre code').each(function(){
+	    var $this = $(this);
+	    var t = $this.html();
+	    $this.html(t.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
+	});
+
+	// table select/deselect all
+	$(document).on('change', 'table thead [type="checkbox"]', function(e){
+		e && e.preventDefault();
+		var $table = $(e.target).closest('table'), $checked = $(e.target).is(':checked');
+		$('tbody [type="checkbox"]',$table).prop('checked', $checked);
+	});
+
+	// random progress
+	$(document).on('click', '[data-toggle^="progress"]', function(e){
+		e && e.preventDefault();
+
+		var $el = $(e.target),
+		$target = $($el.data('target'));
+		$('.progress', $target).each(
+			function(){
+				var $max = 50, $data, $ps = $('.progress-bar',this).last();
+				($(this).hasClass('progress-xs') || $(this).hasClass('progress-sm')) && ($max = 100);
+				$data = Math.floor(Math.random()*$max)+'%';
+				$ps.css('width', $data).attr('data-original-title', $data);
+			}
+		);
+	});
+	
+	// add notes
+	function addMsg($msg){
+		var $el = $('.nav-user'), $n = $('.count:first', $el), $v = parseInt($n.text());
+		$('.count', $el).fadeOut().fadeIn().text($v+1);
+		$($msg).hide().prependTo($el.find('.list-group')).slideDown().css('display','block');
+	}
+	var $msg = '<a href="#" class="media list-group-item">'+
+                  '<span class="pull-left thumb-sm text-center">'+
+                    '<i class="fa fa-envelope-o fa-2x text-success"></i>'+
+                  '</span>'+
+                  '<span class="media-body block m-b-none">'+
+                    'Sophi sent you a email<br>'+
+                    '<small class="text-muted">1 minutes ago</small>'+
+                  '</span>'+
+                '</a>';	
+  setTimeout(function(){addMsg($msg);}, 1500);
+
+	//chosen
+	$(".chosen-select").length && $(".chosen-select").chosen();
+
+  });
+}(window.jQuery);

whepi-ui/static/js/base64.js

@@ -0,0 +1,183 @@
+/**
+* UTF16和UTF8转换对照表
+* U+00000000 – U+0000007F 	0xxxxxxx
+* U+00000080 – U+000007FF 	110xxxxx 10xxxxxx
+* U+00000800 – U+0000FFFF 	1110xxxx 10xxxxxx 10xxxxxx
+* U+00010000 – U+001FFFFF 	11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
+* U+00200000 – U+03FFFFFF 	111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
+* U+04000000 – U+7FFFFFFF 	1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
+*/
+var Base64 = {
+	// 转码表
+	table : [
+			'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
+			'I', 'J', 'K', 'L', 'M', 'N', 'O' ,'P',
+			'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
+			'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
+			'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
+			'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
+			'w', 'x', 'y', 'z', '0', '1', '2', '3',
+			'4', '5', '6', '7', '8', '9', '+', '/'
+	],
+	UTF16ToUTF8 : function(str) {
+		var res = [], len = str.length;
+		for (var i = 0; i < len; i++) {
+			var code = str.charCodeAt(i);
+			if (code > 0x0000 && code <= 0x007F) {
+				// 单字节，这里并不考虑0x0000，因为它是空字节
+				// U+00000000 – U+0000007F 	0xxxxxxx
+				res.push(str.charAt(i));
+			} else if (code >= 0x0080 && code <= 0x07FF) {
+				// 双字节
+				// U+00000080 – U+000007FF 	110xxxxx 10xxxxxx
+				// 110xxxxx
+				var byte1 = 0xC0 | ((code >> 6) & 0x1F);
+				// 10xxxxxx
+				var byte2 = 0x80 | (code & 0x3F);
+				res.push(
+					String.fromCharCode(byte1), 
+					String.fromCharCode(byte2)
+				);
+			} else if (code >= 0x0800 && code <= 0xFFFF) {
+				// 三字节
+				// U+00000800 – U+0000FFFF 	1110xxxx 10xxxxxx 10xxxxxx
+				// 1110xxxx
+				var byte1 = 0xE0 | ((code >> 12) & 0x0F);
+				// 10xxxxxx
+				var byte2 = 0x80 | ((code >> 6) & 0x3F);
+				// 10xxxxxx
+				var byte3 = 0x80 | (code & 0x3F);
+				res.push(
+					String.fromCharCode(byte1), 
+					String.fromCharCode(byte2), 
+					String.fromCharCode(byte3)
+				);
+			} else if (code >= 0x00010000 && code <= 0x001FFFFF) {
+				// 四字节
+				// U+00010000 – U+001FFFFF 	11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
+			} else if (code >= 0x00200000 && code <= 0x03FFFFFF) {
+				// 五字节
+				// U+00200000 – U+03FFFFFF 	111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
+			} else /** if (code >= 0x04000000 && code <= 0x7FFFFFFF)*/ {
+				// 六字节
+				// U+04000000 – U+7FFFFFFF 	1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
+			}
+		}
+
+		return res.join('');
+	},
+	UTF8ToUTF16 : function(str) {
+		var res = [], len = str.length;
+		var i = 0;
+		for (var i = 0; i < len; i++) {
+			var code = str.charCodeAt(i);
+			// 对第一个字节进行判断
+			if (((code >> 7) & 0xFF) == 0x0) {
+				// 单字节
+				// 0xxxxxxx
+				res.push(str.charAt(i));
+			} else if (((code >> 5) & 0xFF) == 0x6) {
+				// 双字节
+				// 110xxxxx 10xxxxxx
+				var code2 = str.charCodeAt(++i);
+				var byte1 = (code & 0x1F) << 6;
+				var byte2 = code2 & 0x3F;
+				var utf16 = byte1 | byte2;
+				res.push(Sting.fromCharCode(utf16));
+			} else if (((code >> 4) & 0xFF) == 0xE) {
+				// 三字节
+				// 1110xxxx 10xxxxxx 10xxxxxx
+				var code2 = str.charCodeAt(++i);
+				var code3 = str.charCodeAt(++i);
+				var byte1 = (code << 4) | ((code2 >> 2) & 0x0F);
+				var byte2 = ((code2 & 0x03) << 6) | (code3 & 0x3F);
+				var utf16 = ((byte1 & 0x00FF) << 8) | byte2
+				res.push(String.fromCharCode(utf16));
+			} else if (((code >> 3) & 0xFF) == 0x1E) {
+				// 四字节
+				// 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
+			} else if (((code >> 2) & 0xFF) == 0x3E) {
+				// 五字节
+				// 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
+			} else /** if (((code >> 1) & 0xFF) == 0x7E)*/ {
+				// 六字节
+				// 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
+			}
+		}
+
+		return res.join('');
+	},
+	encode : function(str) {
+		if (!str) {
+			return '';
+		}
+		var utf8    = this.UTF16ToUTF8(str); // 转成UTF8
+		var i = 0; // 遍历索引
+		var len = utf8.length;
+		var res = [];
+		while (i < len) {
+			var c1 = utf8.charCodeAt(i++) & 0xFF;
+			res.push(this.table[c1 >> 2]);
+			// 需要补2个=
+			if (i == len) {
+				res.push(this.table[(c1 & 0x3) << 4]);
+				res.push('==');
+				break;
+			}
+			var c2 = utf8.charCodeAt(i++);
+			// 需要补1个=
+			if (i == len) {
+				res.push(this.table[((c1 & 0x3) << 4) | ((c2 >> 4) & 0x0F)]);
+				res.push(this.table[(c2 & 0x0F) << 2]);
+				res.push('=');
+				break;
+			}
+			var c3 = utf8.charCodeAt(i++);
+			res.push(this.table[((c1 & 0x3) << 4) | ((c2 >> 4) & 0x0F)]);
+			res.push(this.table[((c2 & 0x0F) << 2) | ((c3 & 0xC0) >> 6)]);
+			res.push(this.table[c3 & 0x3F]);
+		}
+
+		return res.join('');
+	},
+	decode : function(str) {
+		if (!str) {
+			return '';
+		}
+
+		var len = str.length;
+		var i   = 0;
+		var res = [];
+
+		while (i < len) {
+			code1 = this.table.indexOf(str.charAt(i++));
+			code2 = this.table.indexOf(str.charAt(i++));
+			code3 = this.table.indexOf(str.charAt(i++));
+			code4 = this.table.indexOf(str.charAt(i++));
+
+			c1 = (code1 << 2) | (code2 >> 4);
+			c2 = ((code2 & 0xF) << 4) | (code3 >> 2);
+			c3 = ((code3 & 0x3) << 6) | code4;
+
+			res.push(String.fromCharCode(c1));
+
+			if (code3 != 64) {
+				res.push(String.fromCharCode(c2));
+			}
+			if (code4 != 64) {
+				res.push(String.fromCharCode(c3));
+			}
+
+		}
+
+		return this.UTF8ToUTF16(res.join(''));
+	}
+};
+
+/*
+console.group('Test Base64: ');
+var b64 = Base64.encode('Hello, oschina！又是一年春来到~');
+console.log(b64);
+console.log(Base64.decode(b64));
+console.groupEnd();
+*/

whepi-ui/static/js/calendar/bootstrap_calendar.css

@@ -0,0 +1,87 @@
+.calendar{
+}
+.calendar a{
+    text-decoration: none;
+    cursor: pointer;
+}
+.calendar td{
+    text-align: center;
+    border:none !important;
+    padding: 0 !important;
+}
+.calendar .header td.year{
+    width: 72%;
+}
+
+.calendar .header i{
+    font-size: 14px;
+    padding: 10px 0;
+    display: inline-block;
+    cursor: pointer;
+}
+.calendar .prev_month{
+    float: left;
+}
+.calendar .next_month{
+    float: right;
+}
+.calendar .year{
+    text-align: center;
+    font-weight: 500;
+}
+.calendar .week_days{
+    font-weight: 500;
+}
+.calendar .table{
+    margin: 0;
+}
+.calendar .table td{
+    position: relative;
+    padding: 0;
+    border: none;
+}
+
+.calendar .table td.event a{
+    border:1px solid rgba(255,255,255,.2);
+    background-color: rgba(0,0,0,.05);
+    border-radius: 30px;
+}
+
+.calendar .table td.event a:hover{
+    background-color: rgba(0,0,0,.15);
+}
+
+.calendar .table td a{
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    line-height: 27px;
+}
+.calendar .table td span{
+    width: 4px;
+    height: 4px;
+    border-radius: 10px;
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    margin-left: -2px;
+    bottom: 4px;
+}
+.calendar .week_days td{
+}
+.calendar .visualmonthyear {
+}
+.noborder, .noborder .calendar, .noborder .calendar * {
+    border: none !important;
+}
+.dropdown-menu .calendar td a {
+    padding: 0px;
+}
+
+.calendar .popover, .calendar .popover a{
+    color: #666 !important;
+}
+
+.calendar .popover .popover-title{
+    white-space: nowrap;
+}