<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Synthenis Code</title>
<link rel="icon" type="image/png" href="https://cdn.synthenis.com/img/apps/code.png">
<link rel="preconnect" href="https://hchsuqfmjzqeggefuwme.supabase.co" crossorigin>
<link rel="dns-prefetch" href="https://hchsuqfmjzqeggefuwme.supabase.co">
<link rel="preconnect" href="https://cdn.synthenis.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.synthenis.com">
<link rel="preconnect" href="https://synthenis.com" crossorigin>
<link rel="dns-prefetch" href="https://synthenis.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#eef0f3" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="/static/syn/chunks/app.min.css">
</head>
<body>

<div id="loadingOverlay" class="loading-overlay">
<div class="loading-spinner"></div>
<div class="loading-text" data-i18n="loading">Loading...</div>
</div>

<div class="app-shell">

<div id="mobileOverlay" class="mobile-overlay"></div>

<aside class="sidebar collapsed" id="sidebar">
<div class="sidebar-header">
<div class="sidebar-brand">
<img src="https://cdn.synthenis.com/img/apps/code.png" alt="Synthenis Code">
<span>Synthenis Code</span>
</div>
<button class="sb-btn" id="btnNewProject" title="New Project">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/plus.svg" alt="">
</button>
</div>

<div class="sidebar-content">
<div class="sidebar-section">
<div class="sidebar-section-title">
<span data-i18n="sidebar_projects">Projects</span>
</div>
<div id="projectList"></div>
</div>

<div class="sidebar-section" id="sectionFiles" style="display:none">
<div class="sidebar-section-title">
<span data-i18n="sidebar_files">Files</span>
<button class="sb-btn" id="btnNewFile" style="width:24px;height:24px">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/file-plus.svg" alt="" style="width:14px;height:14px">
</button>
</div>
<div id="fileList"></div>
</div>
</div>

<div class="sidebar-footer">
<button class="user-avatar-btn" id="userAvatarBtn">
<img class="user-avatar-img" id="userAvatarImg" src="https://cdn.synthenis.com/img/avatars/def.png" alt="">
<div class="user-avatar-info">
<div class="user-avatar-name" id="userAvatarName" data-i18n="menu_sign_in">Sign In</div>
<div class="user-avatar-sub" id="userAvatarSub"></div>
</div>
</button>
<div class="user-menu" id="userMenu">
<button class="um-item" id="menuAccount" style="display:none">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/user-circle.svg" alt="">
<span data-i18n="menu_account">Account</span>
</button>
<button class="um-item" id="menuSettings">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/gear.svg" alt="">
<span data-i18n="menu_settings">Settings</span>
</button>
<button class="um-item" id="menuHelp">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/question.svg" alt="">
<span data-i18n="menu_help">Help</span>
</button>
<div class="um-sep"></div>
<button class="um-item" id="menuSignIn">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/sign-in.svg" alt="">
<span data-i18n="menu_sign_in">Sign In</span>
</button>
<button class="um-item danger" id="menuSignOut" style="display:none">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/sign-out.svg" alt="">
<span data-i18n="menu_sign_out">Sign Out</span>
</button>
</div>
</div>
</aside>

<main class="main-area">
<div class="topbar">
<div class="topbar-left">
<button class="sb-btn" id="btnToggleSidebar">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/sidebar-simple.svg" alt="">
</button>
</div>
<div class="topbar-tabs" id="editorTabs"></div>
<div class="topbar-right">
<button class="sb-btn" id="btnToggleAI" title="Synthenis AI (Ctrl+B)">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/sparkle.svg" alt="">
</button>
</div>
</div>

