Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 54 | Author: devwajahat 
  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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DocGenius</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <style>
        body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
        
        .ce-block__content, .ce-toolbar__content { max-width: 850px; color: #e2e8f0; }
        
        /* Dark Editor Canvas */
        .codex-editor { 
            background: rgba(17, 24, 39, 0.7); 
            padding: 4rem 3rem; 
            border-radius: 0.75rem; 
            min-height: 75vh; 
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(8px);
        }
        
        /* Typography overrides for dark mode */
        .ce-paragraph { font-size: 1.125rem; line-height: 1.8; color: #cbd5e1; margin-bottom: 1.5rem; letter-spacing: -0.01em; }
       h1.ce-header, h2.ce-header, h3.ce-header,
        h4.ce-header, h5.ce-header, h6.ce-header { 
            font-family: 'Poppins', sans-serif; 
            color: #f8fafc; 
            font-weight: 700; 
            margin-top: 2.5rem; 
            margin-bottom: 1rem; 
            letter-spacing: -0.02em; 
        }
        h1.ce-header { font-size: 2.5rem; line-height: 1.2; }
        h2.ce-header { font-size: 2rem; line-height: 1.3; }
        h3.ce-header { font-size: 1.5rem; line-height: 1.4; }
        h4.ce-header { font-size: 1.25rem; line-height: 1.5; }
        h5.ce-header { font-size: 1.125rem; line-height: 1.6; }
        h6.ce-header { font-size: 1rem; line-height: 1.7; text-transform: uppercase; letter-spacing: 0.05em; color: #cbd5e1; }
        .ce-list { font-size: 1.125rem; line-height: 1.8; color: #cbd5e1; margin-bottom: 1.5rem; }
        .ce-list__item { padding-left: 0.5rem; margin-bottom: 0.5rem; }
        .ce-code__textarea { background-color: #020617; color: #a5b4fc; border-radius: 0.5rem; padding: 1.5rem; font-family: monospace; font-size: 0.95rem; border: 1px solid #1e293b; }

        /* Dark mode toolbars and popovers */
        .ce-toolbar__plus, .ce-toolbar__settings-btn { color: #cbd5e1; background-color: #1e293b; }
        .ce-toolbar__plus:hover, .ce-toolbar__settings-btn:hover { background-color: #b300ff; color: white; }
        .ce-popover { background-color: #1e293b; border: 1px solid rgba(179, 0, 255, 0.4); color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.8); }
        .ce-popover__item:hover { background-color: rgba(179, 0, 255, 0.8) !important; color: white !important; }
        .ce-popover__item-icon { background-color: #0f172a; color: #fff; border: none; }
        .ce-inline-toolbar { background-color: #1e293b; border: 1px solid rgba(179, 0, 255, 0.4); color: #fff; }
        .ce-inline-tool:hover, .ce-inline-toolbar__dropdown:hover { background-color: rgba(179, 0, 255, 0.8); }
        .cdx-search-field { background-color: #0f172a; color: #fff; border: 1px solid #333; }
        .cdx-input { background-color: #0f172a; color: #fff; border: 1px solid rgba(179, 0, 255, 0.3); }

        ::selection { background: #b300ff; color: #fff; }
        .zoom-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); display: none; justify-content: center; align-items: center; z-index: 50; cursor: zoom-out; }
        .zoom-overlay img { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 25px 50px -12px rgba(179, 0, 255, 0.25); }
        .image-tool__image-picture { cursor: zoom-in; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); }
        .hidden { display: none !important; }
    </style>
    
</head>
<body class="h-screen flex overflow-hidden bg-gradient-to-br from-black to-[#b300ff] text-white">

    <aside class="w-72 bg-black/70 backdrop-blur-md border-r border-[#b300ff]/30 flex flex-col h-full shadow-[4px_0_24px_rgba(0,0,0,0.5)] z-10">
        <div class="p-6 border-b border-[#b300ff]/30">
            <h1 class="text-2xl font-bold text-white tracking-wide font-['Poppins']">DocGenius</h1>
        </div>
        <div class="p-4 flex-1 overflow-y-auto" id="sidebarNav">
        </div>
        <div class="p-6 border-t border-[#b300ff]/30">
            <button id="btnNewProject" class="w-full bg-[#b300ff] hover:bg-purple-500 text-white font-bold py-3 px-4 rounded-lg transition shadow-[0_0_15px_rgba(179,0,255,0.4)]">
                + New Project
            </button>
        </div>
    </aside>

    <main class="flex-1 flex flex-col h-full bg-transparent overflow-y-auto relative">
        <div id="editorHeader" class="px-12 py-6 flex justify-between items-end hidden">
            <div>
                <p id="currentProjectTitle" class="text-purple-300 uppercase tracking-widest text-sm font-bold mb-1"></p>
                <h2 id="currentDocTitle" class="text-4xl font-extrabold text-white drop-shadow-lg font-['Poppins']"></h2>
            </div>
            <button id="btnSaveDoc" class="bg-emerald-500 hover:bg-emerald-400 text-white font-bold py-2 px-8 rounded-lg transition shadow-[0_0_15px_rgba(16,185,129,0.4)]">
                Save Document
            </button>
        </div>

        <div id="editorContainer" class="px-12 pb-12 hidden">
            <div id="editorjs"></div>
        </div>
        
        <div id="emptyState" class="flex-1 flex items-center justify-center text-purple-200 flex-col">
            <svg class="w-20 h-20 mb-6 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            <p class="text-xl font-medium tracking-wide">Select or create a document</p>
        </div>
    </main>

    <aside class="w-64 bg-black/70 backdrop-blur-md border-l border-[#b300ff]/30 p-6 h-full overflow-y-auto hidden shadow-[-4px_0_24px_rgba(0,0,0,0.5)] z-10" id="tocSidebar">
        <h3 class="text-xs uppercase tracking-widest text-purple-400 font-bold mb-6">On this page</h3>
        <ul id="tocList" class="space-y-3 text-sm text-gray-300">
        </ul>
    </aside>

    <div id="modalNewProject" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden flex items-center justify-center z-40">
        <div class="bg-gray-900 p-8 rounded-xl w-96 shadow-[0_0_40px_rgba(179,0,255,0.4)] border border-[#b300ff]/40">
            <h3 class="text-2xl text-white font-bold mb-6 font-['Poppins']">Create Project</h3>
            <input type="text" id="inputProjectName" class="w-full bg-black text-white border border-gray-700 rounded-lg p-3 focus:outline-none focus:border-[#b300ff] mb-6 placeholder-gray-600 text-lg" placeholder="Project Name">
            <div class="flex justify-end gap-3">
                <button id="btnCancelProject" class="px-5 py-2 text-gray-400 hover:text-white transition">Cancel</button>
                <button id="btnConfirmProject" class="px-5 py-2 bg-[#b300ff] hover:bg-purple-500 text-white rounded-lg transition font-medium">Create</button>
            </div>
        </div>
    </div>

    <div id="modalNewDoc" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden flex items-center justify-center z-40">
        <div class="bg-gray-900 p-8 rounded-xl w-96 shadow-[0_0_40px_rgba(179,0,255,0.4)] border border-[#b300ff]/40">
            <h3 class="text-2xl text-white font-bold mb-6 font-['Poppins']">New Document</h3>
            <input type="hidden" id="hiddenProjectName">
            <input type="text" id="inputDocName" class="w-full bg-black text-white border border-gray-700 rounded-lg p-3 focus:outline-none focus:border-[#b300ff] mb-6 placeholder-gray-600 text-lg" placeholder="Document Name">
            <div class="flex justify-end gap-3">
                <button id="btnCancelDoc" class="px-5 py-2 text-gray-400 hover:text-white transition">Cancel</button>
                <button id="btnConfirmDoc" class="px-5 py-2 bg-[#b300ff] hover:bg-purple-500 text-white rounded-lg transition font-medium">Create</button>
            </div>
        </div>
    </div>

    <div class="zoom-overlay" id="imageZoomOverlay">
        <img id="zoomedImage" src="" alt="Zoomed">
    </div>

    <script src="app.js"></script>
</body>
</html>

Share this file: