10185101272
/
Personal-Collections-Website
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

拼接功能

master
= 4 years ago
parent
09be7de019
commit
754d5b9f1b
12 changed files with 928 additions and 473 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -0
      .idea/.gitignore
  2. +11
    -0
      .idea/Personal-Collections-Website.iml
  3. +6
    -0
      .idea/inspectionProfiles/profiles_settings.xml
  4. +7
    -0
      .idea/misc.xml
  5. +8
    -0
      .idea/modules.xml
  6. +6
    -0
      .idea/vcs.xml
  7. +217
    -0
      APP/static/js/wsy.js
  8. +294
    -150
      APP/templates/add.html
  9. +50
    -0
      APP/templates/main-page(unfinished).html
  10. +260
    -150
      APP/templates/personal.html
  11. +17
    -1
      APP/templates/square.html
  12. +49
    -172
      APP/templates/text-page(unfinished).html

+ 3
- 0
.idea/.gitignore View File

@ -0,0 +1,3 @@
# 默认忽略的文件
/shelf/
/workspace.xml

+ 11
- 0
.idea/Personal-Collections-Website.iml View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="PYTHON_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
<component name="TestRunnerService">
<option name="PROJECT_TEST_RUNNER" value="pytest" />
</component>
</module>

+ 6
- 0
.idea/inspectionProfiles/profiles_settings.xml View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<settings>
<option name="USE_PROJECT_PROFILE" value="false" />
<version value="1.0" />
</settings>
</component>

+ 7
- 0
.idea/misc.xml View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7" project-jdk-type="Python SDK" />
<component name="PyCharmProfessionalAdvertiser">
<option name="shown" value="true" />
</component>
</project>

+ 8
- 0
.idea/modules.xml View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Personal-Collections-Website.iml" filepath="$PROJECT_DIR$/.idea/Personal-Collections-Website.iml" />
</modules>
</component>
</project>

+ 6
- 0
.idea/vcs.xml View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

+ 217
- 0
APP/static/js/wsy.js View File

