master

分支 (1)

管理

管理

master

TodoList-Html
/
index.html

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <!--删除默认的苹果工具栏和菜单栏-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--控制状态栏显示样式-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- title -->
    <title>TodoList</title>
    <!-- Framework7 iOS主题风格CSS-->
    <link rel="stylesheet" href="css/framework7.material.min.css">
    <!--  Framework7 iOS相关的颜色样式 -->
    <link rel="stylesheet" href="css/framework7.material.colors.min.css">
    <!-- 字体图标样式-->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/my-app.css">
    <style>
        .statusbar-overlay {
            background: yellow;
        }

        .navbar-fixed.toolbar-fixed .page-content{
            padding-top: 56px;
        }
    </style>
</head>
<body class="theme-bluegray">
<!-- 用于全屏模式的状态栏(PhoneGap) -->
<div class="statusbar-overlay"></div>

<!-- 侧边栏 -->
<!-- 首先，我们需要添加面板的覆盖层，在面板打开时覆盖应用程序 -->
<div class="panel-overlay"></div>
<!-- 左面板显示效果-->
<div class="panel panel-left panel-reveal">
    <div class="content-block">
        <div class="list-block">
            <!-- First group-->
            <div class="list-group">
                <ul>
                    <li class="list-group-title">第一组</li>
                    <li class="item-content notification-multi">
                        <div class="item-media"><i class="fa fa-fw fa-drupal"></i></div>
                        <div class="item-inner">
                            <div class="item-title"><a href="" class="link open-login-screen">账号</a></div>
                            <div class="item-after">标签</div>
                        </div>
                    </li>
                    <li class="item-content notification-multi">
                        <div class="item-media"><i class="fa fa-fw fa-check-square-o"></i></div>
                        <div class="item-inner">
                            <div class="item-title">全部待办</div>
                            <div class="item-after"><span class="badge">5</span></div>
                        </div>
                    </li>
                    <li class="item-content notification-multi">
                        <div class="item-media"><i class="fa fa-fw fa-calendar-check-o"></i></div>
                        <div class="item-inner">
                            <div class="item-title">全部打卡</div>
                            <div class="item-after"><span class="badge">5</span></div>
                        </div>
                    </li>
                    <li class="item-content notification-multi">
                        <div class="item-media"><i class="fa fa-fw fa-cog"></i></div>
                        <div class="item-inner">
                            <div class="item-title"><a href="html/setting.html" class="link">设置</a></div>
                        </div>
                    </li>
                    <li class="item-content notification-multi">
                        <div class="item-media"><i class="fa fa-fw fa-sign-out"></i></div>
                        <div class="item-inner">
                            <div class="item-title">退出登录</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 侧边栏结束-->

<!-- 视图 -->
<div class="views">
    <!-- 主视图，必须包含view-main类 -->
    <div class="view view-main">

        <!-- 页面容器，因为我们使用固定的navbar和工具栏，它有额外的适当的类-->
        <!--固定的navbar-fixed toolbar-fixed-->
        <div class="pages">
            <!--页面，“data-page”包含页面名称 -->
            <div data-page="index" class="page  navbar-fixed toolbar-fixed">

                <!-- 顶部导航条 -->
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="center">
                            <!-- 搜索条 -->
                            <form data-search-list=".list-block-search" data-search-in=".item-title"
                                  class="searchbar searchbar-init">
                                <div class="searchbar-input">
                                    <input type="search" placeholder="Search">
                                    <a href="#" class="searchbar-clear"></a>
                                </div>
                                <a href="#" class="searchbar-cancel">取消</a>
                            </form>
                        </div>
                        <div class="right">
                            <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
                        </div>
                    </div>
                </div>

                <!-- Search bar overlay -->
                <div class="searchbar-overlay">搜索栏覆盖</div>

                <!-- 可滚动页面内容 -->
                <div class="page-content">
                    <!-- 搜索框，如果没有找到，将显示该块 -->
                    <div class="content-block searchbar-not-found">
                        <div class="content-block-inner">什么都没找到</div>
                    </div>

                    <!--卡片式-->
                    <div class="card">
                        <div class="card-content">
                            <div class="list-block searchbar-found  list-block-search searchbar-found">
                                <ul id="index-content">
                                    <!-- Single chekbox item -->
                                    <li class="swipeout">
                                        <label class="label-checkbox swipeout-content item-content">
                                            <!-- Checked by default -->
                                            <input type="checkbox" name="my-checkbox" value="Books">
                                            <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
                                            <div class="item-inner" style="display: inline-block;">
                                                <a href="html/detail.html" class="taphold">
                                                    <div class="item-title">Books</div>
                                                </a>
                                            </div>
                                        </label>
                                        <!--侧滑按钮-->
                                        <div class="swipeout-actions-right">
                                            <a href="#" class="action1">删除</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 卡片式结束-->

                    <!--<a href="#" class="taphold">长安我！</a>-->
                </div>
            </div>
        </div>

        <!-- Speed Dial Wrap -->
        <div class="speed-dial" id="speedDial">
            <!-- FAB inside will open Speed Dial actions -->
            <a href="#" class="floating-button">
                <!-- First icon is visible when Speed Dial actions are closed -->
                <i class="icon icon-plus"></i>
                <!-- Second icon is visible when Speed Dial actions are opened -->
                <i class="icon icon-close"></i>
            </a>

            <!-- Speed Dial Actions -->
            <div class="speed-dial-buttons">
                <!-- First Speed Dial button -->
                <a href="javascript:;" id="scrolltop">
                    <i class="fa fa-fw fa-arrow-up"></i>
                </a>
                <!-- Second Speed Dial  button -->
                <a href="#">
                    <i class="fa fa-fw fa-photo"></i>
                </a>
                <!-- Third Speed Dial  button -->
                <a href="html/edit.html">
                    <i class="fa fa-fw fa-pencil"></i>
                </a>
            </div>
        </div>
        <!-- End of Speed Dial -->
    </div>
