Blog-Hub/editor.html at main · Hasindu2003/Blog-Hub · GitHub

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Blog Hub - Editor</title>
	<link rel="icon" href="./assets/favicon.svg" type="image/svg+xml" />
	<link rel="stylesheet" href="./assets/styles.css" />
	<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.7/dist/purify.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
	<script defer src="./assets/app.js"></script>
</head>
<body>
	<header class="site-header">
		<div class="container header-inner">
			<a href="/index.html" class="logo">Blog Hub</a>
			<nav class="nav">
				<a id="nav-home" href="/index.html">Home</a>
				<a id="nav-editor" href="/editor.html" class="auth-only hidden">New Post</a>
				<a id="nav-login" href="/login.html" class="guest-only">Login</a>
				<a id="nav-register" href="/register.html" class="guest-only">Register</a>
				<span class="nav-spacer"></span>
				<div class="user-menu auth-only hidden">
					<button id="user-menu-toggle" class="user-menu-btn">
						<img id="nav-avatar" class="nav-avatar" alt="avatar" />
						<span id="nav-username" class="nav-username"></span>
						<span class="dropdown-arrow">▼</span>
					</button>
					<input type="file" id="nav-avatar-input" class="hidden" accept="image/*" />
					<div id="user-dropdown" class="user-dropdown hidden">
						<button id="btn-logout" class="dropdown-item">🚪 Logout</button>
					</div>
				</div>
			</nav>
		</div>
	</header>

	<main class="container">
		<form id="editor-form" class="editor">
			<div class="editor-header">
				<h1 id="editor-title">✨ New Post</h1>
				<div class="actions">
					<button type="button" id="preview-btn" class="btn btn-outline">👁️ Preview</button>
					<button type="submit" class="btn">💾 Save</button>
					<a href="/index.html" class="btn btn-outline">❌ Cancel</a>
				</div>
			</div>
			<input type="text" id="title" class="input" placeholder="Enter your post title..." required />
			<div id="quill-toolbar">
				<span class="ql-formats">
					<select class="ql-header">
						<option selected></option>
						<option value="1"></option>
						<option value="2"></option>
					</select>
					<select class="ql-align"></select>
				</span>
				<span class="ql-formats">
					<button class="ql-bold"></button>
					<button class="ql-italic"></button>
					<button class="ql-underline"></button>
					<button class="ql-strike"></button>
				</span>
				<span class="ql-formats">
					<button class="ql-list" value="ordered"></button>
					<button class="ql-list" value="bullet"></button>
				</span>
				<span class="ql-formats">
					<button class="ql-link"></button>
					<button class="ql-code-block"></button>
				</span>
			</div>
			<div class="upload-bar">
				<input type="file" id="image-file" accept="image/*" multiple />
				<button type="button" id="upload-image-btn" class="btn btn-outline">📷 Upload Image(s)</button>
				<span id="upload-status" class="muted"></span>
			</div>
			<div id="upload-result" class="upload-result hidden"></div>
			<div class="editor-grid single" id="editor-grid">
				<div id="quill-editor" class="quill-editor"></div>
				<div id="preview" class="preview markdown hidden"></div>
			</div>
			<!-- Fullscreen Preview Modal -->
			<div id="preview-modal" class="modal hidden">
				<div class="modal-backdrop"></div>
				<div class="modal-content">
					<div class="modal-header">
						<h2>Preview</h2>
						<button type="button" id="close-preview" class="btn btn-outline">Close</button>
					</div>
					<div id="preview-full" class="modal-body markdown"></div>
				</div>
			</div>

		</form>
	</main>

	<script>
		window.addEventListener('DOMContentLoaded', () => {
			window.App && window.App.loadEditor();
		});
	</script>
</body>
</html>