@ -0,0 +1,217 @@
var url_prefix = "http://127.0.0.1:5000/";
function sendRequest(url_suffix, data, func) {
var url = url_prefix + url_suffix;
$.ajax({
type: "post",
url: url,
data: data,
dataType: "json",
processData: false,
contentType: false,
success: function (data) {
func(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
console.log(this);
}
});
}
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
function getBlock() {
var url = "block/select";
var data = new FormData();
data.append("collection_id",id);
sendRequest(url, data,
function (data) {
var list = $("#textList");
var blocks = data.blocks;
for (i in blocks) {
var content;
var block = blocks[i];
if (block.type == 'img') {
content = document.createElement('img');
content.src = block.content;
}
else if (block.type == 'text') {
content = document.createElement('div');
content.innerText = block.content;
}
else {
content = document.createElement('div');
content.innerText = block.content;
}
content.id = block.id;
var block = gengerate_block(content,"block");
list.append(block);
}
});
}
function submit(obj, content, type, order) {
var url = "http://127.0.0.1:5000/block/add";
var data = new FormData();
data.append("content", content);
data.append('type', type);
data.append('order', order);
var that = obj;
$.ajax({
type: "post",
url: url,
data: data,
dataType: "json",
processData: false,
contentType: false,
success: function (data) {
that.id = data.id;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
console.log(this);
}
});
}
function swap(obj, dir,type) {
var url;
if (type == "block") {
url = "block/swap";
}
else {
url = "collection/swap";
}
var pos = obj.parentNode.id;
if (dir == 'up' && pos > 0) {
pos--;
}
if (dir == 'down' && dir < $("#textList").childElementCount - 1) {
pos++;
}
var data = new FormData();
data.append("new_order", pos);
data.append("id", obj.id);
if (type == "block") {
sendRequest(url, data, getBlock);
}
else{
sendRequest(url, data, getCollection);
}
}
function delete_block(obj,type) {
var url;
var data = new FormData();
data.append("collection_id", id);
if (type == "block") {
data.append("block_id", obj.id);
url = "block/delete";
}
else {
url = "collection/delete";
}
sendRequest(url, data, function () { ;});
}
function gengerate_block(content,type) {
var obj = document.createElement("div");
obj.className = "standard-input";
obj.id = document.getElementById('textList').childElementCount;
var up = document.createElement("div");
up.addEventListener("click", function () { swap(content, 'up',type); });
up.innerText = "swap up";
obj.appendChild(up);
obj.appendChild(content);
var down = document.createElement("div");
down.addEventListener("click", function () { swap(content, 'down',type) });
down.innerText = "swap down";
obj.appendChild(down);
var delete_item = document.createElement("div");
delete_item.addEventListener("click", function () { delete_block(content,type); });
delete_item.innerText = "delete";
obj.appendChild(delete_item);
return obj;
}
function add(type) {
var text = $("#myInput").val();
$("#myInput").val("");
if (text == "") {
return;
}
let div = document.createElement('div');
div.innerText = text;
var block = gengerate_block(div,type)
$('#textList').append(block);
var data = new FormData();
data.append('type', 'text');
data.append('name', text);
data.append('order', block.id);
data.append('content', text);
var url;
if (type == 'block') {
data.append('collection_id');
url = "block/add";
}
else {
url = "collection/add";
}
sendRequest(url,data,function (data) {
div.id = data.id;
})
}
function getCollection() {
var url = "collection/select";
var data = new FormData();
if ("undefined" != typeof phonenum) {
data.append('phonenum',phonenum);
}
var name = $("#search").val();
if(name != ""){
data.append('name',name);
}
$("#textList").children().remove();
sendRequest(url, data, function (data) {
console.log(data);
var list = $("#textList");
var collections = data.collections;
for (i in collections) {
var content = document.createElement('div');
var collection = collections[i];
content.innerText = collection.name;
content.onclick = function () {
console.log("?");
window.location.href = "add.html?id=" + collection.id + "&name=" + collection.name;
};
content.className = "standard-box";
content.id = collection.id;
$('#textList').append(gengerate_block(content,"collection"));
}
});
}

+ 294
- 150
APP/templates/add.html View File

@ -2,27 +2,52 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<meta name="description" content="Huge selection of charts created with the React ChartJS Plugin">
<meta name="msapplication-tap-highlight" content="no">
<link href="../static/css/main.css" rel="stylesheet">
<script src="../static/js/jquery-3.5.1.min.js"></script>
<script src="../static/js/wsy.js"></script>
<script type="text/javascript">
var id,name;
$(document).ready(function () {
var request = GetRequest();
id = request['id'];
name = request['name'];
getBlock();
});
</script>
<!-- wsy:临时用样式 -->
<style>
.standard-input {
height: 100px;
width: 500px;
background-color: aliceblue;
margin-top: 1em;
}
</style>
</head>
<body>
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<div class="app-header header-shadow">
<div class="app-header__logo">
<div class="logo-src"></div>
<div class="header__pane ml-auto">
<div>
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic"
data-class="closed-sidebar">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
@ -41,14 +66,15 @@
</div>
<div class="app-header__menu">
<span>
<button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<button type="button"
class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<span class="btn-icon-wrapper">
<i class="fa fa-ellipsis-v fa-w-6"></i>
</span>
</button>
</span>
</div>
</div>
</div>
<div class="ui-theme-settings">
<button type="button" id="TooltipDemo" class="btn-open-options btn btn-warning">
@ -65,9 +91,11 @@
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<div class="switch has-switch switch-container-class" data-class="fixed-header">
<div class="switch has-switch switch-container-class"
data-class="fixed-header">
<div class="switch-animate switch-on">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<input type="checkbox" checked data-toggle="toggle"
data-onstyle="success">
</div>
</div>
</div>
@ -84,9 +112,11 @@
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<div class="switch has-switch switch-container-class" data-class="fixed-sidebar">
<div class="switch has-switch switch-container-class"
data-class="fixed-sidebar">
<div class="switch-animate switch-on">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<input type="checkbox" checked data-toggle="toggle"
data-onstyle="success">
</div>
</div>
</div>
@ -105,7 +135,9 @@
<div>
网页头部选项
</div>
<button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class" data-class="">
<button type="button"
class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class"
data-class="">
恢复默认
</button>
</h3>
@ -115,79 +147,115 @@
<h5 class="pb-2">选择配色
</h5>
<div class="theme-settings-swatches">
<div class="swatch-holder bg-primary switch-header-cs-class" data-class="bg-primary header-text-light">
<div class="swatch-holder bg-primary switch-header-cs-class"
data-class="bg-primary header-text-light">
</div>
<div class="swatch-holder bg-secondary switch-header-cs-class" data-class="bg-secondary header-text-light">
<div class="swatch-holder bg-secondary switch-header-cs-class"
data-class="bg-secondary header-text-light">
</div>
<div class="swatch-holder bg-success switch-header-cs-class" data-class="bg-success header-text-dark">
<div class="swatch-holder bg-success switch-header-cs-class"
data-class="bg-success header-text-dark">
</div>
<div class="swatch-holder bg-info switch-header-cs-class" data-class="bg-info header-text-dark">
<div class="swatch-holder bg-info switch-header-cs-class"
data-class="bg-info header-text-dark">
</div>
<div class="swatch-holder bg-warning switch-header-cs-class" data-class="bg-warning header-text-dark">
<div class="swatch-holder bg-warning switch-header-cs-class"
data-class="bg-warning header-text-dark">
</div>
<div class="swatch-holder bg-danger switch-header-cs-class" data-class="bg-danger header-text-light">
<div class="swatch-holder bg-danger switch-header-cs-class"
data-class="bg-danger header-text-light">
</div>
<div class="swatch-holder bg-light switch-header-cs-class" data-class="bg-light header-text-dark">
<div class="swatch-holder bg-light switch-header-cs-class"
data-class="bg-light header-text-dark">
</div>
<div class="swatch-holder bg-dark switch-header-cs-class" data-class="bg-dark header-text-light">
<div class="swatch-holder bg-dark switch-header-cs-class"
data-class="bg-dark header-text-light">
</div>
<div class="swatch-holder bg-focus switch-header-cs-class" data-class="bg-focus header-text-light">
<div class="swatch-holder bg-focus switch-header-cs-class"
data-class="bg-focus header-text-light">
</div>
<div class="swatch-holder bg-alternate switch-header-cs-class" data-class="bg-alternate header-text-light">
<div class="swatch-holder bg-alternate switch-header-cs-class"
data-class="bg-alternate header-text-light">
</div>
<div class="divider">
</div>
<div class="swatch-holder bg-vicious-stance switch-header-cs-class" data-class="bg-vicious-stance header-text-light">
<div class="swatch-holder bg-vicious-stance switch-header-cs-class"
data-class="bg-vicious-stance header-text-light">
</div>
<div class="swatch-holder bg-midnight-bloom switch-header-cs-class" data-class="bg-midnight-bloom header-text-light">
<div class="swatch-holder bg-midnight-bloom switch-header-cs-class"
data-class="bg-midnight-bloom header-text-light">
</div>
<div class="swatch-holder bg-night-sky switch-header-cs-class" data-class="bg-night-sky header-text-light">
<div class="swatch-holder bg-night-sky switch-header-cs-class"
data-class="bg-night-sky header-text-light">
</div>
<div class="swatch-holder bg-slick-carbon switch-header-cs-class" data-class="bg-slick-carbon header-text-light">
<div class="swatch-holder bg-slick-carbon switch-header-cs-class"
data-class="bg-slick-carbon header-text-light">
</div>
<div class="swatch-holder bg-asteroid switch-header-cs-class" data-class="bg-asteroid header-text-light">
<div class="swatch-holder bg-asteroid switch-header-cs-class"
data-class="bg-asteroid header-text-light">
</div>
<div class="swatch-holder bg-royal switch-header-cs-class" data-class="bg-royal header-text-light">
<div class="swatch-holder bg-royal switch-header-cs-class"
data-class="bg-royal header-text-light">
</div>
<div class="swatch-holder bg-warm-flame switch-header-cs-class" data-class="bg-warm-flame header-text-dark">
<div class="swatch-holder bg-warm-flame switch-header-cs-class"
data-class="bg-warm-flame header-text-dark">
</div>
<div class="swatch-holder bg-night-fade switch-header-cs-class" data-class="bg-night-fade header-text-dark">
<div class="swatch-holder bg-night-fade switch-header-cs-class"
data-class="bg-night-fade header-text-dark">
</div>
<div class="swatch-holder bg-sunny-morning switch-header-cs-class" data-class="bg-sunny-morning header-text-dark">
<div class="swatch-holder bg-sunny-morning switch-header-cs-class"
data-class="bg-sunny-morning header-text-dark">
</div>
<div class="swatch-holder bg-tempting-azure switch-header-cs-class" data-class="bg-tempting-azure header-text-dark">
<div class="swatch-holder bg-tempting-azure switch-header-cs-class"
data-class="bg-tempting-azure header-text-dark">
</div>
<div class="swatch-holder bg-amy-crisp switch-header-cs-class" data-class="bg-amy-crisp header-text-dark">
<div class="swatch-holder bg-amy-crisp switch-header-cs-class"
data-class="bg-amy-crisp header-text-dark">
</div>
<div class="swatch-holder bg-heavy-rain switch-header-cs-class" data-class="bg-heavy-rain header-text-dark">
<div class="swatch-holder bg-heavy-rain switch-header-cs-class"
data-class="bg-heavy-rain header-text-dark">
</div>
<div class="swatch-holder bg-mean-fruit switch-header-cs-class" data-class="bg-mean-fruit header-text-dark">
<div class="swatch-holder bg-mean-fruit switch-header-cs-class"
data-class="bg-mean-fruit header-text-dark">
</div>
<div class="swatch-holder bg-malibu-beach switch-header-cs-class" data-class="bg-malibu-beach header-text-light">
<div class="swatch-holder bg-malibu-beach switch-header-cs-class"
data-class="bg-malibu-beach header-text-light">
</div>
<div class="swatch-holder bg-deep-blue switch-header-cs-class" data-class="bg-deep-blue header-text-dark">
<div class="swatch-holder bg-deep-blue switch-header-cs-class"
data-class="bg-deep-blue header-text-dark">
</div>
<div class="swatch-holder bg-ripe-malin switch-header-cs-class" data-class="bg-ripe-malin header-text-light">
<div class="swatch-holder bg-ripe-malin switch-header-cs-class"
data-class="bg-ripe-malin header-text-light">
</div>
<div class="swatch-holder bg-arielle-smile switch-header-cs-class" data-class="bg-arielle-smile header-text-light">
<div class="swatch-holder bg-arielle-smile switch-header-cs-class"
data-class="bg-arielle-smile header-text-light">
</div>
<div class="swatch-holder bg-plum-plate switch-header-cs-class" data-class="bg-plum-plate header-text-light">
<div class="swatch-holder bg-plum-plate switch-header-cs-class"
data-class="bg-plum-plate header-text-light">
</div>
<div class="swatch-holder bg-happy-fisher switch-header-cs-class" data-class="bg-happy-fisher header-text-dark">
<div class="swatch-holder bg-happy-fisher switch-header-cs-class"
data-class="bg-happy-fisher header-text-dark">
</div>
<div class="swatch-holder bg-happy-itmeo switch-header-cs-class" data-class="bg-happy-itmeo header-text-light">
<div class="swatch-holder bg-happy-itmeo switch-header-cs-class"
data-class="bg-happy-itmeo header-text-light">
</div>
<div class="swatch-holder bg-mixed-hopes switch-header-cs-class" data-class="bg-mixed-hopes header-text-light">
<div class="swatch-holder bg-mixed-hopes switch-header-cs-class"
data-class="bg-mixed-hopes header-text-light">
</div>
<div class="swatch-holder bg-strong-bliss switch-header-cs-class" data-class="bg-strong-bliss header-text-light">
<div class="swatch-holder bg-strong-bliss switch-header-cs-class"
data-class="bg-strong-bliss header-text-light">
</div>
<div class="swatch-holder bg-grow-early switch-header-cs-class" data-class="bg-grow-early header-text-light">
<div class="swatch-holder bg-grow-early switch-header-cs-class"
data-class="bg-grow-early header-text-light">
</div>
<div class="swatch-holder bg-love-kiss switch-header-cs-class" data-class="bg-love-kiss header-text-light">
<div class="swatch-holder bg-love-kiss switch-header-cs-class"
data-class="bg-love-kiss header-text-light">
</div>
<div class="swatch-holder bg-premium-dark switch-header-cs-class" data-class="bg-premium-dark header-text-light">
<div class="swatch-holder bg-premium-dark switch-header-cs-class"
data-class="bg-premium-dark header-text-light">
</div>
<div class="swatch-holder bg-happy-green switch-header-cs-class" data-class="bg-happy-green header-text-light">
<div class="swatch-holder bg-happy-green switch-header-cs-class"
data-class="bg-happy-green header-text-light">
</div>
</div>
</li>
@ -195,7 +263,9 @@
</div>
<h3 class="themeoptions-heading">
<div>网页侧栏选项</div>
<button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class" data-class="">
<button type="button"
class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class"
data-class="">
恢复默认
</button>
</h3>
@ -205,79 +275,115 @@
<h5 class="pb-2">选择配色
</h5>
<div class="theme-settings-swatches">
<div class="swatch-holder bg-primary switch-sidebar-cs-class" data-class="bg-primary sidebar-text-light">
<div class="swatch-holder bg-primary switch-sidebar-cs-class"
data-class="bg-primary sidebar-text-light">
</div>
<div class="swatch-holder bg-secondary switch-sidebar-cs-class" data-class="bg-secondary sidebar-text-light">
<div class="swatch-holder bg-secondary switch-sidebar-cs-class"
data-class="bg-secondary sidebar-text-light">
</div>
<div class="swatch-holder bg-success switch-sidebar-cs-class" data-class="bg-success sidebar-text-dark">
<div class="swatch-holder bg-success switch-sidebar-cs-class"
data-class="bg-success sidebar-text-dark">
</div>
<div class="swatch-holder bg-info switch-sidebar-cs-class" data-class="bg-info sidebar-text-dark">
<div class="swatch-holder bg-info switch-sidebar-cs-class"
data-class="bg-info sidebar-text-dark">
</div>
<div class="swatch-holder bg-warning switch-sidebar-cs-class" data-class="bg-warning sidebar-text-dark">
<div class="swatch-holder bg-warning switch-sidebar-cs-class"
data-class="bg-warning sidebar-text-dark">
</div>
<div class="swatch-holder bg-danger switch-sidebar-cs-class" data-class="bg-danger sidebar-text-light">
<div class="swatch-holder bg-danger switch-sidebar-cs-class"
data-class="bg-danger sidebar-text-light">
</div>
<div class="swatch-holder bg-light switch-sidebar-cs-class" data-class="bg-light sidebar-text-dark">
<div class="swatch-holder bg-light switch-sidebar-cs-class"
data-class="bg-light sidebar-text-dark">
</div>
<div class="swatch-holder bg-dark switch-sidebar-cs-class" data-class="bg-dark sidebar-text-light">
<div class="swatch-holder bg-dark switch-sidebar-cs-class"
data-class="bg-dark sidebar-text-light">
</div>
<div class="swatch-holder bg-focus switch-sidebar-cs-class" data-class="bg-focus sidebar-text-light">
<div class="swatch-holder bg-focus switch-sidebar-cs-class"
data-class="bg-focus sidebar-text-light">
</div>
<div class="swatch-holder bg-alternate switch-sidebar-cs-class" data-class="bg-alternate sidebar-text-light">
<div class="swatch-holder bg-alternate switch-sidebar-cs-class"
data-class="bg-alternate sidebar-text-light">
</div>
<div class="divider">
</div>
<div class="swatch-holder bg-vicious-stance switch-sidebar-cs-class" data-class="bg-vicious-stance sidebar-text-light">
<div class="swatch-holder bg-vicious-stance switch-sidebar-cs-class"
data-class="bg-vicious-stance sidebar-text-light">
</div>
<div class="swatch-holder bg-midnight-bloom switch-sidebar-cs-class" data-class="bg-midnight-bloom sidebar-text-light">
<div class="swatch-holder bg-midnight-bloom switch-sidebar-cs-class"
data-class="bg-midnight-bloom sidebar-text-light">
</div>
<div class="swatch-holder bg-night-sky switch-sidebar-cs-class" data-class="bg-night-sky sidebar-text-light">
<div class="swatch-holder bg-night-sky switch-sidebar-cs-class"
data-class="bg-night-sky sidebar-text-light">
</div>
<div class="swatch-holder bg-slick-carbon switch-sidebar-cs-class" data-class="bg-slick-carbon sidebar-text-light">
<div class="swatch-holder bg-slick-carbon switch-sidebar-cs-class"
data-class="bg-slick-carbon sidebar-text-light">
</div>
<div class="swatch-holder bg-asteroid switch-sidebar-cs-class" data-class="bg-asteroid sidebar-text-light">
<div class="swatch-holder bg-asteroid switch-sidebar-cs-class"
data-class="bg-asteroid sidebar-text-light">
</div>
<div class="swatch-holder bg-royal switch-sidebar-cs-class" data-class="bg-royal sidebar-text-light">
<div class="swatch-holder bg-royal switch-sidebar-cs-class"
data-class="bg-royal sidebar-text-light">
</div>
<div class="swatch-holder bg-warm-flame switch-sidebar-cs-class" data-class="bg-warm-flame sidebar-text-dark">
<div class="swatch-holder bg-warm-flame switch-sidebar-cs-class"
data-class="bg-warm-flame sidebar-text-dark">
</div>
<div class="swatch-holder bg-night-fade switch-sidebar-cs-class" data-class="bg-night-fade sidebar-text-dark">
<div class="swatch-holder bg-night-fade switch-sidebar-cs-class"
data-class="bg-night-fade sidebar-text-dark">
</div>
<div class="swatch-holder bg-sunny-morning switch-sidebar-cs-class" data-class="bg-sunny-morning sidebar-text-dark">
<div class="swatch-holder bg-sunny-morning switch-sidebar-cs-class"
data-class="bg-sunny-morning sidebar-text-dark">
</div>
<div class="swatch-holder bg-tempting-azure switch-sidebar-cs-class" data-class="bg-tempting-azure sidebar-text-dark">
<div class="swatch-holder bg-tempting-azure switch-sidebar-cs-class"
data-class="bg-tempting-azure sidebar-text-dark">
</div>
<div class="swatch-holder bg-amy-crisp switch-sidebar-cs-class" data-class="bg-amy-crisp sidebar-text-dark">
<div class="swatch-holder bg-amy-crisp switch-sidebar-cs-class"
data-class="bg-amy-crisp sidebar-text-dark">
</div>
<div class="swatch-holder bg-heavy-rain switch-sidebar-cs-class" data-class="bg-heavy-rain sidebar-text-dark">
<div class="swatch-holder bg-heavy-rain switch-sidebar-cs-class"
data-class="bg-heavy-rain sidebar-text-dark">
</div>
<div class="swatch-holder bg-mean-fruit switch-sidebar-cs-class" data-class="bg-mean-fruit sidebar-text-dark">
<div class="swatch-holder bg-mean-fruit switch-sidebar-cs-class"
data-class="bg-mean-fruit sidebar-text-dark">
</div>
<div class="swatch-holder bg-malibu-beach switch-sidebar-cs-class" data-class="bg-malibu-beach sidebar-text-light">
<div class="swatch-holder bg-malibu-beach switch-sidebar-cs-class"
data-class="bg-malibu-beach sidebar-text-light">
</div>
<div class="swatch-holder bg-deep-blue switch-sidebar-cs-class" data-class="bg-deep-blue sidebar-text-dark">
<div class="swatch-holder bg-deep-blue switch-sidebar-cs-class"
data-class="bg-deep-blue sidebar-text-dark">
</div>
<div class="swatch-holder bg-ripe-malin switch-sidebar-cs-class" data-class="bg-ripe-malin sidebar-text-light">
<div class="swatch-holder bg-ripe-malin switch-sidebar-cs-class"
data-class="bg-ripe-malin sidebar-text-light">
</div>
<div class="swatch-holder bg-arielle-smile switch-sidebar-cs-class" data-class="bg-arielle-smile sidebar-text-light">
<div class="swatch-holder bg-arielle-smile switch-sidebar-cs-class"
data-class="bg-arielle-smile sidebar-text-light">
</div>
<div class="swatch-holder bg-plum-plate switch-sidebar-cs-class" data-class="bg-plum-plate sidebar-text-light">
<div class="swatch-holder bg-plum-plate switch-sidebar-cs-class"
data-class="bg-plum-plate sidebar-text-light">
</div>
<div class="swatch-holder bg-happy-fisher switch-sidebar-cs-class" data-class="bg-happy-fisher sidebar-text-dark">
<div class="swatch-holder bg-happy-fisher switch-sidebar-cs-class"
data-class="bg-happy-fisher sidebar-text-dark">
</div>
<div class="swatch-holder bg-happy-itmeo switch-sidebar-cs-class" data-class="bg-happy-itmeo sidebar-text-light">
<div class="swatch-holder bg-happy-itmeo switch-sidebar-cs-class"
data-class="bg-happy-itmeo sidebar-text-light">
</div>
<div class="swatch-holder bg-mixed-hopes switch-sidebar-cs-class" data-class="bg-mixed-hopes sidebar-text-light">
<div class="swatch-holder bg-mixed-hopes switch-sidebar-cs-class"
data-class="bg-mixed-hopes sidebar-text-light">
</div>
<div class="swatch-holder bg-strong-bliss switch-sidebar-cs-class" data-class="bg-strong-bliss sidebar-text-light">
<div class="swatch-holder bg-strong-bliss switch-sidebar-cs-class"
data-class="bg-strong-bliss sidebar-text-light">
</div>
<div class="swatch-holder bg-grow-early switch-sidebar-cs-class" data-class="bg-grow-early sidebar-text-light">
<div class="swatch-holder bg-grow-early switch-sidebar-cs-class"
data-class="bg-grow-early sidebar-text-light">
</div>
<div class="swatch-holder bg-love-kiss switch-sidebar-cs-class" data-class="bg-love-kiss sidebar-text-light">
<div class="swatch-holder bg-love-kiss switch-sidebar-cs-class"
data-class="bg-love-kiss sidebar-text-light">
</div>
<div class="swatch-holder bg-premium-dark switch-sidebar-cs-class" data-class="bg-premium-dark sidebar-text-light">
<div class="swatch-holder bg-premium-dark switch-sidebar-cs-class"
data-class="bg-premium-dark sidebar-text-light">
</div>
<div class="swatch-holder bg-happy-green switch-sidebar-cs-class" data-class="bg-happy-green sidebar-text-light">
<div class="swatch-holder bg-happy-green switch-sidebar-cs-class"
data-class="bg-happy-green sidebar-text-light">
</div>
</div>
</li>
@ -286,87 +392,125 @@
</div>
</div>
</div>
</div>
</div>
<div class="app-main">
<div class="app-sidebar sidebar-shadow">
<div class="app-header__logo">
<div class="logo-src"></div>
<div class="header__pane ml-auto">
<div>
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<div class="app-header__mobile-menu">
<div class="app-sidebar sidebar-shadow">
<div class="app-header__logo">
<div class="logo-src"></div>
<div class="header__pane ml-auto">
<div>
<button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic"
data-class="closed-sidebar">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="app-header__menu">
<span>
<button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<span class="btn-icon-wrapper">
<i class="fa fa-ellipsis-v fa-w-6"></i>
</span>
</button>
</span>
</div>
<div class="scrollbar-sidebar">
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">个人中心</li>
<li>
<a href="personal.html">
<i class="metismenu-icon pe-7s-browser">
</i>我的集锦
</a>
</li>
<li>
<a href="add.html" class="mm-active">
<i class="metismenu-icon pe-7s-mouse">
</i>增加集锦
</a>
</li>
<li class="app-sidebar__heading">广场</li>
<li>
<a href="square.html">
<i class="metismenu-icon pe-7s-display2">
</i>用户集锦
</a>
</li>
</ul>
</div>
</div>
<div class="app-header__mobile-menu">
<div>
<button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="app-main__outer">
<div class="app-main__inner">
<div class="app-page-title">
<div class="page-title-wrapper">
<div class="page-title-heading">
<div class="page-title-icon">
<i class="pe-7s-bandaid icon-gradient bg-amy-crisp">
</i>
</div>
<div>增加集锦
</div>
</div>
<div class="app-header__menu">
<span>
<button type="button"
class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<span class="btn-icon-wrapper">
<i class="fa fa-ellipsis-v fa-w-6"></i>
</span>
</button>
</span>
</div>
<div class="scrollbar-sidebar">
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">个人中心</li>
<li>
<a href="personal.html">
<i class="metismenu-icon pe-7s-browser">
</i>我的集锦
</a>
</li>
<li>
<a href="add.html" class="mm-active">
<i class="metismenu-icon pe-7s-mouse">
</i>增加集锦
</a>
</li>
<li class="app-sidebar__heading">广场</li>
<li>
<a href="square.html">
<i class="metismenu-icon pe-7s-display2">
</i>用户集锦
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="app-main__outer">
<div class="app-main__inner">
<div class="app-page-title">
<div class="page-title-wrapper">
<div class="page-title-heading">
<div class="page-title-icon">
<i class="pe-7s-bandaid icon-gradient bg-amy-crisp">
</i>
</div>
<div>增加集锦
</div>
</div>
</div>
<div class="main-card mb-3 card">
在这里写表单
</div>
</div>
<div class="main-card mb-3 card">
<br>
<input type="text" id="myInput" />
<script>
document.getElementById('myInput').addEventListener('paste', function (e) {
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
var item = e.clipboardData.items[i];
if (item.kind === "file") {
var f = item.getAsFile();
console.log(f);
let reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = function (e) {
let img = document.createElement('img');
img.src = e.target.result;
var block = gengerate_block(img,"block")
document.getElementById('textList').appendChild(block);
submit(img, [f], "picture", block.id);
};
}
}
});
</script>
<input type="button" value="add text" onclick="add('block')">
</div>
</div>
<!-- wsy:集锦块列表 -->
<div id="textList" style="width: 10px;">
</div>
</div>
<script type="text/javascript" src="../static/assets/scripts/main.js"></script>
</div>
<script type="text/javascript" src="../static/assets/scripts/main.js"></script>
</body>
</html>

