版本1:静态壁纸背景
版本二:动态小球跳动背景
f86084d896df68b0ba2e64467afe4983_raw
html代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<title>TODO便签</title>
<link rel="stylesheet" href="/assets/css/index.css">
<link rel="stylesheet" href="/assets/css/icon.css">
</head>
<body>
<div id="background"></div>
<div id="app">
<div id="msg"></div>
<div id="container">
<div id="toolsList">
<div class="top">
<div>
<div class="icon"><i class="fas fa-user-circle"></i></div>
<div class="title">账号</div>
</div>
<div class="active" activeAble id="list_memo">
<div class="icon"><i class="fas fa-edit"></i></div>
<div class="title">笔记</div>
</div>
<div activeAble id="list_todos">
<div class="icon"><i class="fas fa-list-ul"></i></div>
<div class="title">代办</div>
</div>
<div activeAble id="list_star">
<div class="icon"><i class="fas fa-star"></i></div>
<div class="title">收藏</div>
</div>
</div>
<!-- <div class="bottom">
<div>
<div class="icon" id="bottom_setting"><i class="fas fa-cog"></i></div>
<div class="title">设置</div>
</div>
</div> -->
</div>
<div id="memosList">
<div class="topTool">
<div class="searchBar">
<i class="fal fa-search"></i>
<input type="text" autocomplete="off" placeholder="Search..." id="searchBox">
</div>
<div class="addBar" id="mainAddInput">
<i class="fal fa-plus"></i>
</div>
</div>
<div id="totalList"></div>
</div>
<div id="editor">
<div class="header">
<div class="pages">
<div class="page_back page_item" style="display: none;"><i class="fas fa-chevron-left"></i></div>
<div class="page_item">标题</div>
</div>
<div class="page">
<div class="information">
<div class="image" style="background-image: url(/assets/image/icon_5.png);">
<div class="content" id="note_cover"></div>
</div>
<div class="title">
<input type="text" id="note_title" placeholder="标题">
</div>
</div>
<div class="about">
<i class="fas fa-star" id="about_star"></i>
<i class="fal fa-ellipsis-h" id="about_more"></i>
</div>
</div>
</div>
<div class="editor-container">
<div id="editorTextarea"></div>
</div>
</div>
</div>
</div>
<script src="/assets/js/marked.js"></script>
<script src="/assets/js/index.js"></script>
</body>
</html>