<!DOCTYPE html>
<html>
<head>
<title>Stylish Text Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.editor-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.toolbar {
display: flex;
align-items: center;
background-color: #007BFF;
color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
padding: 8px;
border-radius: 4px;
}
.toolbar button,
.toolbar select {
margin-right: 8px;
background-color: transparent;
border: none;
cursor: pointer;
color: #fff;
font-size: 16px;
}
.toolbar select {
cursor: pointer;
border: 1px solid #fff;
border-radius: 4px;
}
.editor {
padding: 16px;
border: 1px solid #ccc;
outline: none;
font-size: 16px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
min-height: 200px;
width: 80%;
}
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #007BFF;
color: #fff;
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
padding: 8px;
border-radius: 4px;
width: 80%;
}
.status-bar span {
margin-right: 16px;
}
/* Responsive Styles */
@media screen and (max-width: 600px) {
.toolbar {
flex-direction: column;
align-items: flex-start;
}
.toolbar button,
.toolbar select {
margin-right: 0;
margin-bottom: 8px;
}
}
</style>
</head>
<body>
<div class="editor-container">
<div class="toolbar">
<button id="boldButton"><b>B</b></button>
<button id="italicButton"><i>I</i></button>
<button id="underlineButton"><u>U</u></button>
<select id="fontFamilySelect">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
</select>
<select id="fontSizeSelect">
<option value="12">12px</option>
<option value="16">16px</option>
<option value="20">20px</option>
<option value="24">24px</option>
<option value="28">28px</option>
</select>
<input type="color" id="textColorInput">
<input type="color" id="bgColorInput">
<button id="undoButton">Undo</button>
<button id="redoButton">Redo</button>
</div>
<div contenteditable="true" class="editor" id="editor"></div>
<div class="status-bar">
<span id="wordCount"></span>
<span id="cursorPosition"></span>
</div>
</div>
<script>
// JavaScript code remains unchanged
// ...
</script>
</body>
</html>