+ 50
- 0
APP/templates/main-page(unfinished).html View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.standard-input{
height:100px;
width:500px;
background-color: aliceblue;
margin-top: 1em;
}
.standard-box{
height:30px;
width:500px;
background-color:aqua;
margin-top: 1em;
}
</style>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>
<script type="text/javascript">
var phonenum = "0";
window.onload = function(){
getContent();
};
</script>
</head>
<body>
<input type="text" name="" id="search">
<input type="button" value="search" onclick="getContent()">
<br>
<input type="text" name="" id="input">
<input type="button" value="add text" onclick="add()">
<br>
<div id="textList" style="width: 10px;">
</div>
</body>
</html>

+ 260
- 150
APP/templates/personal.html View File

@ -5,24 +5,42 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<meta name="description" content="Huge selection of charts created with the React ChartJS Plugin">
<meta name="msapplication-tap-highlight" content="no">
<link href="../static/css/main.css" rel="stylesheet">
<script src="../static/js/jquery-3.5.1.min.js"></script>
<script src="../static/js/wsy.js"></script>
<script>
// wsy:这个phonenum可能需要用什么传参的方式得到
var phonenum = "0";
$(document).ready(function () { getCollection(); });
</script>
<!-- wsy:临时用样式 -->
<style>
.standard-input {
height: 100px;
width: 500px;
background-color: aliceblue;
margin-top: 1em;
}
</style>
</head>
<body>
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<div class="app-header header-shadow">
<div class="app-header__logo">
<div class="logo-src"></div>
<div class="header__pane ml-auto">
<div>
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic"
data-class="closed-sidebar">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
@ -41,14 +59,15 @@
</div>
<div class="app-header__menu">
<span>
<button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<button type="button"
class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<span class="btn-icon-wrapper">
<i class="fa fa-ellipsis-v fa-w-6"></i>
</span>
</button>
</span>
</div>
</div>
</div>
<div class="ui-theme-settings">
<button type="button" id="TooltipDemo" class="btn-open-options btn btn-warning">
@ -65,9 +84,11 @@
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<div class="switch has-switch switch-container-class" data-class="fixed-header">
<div class="switch has-switch switch-container-class"
data-class="fixed-header">
<div class="switch-animate switch-on">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<input type="checkbox" checked data-toggle="toggle"
data-onstyle="success">
</div>
</div>
</div>
@ -84,9 +105,11 @@
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left mr-3">
<div class="switch has-switch switch-container-class" data-class="fixed-sidebar">
<div class="switch has-switch switch-container-class"
data-class="fixed-sidebar">
<div class="switch-animate switch-on">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<input type="checkbox" checked data-toggle="toggle"
data-onstyle="success">
</div>
</div>
</div>
@ -105,7 +128,9 @@
<div>
网页头部选项
</div>
<button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class" data-class="">
<button type="button"
class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class"
data-class="">
恢复默认
</button>
</h3>
@ -115,79 +140,115 @@
<h5 class="pb-2">选择配色
</h5>
<div class="theme-settings-swatches">
<div class="swatch-holder bg-primary switch-header-cs-class" data-class="bg-primary header-text-light">
<div class="swatch-holder bg-primary switch-header-cs-class"
data-class="bg-primary header-text-light">
</div>
<div class="swatch-holder bg-secondary switch-header-cs-class" data-class="bg-secondary header-text-light">
<div class="swatch-holder bg-secondary switch-header-cs-class"
data-class="bg-secondary header-text-light">
</div>
<div class="swatch-holder bg-success switch-header-cs-class" data-class="bg-success header-text-dark">
<div class="swatch-holder bg-success switch-header-cs-class"
data-class="bg-success header-text-dark">
</div>
<div class="swatch-holder bg-info switch-header-cs-class" data-class="bg-info header-text-dark">
<div class="swatch-holder bg-info switch-header-cs-class"
data-class="bg-info header-text-dark">
</div>
<div class="swatch-holder bg-warning switch-header-cs-class" data-class="bg-warning header-text-dark">
<div class="swatch-holder bg-warning switch-header-cs-class"
data-class="bg-warning header-text-dark">
</div>
<div class="swatch-holder bg-danger switch-header-cs-class" data-class="bg-danger header-text-light">
<div class="swatch-holder bg-danger switch-header-cs-class"
data-class="bg-danger header-text-light">
</div>
<div class="swatch-holder bg-light switch-header-cs-class" data-class="bg-light header-text-dark">
<div class="swatch-holder bg-light switch-header-cs-class"
data-class="bg-light header-text-dark">
</div>
<div class="swatch-holder bg-dark switch-header-cs-class" data-class="bg-dark header-text-light">
<div class="swatch-holder bg-dark switch-header-cs-class"
data-class="bg-dark header-text-light">
</div>
<div class="swatch-holder bg-focus switch-header-cs-class" data-class="bg-focus header-text-light">
<div class="swatch-holder bg-focus switch-header-cs-class"
data-class="bg-focus header-text-light">
</div>
<div class="swatch-holder bg-alternate switch-header-cs-class" data-class="bg-alternate header-text-light">
<div class="swatch-holder bg-alternate switch-header-cs-class"
data-class="bg-alternate header-text-light">
</div>
<div class="divider">
</div>
<div class="swatch-holder bg-vicious-stance switch-header-cs-class" data-class="bg-vicious-stance header-text-light">
<div class="swatch-holder bg-vicious-stance switch-header-cs-class"
data-class="bg-vicious-stance header-text-light">
</div>
<div class="swatch-holder bg-midnight-bloom switch-header-cs-class" data-class="bg-midnight-bloom header-text-light">
<div class="swatch-holder bg-midnight-bloom switch-header-cs-class"
data-class="bg-midnight-bloom header-text-light">
</div>
<div class="swatch-holder bg-night-sky switch-header-cs-class" data-class="bg-night-sky header-text-light">
<div class="swatch-holder bg-night-sky switch-header-cs-class"
data-class="bg-night-sky header-text-light">
</div>
<div class="swatch-holder bg-slick-carbon switch-header-cs-class" data-class="bg-slick-carbon header-text-light">
<div class="swatch-holder bg-slick-carbon switch-header-cs-class"
data-class="bg-slick-carbon header-text-light">
</div>
<div class="swatch-holder bg-asteroid switch-header-cs-class" data-class="bg-asteroid header-text-light">
<div class="swatch-holder bg-asteroid switch-header-cs-class"
data-class="bg-asteroid header-text-light">
</div>
<div class="swatch-holder bg-royal switch-header-cs-class" data-class="bg-royal header-text-light">
<div class="swatch-holder bg-royal switch-header-cs-class"
data-class="bg-royal header-text-light">
</div>
<div class="swatch-holder bg-warm-flame switch-header-cs-class" data-class="bg-warm-flame header-text-dark">
<div class="swatch-holder bg-warm-flame switch-header-cs-class"
data-class="bg-warm-flame header-text-dark">
</div>
<div class="swatch-holder bg-night-fade switch-header-cs-class" data-class="bg-night-fade header-text-dark">
<div class="swatch-holder bg-night-fade switch-header-cs-class"
data-class="bg-night-fade header-text-dark">
</div>
<div class="swatch-holder bg-sunny-morning switch-header-cs-class" data-class="bg-sunny-morning header-text-dark">
<div class="swatch-holder bg-sunny-morning switch-header-cs-class"
data-class="bg-sunny-morning header-text-dark">
</div>
<div class="swatch-holder bg-tempting-azure switch-header-cs-class" data-class="bg-tempting-azure header-text-dark">
<div class="swatch-holder bg-tempting-azure switch-header-cs-class"
data-class="bg-tempting-azure header-text-dark">
</div>
<div class="swatch-holder bg-amy-crisp switch-header-cs-class" data-class="bg-amy-crisp header-text-dark">
<div class="swatch-holder bg-amy-crisp switch-header-cs-class"
data-class="bg-amy-crisp header-text-dark">
</div>
<div class="swatch-holder bg-heavy-rain switch-header-cs-class" data-class="bg-heavy-rain header-text-dark">
<div class="swatch-holder bg-heavy-rain switch-header-cs-class"
data-class="bg-heavy-rain header-text-dark">
</div>
<div class="swatch-holder bg-mean-fruit switch-header-cs-class" data-class="bg-mean-fruit header-text-dark">
<div class="swatch-holder bg-mean-fruit switch-header-cs-class"
data-class="bg-mean-fruit header-text-dark">
</div>
<div class="swatch-holder bg-malibu-beach switch-header-cs-class" data-class="bg-malibu-beach header-text-light">
<div class="swatch-holder bg-malibu-beach switch-header-cs-class"
data-class="bg-malibu-beach header-text-light">
</div>
<div class="swatch-holder bg-deep-blue switch-header-cs-class" data-class="bg-deep-blue header-text-dark">
<div class="swatch-holder bg-deep-blue switch-header-cs-class"
data-class="bg-deep-blue header-text-dark">
</div>
<div class="swatch-holder bg-ripe-malin switch-header-cs-class" data-class="bg-ripe-malin header-text-light">
<div class="swatch-holder bg-ripe-malin switch-header-cs-class"
data-class="bg-ripe-malin header-text-light">
</div>
<div class="swatch-holder bg-arielle-smile switch-header-cs-class" data-class="bg-arielle-smile header-text-light">
<div class="swatch-holder bg-arielle-smile switch-header-cs-class"
data-class="bg-arielle-smile header-text-light">
</div>
<div class="swatch-holder bg-plum-plate switch-header-cs-class" data-class="bg-plum-plate header-text-light">
<div class="swatch-holder bg-plum-plate switch-header-cs-class"
data-class="bg-plum-plate header-text-light">
</div>
<div class="swatch-holder bg-happy-fisher switch-header-cs-class" data-class="bg-happy-fisher header-text-dark">
<div class="swatch-holder bg-happy-fisher switch-header-cs-class"
data-class="bg-happy-fisher header-text-dark">
</div>
<div class="swatch-holder bg-happy-itmeo switch-header-cs-class" data-class="bg-happy-itmeo header-text-light">
<div class="swatch-holder bg-happy-itmeo switch-header-cs-class"
data-class="bg-happy-itmeo header-text-light">
</div>
<div class="swatch-holder bg-mixed-hopes switch-header-cs-class" data-class="bg-mixed-hopes header-text-light">
<div class="swatch-holder bg-mixed-hopes switch-header-cs-class"
data-class="bg-mixed-hopes header-text-light">
</div>
<div class="swatch-holder bg-strong-bliss switch-header-cs-class" data-class="bg-strong-bliss header-text-light">
<div class="swatch-holder bg-strong-bliss switch-header-cs-class"
data-class="bg-strong-bliss header-text-light">
</div>
<div class="swatch-holder bg-grow-early switch-header-cs-class" data-class="bg-grow-early header-text-light">
<div class="swatch-holder bg-grow-early switch-header-cs-class"
data-class="bg-grow-early header-text-light">
</div>
<div class="swatch-holder bg-love-kiss switch-header-cs-class" data-class="bg-love-kiss header-text-light">
<div class="swatch-holder bg-love-kiss switch-header-cs-class"
data-class="bg-love-kiss header-text-light">
</div>
<div class="swatch-holder bg-premium-dark switch-header-cs-class" data-class="bg-premium-dark header-text-light">
<div class="swatch-holder bg-premium-dark switch-header-cs-class"
data-class="bg-premium-dark header-text-light">
</div>
<div class="swatch-holder bg-happy-green switch-header-cs-class" data-class="bg-happy-green header-text-light">
<div class="swatch-holder bg-happy-green switch-header-cs-class"
data-class="bg-happy-green header-text-light">
</div>
</div>
</li>
@ -195,7 +256,9 @@
</div>
<h3 class="themeoptions-heading">
<div>网页侧栏选项</div>
<button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class" data-class="">
<button type="button"
class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class"
data-class="">
恢复默认
</button>
</h3>
@ -205,79 +268,115 @@
<h5 class="pb-2">选择配色
</h5>
<div class="theme-settings-swatches">
<div class="swatch-holder bg-primary switch-sidebar-cs-class" data-class="bg-primary sidebar-text-light">
<div class="swatch-holder bg-primary switch-sidebar-cs-class"
data-class="bg-primary sidebar-text-light">
</div>
<div class="swatch-holder bg-secondary switch-sidebar-cs-class" data-class="bg-secondary sidebar-text-light">
<div class="swatch-holder bg-secondary switch-sidebar-cs-class"
data-class="bg-secondary sidebar-text-light">
</div>
<div class="swatch-holder bg-success switch-sidebar-cs-class" data-class="bg-success sidebar-text-dark">
<div class="swatch-holder bg-success switch-sidebar-cs-class"
data-class="bg-success sidebar-text-dark">
</div>
<div class="swatch-holder bg-info switch-sidebar-cs-class" data-class="bg-info sidebar-text-dark">
<div class="swatch-holder bg-info switch-sidebar-cs-class"
data-class="bg-info sidebar-text-dark">
</div>
<div class="swatch-holder bg-warning switch-sidebar-cs-class" data-class="bg-warning sidebar-text-dark">
<div class="swatch-holder bg-warning switch-sidebar-cs-class"
data-class="bg-warning sidebar-text-dark">
</div>
<div class="swatch-holder bg-danger switch-sidebar-cs-class" data-class="bg-danger sidebar-text-light">
<div class="swatch-holder bg-danger switch-sidebar-cs-class"
data-class="bg-danger sidebar-text-light">
</div>
<div class="swatch-holder bg-light switch-sidebar-cs-class" data-class="bg-light sidebar-text-dark">
<div class="swatch-holder bg-light switch-sidebar-cs-class"
data-class="bg-light sidebar-text-dark">
</div>
<div class="swatch-holder bg-dark switch-sidebar-cs-class" data-class="bg-dark sidebar-text-light">
<div class="swatch-holder bg-dark switch-sidebar-cs-class"
data-class="bg-dark sidebar-text-light">
</div>
<div class="swatch-holder bg-focus switch-sidebar-cs-class" data-class="bg-focus sidebar-text-light">
<div class="swatch-holder bg-focus switch-sidebar-cs-class"
data-class="bg-focus sidebar-text-light">
</div>
<div class="swatch-holder bg-alternate switch-sidebar-cs-class" data-class="bg-alternate sidebar-text-light">
<div class="swatch-holder bg-alternate switch-sidebar-cs-class"
data-class="bg-alternate sidebar-text-light">
</div>
<div class="divider">
</div>
<div class="swatch-holder bg-vicious-stance switch-sidebar-cs-class" data-class="bg-vicious-stance sidebar-text-light">
<div class="swatch-holder bg-vicious-stance switch-sidebar-cs-class"
data-class="bg-vicious-stance sidebar-text-light">
</div>
<div class="swatch-holder bg-midnight-bloom switch-sidebar-cs-class" data-class="bg-midnight-bloom sidebar-text-light">
<div class="swatch-holder bg-midnight-bloom switch-sidebar-cs-class"
data-class="bg-midnight-bloom sidebar-text-light">
</div>
<div class="swatch-holder bg-night-sky switch-sidebar-cs-class" data-class="bg-night-sky sidebar-text-light">
<div class="swatch-holder bg-night-sky switch-sidebar-cs-class"
data-class="bg-night-sky sidebar-text-light">
</div>
<div class="swatch-holder bg-slick-carbon switch-sidebar-cs-class" data-class="bg-slick-carbon sidebar-text-light">
<div class="swatch-holder bg-slick-carbon switch-sidebar-cs-class"
data-class="bg-slick-carbon sidebar-text-light">
</div>
<div class="swatch-holder bg-asteroid switch-sidebar-cs-class" data-class="bg-asteroid sidebar-text-light">
<div class="swatch-holder bg-asteroid switch-sidebar-cs-class"
data-class="bg-asteroid sidebar-text-light">
</div>
<div class="swatch-holder bg-royal switch-sidebar-cs-class" data-class="bg-royal sidebar-text-light">
<div class="swatch-holder bg-royal switch-sidebar-cs-class"
data-class="bg-royal sidebar-text-light">
</div>
<div class="swatch-holder bg-warm-flame switch-sidebar-cs-class" data-class="bg-warm-flame sidebar-text-dark">
<div class="swatch-holder bg-warm-flame switch-sidebar-cs-class"
data-class="bg-warm-flame sidebar-text-dark">
</div>
<div class="swatch-holder bg-night-fade switch-sidebar-cs-class" data-class="bg-night-fade sidebar-text-dark">
<div class="swatch-holder bg-night-fade switch-sidebar-cs-class"
data-class="bg-night-fade sidebar-text-dark">
</div>
<div class="swatch-holder bg-sunny-morning switch-sidebar-cs-class" data-class="bg-sunny-morning sidebar-text-dark">
<div class="swatch-holder bg-sunny-morning switch-sidebar-cs-class"
data-class="bg-sunny-morning sidebar-text-dark">
</div>
<div class="swatch-holder bg-tempting-azure switch-sidebar-cs-class" data-class="bg-tempting-azure sidebar-text-dark">
<div class="swatch-holder bg-tempting-azure switch-sidebar-cs-class"
data-class="bg-tempting-azure sidebar-text-dark">
</div>
<div class="swatch-holder bg-amy-crisp switch-sidebar-cs-class" data-class="bg-amy-crisp sidebar-text-dark">
<div class="swatch-holder bg-amy-crisp switch-sidebar-cs-class"
data-class="bg-amy-crisp sidebar-text-dark">
</div>
<div class="swatch-holder bg-heavy-rain switch-sidebar-cs-class" data-class="bg-heavy-rain sidebar-text-dark">
<div class="swatch-holder bg-heavy-rain switch-sidebar-cs-class"
data-class="bg-heavy-rain sidebar-text-dark">
</div>
<div class="swatch-holder bg-mean-fruit switch-sidebar-cs-class" data-class="bg-mean-fruit sidebar-text-dark">
<div class="swatch-holder bg-mean-fruit switch-sidebar-cs-class"
data-class="bg-mean-fruit sidebar-text-dark">
</div>
<div class="swatch-holder bg-malibu-beach switch-sidebar-cs-class" data-class="bg-malibu-beach sidebar-text-light">
<div class="swatch-holder bg-malibu-beach switch-sidebar-cs-class"
data-class="bg-malibu-beach sidebar-text-light">
</div>
<div class="swatch-holder bg-deep-blue switch-sidebar-cs-class" data-class="bg-deep-blue sidebar-text-dark">
<div class="swatch-holder bg-deep-blue switch-sidebar-cs-class"
data-class="bg-deep-blue sidebar-text-dark">
</div>
<div class="swatch-holder bg-ripe-malin switch-sidebar-cs-class" data-class="bg-ripe-malin sidebar-text-light">
<div class="swatch-holder bg-ripe-malin switch-sidebar-cs-class"
data-class="bg-ripe-malin sidebar-text-light">
</div>
<div class="swatch-holder bg-arielle-smile switch-sidebar-cs-class" data-class="bg-arielle-smile sidebar-text-light">
<div class="swatch-holder bg-arielle-smile switch-sidebar-cs-class"
data-class="bg-arielle-smile sidebar-text-light">
</div>
<div class="swatch-holder bg-plum-plate switch-sidebar-cs-class" data-class="bg-plum-plate sidebar-text-light">
<div class="swatch-holder bg-plum-plate switch-sidebar-cs-class"
data-class="bg-plum-plate sidebar-text-light">
</div>
<div class="swatch-holder bg-happy-fisher switch-sidebar-cs-class" data-class="bg-happy-fisher sidebar-text-dark">
<div class="swatch-holder bg-happy-fisher switch-sidebar-cs-class"
data-class="bg-happy-fisher sidebar-text-dark">
</div>
<div class="swatch-holder bg-happy-itmeo switch-sidebar-cs-class" data-class="bg-happy-itmeo sidebar-text-light">
<div class="swatch-holder bg-happy-itmeo switch-sidebar-cs-class"
data-class="bg-happy-itmeo sidebar-text-light">
</div>
<div class="swatch-holder bg-mixed-hopes switch-sidebar-cs-class" data-class="bg-mixed-hopes sidebar-text-light">
<div class="swatch-holder bg-mixed-hopes switch-sidebar-cs-class"
data-class="bg-mixed-hopes sidebar-text-light">
</div>
<div class="swatch-holder bg-strong-bliss switch-sidebar-cs-class" data-class="bg-strong-bliss sidebar-text-light">
<div class="swatch-holder bg-strong-bliss switch-sidebar-cs-class"
data-class="bg-strong-bliss sidebar-text-light">
</div>
<div class="swatch-holder bg-grow-early switch-sidebar-cs-class" data-class="bg-grow-early sidebar-text-light">
<div class="swatch-holder bg-grow-early switch-sidebar-cs-class"
data-class="bg-grow-early sidebar-text-light">
</div>
<div class="swatch-holder bg-love-kiss switch-sidebar-cs-class" data-class="bg-love-kiss sidebar-text-light">
<div class="swatch-holder bg-love-kiss switch-sidebar-cs-class"
data-class="bg-love-kiss sidebar-text-light">
</div>
<div class="swatch-holder bg-premium-dark switch-sidebar-cs-class" data-class="bg-premium-dark sidebar-text-light">
<div class="swatch-holder bg-premium-dark switch-sidebar-cs-class"
data-class="bg-premium-dark sidebar-text-light">
</div>
<div class="swatch-holder bg-happy-green switch-sidebar-cs-class" data-class="bg-happy-green sidebar-text-light">
<div class="swatch-holder bg-happy-green switch-sidebar-cs-class"
data-class="bg-happy-green sidebar-text-light">
</div>
</div>
</li>
@ -286,87 +385,98 @@
</div>
</div>
</div>
</div>
</div>
<div class="app-main">
<div class="app-sidebar sidebar-shadow">
<div class="app-header__logo">
<div class="logo-src"></div>
<div class="header__pane ml-auto">
<div>
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<div class="app-header__mobile-menu">
<div class="app-sidebar sidebar-shadow">
<div class="app-header__logo">
<div class="logo-src"></div>
<div class="header__pane ml-auto">
<div>
<button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
<button type="button" class="hamburger close-sidebar-btn hamburger--elastic"
data-class="closed-sidebar">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="app-header__menu">
<span>
<button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<span class="btn-icon-wrapper">
<i class="fa fa-ellipsis-v fa-w-6"></i>
</span>
</button>
</span>
</div>
<div class="scrollbar-sidebar">
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">个人中心</li>
<li>
<a href="personal.html" class="mm-active">
<i class="metismenu-icon pe-7s-browser">
</i>我的集锦
</a>
</li>
<li>
<a href="add.html">
<i class="metismenu-icon pe-7s-mouse">
</i>增加集锦
</a>
</li>
<li class="app-sidebar__heading">广场</li>
<li>
<a href="square.html">
<i class="metismenu-icon pe-7s-display2">
</i>用户集锦
</a>
</li>
</ul>
</div>
</div>
<div class="app-header__mobile-menu">
<div>
<button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="app-main__outer">
<div class="app-main__inner">
<div class="app-page-title">
<div class="page-title-wrapper">
<div class="page-title-heading">
<div class="page-title-icon">
<i class="pe-7s-bandaid icon-gradient bg-amy-crisp">
</i>
</div>
<div>我的集锦
</div>
</div>
<div class="app-header__menu">
<span>
<button type="button"
class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
<span class="btn-icon-wrapper">
<i class="fa fa-ellipsis-v fa-w-6"></i>
</span>
</button>
</span>
</div>
<div class="scrollbar-sidebar">
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">个人中心</li>
<li>
<a href="personal.html" class="mm-active">
<i class="metismenu-icon pe-7s-browser">
</i>我的集锦
</a>
</li>
<li>
<a href="add.html">
<i class="metismenu-icon pe-7s-mouse">
</i>增加集锦
</a>
</li>
<li class="app-sidebar__heading">广场</li>
<li>
<a href="square.html">
<i class="metismenu-icon pe-7s-display2">
</i>用户集锦
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="app-main__outer">
<div class="app-main__inner">
<div class="app-page-title">
<div class="page-title-wrapper">
<div class="page-title-heading">
<div class="page-title-icon">
<i class="pe-7s-bandaid icon-gradient bg-amy-crisp">
</i>
</div>
<div>我的集锦
</div>
</div>
</div>
<div class="main-card mb-3 card">
在这里写表单
</div>
</div>
<div class="main-card mb-3 card">
<input type="text" name="" id="search">
<input type="button" value="search" onclick="getContent()">
<br>
<!-- wsy：上面两个是搜索相关的，下面是创建集锦-->
<input type="text" name="" id="myInput">
<input type="button" value="add text" onclick="add('collection')">
</div>
</div>
<!-- wsy:集锦列表 -->
<div id="textList" style="width: 10px;"></div>
</div>
<script type="text/javascript" src="../static/assets/scripts/main.js"></script>
</div>
<script type="text/javascript" src="../static/assets/scripts/main.js"></script>
</body>
</html>