<div style="display:flex;flex:1;min-height:0;overflow:hidden">
<div class="editor-container" style="flex:1;min-width:0">
<div id="welcomeScreen" class="welcome-screen">
<img class="welcome-logo" src="https://cdn.synthenis.com/land/syn-big.png" alt="Synthenis" onerror="this.src='https://cdn.synthenis.com/img/apps/code.png'">
<h1 class="welcome-title" data-i18n="welcome_title">Welcome to Synthenis Code</h1>
<p class="welcome-sub" data-i18n="welcome_sub">Powerful cloud-based code editor. Create, edit, and sync your projects from anywhere.</p>
<div class="welcome-actions">
<button class="welcome-btn" id="btnWelcomeNew">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/folder-simple-plus.svg" alt="">
<div class="welcome-btn-text">
<div class="welcome-btn-title" data-i18n="action_new_project">New Project</div>
<div class="welcome-btn-desc" data-i18n="action_new_project_desc">Create a new project from scratch</div>
</div>
</button>
<button class="welcome-btn" id="btnWelcomeOpen">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/folder-open.svg" alt="">
<div class="welcome-btn-text">
<div class="welcome-btn-title" data-i18n="action_open_project">Open Project</div>
<div class="welcome-btn-desc" data-i18n="action_open_project_desc">Open an existing project</div>
</div>
</button>
<button class="welcome-btn" id="btnWelcomeRecent">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/clock-counter-clockwise.svg" alt="">
<div class="welcome-btn-text">
<div class="welcome-btn-title" data-i18n="action_recent">Recent Projects</div>
<div class="welcome-btn-desc" data-i18n="action_recent_desc">Continue where you left off</div>
</div>
</button>
</div>
</div>
<div id="editorMount" style="height:100%;width:100%"></div>
</div>
<aside class="ai-panel" id="aiPanel" style="display:none">
<div class="ai-panel-header">
<img src="https://cdn.synthenis.com/img/apps/code.png" alt="">
<span data-i18n="ai_panel_title">Synthenis AI</span>
<span class="ai-model-badge">Preview</span>
<button class="sb-btn" style="width:28px;height:28px" onclick="document.getElementById('aiPanel').style.display='none';document.getElementById('btnToggleAI').classList.remove('active');">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/x.svg" alt="" style="width:14px;height:14px">
</button>
</div>
<div class="ai-chat-messages" id="aiChatMessages"></div>
<div class="ai-chat-footer">
<div class="ai-chat-input-row">
<textarea id="aiChatInput" rows="1" data-i18n="ai_placeholder" placeholder="Ask a question..."></textarea>
<button class="ai-send-btn" id="aiChatSendBtn"><img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/paper-plane-tilt.svg" alt=""></button>
</div>
<div class="ai-suggestions">
<button class="ai-suggestion-chip" data-i18n="ai_explain">Explain</button>
<button class="ai-suggestion-chip" data-i18n="ai_fix">Fix</button>
<button class="ai-suggestion-chip" data-i18n="ai_optimize">Optimize</button>
<button class="ai-suggestion-chip" data-i18n="ai_test">Write Tests</button>
</div>
</div>
</aside>
</div>

<div class="statusbar">
<div class="statusbar-left">
<div class="status-item" id="syncStatus">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/cloud-slash.svg" alt="">
<span data-i18n="sync_disconnected">Offline</span>
</div>
</div>
<div class="statusbar-right">
<span class="ai-status" id="btnToggleAI2" title="Synthenis AI"><img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/sparkle.svg" alt="">Synthenis AI</span>
<span class="status-item" id="statusLn"></span>
<span class="status-item" id="statusCol"></span>
<span class="status-item" id="statusLang"></span>
</div>
</div>
</main>
</div>

<div id="ctxMenu" class="ctx-menu"></div>
<div id="toastContainer" class="toast-container"></div>

<div class="modal-overlay" id="modalNewProject">
<div class="modal-box">
<div class="modal-head">
<h3 data-i18n="new_project_title">New Project</h3>
<button class="modal-close" data-modal-close="modalNewProject"><img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/x.svg" alt=""></button>
</div>
<div class="modal-body">
<div class="fg">
<label data-i18n="new_project_name">Project Name</label>
<input type="text" class="input-f" id="newProjectNameInput" data-i18n="new_project_name_ph" placeholder="Enter project name...">
</div>
<label data-i18n="new_project_type" style="display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:10px">Project Type</label>
<div class="new-proj-grid">
<button class="new-proj-opt" data-new-type="html">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/file-html.svg" alt="">
<span data-i18n="new_project_html">HTML / CSS / JS</span>
</button>
<button class="new-proj-opt" data-new-type="node">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/file-js.svg" alt="">
<span data-i18n="new_project_node">Node.js</span>
</button>
<button class="new-proj-opt" data-new-type="python">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/file.svg" alt="">
<span data-i18n="new_project_python">Python</span>
</button>
<button class="new-proj-opt" data-new-type="empty">
<img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/folder-simple-dashed.svg" alt="">
<span data-i18n="new_project_empty">Empty Project</span>
</button>
</div>
</div>
</div>
</div>

<div class="modal-overlay" id="modalNewFile">
<div class="modal-box">
<div class="modal-head">
<h3 data-i18n="new_file_title">New File</h3>
<button class="modal-close" data-modal-close="modalNewFile"><img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/x.svg" alt=""></button>
</div>
<div class="modal-body">
<div class="fg">
<label data-i18n="new_file_name">File Name</label>
<input type="text" class="input-f" id="newFileNameInput" data-i18n="new_file_name_ph" placeholder="file-name.html">
</div>
</div>
<div class="modal-footer">
<button class="btn-s" data-modal-close="modalNewFile" data-i18n="btn_cancel">Cancel</button>
<button class="btn-p" id="btnCreateFile" data-i18n="new_file_create">Create</button>
</div>
</div>
</div>

