...
This commit is contained in:
164
templates/index.html
Normal file
164
templates/index.html
Normal file
@@ -0,0 +1,164 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Markdown Editor</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- CodeMirror CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/codemirror.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/theme/monokai.min.css">
|
||||
|
||||
<!-- Prism CSS for syntax highlighting -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
|
||||
|
||||
<!-- Modular CSS -->
|
||||
<link rel="stylesheet" href="/static/css/variables.css">
|
||||
<link rel="stylesheet" href="/static/css/layout.css">
|
||||
<link rel="stylesheet" href="/static/css/file-tree.css">
|
||||
<link rel="stylesheet" href="/static/css/editor.css">
|
||||
<link rel="stylesheet" href="/static/css/components.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<span class="navbar-brand">
|
||||
<i class="bi bi-markdown"></i> Markdown Editor
|
||||
</span>
|
||||
<div class="d-flex gap-2">
|
||||
<button id="newBtn" class="btn btn-success btn-sm">
|
||||
<i class="bi bi-file-plus"></i> New
|
||||
</button>
|
||||
<button id="saveBtn" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-save"></i> Save
|
||||
</button>
|
||||
<button id="deleteBtn" class="btn btn-danger btn-sm">
|
||||
<i class="bi bi-trash"></i> Delete
|
||||
</button>
|
||||
<button id="darkModeBtn" class="btn btn-secondary btn-sm">🌙</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container-fluid">
|
||||
<div class="row h-100">
|
||||
<!-- Sidebar -->
|
||||
<div class="col-md-2 sidebar">
|
||||
<!-- Collection Selector -->
|
||||
<div class="collection-selector">
|
||||
<label class="form-label small">Collection:</label>
|
||||
<select id="collectionSelect" class="form-select form-select-sm"></select>
|
||||
</div>
|
||||
|
||||
<!-- File Tree -->
|
||||
<div id="fileTree" class="file-tree"></div>
|
||||
</div>
|
||||
|
||||
<!-- Editor Pane -->
|
||||
<div class="col-md-5 editor-pane">
|
||||
<div class="editor-header">
|
||||
<input type="text" id="filenameInput" placeholder="filename.md"
|
||||
class="form-control form-control-sm">
|
||||
</div>
|
||||
<div class="editor-container">
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Pane -->
|
||||
<div class="col-md-5 preview-pane">
|
||||
<h3>Preview</h3>
|
||||
<div id="preview">
|
||||
<p class="text-muted">Start typing in the editor to see the preview</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Context Menu -->
|
||||
<div id="contextMenu" class="context-menu">
|
||||
<div class="context-menu-item" data-action="open">
|
||||
<i class="bi bi-folder2-open"></i> Open
|
||||
</div>
|
||||
<div class="context-menu-divider"></div>
|
||||
<div class="context-menu-item" data-action="new-file">
|
||||
<i class="bi bi-file-plus"></i> New File
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="new-folder">
|
||||
<i class="bi bi-folder-plus"></i> New Folder
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="upload">
|
||||
<i class="bi bi-upload"></i> Upload File
|
||||
</div>
|
||||
<div class="context-menu-divider"></div>
|
||||
<div class="context-menu-item" data-action="download">
|
||||
<i class="bi bi-download"></i> Download
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="rename">
|
||||
<i class="bi bi-pencil"></i> Rename
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="copy">
|
||||
<i class="bi bi-files"></i> Copy
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="cut">
|
||||
<i class="bi bi-scissors"></i> Cut
|
||||
</div>
|
||||
<div class="context-menu-item" id="pasteMenuItem" data-action="paste" style="display: none;">
|
||||
<i class="bi bi-clipboard"></i> Paste
|
||||
</div>
|
||||
<div class="context-menu-divider"></div>
|
||||
<div class="context-menu-item text-danger" data-action="delete">
|
||||
<i class="bi bi-trash"></i> Delete
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- JSZip for folder downloads -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||||
|
||||
<!-- CodeMirror JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/markdown/markdown.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/yaml/yaml.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/toml/toml.min.js"></script>
|
||||
|
||||
<!-- Marked.js for markdown parsing -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
|
||||
<!-- Prism.js for syntax highlighting -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-toml.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markdown.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
|
||||
|
||||
<!-- Mermaid for diagrams -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
|
||||
<!-- Modular JavaScript -->
|
||||
<script src="/static/js/webdav-client.js"></script>
|
||||
<script src="/static/js/file-tree.js"></script>
|
||||
<script src="/static/js/editor.js"></script>
|
||||
<script src="/static/js/ui-utils.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user