+ 17
- 1
APP/templates/square.html View File

@ -12,6 +12,20 @@
<meta name="msapplication-tap-highlight" content="no">
<link href="../static/css/main.css" rel="stylesheet">
<script src="../static/js/jquery-3.5.1.min.js"></script>
<script src="../static/js/wsy.js"></script>
<script>
// wsy
$(document).ready(function () { getCollection(); });
</script>
<style>
.standard-input {
height: 100px;
width: 500px;
background-color: aliceblue;
margin-top: 1em;
}
</style>
</head>
<body>
@ -362,9 +376,11 @@
</div>
</div>
<div class="main-card mb-3 card">
在这里写表单
<input type="text" name="" id="search">
<input type="button" value="search" onclick="getContent()">
</div>
</div>
<div id="textList" style="width: 10px;"></div>
</div>
</div>
<script type="text/javascript" src="../static/assets/scripts/main.js"></script>

+ 49
- 172
APP/templates/text-page(unfinished).html View File

@ -1,196 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.standard-input{
height:100px;
width:500px;
background-color: aliceblue;
margin-top: 1em;
}
</style>
<script src="../static/js/jquery-3.5.1.min.js"></script>
<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>
<script type="text/javascript">
var id = "0";
function getContent(){
var url = "http://127.0.0.1:5000/block/select";
$.ajax({
type: "post",
url: url,
data: {
collection_id:id
},
dataType:"json",
processData: false,
contentType: false,
success: function(data){
var list = $("#textList");
var blocks = data.blocks;
for(block in blocks){
var content;
if(block.type == 'img'){
content = document.createElement('img');
content.src = block.content;
}
else if(block.type == 'text'){
content = document.createElement('div');
content.innerText = block.content;
}
else{
content = document.createElement('div');
content.innerText = block.content;
}
content.id = block.id;
var block = gengerate_block(content);
list.appendChild(block);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
console.log(this);
}
});
}
function submit(obj, content,type,order){
var url = "http://127.0.0.1:5000/block/insert";
var data = new FormData();
data.append("content",content);
data.append('type',type);
data.append('order',order);
var that = obj;
$.ajax({
type: "post",
url: url,
data: data,
dataType:"json",
processData: false,
contentType: false,
success: function(data){
that.id = data.id;
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
console.log(this);
}
});
}
function swap(obj,dir){
var url = "http://127.0.0.1:5000/block/swap";
var pos = obj.parentNode.id;
if(dir == 'up' && pos>0){
pos --;
}
if(dir == 'down' &&dir <　$("#textList").childElementCount -1){
pos ++ ;
<style>
.standard-input {
height: 100px;
width: 500px;
background-color: aliceblue;
margin-top: 1em;
}
</style>
$.ajax({
type: "post",
url: url,
data: {
new_order : pos,
id : obj.id
},
success: function(data){
alert(data.msg);
getContent();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
console.log(this);
}
<script src="../static/js/jquery-3.5.1.min.js"></script>
<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>
<script src="../static/js/wsy.js"></script>
<script type="text/javascript">
window.onload = (function () {
var request = GetRequest();
console.log("?");
var id = request['id'];
var name = request['name'];
document.getElementById("myName").innerText = name;
});
}
function gengerate_block(content){
var obj = document.createElement("div");
obj.className = "standard-input";
obj.id = document.getElementById('textList').childElementCount;
var up = document.createElement("div");
up.addEventListener("click",function(){swap(this,'up');});
up.innerText = "swap up";
obj.appendChild(up);
obj.appendChild(content);
var down = document.createElement("div");
down.addEventListener("click",function(){swap(this,'down')});
down.innerText = "swap down";
obj.appendChild(down);
return obj;
}
function add(){
var text = $("#myInput").val();
console.log(text);
$("#myInput").val("");
if(text == ""){
return ;
}
let div = document.createElement('div');
div.innerText = text;
var block = gengerate_block(div)
$('#textList').append(block);
submit(div,text,"text",block.id);
}
</script>
</head>
<body>
<div id="textList" style="width: 10px;">
<div>
This is User's Name:
<div id="myName"></div>
</div>
<div id="textList" style="width: 10px;">
</div>
<br>
<input class="standard-input" type="text" id="myInput" />
<script>
document.getElementById('myInput').addEventListener('paste', function (e) {
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
var item = e.clipboardData.items[i];
</div>
<br>
<input class="standard-input" type="text" id="myInput" />
<script>
document.getElementById('myInput').addEventListener('paste',function(e){
if ( !(e.clipboardData && e.clipboardData.items) ) {
return;
}
for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
var item = e.clipboardData.items[i];
if (item.kind === "file") {
var f = item.getAsFile();
console.log(f);
if (item.kind === "file") {
var f= item.getAsFile();
console.log(f);
let reader = new FileReader();
reader.readAsDataURL(f);
let reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = function(e) {
reader.onload = function (e) {
let img = document.createElement('img');
img.src = e.target.result;
var block = gengerate_block(img)
document.getElementById('textList').appendChild(block);
submit(img,[f],"picture",block.id);
submit(img, [f], "picture", block.id);
};
}
}
}
});
</script>
<input type="button" value="add text" onclick="add()">
});
</script>
<input type="button" value="add text" onclick="add()">
</body>
</html>

Write Preview
Loading…
Cancel
Save