<div class="modal-overlay" id="modalDelete">
<div class="modal-box">
<div class="modal-head">
<h3 data-i18n="delete_title">Delete</h3>
<button class="modal-close" data-modal-close="modalDelete"><img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/x.svg" alt=""></button>
</div>
<div class="modal-body">
<p><span data-i18n="delete_confirm">Are you sure you want to delete this item?</span></p>
<p style="font-weight:600;margin-top:8px;color:var(--t1)" id="deleteItemName"></p>
</div>
<div class="modal-footer">
<button class="btn-s" data-modal-close="modalDelete" data-i18n="delete_no">Cancel</button>
<button class="btn-d" id="btnConfirmDelete" data-i18n="delete_yes">Delete</button>
</div>
</div>
</div>

<div class="modal-overlay" id="modalRename">
<div class="modal-box">
<div class="modal-head">
<h3 data-i18n="rename_title">Rename</h3>
<button class="modal-close" data-modal-close="modalRename"><img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/x.svg" alt=""></button>
</div>
<div class="modal-body">
<div class="fg">
<input type="text" class="input-f" id="renameInput" data-i18n="rename_ph" placeholder="New name...">
</div>
</div>
<div class="modal-footer">
<button class="btn-s" data-modal-close="modalRename" data-i18n="btn_cancel">Cancel</button>
<button class="btn-p" id="btnConfirmRename" data-i18n="btn_ok">OK</button>
</div>
</div>
</div>

<div class="modal-overlay" id="modalUnsaved">
<div class="modal-box">
<div class="modal-head">
<h3 data-i18n="unsaved_title">Unsaved Changes</h3>
<button class="modal-close" data-modal-close="modalUnsaved"><img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/x.svg" alt=""></button>
</div>
<div class="modal-body">
<p data-i18n="unsaved_msg">You have unsaved changes. Continue without saving?</p>
<p style="font-weight:600;margin-top:8px;color:var(--t1)" id="unsavedFileName"></p>
</div>
<div class="modal-footer">
<button class="btn-s" id="btnUnsavedDiscard" data-i18n="unsaved_discard">Discard</button>
<button class="btn-p" id="btnUnsavedSave" data-i18n="unsaved_save">Save</button>
</div>
</div>
</div>

<div class="modal-overlay" id="modalSettings">
<div class="modal-box" style="max-width:440px">
<div class="modal-head">
<h3 data-i18n="settings_title">Settings</h3>
<button class="modal-close" data-modal-close="modalSettings"><img src="https://cdn.synthenis.com/img/phosphor/SVG/regular/x.svg" alt=""></button>
</div>
<div class="modal-body">
<div class="switch-row">
<div>
<div class="switch-row-label" data-i18n="settings_auto_sync">Auto Sync</div>
<div class="switch-row-desc" data-i18n="settings_auto_sync_desc">Automatically save changes to the cloud</div>
</div>
<button class="sw-btn" id="swAutoSync" role="switch" aria-checked="true"><span class="sw-thumb"></span></button>
</div>
<div class="switch-row">
<div>
<div class="switch-row-label" data-i18n="settings_word_wrap">Word Wrap</div>
<div class="switch-row-desc" data-i18n="settings_word_wrap_desc">Automatically wrap long lines</div>
</div>
<button class="sw-btn" id="swWordWrap" role="switch" aria-checked="true"><span class="sw-thumb"></span></button>
</div>
<div class="switch-row">
<div>
<div class="switch-row-label" data-i18n="settings_minimap">Minimap</div>
<div class="switch-row-desc" data-i18n="settings_minimap_desc">Show minimap in editor</div>
</div>
<button class="sw-btn" id="swMinimap" role="switch" aria-checked="false"><span class="sw-thumb"></span></button>
</div>
<div class="switch-row">
<div>
<div class="switch-row-label" data-i18n="settings_sound">Sounds</div>
<div class="switch-row-desc" data-i18n="settings_sound_desc">Enable editor sound effects</div>
</div>
<button class="sw-btn" id="swSound" role="switch" aria-checked="true"><span class="sw-thumb"></span></button>
</div>
<div style="display:flex;gap:12px;margin-top:14px">
<div class="fg" style="flex:1">
<label data-i18n="settings_font_size">Font Size</label>
<select class="input-f" id="inpFontSize" style="padding:8px 12px">
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14" selected>14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="18">18px</option>
<option value="20">20px</option>
</select>
</div>
<div class="fg" style="flex:1">
<label data-i18n="settings_tab_size">Tab Size</label>
<select class="input-f" id="inpTabSize" style="padding:8px 12px">
<option value="2" selected>2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
</div>
</div>
<div style="margin-top:14px">
<label data-i18n="settings_language" style="display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:8px">Language</label>
<div id="langSelector" style="max-height:200px;overflow-y:auto;border:1px solid var(--bd);border-radius:14px;padding:4px"></div>
</div>
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="/langs/tr.js"></script>
<script src="/langs/en.js"></script>
<script src="/static/syn/chunks/app.min.js"></script>
</body>
</html>
