Material Modal Components

<div id="modal-01" class="fixed inset-0 z-50 hidden bg-neutral-900/60 backdrop-blur-sm flex items-center justify-center p-4 transition-opacity">
    
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm relative transform transition-all">
        
        <button onclick="closeModal('modal-01')" class="absolute top-4 right-4 p-1 text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100 rounded-full transition-colors z-50">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        
        
<div class="p-6 space-y-4 pt-8">
    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center text-red-600 mb-4">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
    </div>
    <h2 class="text-lg font-bold text-neutral-900">Delete Content?</h2>
    <p class="text-sm text-neutral-500">This action is permanent and cannot be undone. Are you sure you want to proceed?</p>
    <div class="flex space-x-3 pt-4">
        <button onclick="closeModal('modal-01')" class="flex-1 px-4 py-2.5 rounded-lg border border-neutral-300 hover:bg-neutral-50 font-medium text-sm text-neutral-700">Cancel</button>
        <button onclick="closeModal('modal-01')" class="flex-1 px-4 py-2.5 rounded-lg bg-red-600 text-white hover:bg-red-700 font-medium text-sm">Delete</button>
    </div>
</div>
        
    </div>
</div>

<div id="modal-02" class="fixed inset-0 z-50 hidden bg-neutral-900/60 backdrop-blur-sm flex items-center justify-center p-4 transition-opacity">
    
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm relative transform transition-all">
        
        <button onclick="closeModal('modal-02')" class="absolute top-4 right-4 p-1 text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100 rounded-full transition-colors z-50">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        
        
<div class="p-6 text-center pt-10">
    <div class="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
    </div>
    <h2 class="text-lg font-bold text-neutral-900">Generation Complete</h2>
    <p class="text-sm text-neutral-500 mt-2">All tasks have been successfully processed and queued.</p>
    <button onclick="closeModal('modal-02')" class="w-full mt-6 bg-black text-white py-3 rounded-xl font-bold hover:bg-neutral-800 text-sm">Done</button>
</div>
        
    </div>
</div>

<div id="modal-07" class="fixed inset-0 z-50 hidden bg-neutral-900/60 backdrop-blur-sm flex items-center justify-center  transition-opacity">
    
    <div class="bg-white w-screen h-screen min-h-screen flex flex-col relative">
        
        <button onclick="closeModal('modal-07')" class="absolute top-4 right-4 p-1 text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100 rounded-full transition-colors z-50">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        
        
<div class="flex-1 flex flex-col h-full overflow-hidden">
    <div class="h-16 border-b border-neutral-200 px-6 flex items-center justify-between bg-white shrink-0">
        <div>
            <h2 class="text-lg font-bold text-neutral-900">Workspace Editor</h2>
            <p class="text-[11px] text-neutral-500">Advanced configuration and multi-channel publication dashboard</p>
        </div>
    </div>
    
    <div class="flex-1 overflow-y-auto p-6 md:p-10 bg-neutral-50 space-y-8">
        <div class="max-w-4xl mx-auto space-y-6">
            
            <div class="bg-white border border-neutral-200 rounded-xl p-6 space-y-6 shadow-sm">
                <h3 class="text-sm font-bold text-neutral-900 uppercase tracking-wider text-neutral-400">Content Targeting Engine</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="text-xs font-bold text-neutral-700 uppercase">Targeting Domain Market</label>
                        <input type="text" value="US Market (High CPC)" class="w-full p-3 bg-neutral-50 border border-neutral-200 rounded-lg text-xs font-medium focus:ring-1 focus:ring-black outline-none">
                    </div>
                    <div class="space-y-2">
                        <label class="text-xs font-bold text-neutral-700 uppercase">Indexing Channels</label>
                        <select class="w-full p-3 bg-neutral-50 border border-neutral-200 rounded-lg text-xs font-medium focus:ring-1 focus:ring-black outline-none">
                            <option>Google Discover Optimization</option>
                            <option>Standard Search Engine (SEO)</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-neutral-200 rounded-xl p-6 space-y-4 shadow-sm">
                <h3 class="text-sm font-bold text-neutral-900 uppercase tracking-wider text-neutral-400">Automation Scripting & Metadata</h3>
                <p class="text-xs text-neutral-500">Inject programmatic parameters down below to automate structured JSON-LD schemes or custom microdata variants across scaled architectures.</p>
                <textarea rows="8" class="w-full p-4 bg-neutral-900 text-neutral-100 rounded-xl text-xs font-mono focus:ring-1 focus:ring-neutral-700 outline-none placeholder-neutral-600" placeholder="// Paste script nodes here..."></textarea>
            </div>
            
        </div>
    </div>

    <div class="h-16 border-t border-neutral-200 px-6 flex items-center justify-end space-x-3 bg-white shrink-0">
        <button onclick="closeModal('modal-07')" class="px-5 py-2.5 rounded-lg border border-neutral-300 hover:bg-neutral-50 font-medium text-xs text-neutral-700">Close Editor</button>
        <button onclick="closeModal('modal-07')" class="px-5 py-2.5 rounded-lg bg-black text-white hover:bg-neutral-800 font-medium text-xs">Deploy Variables</button>
    </div>
</div>
        
    </div>
</div>