local storage存储可拖动待办事项管理系统代码
代码语言：html
所属分类：其他
代码描述：local storage存储可拖动待办事项管理系统代码
代码标签： local storage 存储 拖动 待办 事项 管理 系统
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--icon-options: #a4c75a;
--icon-options-clear: #9f9f9f;
--icon-opacity: #5972cb;
--icon-warning: #a02f1b;
--icon-board-full: #c5bc56;
--icon-board-bg: #a27dc2;
--icon-remove: #ff6347;
--icon-urgent: #ff8800;
--icon-new-task: #2a92bf;
--icon-total: #777777;
--icon-import-export: #607d8b;
--list-working: #ffc000;
--list-done: #00b91f;
--dark-color: #282828;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans serif;
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.overlay-bg {
background:
radial-gradient(farthest-side at bottom left, var(--icon-board-bg), #fff0),
radial-gradient(farthest-side at top left, var(--list-working), #fff0),
radial-gradient(farthest-corner at bottom right, var(--icon-new-task), #fff0),
radial-gradient(farthest-corner at top right, var(--list-done), #fff0)
/*, var(--list-working)*/;
position: fixed;
width: 102%;
height: 100%;
background-size: cover;
background-position: center center;
}
.overlay-bg.mountain {
background-image: url(//repo.bfw.wiki/bfwrepo/image/5e3632bed9568.png);
background-position: center top;
}
.overlay-bg.climbing {
background-image: url(//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png);
background-position: right top;
}
.overlay-bg.coast {
background-image: url(//repo.bfw.wiki/bfwrepo/image/5e5ef121633fa.png);
}
.overlay-bg.space {
background-image: url(//repo.bfw.wiki/bfwrepo/image/611da9b999795.png);
}
.overlay-bg.code {
background-image: url(//repo.bfw.wiki/bfwrepo/image/6171f56b4f166.png);
}
/* space */
/* https://images.nasa.gov/details-PIA08093 */
/* code */
/* https://www.itl.cat/wallview/iowhbwo_wallpaper-code-programming-symbols-strings-colorful-/ */
.overlay-bg:after {
content: " ";
position: absolute;
right: 2%;
bottom: 57px;
color: #0008;
font-size: 10px;
text-shadow: -1px -1px 0px #fff8;
width: 20em;
text-align: right;
padding-right: 1em;
filter: invert(1);
}
.overlay-bg.space:after {
content: "\00a9 \00a0 nasa.gov";
}
.overlay-bg.mountain:after,
.overlay-bg.climbing:after,
.overlay-bg.coast:after{
content: "\00a9 \00a0 cuadernodeescaladas.com";
}
.overlay-bg.code:after {
content: "\00a9 \00a0 itl.cat";
}
/*** HEADER START ***/
header {
padding: 12px 2%;
background: var(--dark-color);
height: 60px;
position: fixed;
width: 100%;
z-index: 1;
box-shadow: #00000030 0px 2px 6px, #00000040 0px 2px 6px;
}
/* title start */
h1 {
display: inline-block;
margin: 0px 0.75em 0 0;
font-weight: normal;
color: #ffffff;
font-size: 1.5em;
padding: 4px 0.625em 0 0;
border-right: 1px solid #000;
float: left;
position: relative;
background: linear-gradient(90deg, #fff0 calc(100% - 1px), #fff2 100%);
height: 1.5em;
}
h1 a {
color: #fff;
}
h1 a:hover {
color: var(--list-working);
}
h1 span {
float: left;
text-transform: uppercase;
position: relative;
}
h1 span:nth-child(1) {
font-size: 1.5em;
line-height: 0.725em;
}
h1 span:nth-child(2) {
font-size: 0.475em;
position: absolute;
left: 18px;
margin-top: -3px;
color: #ccc;
}
h1 span:nth-child(3) {
margin-left: -1px;
margin-top: -7px;
font-size: 1.05em;
top: 11px;
}
h1 span:nth-child(4) {
font-size: 0.425em;
margin-left: 0px;
top: 7px;
color: #999;
}
h1 span:nth-child(5) {
font-size: 0.62em;
font-weight: bold;
top: 16px;
left: -34px;
}
h1 span:nth-child(6) {
margin-left: -3.75em;
font-size: 0.365em;
margin-top: 17px;
color: var(--icon-total);
}
/* title end */
/* total tasks start */
#totalTask {
display: inline-block;
color: var(--dark-color);
font-size: 1.35em;
position: relative;
height: 1.65em;
float: left;
width: 1.65em;
text-align: center;
background: var(--icon-total);
margin-top: 0px;
line-height: 1.75em;
margin-right: 2.75em;
border-radius: 2px;
}
#totalTask:after {
content: "TOTAL TASKS";
font-size: 11px;
line-height: 1.25em;
position: absolute;
max-width: 5em;
right: -5em;
padding: 5px 0 0.45em 10px;
box-sizing: border-box;
color: var(--icon-total);
text-align: left;
}
#totalTask:hover, #totalTask:hover:after {
color: #fff;
}
/* total tasks end */
/*** buttons start ***/
#btns {
display: inline-block;
font-size: 1em;
padding-top: 0px;
height: 2.3em;
border-left: 1px solid #282828;
padding-left: 1.15em;
}
#btns:before {
content: "";
float: left;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(90deg, #fff1 0 1px, #000 0 2px);
margin-left: -1.2em;
}
#btns button {
cursor: pointer;
padding: 0.25em;
font-size: 1.5em;
color: var(--dark-color);
border: 0;
outline: none;
border-radius: 2px;
width: 1.5em;
height: 1.5em;
}
#addToDo {
background: var(--icon-new-task);
line-height: 0.75em;
}
.btnAdd, .btnUrg {
position: relative;
float: left;
padding-right: 3.35em;
border-right: 1px solid #000000;
margin-right: 1.2em;
background: linear-gradient(90deg, #fff0 calc(100% - 1px), #fff2 100%);
}
.btnUrg {
padding-right: 4.5em;
}
.btnAdd button:after {
margin-left: 7px;
width: 2.5em;
margin-top: -9px;
content: "NEW TASK";
font-size: 11px;
line-height: 1.2em;
color: var(--icon-new-task);
position: absolute;
padding-left: 10px;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
#btns button:hover, #btns button:hover:after {
color: #fff;
}
#btns .btnAdd:hover:after, #btns .btnUrg:hover:after {
color: #fff;
}
#addUrgent {
line-height: 0.75em;
background: radial-gradient(circle at 49% 72%, var(--dark-color) 0 6.5%, #fff0 8.5% 100%), var(--icon-urgent);
}
.btnUrg button:after {
color: var(--icon-urgent);
margin-left: 12px;
width: 4.5em;
margin-top: -9px;
font-size: 11px;
line-height: 13px;
content: "CREATE URGENT";
position: absolute;
padding-left: 10px;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
.btnUrg.active button:after {
content: "REMOVE URGENT";
}
#addUrgent:before /*.btnUrg:before*/ {
content: "";
background: transparent;
float: left;
width: 3px;
position: absolute;
height: 3px;
border-top: 15px solid var(--dark-color);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
top: 7px;
border-radius: 21px;
left: 15px;
}
.btnUrg:after {
float: left;
width: 5px;
height: 6px;
background: var(--dark-color);
left: 16px;
content: "";
position: absolute;
top: 23px;
border-radius: 100%;
display: none;
}
#addUrgent:hover::before {
border-top-color: #fff;
}
/*
.btnUrg:hover::after {
background: #fff;
}
*/
#addUrgent:hover {
background: radial-gradient(circle at 49% 72%, #fff 0 6.5%, #fff0 8.5% 100%), var(--icon-urgent);
}
#deleteItem {
display: inline-block;
background: var(--icon-remove);
height: 1.5em;
color: #fff;
border: 2px dashed rgba(0,0,0,0.1);
border-radius: 2px;
width: 1.5em;
position: relative;
font-size: 1.5em;
}
#deleteItem:before {
position: absolute;
left: 34px;
width: 107px;
top: -2px;
content: "DROP TO REMOVE";
font-size: 11px;
cursor: alias;
color: var(--icon-total);
padding-left: 8px;
padding-top: 5px;
}
#deleteItem:after {
content: "CLICK TO EMPTY";
position: absolute;
width: 108px;
font-size: 11px;
border-radius: 1px;
left: 34px;
color: var(--icon-remove);
padding-left: 7px;
top: 13px;
cursor: pointer;
padding-top: 4px;
padding-bottom: 4px;
}
#deleteItem:hover:before {
color: #ffffff;
}
#deleteItem ul {
margin: 0;
position: relative;
z-index: 1;
padding: 0.5em;
height: 100%;
cursor: pointer;
}
#deleteItem ul:before {
width: 12px;
height: 15px;
top: 11px;
left: 10px;
background: var(--dark-color);
content: "";
position: absolute;
border-radius: 0 0 2px 2px;
}
#deleteItem ul:after {
border-bottom: 3px solid var(--dark-color);
width: 14px;
position: absolute;
left: 9px;
line-height: 1em;
top: -8px;
color: var(--dark-color);
content: "-";
padding-bottom: 3px;
height: 12px;
text-align: center;
text-indent: -1px;
}
#deleteItem:hover ul:before {
background: #fff;
}
#deleteItem:hover ul:after {
border-bottom: 3px solid #ffffff;
color: #ffffff;
}
#deleteItem #delete-list.drag-enter {
border-radius: 2px;
background: #ffffff;
z-index: 0;
}
#deleteItem #delete-list.drag-enter:before {
background: var(--icon-remove);
}
#deleteItem #delete-list.drag-enter:after {
border-bottom: 3px solid var(--icon-remove);
color: var(--icon-remove);
}
/* buttons end */
/*** OPTIONS ***/
.options {
right: -276px;
float: right;
padding-left: 20px;
/*border-left: 1px solid #282828;*/
height: 37px;
width: 350px;
position: absolute;
top: 12px;
transition: right 0.5s ease 0s;
}
.options:before {
content: "";
float: left;
width: 2px;
height: calc(100% - 1px);
background: linear-gradient(90deg, #fff1 0 1px, #000 0 2px);
margin-left: -1.3em;
}
.options.opened {
right: 0;
transition: right 0.5s ease 0s;
}
.options button {
padding: 0;
}
/* options toggle */
#toggleOptions {
display: inline-block;
width: 36px;
height: 36px;
background: red;
border-radius: 2px;
margin-right: 18px;
float: left;
}
#btnOptions {
float: left;
width: 100%;
height: 100%;
border: 0;
outline: none;
border-radius: 2px;
background: var(--icon-options);
position: relative;
cursor: pointer;
}
#btnOptions:before {
left: 5px;
top: 7px;
background:
linear-gradient(transparent 0, transparent 2px, var(--dark-color) 2px, var(--dark-color) 4px,transparent 4px,transparent 10px, var(--dark-color) 10px, var(--dark-color) 12px, transparent 12px, transparent 18px, var(--dark-color) 18px, var(--dark-color) 20px, transparent 20px, transparent 100%);
width: 26px;
height: 22px;
content: "";
float: left;
position: absolute;
content: "●";
font-size: 16px;
color: var(--dark-color);
text-align: right;
line-height: 21px;
}
#btnOptions:after {
float: left;
margin-left: -13px;
top: 4px;
width: 25px;
height: 35px;
line-height: 16px;
color: var(--dark-color);
font-size: 16px;
text-indent: 4px;
transform: rotate(0deg);
letter-spacing: 0px;
content: "●● ●";
position: absolute;
content: "● ●";
text-align: left;
margin-top: -3px;
padding-left: 1px;
}
.options #btnOptions:hover:before {
background: linear-gradient(transparent 0, transparent 2px, #ffffff 2px, #ffffff 4px,transparent 4px,transparent 10px, #ffffff 10px, #ffffff 12px, transparent 12px, transparent 18px, #ffffff 18px, #ffffff 20px, transparent 20px, transparent 100%);
color: #fff;
}
.options #btnOptions:hover:after {
color: #ffffff;
}
/* bg image */
.imageBg {
display: inline-block;
margin-right: 18px;
position: relative;
float: left;
}
.imageBg:hover:after, .imageBg:hover #boardBg:before, .imageBg:hover #boardBg:after {
color: #fff;
border-bottom-color: #fff;
}
.imageBg:hover .bgs {
max-height: 166px;
transition: max-height 0.5s ease 0s;
}
#boardBg {
background: var(--icon-board-bg);
border-radius: 2px;
height: 36px;
display: block;
width: 36px;
font-size: 0.85em;
float: right;
font-weight: bold;
line-height: 1.5em;
color: var(--dark-color);
cursor: pointer;
outline: none;
border: 0;
position: relative;
margin-left: 1px;
}
#boardBg:before {
border: 9px solid transparent;
border-bottom: 12px solid var(--dark-color);
position: absolute;
left: 5px;
margin-top: -25px;
content: "\25CF";
width: 0;
text-indent: 5px;
height: 1em;
}
#boardBg:after {
content: "";
border: 8px solid transparent;
border-bottom-color: var(--dark-color);
position: absolute;
left: 15px;
margin-top: -6px;
}
.bgs {
font-size: 11px;
max-height: 0;
text-align: center;
padding: 0;
max-height: 0;
height: 166px;
transition: max-height 0.5s ease 0s;
margin-left: -22px;
position: absolute;
overflow: hidden;
top: 37px;
width: 80px;
position: absolute;
background: var(--dark-color);
border-top: 10px solid var(--dark-color);
border-radius: 0 0 2px 2px;
}
.bgs > div {
color: #fff;
margin: 5px 0;
}
.bgs span {
background: #444444;
display: block;
margin: 5px;
padding: 1px 5px;
border-radius: 2px;
cursor: pointer;
color: #7d7d7d;
}
.bgs span:hover, .bgs span.selected {
background: var(--icon-board-bg);
color: #fff;
}
/* range styles */
input[type='range']:focus {
outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
background-color: var(--icon-opacity);
width: 20px;
height: 20px;
border: 3px solid var(--dark-color);
border-radius: 50%;
margin-top: -9px;
}
input[type=range]::-moz-range-thumb {
background-color: var(--icon-total);
width: 15px;
height: 15px;
border: 3px solid var(--dark-color);
border-radius: 50%;
}
input[type=range]::-ms-thumb {
background-color: var(--icon-total);
width: 20px;
height: 20px;
border: 3px solid var(--dark-color);
border-radius: 50%;
}
input[type=range]::-webkit-slider-runnable-track {
background-color: var(--icon-total);
height: 3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
outline: none;
}
input[type=range]::-moz-range-track {
background-color: var(--icon-total);
height: 3px;
}
input[type=range]::-ms-track {
background-color: var(--icon-total);
height: 3px;
}
input[type=range]::-ms-fill-lower {
background-color: var(--icon-remove)
}
input[type=range]::-ms-fill-upper {
background-color: black;
}
#byUrl {
position: relative;
top: -22px;
display: none;
}
#byUrl input {
width: 47px;
float: left;
border: 0;
margin-left: 5px;
border-radius: 2px 0 0 2px;
outline: none;
font-size: 10px;
height: 17px;
}
#byUrl input:focus {
background: var(--dark-color);
color: #fff;
}
#byUrl button {
width: 23px;
text-align: center;
padding: 0;
font-size: 11px;
height: 17px;
border: 0;
outline: none;
float: left;
border-radius: 0 2px 2px 0;
background: var(--icon-board-bg);
color: #fff;
line-height: 10px;
border-left: 2px solid var(--dark-color);
cursor: pointer;
}
/* full height */
.boardHeight {
display: inline-block;
margin-right: 18px;
float: left;
}
#boardFull {
background: var(--icon-board-full);
border-radius: 2px;
height: 36px;
display: block;
width: 36px;
font-size: 0.85em;
float: right;
font-weight: bold;
line-height: 1.5em;
color: var(--dark-color);
cursor: pointer;
outline: none;
border: 0;
position: relative;
}
#boardFull:hover {
color: #fff;
}
#boardFull:after {
margin-left: -8px;
float: left;
position: absolute;
width: 0;
margin-top: 2px;
padding-top: 0;
border: 8px solid transparent;
content: "";
border-top: 10px solid var(--dark-color);
}
#boardFull:hover:after {
border-top-color: #fff;
}
#boardFull:hover:before {
background: #fff;
}
#boardFull:before {
background: var(--dark-color);
width: 10px;
height: 10px;
content: "";
float: left;
margin-left: -5px;
margin-top: -8px;
position: absolute;
}
#boardFull.active {
/* background: #e6e6e6;*/
}
#boardFull.active:hover {
color: #fff;
}
#boardFull.active:after {
border-top-color: transparent;
border-bottom: 10px solid var(--dark-color);
top: -5px;
}
#boardFull.active:before {
margin-top: -1px;
}
#boardFull.active:hover:after {
border-bottom-color: #fff;
}
/* list opacity */
.boardOpacity {
display: inline-block;
margin-right: 18px;
width: 36px;
background: var(--icon-opacity);
height: 36px;
border-radius: 2px;
cursor: pointer;
float: left;
}
.boardOpacity:before {
content: "";
border: 2px solid var(--dark-color);
width: 13px;
height: 13px;
position: absolute;
top: 12px;
border-radius: 2px 100% 100% 100%;
transform: rotate(45deg);
margin-left: 10px;
background: linear-gradient(-45deg, var(--dark-color) 0, var(--dark-color) 50%, transparent 50%, transparent 100%);
}
.boardOpacity:hover:before {
border-color: #fff;
background: linear-gradient(-45deg, #fff 0, #fff 50%, transparent 50%, transparent 100%);
}
.boardOpacity .selector {
background: var(--dark-color);
position: absolute;
top: 37px;
width: 65px;
margin-left: -15px;
max-height: 0px;
overflow: hidden;
transition: max-height 0.5s ease 0s;
padding-top: 10px;
border-radius: 0 0 2px 2px;
z-index: -1;
}
.boardOpacity:hover .selector {
max-height: 65px;
transition: max-height 0.5s ease 0s;
}
#boardOpac {
margin: 0 5px 8px 5px;
background: transparent;
cursor: pointer;
position: relative;
float: left;
height: 15px;
width: 55px;
}
.boardOpacity div span {
color: #fff;
font-size: 11px;
text-align: center;
padding-top: 4px;
float: left;
width: 100%;
margin: 0 0 2px 0;
}
/* delete warning */
.deleteWarnig {
display: inline-block;
margin-right: 18px;
width: 36px;
background: #8e5247;
height: 36px;
border-radius: 2px;
cursor: pointer;
float: left;
}
.deleteWarnig.showWng {
background: var(--icon-warning);
}
#optionCfrm {
width: 100%;
height: 100%;
border: 0;
outline: 0;
border-radius: 2px;
background: transparent;
cursor: pointer;
}
.warningToggle, .deleteToggle, .heightToggle, .optionsToggle {
background: var(--dark-color);
font-size: 11px;
text-align: center;
position: absolute;
width: 65px;
margin-left: -14px;
border-radius: 0 0 2px 2px;
top: 36px;
height: 35px;
line-height: 16px;
padding-top: 10px;
color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease 0s;
cursor: default;
}
.deleteWarnig:hover .warningToggle, .deleteOptions:hover .deleteToggle, .boardHeight:hover .heightToggle , #toggleOptions:hover .optionsToggle {
max-height: 52px;
transition: max-height 0.5s ease 0s;
height: 52px;
}
.deleteToggle span {
margin-top: 3px;
display: block;
}
.heightToggle span {
margin-top: 4px;
display: block;
}
#optionCfrm:before {
top: 5px;
float: left;
left: 17px;
z-index: 2;
position: relative;
content: "\2757";
font-size: 12px;
content: "";
background: transparent;
border-top: 6px solid var(--icon-warning);
border-bottom: 2px solid var(--icon-warning);
width: 2px;
height: 2px;
border-radius: 10px;
}
#optionCfrm:after {
content: "";
font-weight: bold;
border: 10px solid transparent;
border-bottom: 18px solid var(--dark-color);
float: left;
margin-top: -10px;
margin-left: 5px;
border-radius: 2px;
width: 2px;
}
.deleteWarnig #optionCfrm:before {
border-color: #8e5247;
}
.deleteWarnig.showWng #optionCfrm:before {
border-color: var(--icon-warning);
}
#optionCfrm:hover:after {
border-bottom-color: #fff;
}
span#textWarning {
margin-top: 3px;
display: block;
}
/* delete options */
.deleteOptions {
display: inline-block;
margin-right: 18px;
width: 36px;
height: 36px;
border-radius: 2px;
cursor: pointer;
float: left;
}
#optionOptns {
width: 100%;
height: 100%;
border: 0;
border-radius: 2px;
outline: none;
background: #a4c75a;
background: var(--icon-options-clear);
cursor: pointer;
position: relative;
}
#optionOptns:before {
background: linear-gradient(45deg, var(--dark-color) 0 30%, #fff0 0 100%);
width: 8px;
height: 8px;
position: absolute;
content: "";
border: 2px solid var(--dark-color);
border-radius: 2px;
border-right-width: 10px;
transform: rotate(-45deg);
top: 10px;
left: 6px;
}
#optionOptns:after {
left: 6px;
top: 23px;
width: 25px;
height: 2px;
position: absolute;
background: var(--dark-color);
border-radius: 1px;
content: "\2716";
content: "";
border-top: 3px solid var(--icon-options-clear);
}
#optionOptns:hover:after {
background-color: #fff;
/*
transition: all 0.5s ease 0s;
width: 20px;
left: 11px;
*/
}
#optionOptns:hover:before {
border-color: #fff;
background: linear-gradient(45deg, #fff 0 30%, #fff0 0 100%);
}
/*** HEADER END ***/
/*************************************************************************************/
/*** LISTS ***/
#myLists {
padding: 1.35% 1% 5% 1%;
float: left;
width: 100%;
display: inline-table;
/*min-height: calc(100% - 108px);*/
margin-top: 60px;
}
#myLists.full {
display: flex;
min-height: calc(100% - 60px);
}
#myLists > div {
width: 32.3%;
display: inline-table;
margin: 0.5%;
background: rgba(247 247 247 / 0.5);
position: relative;
border-radius: 2px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 6px, rgba(0, 0, 0, 0.25) 0px 2px 6px;
}
#myLists > div.full {
display: block;
}
#myLists.fourCol > div {
width: 24%;
}
#myLists div h3 {
background: var(--icon-new-task);
color: #fff;
padding: 0.65em;
margin-top: 0;
font-weight: normal;
border-bottom: 2px solid rgba(0,0,0,0.1);
margin-bottom: 0;
}
#myLists #work-in h3 {
background: var(--list-working) ;
}
#myLists #ur-gent h3 {
background: var(--icon-urgent);
}
#myLists #do-ne h3 {
background: var(--list-done);
}
#myLists div h3:before {
content: "\2022";
border: 2px solid rgb(255 255 255);
float: left;
width: 1em;
height: 1em;
color: var(--icon-new-task);
margin-right: 0.5em;
border-radius: 2px;
background: rgb(255 255 255);
text-align: center;
font-weight: bold;
line-height: 1.1em;
}
#myLists #work-in h3:before {
background: rgb(255 255 255 / 1);
content: "O";
color: var(--list-working);
}
#myLists #ur-gent h3:before {
color: var(--icon-urgent);
text-align: center;
line-height: 19px;
font-weight: normal;
content: "";
}
#myLists #ur-gent h3::after {
content: "";
width: 3px;
float: left;
height: 2px;
border-top: 9px solid #f80;
border-bottom: 4px solid #f80;
position: absolute;
left: 22px;
top: 16px;
border-radius: 10px;
}
#myLists #do-ne h3:before {
content: "";
}
#myLists #do-ne h3:after {
content: "\00ac";
position: absolute;
color: var(--list-done);
font-size: 1.5em;
transform:rotate(120deg);
left: 0.5em;
top: 0.2em
}
#myLists h3 span {
float: right;
width: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 1px;
font-size: 0.775em;
margin-right: -0.25em;
color: rgb(255 255 255 / 75%);
font-weight: bold;
background: #00000070;
}
#myLists ul {
padding: 0;
margin: 0.5em;
height: calc(100% - 3.5em);
box-sizing: border-box;
padding-bottom: 0.6em;
margin-bottom: 0;
display: flex;
flex-direction: column;
}
#myLists ul:after {
margin-top: 0;
content: "DROP TASK HERE";
border: 2px dashed #00000040;
padding: 1.05em 0.5em;
font-size: 0.75em;
text-transform: uppercase;
text-align: center;
color: rgb(0 0 0 / 0.35);
display: inline-table; /*block*/
width: 100%;
box-sizing: border-box;
bottom: 0.8em;
border-radius: 2px;
font-weight: bold;
min-height: 0;
flex: 1;
}
#myLists ul:hover:after {
border-color: rgb(0 0 0 / 0.35);
color: rgb(0 0 0 / 0.4);
background: #ffffff40;
}
#myLists ul li {
position: relative;
list-style: none;
min-height: 3.5em; /*2.35em*/
border: 3px dashed rgb(0 0 0 / 0);
border-radius: 2px;
background: #ffffff;
padding: 0.05em 1.25em 1.65em 0.5em;
margin-bottom: 0.65em;
color: #828282;
cursor: grabbing;
box-shadow: 1px 1px 2px -1px #00000087; /*1px 1px 5px 0px #ccc*/
max-height: 10em;
/*overflow: hidden;*/
}
#myLists ul li:active {
cursor: grabbing;
border-color: rgba(0,0,0,0.15);
}
#myLists ul li:before {
content: "";
background: var(--icon-new-task);
position: absolute;
left: -3px;
top: -3px;
height: calc(100% + 2px);
width: 4px;
border-radius: 1px;
border: 2px solid transparent;
}
#myLists #work-in ul li:before {
background: var(--list-working);
}
#myLists #ur-gent ul li:before {
background: var(--icon-urgent);
}
#myLists #do-ne ul li:before {
background: var(--list-done);
}
#myLists ul li:after {
content:"";
border-left:2px dotted #fff;
height: 10px;
position:absolute;
left: 0;
top: 50%;
margin-top:-5px;
}
#myLists ul li span.txt {
cursor: pointer;
display: block;
padding: 0.25em 0.25em 0.25em 0.25em;
border: 1px dotted rgba(0,0,0,0);
font-size: 0.95em;
overflow: hidden;
text-align: justify;
color: #666;
transition: color 0.4s ease 0s;
height: 100%;
max-height: 7.5em;
}
#myLists ul li span.txt:hover {
background: #ececec;
color: #999;
border: 1px dotted rgba(0,0,0,0.1);
border-radius: 1px;
transition: color 0.4s ease 0s;
}
#myLists ul li span.txt:before {
content: "EDIT";
position: absolute;
left: 1.25em;
background: #49637d80;
font-size: 0.65em;
bottom: 0.5em;
text-align: center;
color: #ffffff;
font-weight: bold;
border-radius: 1px;
padding: 0.25em 0.45em;
}
#myLists ul li span.idTask {
font-size: 0.7em;
color: #fff;
position: absolute;
left: 6.25em;
bottom: 5px;
background: var(--icon-new-task);
padding: 0 0.25em;
border-radius: 1px;
height: 16px;
line-height: 16px;
}
#myLists ul li span.idTask:before {
content: "ID";
font-family: monospace;
margin-top: 1px;
margin-right: 2px;
font-size: 1.275em;
color: #00000055;
line-height: 1em;
font-weight: bold;
}
#myLists #ul-working span.idTask {
background: var(--list-working);
}
#myLists #ul-urgent span.idTask {
background: var(--icon-urgent);
}
#myLists #ul-done span.idTask {
background: var(--list-done);
}
#myLists ul li a.up, #myLists ul li a.down {
float: right;
position: absolute;
right: 0em;
top: 0;
background: linear-gradient(180deg, #e2e4e6 0 1.3em, #fff0 0 100%);
width: 16px;
height: 50%;
border-bottom: 1px dotted #fff;
}
#myLists ul li a.down {
bottom: 0;
top: inherit;
border-bottom: 0;
background: linear-gradient(0deg, #e2e4e6 0 1.3em, #fff0 0 100%);
}
#myLists ul li a.up:before {
content: "";
border: 5px solid transparent;
float: right;
border-bottom: 9px solid #fff;
margin-top: 2px;
margin-right: 3px;
transition: all 0.5s ease 0s;
}
#myLists ul li a.down:before {
content: "";
border: 5px solid transparent;
float: right;
border-top: 8px solid #fff;
right: 3px;
bottom: 2px;
position: absolute;
transition: all 0.5s ease 0s;
}
#myLists ul li a.up:hover:before {
border-bottom-color: var(--dark-color);
margin-top: 0;
}
#myLists ul li a.down:hover:before {
border-top-color: var(--dark-color);
bottom: 0px;
}
#myLists ul li a.delete {
background: var(--icon-remove);
width: 1em;
height: 1em;
float: right;
bottom: 0.3em;
position: absolute;
left: 3em;
text-decoration: none;
}
#myLists ul li a.delete:before {
background:
conic-gradient(from 180deg at 30% 37.5%, var(--icon-remove) 0 25%, #fff0 0 100%),
conic-gradient(from 90deg at 70% 37.5%, var(--icon-remove) 0 25%, #fff0 0 100%),
linear-gradient(0deg, var(--icon-remove) 1% 20%, #fff0 0% 62%, var(--icon-remove) 0% 70%, #fff0 0 80%, var(--icon-remove) 0 100%),
linear-gradient(90deg, #fff0 0 25%, #FFF 0% 75%, #fff0 0 100%), var(--icon-remove);
content: "";
position: absolute;
font-size: 1.1em;
height: 16px;
width: 16px;
text-align: center;
line-height: 1.6em;
border-radius: 2px;
left: 0;top: 0;
}
#myLists ul li a.delete:hover:after {
content: "DELETE";
background: var(--icon-remove);
left: 22px;
position: relative;
font-size: 10px;
padding: 3px 4px;
color: #fff;
top: -3px;
}
#myLists ul li a.delete:after {
/*transform: rotate(-45deg);*/
}
#myLists ul li a.delete:hover {
/*background: #444;*/
overflow: visible;
}
#myLists #ul-todo.drag-enter:after {
background: #2a92bfab;
}
#myLists #ul-working.drag-enter:after {
background: #ffcc00ab;
}
#myLists #ul-urgent.drag-enter:after {
background: #ff8800ab;
}
#myLists #ul-done.drag-enter:after {
background: #00b91fab;
}
/*** LISTS END ***/
/*******************************************************************************/
/*** FOOTER ***/
footer {
background: var(--dark-color); /*#212121*/
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
float: left;
box-shadow: rgba(0, 0, 0, 0.16) 0px -2px 6px, rgba(0, 0, 0, 0.25) 0px -2px 6px;
}
footer > div {
float: left;
width: 50%;
height: 100%;
padding: 0.5em;
}
footer button {
cursor: pointer;
}
/* right footer start */
.r-footer > span {
position: relative;
width: 6.6em;
float: right;
}
.r-footer button:before {
content: "";
border: 5px solid transparent;
border-top: 7px solid var(--dark-color);
position: absolute;
margin-left: 11px;
margin-top: 14px;
}
.r-footer button:after {
--hover-color: var(--dark-color);
content: "";
position: absolute;
border-top: 0;
border-bottom: 0;
left: 11px;
top: 4px;
height: 22px;
width: 10px;
background: linear-gradient(#fff0 0 70%, var(--icon-import-export) 0 77%, #FFF0 0 100%),conic-gradient(from 90deg at 0% 0%, var(--hover-color) 0 25%, #fff0 0 0%) 45% 85%, linear-gradient(#fff0 0 45%, var(--icon-import-export) 0 100%), conic-gradient(from 135deg at 50% 20%, var(--hover-color) 0 25%, #fff0 0 100%);
background-size: 100% 100%, 50% 50%, 100% 100%, 100% 100%, 100% 100%;
background-repeat: no-repeat;
transform: rotate(180deg);
}
.r-footer > span + span button:after {
transform: rotate(0deg);
top: 0;
}
.r-footer button {
width: 32px;
height: 32px;
border: 0;
outline: none;
border-radius: 2px;
background: var(--icon-import-export);
font-size: 11px;
color: var(--icon-import-export);
}
.r-footer button:before {
content: " ";
position: absolute;
left: -5px;
color: var(--dark-color);
width: 14px;
border: 3px solid var(--dark-color);
border-top: 0;
height: 10px;
border-radius: 1px 1px 2px 2px;
margin-top: 10px;
}
.r-footer > span:hover:before {
border-top-color: #fff;
}
/*
.r-footer > span + span:hover:before {
border-bottom-color: #fff;
border-top-color: transparent;
}
.r-footer > span:hover:after {
border-top: 3px solid #fff;
border-bottom: 5px solid #fff;
}
*/
.r-footer button:hover:before {
border-color: #fff;
}
.r-footer button:hover:after {
--hover-color: #fff;
}
.r-footer button:hover span:before {
border-color: #fff;
}
.r-footer button:hover span:after {
color: #fff;
}
.r-footer > span:last-of-type {
margin-right: 20px;
border-right: 1px solid #1d1d1d;
padding-right: 20px;
}
/*
#impBrd span:before {
content: "";
border: 5px solid transparent;
width: 0;
height: 0;
border-top: 6px solid var(--dark-color);
margin-left: -33px;
margin-top: 12px;
position: absolute;
}
#expBrd span:before {
content: "";
border: 5px solid transparent;
width: 0;
height: 0;
border-bottom: 6px solid var(--dark-color);
left: -21px;
margin-top: -4px;
position: absolute;
}
#impBrd:hover span:before {
border-top-color: #fff;
}
#expBrd:hover span:before {
border-bottom-color: #fff;
}
*/
a#expHidden {
display: none;
}
.r-footer button > span {
left: 26px;
position: relative;
text-align: left;
width: 60px;
display: inline-block;
padding-left: 12px;
}
.r-footer button:hover > span {
color: #fff;
}
/* right footer end */
/* left footer start */
.l-footer > span {
float: left;
margin-right: 18px;
padding-right: 20px;
position: relative;
width: 5.75em;
}
.l-footer > span button {
width: 32px;
height: 32px;
border: 0;
outline: none;
border-radius: 2px;
background: #4389ce;
}
.l-footer > span button:before {
position: absolute;
margin-left: 16px;
font-size: 11px;
color: #4389ce;
content: "SHOW HELP";
margin-top: -12px;
text-align: left;
padding-left: 12px;
}
.l-footer > span button.showing:before {
content: "HIDE HELP";
}
.l-footer button:after {
content: "\003F";
font-size: 16px;
color: #4389ce;
background: var(--dark-color);
border-radius: 100%;
padding: 2px;
line-height: 19px;
position: absolute;
width: 17px;
height: 17px;
text-align: center;
margin-left: -10px;
margin-top: -10px;
text-indent: 1px;
font-weight: bold;
}
.l-footer #help:after {
text-indent: -1px;
line-height: 17px;
}
.l-footer #help:hover:after {
background: #fff;
}
.l-footer #help:hover:before {
color: #fff;
}
.l-footer > span button#josetxuBtn {
background: url(//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_32,h_32,/quality,q_90) no-repeat center center #ffffff;
background-size: calc(32px);
}
.l-footer > span button#josetxuBtn:before {
content: "JOSETXU";
color: #ff6600;
margin-top: -1px;
}
.l-footer > span button#josetxuBtn:after {
content: "";
content: "CREATED BY";
font-size: 8px;
color: #ff6600;
width: auto;
border-radius: 0;
background: transparent;
margin-top: -17px;
margin-left: 16px;
padding-left: 12px;
}
.l-footer > span button#josetxuBtn:hover:before {
color: #fff;
}
.l-footer > span button#josetxuBtn:hover:after {
color: #666;
}
.l-footer > span:first-of-type {
width: 7em;
margin-left: 2%;
border-right: 1px solid #1d1d1d;
background: linear-gradient(90deg, #fff0 calc(100% - 1px), #fff1 0 100%);
}
.l-footer > span + span {
margin-right: 0;
}
/*** FOOTER END ***/
/*********************************************************************************/
/*** HELP START ***/
#helpContent {
position: fixed;
background: rgb(67 137 206 / 0.75);
width: 100%;
height: calc(100% - 108px);
margin-top: 60px;
margin-bottom: 48px;
max-height: 0;
bottom: 0;
transition: max-height 0.5s ease 0s;
overflow: hidden;
}
#helpContent.active {
max-height: 100vh;
}
#helpContent > div {
display: inline-table;
width: 46.75%;
background-color: var(--dark-color);
margin: 2% 0 0 2%;
padding: 1em;
border-radius: 2px;
box-shadow: 1px 1px 1px -1px #fff;
color: #fff;
}
#helpContent > div > div:first-of-type {
margin-bottom: 8px;
padding: 2px 0 0 0;
font-weight: normal;
font-size: 18px;
}
#helpContent > div > div {
padding-left: 2.25em;
margin-bottom: 7px;
height: 24px;
padding-top: 6px;
font-size: 14px;
line-height: 12px;
position: relative;
}
.infoFooter a {
color: #ffc107;
}
#helpContent > div.helpTitle {
width: 96%;
font-size: 1.5em;
padding: 0.5em;
color: #ffffff;
}
#helpContent > div.helpTitle:before {
content: " ";
width: 30px;
height: 30px;
border: 0;
outline: none;
border-radius: 2px;
background: #4389ce;
float: left;
margin-left: 2px;
margin-right: 10px;
}
#helpContent > div.helpTitle:after {
content: "\003F";
font-size: 16px;
color: #4389ce;
background: #fff;
border-radius: 100%;
padding: 2px;
line-height: 19px;
width: 17px;
height: 17px;
text-align: center;
margin-left: -35px;
margin-top: 4px;
text-indent: -1px;
float: left;
font-weight: bold;
}
#helpClose {
float: right;
background: #4389ce;
width: 30px;
height: 30px;
cursor: pointer;
}
#helpClose:hover {
background: #fff;
}
#helpClose:before, #helpClose:after {
content: "";
height: 20px;
float: right;
width: 3px;
background: #fff;
transform: rotate(45deg);
border-radius: 10px;
margin-right: 13px;
margin-top: 5px;
}
#helpClose:after {
transform: rotate(-45deg);
margin-right: -3px;
}
#helpClose:hover:before, #helpClose:hover:after {
background: #4389ce;
}
/*** HELP END ***/
/***********************************************************************************/
/*** MODAL START ***/
#modalOverlay {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.7);
top: 0;
left: 0;
z-index: 99;
margin-top: 0;
display: none;
cursor: pointer;
}
#modalBox {
background: #ffffff;
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
position: fixed;
top: 32%;
left: 30%;
z-index: 333;
padding: 20px;
border-radius: 2px;
width: 40%;
box-sizing: border-box;
margin-top: 0;
display: none;
border-left: 10px solid var(--icon-new-task);
}
#modalBox:before {
content: "";
border-left: 3px dotted white;
height: 15px;
width: 0;
float: left;
position: absolute;
left: -6px;
top: 50%;
margin-top: -8px;
}
#modalDesc {
color: #555;
text-align: justify;
line-height: 1.25em;
margin-top: 0.1em;
}
#modalClose {
float: right;
background: var(--icon-remove);
display: inline-block;
line-height: 1.35em;
height: 1.6em;
border: 0;
color: #fff;
font-size: 1.2em;
text-align: center;
cursor: pointer;
padding: 0 0.35em;
border: 2px solid transparent;
border-radius: 1px;
}
#modalClose:hover {
background: var(--dark-color);
}
#modalOverlay:hover + #modalBox #modalClose {
background: var(--dark-color);
}
#modalBox button {
height: 1.6em;
background: var(--icon-new-task);
border: 0;
color: #fff;
font-size: 1.2em;
text-align: center;
cursor: pointer;
border: 2px solid transparent;
border-radius: 1px;
}
#modalBox button:hover {
background: var(--dark-color);
}
#modalBox textarea {
width: 100%;
border: 2px solid #ccc;
outline: none;
margin-bottom: 1em;
height: 6em;
font-size: 1em;
}
#taskButton:focus {
outline: none;
background: var(--dark-color) !important;
}
#taskButton:focus + #modalClose {
background: var(--icon-remove) !important;
}
#taskButton:focus + #modalClose:hover {
background: var(--dark-color) !important;
}
#modalBox.b-ul-working {
border-color: var(--list-working);
}
#modalBox.b-ul-urgent {
border-color: var(--icon-urgent);
}
#modalBox.b-ul-done {
border-color: var(--list-done);
}
#modalBox.b-ul-working #taskButton {
background: var(--list-working);
}
#modalBox.b-ul-urgent #taskButton {
background: var(--icon-urgent);
}
#modalBox.b-ul-done #taskButton {
background: var(--list-done);
}
#modalBox #taskButton:hover {
background: var(--dark-color);
}
/*** MODAL END ***/
/*********************************************************************************/
/*** CONFIRM BOX START ***/
#confirmDelete {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: none;
}
#confirmBox, #confirmUrgent {
background: #fff;
position: fixed;
width: 18em;
top: 50%;
left: 50%;
height: 8.85em;
margin-top: -7em;
margin-left: -9em;
text-align: center;
padding: 1em;
border-radius: 2px;
display: none;
}
#confirmUrgent p {
margin-top: 0.5em;
color: var(--icon-urgent);
font-weight: bold;
}
#confirmBox p {
margin-top: 0.5em;
color: var(--icon-remove);
font-weight: bold;
}
#confirmBox div, #confirmUrgent div {
font-size: 0.65em;
margin-bottom: 2em;
padding-right: 11px;
}
#confirmBox input, #confirmUrgent input {
opacity: 0.5;
display: none;
}
#confirmBox input + label:before, #confirmUrgent input + label:before {
content: "";
border: 2px solid #999;
width: 1.25em;
height: 1.25em;
display: inline-block;
margin-right: 5px;
margin-bottom: -5px;
border-radius: 1px;
}
#confirmBox label, #confirmUrgent label {
color: #8e8e8e;
font-weight: bold;
display: inline-block;
cursor: pointer;
}
input#dontShowAgain:checked + label:before,
input#dontShowAgainUrgent:checked + label:before {
background: #a5a5a5;
}
input#dontShowAgain:checked + label:after,
input#dontShowAgainUrgent:checked + label:after {
opacity: 1;
}
input#dontShowAgain + label:after,
input#dontShowAgainUrgent + label:after {
content: "";
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
float: left;
left: 13px;
width: 0.75em;
height: 0.5em;
z-index: 2;
position: relative;
transform: rotate(-50deg);
top: 0.35em;
opacity: 0;
}
#confirmUrgent {
height: 9.75em;
}
#confirmBox button, #confirmUrgent button {
width: 46%;
background: #828282;
border: 0;
outline: none;
height: 2em;
cursor: pointer;
color: #fff;
}
#confirmUrgent button {
width: 36%;
}
#confirmBox #confirmBtn {
background: var(--icon-remove);
}
#confirmUrgent #confirmUrgentBtn {
background: var(--icon-urgent);
width: 60%;
}
#confirmBox button:hover, #confirmUrgent button:hover {
background: var(--dark-color) !important;
}
#confirmBox #confirmBtn:hover {
background: #de3213 !important;
}
/*
#confirmBox #confirmUrgent:hover {
background: #FF6600 !important;
}
*/
/*** CONFIRM BOX END ***/
/*** FIREFOX STYLES ***/
@-moz-document url-prefix() {
#impBrd span:before {
margin-left: -35px;
}
#expBrd span:before {
left: -23px;
}
.r-footer button:after {
margin-top: 2px;
}
.r-footer > span + span button:after {
top: 8px;
}
.imageBg:hover .bgs {
max-height: 153px;
}
.bgs {
height: 153px;
}
#optionOptns::before {
top: 5px;
background: linear-gradient(transparent 0, transparent 4px, var(--dark-color) 4px, var(--dark-color) 6px,transparent 6px,transparent 12px, var(--dark-color) 12px, var(--dark-color) 14px, transparent 14px, transparent 20px, var(--dark-color) 20px, var(--dark-color) 22px, transparent 22px, transparent 100%);
}
/*
revisar
#optionOptns:hover::before {
background: linear-gradient(transparent 0, transparent 4px, #3333 4px, #3333 6px,transparent 6px,transparent 12px, #3333 12px, #3333 14px, transparent 14px, transparent 20px, #3333 20px, #3333 22px, transparent 22px, transparent 100%);
}
*/
.l-footer > span button#josetxuBtn::after {
font-size: 7px;
margin-top: -17px;
}
}
/****** FOOTER ICONS ******/
.infoLine:before {
content: "";
position: absolute;
color: var(--dark-color);
font-size: 1.1em;
height: 1.55em;
width: 1.55em;
text-align: center;
background: var(--icon-total);
line-height: 1.6em;
border-radius: 2px;
left: 0;
top: 0;
}
.totalTasksInfo:before {
content: "8";
background: var(--icon-total);
font-weight: bold;
}
.newTaskInfo:before {
content: "\271A";
background: var(--icon-new-task);
}
.urgentListInfo:before {
background:
linear-gradient(180deg, var(--icon-urgent) 1% 15%, #fff0 0% 63%, var(--icon-urgent) 0% 65%, #fff0 0 80%, var(--icon-urgent) 0 100%),
linear-gradient(90deg, #fff0 0 44%, var(--dark-color) 44% 57%, #fff0 0 100%), var(--icon-urgent);
}
.deleteTaskInfo:before {
background:
conic-gradient(from 180deg at 33% 37.5%, var(--icon-remove) 0 25%, #fff0 0 100%),
conic-gradient(from 90deg at 65% 37.5%, var(--icon-remove) 0 25%, #fff0 0 100%),
linear-gradient(0deg, var(--icon-remove) 1% 20%, #fff0 0% 63%, var(--icon-remove) 0% 65%, #fff0 0 80%, var(--icon-remove) 0 100%),
linear-gradient(90deg, #fff0 0 30%, var(--dark-color) 0% 70%, #fff0 0 100%),
var(--icon-remove);
}
.optionsMenuInfo:before {
background:
radial-gradient(circle at 41% 25%, var(--dark-color) 0 0.175em, #fff0 0 100%),
radial-gradient(circle at 66% 50%, var(--dark-color) 0 0.175em, #fff0 0 100%),
radial-gradient(circle at 33% 75%, var(--dark-color) 0 0.175em, #fff0 0 100%),
linear-gradient(-90deg, var(--icon-options) 0 15%, #fff0 0 85%, var(--icon-options) 0 100%),
linear-gradient(#fff0 0 5px, var(--dark-color) 5px 7px, #fff0 6px 11px, var(--dark-color) 11px 13px, #f000 12px 17px, var(--dark-color) 17px 19px, #fff0 19px 100%),
var(--icon-options);
}
.bgImgInfo:before {
background:
linear-gradient(#fff0 0 80%, var(--icon-board-bg) 0 100%),
radial-gradient(circle at 66% 30%, var(--dark-color) 0 10%, #fff0 13% 100%),
conic-gradient(from 135deg at 65% 55%, var(--dark-color) 0 25%, #fff0 0 100%),
conic-gradient(from 135deg at 40% 45%, var(--dark-color) 0 25%, #fff0 0 100%),
var(--icon-board-bg);
}
.adjustHeightInfo:before {
background:
conic-gradient(from 90deg at 0% 0%, var(--dark-color) 0 25%, #fff0 0 0%) 48% 70%,
linea.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0