-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
43 lines (43 loc) · 2.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TextEase</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="toolbar" class="hidden">
<button id="download-btn">Download</button>
<button id="zen-mode-btn">Zen Mode</button>
<button id="font-toggle-btn">Toggle Font</button>
<button id="theme-toggle-btn">Choose Theme</button>
<button id="about-btn">About</button>
<div id="theme-options" class="hidden">
<button class="theme-option" data-theme="default" style="background-color: #f5f5f5; color: black;">Default</button>
<button class="theme-option" data-theme="dark-mode" style="background-color: #1e1e1e; color: #f5f5f5;">Dark</button>
<button class="theme-option" data-theme="theme-blue" style="background-color: #d0e7ff; color: #003366;">Blue</button>
<button class="theme-option" data-theme="theme-green" style="background-color: #d0ffd8; color: #003300;">Green</button>
<button class="theme-option" data-theme="theme-yellow" style="background-color: #fffac8; color: #666600;">Yellow</button>
<button class="theme-option" data-theme="theme-dark-blue" style="background-color: #001f3f; color: #7FDBFF;">Dark Blue</button>
<button class="theme-option" data-theme="theme-dark-green" style="background-color: #0b3d0b; color: #2ecc40;">Dark Green</button>
<button class="theme-option" data-theme="theme-dark-red" style="background-color: #3f0000; color: #ff4136;">Dark Red</button>
</div>
</div>
<div id="zen-timer" class="zen-timer hidden">00:00</div>
<div id="editor-container">
<textarea id="text-input" placeholder="Write your text here..."></textarea>
</div>
<div id="about-modal" class="hidden">
<div class="modal-content">
<span id="close-about">×</span>
<h2>About TextEase</h2>
<p>TextEase is a minimalist text editor designed to enhance your writing experience with features like Zen Mode, customizable themes, and more. Enjoy a distraction-free environment and focus on your writing!</p>
<p>Made with 💜 by <a href="https://zigao.wang" target="_blank">Zigao Wang</a>.</p>
<p>This project is licensed under the <a href="https://github.com/ZigaoWang/textease/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
<p>GitHub Repo: <a href="https://github.com/ZigaoWang/textease/" target="_blank">https://github.com/ZigaoWang/textease/</a></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>