</div>

<!--登陆框-->
<div class="login-screen">
    <!-- Default view-page layout -->
    <div class="view">
        <div class="page">
            <!-- page-content has additional login-screen content -->
            <div class="page-content login-screen-content">
                <div class="login-screen-title">登&nbsp;&nbsp;&nbsp;录</div>
                <!-- Login form -->
                <form>
                    <div class="list-block">
                        <ul>
                            <li class="item-content">
                                <div class="item-media" style="min-width: inherit"><i class="fa fa-fw fa-user"></i></div>
                                <div class="item-inner">
                                    <div class="item-title floating-label">邮箱/手机号</div>
                                    <div class="item-input">
                                        <input type="text" name="username" placeholder="邮箱/手机号"/>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content">
                                <div class="item-media" style="min-width: inherit"><i class="fa fa-fw fa-lock"></i></div>
                                <div class="item-inner">
                                    <div class="item-title floating-label">密码</div>
                                    <div class="item-input">
                                        <input type="password" name="password" placeholder="密码"/>
                                    </div>
                                </div>
                            </li>

                            <li class="item-content" style="padding-right: 16px;">
                                <a href="#" data-popup=".popup-register" class="open-popup">注册</a>
                                <a href="html/findPassword.html">忘记密码</a>
                            </li>
                            <li class="item-content buttons-row">
                                <div class="item-inner">
                                <a href="#" class="button button-big button-fill button-raised">登&nbsp;&nbsp;&nbsp;录</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="list-block">
                        <div class="list-block-label">
                            <ul>
                                <li>---------- 使用第三方登录 ----------</li>
                                <li class="row" style="margin-top: 20px;">
                                    <span class="col-auto"></span>
                                    <a href="#" class="col-auto">
                                        <i class="fa fa-fw fa-wechat fa-lg"></i>
                                    </a>
                                    <a href="#"  class="col-auto">
                                        <i class="fa fa-fw fa-weibo fa-lg"></i>
                                    </a>
                                    <a href="#"  class="col-auto">
                                        <i class="fa fa-fw fa-qq fa-lg"></i>
                                    </a>
                                    <span class="col-auto"></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="list-block">
                        <div class="list-block-label" style="position: fixed; right: 35%; bottom: 20px;">
                            <a href="#" class="close-login-screen">关闭登陆窗</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 注册框弹窗-->
<div class="popup tablet-fullscreen popup-register login-screen-content">
    <div class="login-screen-title">注&nbsp;&nbsp;&nbsp;册</div>
    <!-- register form -->
    <form name="registerForm" method="post" id="registerForm">
        <div class="list-block">
            <ul>
                <li class="item-content">
                    <div class="item-media" style="min-width: inherit"><i class="fa fa-fw fa-user"></i></div>
                    <div class="item-inner">
                        <div class="item-title floating-label">邮箱</div>
                        <div class="item-input">
                            <input type="text" name="username" placeholder="邮箱" id="reg-username"/>
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-media" style="min-width: inherit"><i class="fa fa-fw fa-lock"></i></div>
                    <div class="item-inner">
                        <div class="item-title floating-label">密码</div>
                        <div class="item-input">
                            <input type="password" name="password" placeholder="密码" id="reg-password"/>
                        </div>
                    </div>
                </li>

                <li class="item-content buttons-row">
                    <div class="item-inner">
                        <a href="#" class="button button-big button-fill button-raised" onclick="register()">注&nbsp;&nbsp;&nbsp;册</a>
                    </div>
                </li>

                <li>
                    <label for="serviceAgreement">
                        <input type="checkbox" id="serviceAgreement">同意
                        <a href="#">《服务协议》</a>
                    </label>
                </li>
            </ul>
        </div>
        <div class="list-block">
            <div class="list-block-label">
                <ul>
                    <li>---------- 使用第三方登录 ----------</li>
                    <li class="row" style="margin-top: 20px;">
                        <span class="col-auto"></span>
                        <a href="#" class="col-auto">
                            <i class="fa fa-fw fa-wechat fa-lg"></i>
                        </a>
                        <a href="#"  class="col-auto">
                            <i class="fa fa-fw fa-weibo fa-lg"></i>
                        </a>
                        <a href="#"  class="col-auto">
                            <i class="fa fa-fw fa-qq fa-lg"></i>
                        </a>
                        <span class="col-auto"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="list-block">
            <div class="list-block-label" style="position: fixed; right: 35%; bottom: 20px;">
                <a href="#" class="close-popup">已有账号</a>
            </div>
        </div>
    </form>
</div>

</body>

<!-- Framework7 库-->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- 野狗云-->
<script src="https://cdn.wilddog.com/sdk/js/2.5.8/wilddog.js"></script>
<!--富文本编辑器-->
<script type="text/javascript" src="js/ckeditor.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
<!-- 自定义 js-->
<script type="text/javascript" src="js/my-app.js"></script>
</html>