paperWave project of blogplus
v1 posted 2020 10.5
html
<!DOCTYPE html>
<html>
<meta name="referrer" content="never">
<head>
<title>write · 纸船paperWave</title>
<link href="style.css" rel="stylesheet">
<div id="writetools" class="tools">
<button id="b" onclick="t('b')"><b>B</b></button>
<button id="i" onclick="t('em')"><em>i</em></button>
<button id="u" onclick="t('u')"><u>U</u></button>
<button id="s" onclick="t('s')"><s>S</s></button>
<button id="a" class="more">·</button>
</div>
</head>
<body>
<div id="paper"><input type="text" id="title" placeholder="Title" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></input><div id="content" contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"><br></div></div>
</body>
<footer>
<div id="guidetools" class="tools">
<img src="">纸船</img>
</div>
<script src="creative.js"></script>
</footer>
</html>
css
*{
outline:none;
}
*::-moz-focus-inner{
border:0;
}
body{
background-color:#fffffd;
overflow:hidden;
height:100%;
}
.tools{
height:30px;
background-color:#fffffd;
width:100%;
position:fixed;
z-index:100;
}
#writetools{
top:0;
border-bottom:1px solid #F3F3F3;
}
#writetools button{
margin-top:8px;
margin-left:5px;
border:0px solid #FEFEFA;
border-radius:2px;
font-size:14px;
color:#515151;
text-align:center;
height:14px;
background:none;
transition:color 0.1s linear;
}
#writetools button:focus{
color:#BEBEBE;
}
#title{
width:100%;
font-size:22pt;
font-family:微软雅黑,Microsoft Yahei,Microsoft Yahei UI,宋体,sans-serif;
background-color:#fffffd;
border:none;
color:#CCCCCC;
overflow:hidden;
border-bottom:1px solid #eeeeee;
transition:color 0.5s linear;
}
#title:focus{
color:#444444;
}
#paper{
position:fixed;
top:20px;
left:8%;
right:8%;
bottom:35px;
width:84%;
padding:3%;
height:calc(100%-60px);
background-color:#fffffd;
}
#content{
margin-top:10px;
width:84%;
height:90%;
color:#1f1e1d;
font-size:14pt;
overflow-y:auto;
font-family:微软雅黑,Microsoft Yahei,Microsoft Yahei UI,宋体,sans-serif;
}
#guidetools{
bottom:0;
border-top:1px solid #eeeeee;
}
js
console.log("hello~ boat.")
tools=document.getElementById("writetools")
content=document.getElementById("content")
guide=document.getElementById("guidetools")
//functions
function t(str){//textstyle
selection = window.getSelection()
//first selection
range = selection.getRangeAt(0)
//copy old one
cloneNodes = range.cloneContents()
//remove selction
range.deleteContents()
//make container
Container = document.createElement(str)
Container.appendChild(cloneNodes)
//add
range.insertNode(Container)
}
//init
console.log("page ok!")
v2 posted
