turos.robert
/
mynotes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							{{showFile "templates/design/sections/head.tmpl"}}
<body class="bg-zinc-950 text-zinc-200 h-screen overflow-hidden flex">
{{showFile "templates/design/sections/nav_small.tmpl"}}
{{showFile "templates/design/sections/nav_big.tmpl"}}
    

    <main class="flex-1 flex flex-col relative bg-zinc-900/20 overflow-auto">
        {{showFile "templates/design/sections/nav_header.tmpl"}}

        <div class="flex-1 flex">
            <section class="flex-1 overflow-y-auto custom-scrollbar p-12">
    <div class="w-full grid grid-cols-2 gap-0 border border-zinc-700">
       

        <div class="h-[85vh] bg-[#446454]">
            <textarea 
                id="editor" 
                placeholder="Start typing..."
                class="p-6 w-full h-full bg-transparent text-zinc-100 text-[14px] focus:outline-none resize-none custom-scrollbar"
            ></textarea>
        </div>
        <div id="preview" class="border-r border-zinc-700 h-[85vh] bg-[#454644] p-2 text-zinc-100 overflow-y-auto font-sans prose prose-invert prose-zinc max-w-none
    /* --- Code Blocks (Pre) --- */
    [&_pre]:bg-zinc-900/80 [&_pre]:p-4 [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-zinc-700 
    [&_pre]:my-6 [&_pre]:overflow-x-auto [&_pre]:shadow-inner
    
    /* --- Inline Code (<code>) --- */
    [&_code]:font-mono [&_code]:text-indigo-300 [&_code]:bg-zinc-800/50 
    [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.9em]
    /* Evităm background-ul dublu când codul este în interiorul unui <pre> */
    [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-zinc-200 [&_pre_code]:text-[0.85em]

    /* --- Stiluri Blockquote --- */
    [&_blockquote]:border-l-4 [&_blockquote]:border-indigo-500 [&_blockquote]:bg-zinc-800/30 
    [&_blockquote]:py-2 [&_blockquote]:px-5 [&_blockquote]:my-4 [&_blockquote]:italic [&_blockquote]:text-zinc-300
    
    /* --- Stiluri Bold & Italic --- */
    [&_strong]:text-white [&_strong]:font-bold
    [&_em]:text-indigo-200 [&_em]:italic

    /* --- Stiluri pentru Tabele --- */
    [&_table]:w-full [&_table]:my-6 [&_table]:border-collapse [&_table]:border [&_table]:border-zinc-600
    [&_thead]:bg-zinc-800/50
    [&_th]:border [&_th]:border-zinc-600 [&_th]:p-3 [&_th]:text-left [&_th]:text-indigo-300 [&_th]:uppercase [&_th]:text-[11px]
    [&_td]:border [&_td]:border-zinc-600 [&_td]:p-3 [&_td]:text-sm
    [&_tr:nth-child(even)]:bg-zinc-700/30

    /* --- Stiluri pentru Liste & Headings --- */
    [&_ul]:list-disc [&_ul]:ml-6 [&_ol]:list-decimal [&_ol]:ml-6
    [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:border-b [&_h1]:border-zinc-600 [&_h1]:pb-2 [&_h1]:mb-4
    [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-indigo-400 [&_h2]:mt-6 custom-scrollbar">
            Your preview will appear here...
        </div>
    </div>
</section>
            
            
        </div>
    </main>

<script>
    const editor = document.getElementById('editor');
const preview = document.getElementById('preview');

// Debounce helper
function debounce(func, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

// The API Call
const updatePreview = async () => {
    const content = editor.value;
    
    try {
        const response = await fetch('/live_preview/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ markdown: content })
        });

        if (response.ok) {
            const htmlResult = await response.text();
            preview.innerHTML = htmlResult; 

            // 1. Aplică etichetele de limbaj (codul de mai devreme)
            preview.querySelectorAll('pre code').forEach((codeBlock) => {
                const pre = codeBlock.parentElement;
                const langClass = Array.from(codeBlock.classList).find(c => c.startsWith('language-'));
                if (langClass) {
                    pre.setAttribute('data-language', langClass.replace('language-', ''));
                }

                // 2. Declanșează evidențierea sintaxei
                hljs.highlightElement(codeBlock);
            });

            console.log("Remote Preview & Highlighting Updated!");
        }
    } catch (error) {
        console.error("Error:", error);
    }
};

// Listen for input, trigger every 500ms of "pause"
editor.addEventListener('input', debounce(updatePreview, 500));
</script>

</body>
</html>