CodeMD/index.html at main · MahmudZar/CodeMD · 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
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>CodeMd</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="CodeMd - A tool for managing and documenting code projects" />
    <meta property="og:title" content="CodeMd" />
    <meta property="og:description" content="A tool for managing and documenting code projects" />
    <meta property="og:url" content="https://code-md.sevalla.page/" />
    <meta property="og:image" content="https://owwm0momvs.ufs.sh/f/x7WTCbFvYMfEodaEEKTUBNqd4C5X1y0xJmSLnkRD6ij9ubQK" />
    <link rel="icon" href="https://owwm0momvs.ufs.sh/f/x7WTCbFvYMfERNGcC5Pc3Fvwe95IJVBX7YL6SdqzxKmks1Qy"
        type="image/png" />

    <!-- CDN Libraries -->
    <!-- 1. Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <!-- 2. Tree view component -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jstree@3.3.16/dist/themes/default/style.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jstree@3.3.16/dist/jstree.min.js"></script>

    <!-- 3. Syntax highlighting for preview -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
    <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-css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>

    <!-- 4. Toast notifications -->
    <script src="https://cdn.jsdelivr.net/npm/notyf@3.10.0/notyf.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3.10.0/notyf.min.css">

    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <header>
        <div class="logo-container">
            <img src="https://owwm0momvs.ufs.sh/f/x7WTCbFvYMfEonW6CS5TUBNqd4C5X1y0xJmSLnkRD6ij9ubQ" alt="CodeMd Logo" class="logo dark-logo" aria-label="CodeMd Logo">
            <img src="https://owwm0momvs.ufs.sh/f/x7WTCbFvYMfE5xhX4NKC9TC4zgp1QycM2obkf0IB68KPrqtn" alt="CodeMd Logo" class="logo light-logo" aria-label="CodeMd Logo">
        </div>
        <button id="themeToggle" aria-label="Toggle theme">
            <i class="bi bi-moon-fill"></i>
        </button>
    </header>

    <main>
        <section id="dropZone">
            <input type="file" id="folderPicker" webkitdirectory multiple hidden />
            <div class="drop-content">
                <i class="bi bi-cloud-upload drop-icon"></i>
                <button id="selectBtn" class="primary-button">
                    <i class="bi bi-folder2-open"></i> Select Project Folder
                </button>
                <p>or drag & drop a folder here</p>
            </div>
            <progress id="progress" max="100" value="0" hidden></progress>
        </section>

        <section id="treeContainer" hidden>
            <div class="tree-header">
                <input type="search" id="filterTree" placeholder="🔍 Search files…" />
                <div class="stats" id="fileStats"></div>
            </div>
            <div id="tree"></div>
            <div id="exportBar">
                <button id="copyBtn">
                    <i class="bi bi-clipboard"></i> Copy Markdown
                </button>
                <button id="downloadBtn">
                    <i class="bi bi-download"></i> Download .md
                </button>
                <button id="resetBtn">
                    <i class="bi bi-arrow-clockwise"></i> Reset
                </button>
            </div>
        </section>

        <details id="preview" hidden>
            <summary>📄 Preview Markdown</summary>
            <pre><code id="previewCode" class="language-markdown"></code></pre>
        </details>
    </main>

    <script type="module" src="app.js"></script>
</body>

</html>