```html
Styling CV
BUILDER PLATFORM
User Dashboard
Admin Panel
Upgrade Pro
🇬🇧 English
Alex Morgan
Pro Account
Welcome back, Alex! 👋
Your resumes are performing well. You have 2 resumes optimized for ATS compliance.
Upload Resume
{"props":{"pageProps":{"data":{"name":"ONLY USE, .HTML, .CSS","page_id":"66b75a61","seo_data":null,"social_meta":null,"translate":{},"robot_settings":null,"workspace_robot_settings":{},"favicon":null,"content":null,"html":"```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\" class=\"h-full bg-slate-50\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eStylingCV - Professional Resume \u0026 Career Platform\u003c/title\u003e\n \u003c!-- Tailwind CSS --\u003e\n \u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n \u003c!-- Bootstrap Icons --\u003e\n \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css\"\u003e\n \u003c!-- Google Fonts: Plus Jakarta Sans --\u003e\n \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n \u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n \u003clink href=\"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800\u0026display=swap\" rel=\"stylesheet\"\u003e\n\n \u003cscript\u003e\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n },\n colors: {\n brand: {\n 50: '#f5f3ff',\n 100: '#ede9fe',\n 200: '#ddd6fe',\n 500: '#6366f1',\n 600: '#4f46e5',\n 700: '#4338ca',\n 800: '#3730a3',\n 900: '#312e81',\n purple: '#5B21B6',\n primary: '#5D3EBC',\n hover: '#4C2EA8'\n }\n }\n }\n }\n }\n \u003c/script\u003e\n \u003cstyle\u003e\n body { font-family: 'Plus Jakarta Sans', sans-serif; }\n .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }\n .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }\n .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\n .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\n .view-panel { display: none; }\n .view-panel.active { display: block; }\n .tab-content { display: none; }\n .tab-content.active { display: block; }\n \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody class=\"h-full text-slate-800 bg-slate-50 antialiased selection:bg-brand-100 selection:text-brand-700\"\u003e\n\n \u003c!-- TOP GLOBAL NAVBAR (Inspired by Reference Header) --\u003e\n \u003cheader class=\"bg-brand-primary text-white sticky top-0 z-40 shadow-md\"\u003e\n \u003cdiv class=\"px-4 sm:px-6 lg:px-8\"\u003e\n \u003cdiv class=\"flex items-center justify-between h-16\"\u003e\n \u003c!-- Left: Logo \u0026 View Mode Switcher --\u003e\n \u003cdiv class=\"flex items-center space-x-6\"\u003e\n \u003cdiv class=\"flex items-center space-x-3 cursor-pointer\" onclick=\"switchMainView('user-dashboard')\"\u003e\n \u003cdiv class=\"w-9 h-9 rounded-lg bg-white/10 flex items-center justify-center text-white border border-white/20\"\u003e\n \u003ci class=\"bi bi-box-seam-fill text-xl\"\u003e\u003c/i\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cspan class=\"font-extrabold text-lg tracking-tight block leading-none\"\u003eStyling CV\u003c/span\u003e\n \u003cspan class=\"text-[10px] text-purple-200 tracking-wider uppercase font-medium\"\u003eBUILDER PLATFORM\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003c!-- Panel Toggle Selector --\u003e\n \u003cdiv class=\"hidden md:flex items-center bg-black/20 p-1 rounded-lg border border-white/10 text-xs font-medium\"\u003e\n \u003cbutton id=\"nav-btn-user\" onclick=\"switchMainView('user-dashboard')\" class=\"px-3 py-1.5 rounded-md transition-all flex items-center space-x-2 bg-white text-brand-primary font-semibold shadow-sm\"\u003e\n \u003ci class=\"bi bi-person-badge\"\u003e\u003c/i\u003e\n \u003cspan\u003eUser Dashboard\u003c/span\u003e\n \u003c/button\u003e\n \u003cbutton id=\"nav-btn-admin\" onclick=\"switchMainView('admin-panel')\" class=\"px-3 py-1.5 rounded-md text-white/80 hover:text-white transition-all flex items-center space-x-2 hover:bg-white/10\"\u003e\n \u003ci class=\"bi bi-shield-lock-fill\"\u003e\u003c/i\u003e\n \u003cspan\u003eAdmin Panel\u003c/span\u003e\n \u003c/button\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003c!-- Right: Header Controls --\u003e\n \u003cdiv class=\"flex items-center space-x-3 sm:space-x-4 text-sm\"\u003e\n \u003cbutton onclick=\"switchUserTab('upgrade')\" class=\"hidden sm:flex items-center space-x-1.5 px-3 py-1.5 rounded-lg bg-amber-400 text-slate-900 font-semibold text-xs hover:bg-amber-300 transition-colors shadow-sm\"\u003e\n \u003ci class=\"bi bi-lightning-charge-fill text-amber-900\"\u003e\u003c/i\u003e\n \u003cspan\u003eUpgrade Pro\u003c/span\u003e\n \u003c/button\u003e\n\n \u003c!-- Language Selector --\u003e\n \u003cdiv class=\"hidden sm:flex items-center space-x-1.5 px-2.5 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 cursor-pointer text-xs font-medium border border-white/10 transition\"\u003e\n \u003cspan\u003e🇬🇧 English\u003c/span\u003e\n \u003ci class=\"bi bi-chevron-down text-[10px] opacity-70\"\u003e\u003c/i\u003e\n \u003c/div\u003e\n\n \u003c!-- Notifications Dropdown Trigger --\u003e\n \u003cbutton class=\"p-2 rounded-lg bg-white/10 hover:bg-white/20 text-white relative transition\"\u003e\n \u003ci class=\"bi bi-bell text-base\"\u003e\u003c/i\u003e\n \u003cspan class=\"absolute top-1.5 right-1.5 w-2 h-2 bg-rose-500 rounded-full ring-2 ring-brand-primary\"\u003e\u003c/span\u003e\n \u003c/button\u003e\n\n \u003c!-- Profile Dropdown --\u003e\n \u003cdiv class=\"flex items-center space-x-3 pl-2 border-l border-white/20\"\u003e\n \u003cdiv class=\"w-8 h-8 rounded-full overflow-hidden border border-white/30 bg-purple-300\"\u003e\n \u003cimg data-gen-id=\"header-user-avatar\" data-gen-prompt=\"Professional user headshot icon, friendly male designer smiling\" data-gen-aspect=\"1:1\" src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format\u0026fit=crop\u0026q=80\u0026w=150\" alt=\"John Doe\" class=\"w-full h-full object-cover\"\u003e\n \u003c/div\u003e\n \u003cdiv class=\"hidden lg:block text-left cursor-pointer\" onclick=\"toggleProfileMenu()\"\u003e\n \u003cdiv class=\"text-xs font-bold leading-tight flex items-center space-x-1\"\u003e\n \u003cspan id=\"user-display-name\"\u003eAlex Morgan\u003c/span\u003e\n \u003ci class=\"bi bi-chevron-down text-[10px]\"\u003e\u003c/i\u003e\n \u003c/div\u003e\n \u003cdiv class=\"text-[10px] text-purple-200\" id=\"user-display-role\"\u003ePro Account\u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/header\u003e\n\n \u003c!-- MAIN WRAPPER --\u003e\n \u003cdiv class=\"min-h-[calc(100vh-4rem)] flex flex-col\"\u003e\n\n \u003c!-- ========================================================================= --\u003e\n \u003c!-- 1. USER DASHBOARD VIEW --\u003e\n \u003c!-- ========================================================================= --\u003e\n \u003cdiv id=\"view-user-dashboard\" class=\"view-panel active flex-1\"\u003e\n \u003cdiv class=\"flex flex-col lg:flex-row min-h-full\"\u003e\n\n \u003c!-- USER SIDEBAR NAVIGATION --\u003e\n \u003caside class=\"w-full lg:w-64 bg-white border-r border-slate-200 flex-shrink-0 p-4 lg:py-6\"\u003e\n \u003cdiv class=\"space-y-1\"\u003e\n \u003cdiv class=\"px-3 py-2 text-[11px] font-bold text-slate-400 uppercase tracking-wider\"\u003eMain Menu\u003c/div\u003e\n \u003cbutton onclick=\"switchUserTab('overview')\" id=\"utab-btn-overview\" class=\"user-tab-btn active w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium rounded-lg bg-brand-50 text-brand-700\"\u003e\n \u003cdiv class=\"flex items-center space-x-3\"\u003e\n \u003ci class=\"bi bi-grid-1x2-fill text-lg\"\u003e\u003c/i\u003e\n \u003cspan\u003eOverview\u003c/span\u003e\n \u003c/div\u003e\n \u003c/button\u003e\n \u003cbutton onclick=\"switchUserTab('resumes')\" id=\"utab-btn-resumes\" class=\"user-tab-btn w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition\"\u003e\n \u003cdiv class=\"flex items-center space-x-3\"\u003e\n \u003ci class=\"bi bi-file-earmark-text text-lg\"\u003e\u003c/i\u003e\n \u003cspan\u003eMy Resumes\u003c/span\u003e\n \u003c/div\u003e\n \u003cspan class=\"bg-slate-100 text-slate-600 text-xs px-2 py-0.5 rounded-full font-semibold\"\u003e4\u003c/span\u003e\n \u003c/button\u003e\n \u003cbutton onclick=\"switchUserTab('ats')\" id=\"utab-btn-ats\" class=\"user-tab-btn w-full flex items-center justify-between px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition\"\u003e\n \u003cdiv class=\"flex items-center space-x-3\"\u003e\n \u003ci class=\"bi bi-speedometer2 text-lg\"\u003e\u003c/i\u003e\n \u003cspan\u003eATS Optimizer\u003c/span\u003e\n \u003c/div\u003e\n \u003cspan class=\"bg-emerald-100 text-emerald-700 text-[10px] px-2 py-0.5 rounded font-bold uppercase\"\u003e88 Score\u003c/span\u003e\n \u003c/button\u003e\n \u003c/div\u003e\n\n \u003cdiv class=\"mt-8 space-y-1\"\u003e\n \u003cdiv class=\"px-3 py-2 text-[11px] font-bold text-slate-400 uppercase tracking-wider\"\u003eAccount \u0026 Billing\u003c/div\u003e\n \u003cbutton onclick=\"switchUserTab('upgrade')\" id=\"utab-btn-upgrade\" class=\"user-tab-btn w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition\"\u003e\n \u003ci class=\"bi bi-credit-card text-lg\"\u003e\u003c/i\u003e\n \u003cspan\u003eSubscription \u0026 Plans\u003c/span\u003e\n \u003c/button\u003e\n \u003cbutton onclick=\"switchUserTab('settings')\" id=\"utab-btn-settings\" class=\"user-tab-btn w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition\"\u003e\n \u003ci class=\"bi bi-gear text-lg\"\u003e\u003c/i\u003e\n \u003cspan\u003eProfile \u0026 Settings\u003c/span\u003e\n \u003c/button\u003e\n \u003cbutton onclick=\"switchUserTab('support')\" id=\"utab-btn-support\" class=\"user-tab-btn w-full flex items-center space-x-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition\"\u003e\n \u003ci class=\"bi bi-question-circle text-lg\"\u003e\u003c/i\u003e\n \u003cspan\u003eHelp \u0026 Support\u003c/span\u003e\n \u003c/button\u003e\n \u003c/div\u003e\n\n \u003c!-- Usage Widget Box --\u003e\n \u003cdiv class=\"mt-8 p-4 rounded-xl bg-slate-50 border border-slate-200\"\u003e\n \u003cdiv class=\"flex items-center justify-between text-xs font-semibold text-slate-700 mb-1\"\u003e\n \u003cspan\u003eResume Credits\u003c/span\u003e\n \u003cspan class=\"text-brand-primary\"\u003e4 / 5 Used\u003c/span\u003e\n \u003c/div\u003e\n \u003cdiv class=\"w-full bg-slate-200 rounded-full h-2 mb-3\"\u003e\n \u003cdiv class=\"bg-brand-primary h-2 rounded-full\" style=\"width: 80%\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cp class=\"text-[11px] text-slate-500 mb-3\"\u003eFree plan limited to 5 resume builds. Upgrade for unlimited downloads.\u003c/p\u003e\n \u003cbutton onclick=\"switchUserTab('upgrade')\" class=\"w-full text-center py-1.5 px-3 bg-brand-primary hover:bg-brand-hover text-white text-xs font-semibold rounded-lg transition shadow-sm\"\u003e\n Upgrade to Pro\n \u003c/button\u003e\n \u003c/div\u003e\n\n \u003c!-- Toggle Empty State Demo Button (Interactive Design Helper) --\u003e\n \u003cdiv class=\"mt-6 pt-4 border-t border-slate-100 flex justify-between items-center text-xs text-slate-400\"\u003e\n \u003cspan\u003eDemo Empty State\u003c/span\u003e\n \u003cinput type=\"checkbox\" id=\"toggle-empty-state\" onchange=\"toggleEmptyState()\" class=\"rounded border-slate-300 text-brand-primary focus:ring-brand-primary cursor-pointer\"\u003e\n \u003c/div\u003e\n \u003c/aside\u003e\n\n \u003c!-- USER CONTENT AREA --\u003e\n \u003cmain class=\"flex-1 p-4 sm:p-6 lg:p-8 max-w-7xl\"\u003e\n\n \u003c!-- TAB 1: OVERVIEW --\u003e\n \u003cdiv id=\"utab-content-overview\" class=\"user-tab-content tab-content active space-y-6\"\u003e\n\n \u003c!-- Welcome Banner Header --\u003e\n \u003cdiv class=\"bg-white rounded-2xl p-6 border border-slate-200 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4\"\u003e\n \u003cdiv\u003e\n \u003ch1 class=\"text-2xl font-bold text-slate-900 tracking-tight\"\u003eWelcome back, Alex! 👋\u003c/h1\u003e\n \u003cp class=\"text-sm text-slate-500 mt-1\"\u003eYour resumes are performing well. You have 2 resumes optimized for ATS compliance.\u003c/p\u003e\n \u003c/div\u003e\n \u003cdiv class=\"flex flex-wrap items-center gap-3\"\u003e\n \u003cbutton onclick=\"openModal('upload-resume-modal')\" class=\"inline-flex items-center space-x-2 px-4 py-2.5 rounded-lg border border-slate-300 bg-white hover:bg-slate-50 text-slate-700 font-semibold text-sm transition shadow-sm\"\u003e\n \u003ci class=\"bi bi-cloud-upload text-slate-500\"\u003e\u003c/i\u003e\n \u003cspan\u003eUpload Resume\u003c/span\u003e\n \u003c/button\u003e\n \u003cbutton onclick=\"openModal('create-resume-modal')\" class=\"inline-flex items-center space-x-2 px-4 py-2.5 rounded-lg bg-brand-primary hover:bg-brand-hover text-white font-","mainCss":null,"sectionCss":null,"form_id":null,"gdpr":null,"badge":null,"header_script":"","body_script":null,"redirect_url":null,"webhook":null,"page_type":"general","builder_type":"canvas"}},"__N_SSP":true},"page":"/[slug]","query":{"slug":"only-use-html-css-tasjtghk58"},"buildId":"nfJCWJBABLrJvFEyH87ku","isFallback":false,"isExperimentalCompile":false,"gssp":true,"scriptLoader":[]}
