8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful WordPad</title>
<script src="https://cdn.jsdelivr.net/npm/vim.js@1.0.0/vim.min.js"></script>
<style>
:root{
--bg: #f0f4ff;
--card: #ffffff;
--accent: #6c5ce7;
--accent2: #00cec9;
--text: #2d3436;
}
*{box-sizing: border-box; margin:0; padding:0; font-family: "Segoe UI", Roboto, sans-serif;}
body{
background: linear-gradient(135deg, #a29bfe, #74b9ff);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container{
width: 100%;
max-width: 1000px;
background: var(--card);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
overflow: hidden;
}
header{
background: linear-gradient(90deg, var(--accent), var(--accent2));
color: white;
padding: 14px 20px;
font-size: 1.2rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.toolbar{
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px;
background: #f8f9fa;
border-bottom: 1px solid #ddd;
}
.toolbar button,.toolbar select,.toolbar input{
border: none;
padding: 8px 10px;
border-radius: 8px;
background: white;
cursor: pointer;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: 0.2s;
}
.toolbar button:hover{ background: var(--accent); color:white; }
.toolbar button.active{ background: var(--accent2); color:white; }
.toolbar input[type="color"]{ padding: 4px; height: 36px; width: 40px; }
#editor{
width: 100%;
height: 500px;
border: none;
outline: none;
padding: 20px;
font-size: 16px;
line-height: 1.6;
overflow-y: auto;
}
#editor:focus{ outline: 2px solid var(--accent2); }
footer{
padding: 12px;
display: flex;
justify-content: flex-end;
gap: 10px;
background: #f8f9fa;
}
.download-btn{
background: linear-gradient(90deg, var(--accent), var(--accent2));
color: white;
border: none;
padding: 10px 18px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
.download-btn:hover{ opacity: 0.9; }
@media(max-width: 600px){
.toolbar{ justify-content: center; }
#editor{ height: 400px; }
}
</style>
</head>
<body>
<div class="container">
<header>
<span>📝 Colorful WordPad</span>
</header>
<div class="toolbar">
<button onclick="format('bold')"><b>B</b></button>
<button onclick="format('italic')"><i>I</i></button>
<button onclick="format('underline')"><u>U</u></button>
<button onclick="format('strikeThrough')"><s>S</s></button>
<button onclick="format('justifyLeft')">⬅️</button>
<button onclick="format('justifyCenter')">↔️</button>
<button onclick="format('justifyRight')">➡️</button>
<select onchange="format('fontName', this.value)">
<option value="">Font</option>
<option>Arial</option>
<option>Times New Roman</option>
<option>Courier New</option>
<option>Georgia</option>
<option>Verdana</option>
</select>
<select onchange="format('fontSize', this.value)">
<option value="">Size</option>
<option value="1">10</option>
<option value="3">14</option>
<option value="4">16</option>
<option value="5">20</option>
<option value="6">24</option>
<option value="7">32</option>
</select>
<input type="color" title="Text Color" onchange="format('foreColor', this.value)">
<input type="color" title="Background Color" onchange="format('backColor', this.value)">
</div>
<div id="editor" contenteditable="true">
Start typing here... ✨
</div>
<footer>
<button class="download-btn" onclick="downloadTxt()">⬇️ Download.txt</button>
</footer>
</div>
<script>
// Initialize vim.js on the editor for vim keybindings
const editor = document.getElementById('editor');
if(window.Vim){
new Vim(editor); // adds vim mode
}
function format(cmd, value=null){
document.execCommand(cmd, false, value);
editor.focus();
}
function downloadTxt(){
const text = editor.innerText;
const blob = new Blob([text], {type: 'text/plain'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'document.txt';
a.click();
URL.revokeObjectURL(url);
}
// Toggle active state for buttons
document.querySelectorAll('.toolbar button').forEach(btn=>{
btn.addEventListener('click', ()=>{
btn.classList.toggle('active');
setTimeout(()=>btn.classList.remove('active'), 200);
})
})
</script>
</body>
</html>