<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Openrouter</title>



    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.8/purify.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

	<style>

        :root {

            --bg-primary: #121212;

            --bg-secondary: #1e1e1e;

            --bg-tertiary: #2a2a2a;

            --bg-input: #252525;

            --text-primary: #e0e0e0;

            --text-secondary: #b0b0b0;

            --text-placeholder: #757575;

            --accent-primary: #6a11cb;

            --accent-secondary: #2575fc;

            --accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));

            --border-color: #3a3a3a;

            --error-color: #ff5252;

            --success-color: #4caf50;

            --info-color: #2196f3;

            --code-bg: #2d2d2d;

            --code-text: #cccccc;

            --user-bubble-bg: #303030;

            --ai-bubble-bg: var(--bg-secondary);

            --scrollbar-thumb: #424242;

            --scrollbar-track: var(--bg-secondary);

            --shadow-light: rgba(0, 0, 0, 0.2);

            --shadow-medium: rgba(0, 0, 0, 0.4);

            --border-radius: 12px;

            --border-radius-sm: 8px;

            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

            --font-mono: 'Roboto Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

            --transition-fast: all 0.2s ease-out;

            --transition-medium: all 0.3s ease-in-out;

        }



        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');



        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }

        html { font-size: 16px; }

        body {

            font-family: var(--font-sans);

            background-color: var(--bg-primary);

            color: var(--text-primary);

            display: flex;

            flex-direction: column;

            height: 100vh;

            line-height: 1.6;

            overflow: hidden;

        }

        .header {

            background: var(--bg-secondary);

            padding: 12px 20px;

            border-bottom: 1px solid var(--border-color);

            box-shadow: 0 2px 10px var(--shadow-light);

            display: flex;

            gap: 16px;

            align-items: center;

            flex-wrap: wrap;

            z-index: 10;

        }

		.header-title {

			font-size: 1.35rem;

			font-weight: 700;

			display: flex;

			align-items: center;

			gap: 8px;

		}

		.header-title svg {

			width: 28px;

			height: 28px;

			color: var(--accent-secondary);

			filter: drop-shadow(0 0 3px var(--accent-secondary));

		}

        .config-group {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-left: auto;

            flex-wrap: wrap;

        }

        .input-field, .select-field {

            padding: 10px 14px;

            border: 1px solid var(--border-color);

            border-radius: var(--border-radius-sm);

            font-family: inherit;

            font-size: 0.9rem;

            background: var(--bg-input);

            color: var(--text-primary);

            transition: var(--transition-fast);

            min-width: 180px;

        }

        .input-field::placeholder { color: var(--text-placeholder); }

        .input-field:focus, .select-field:focus {

            outline: none;

            border-color: var(--accent-secondary);

            box-shadow: 0 0 0 2px rgba(37, 117, 252, 0.3);

        }

        input[type="password"] { letter-spacing: 0.1em; }

        .select-field {

            padding: 5px 5px; 

            padding-right: 10px; 

            min-width: 10px; 

            height: 32px; 

            font-size: 0.8rem; 

        }

        .message-incomplete {

            border-bottom: 2px dashed var(--error-color);

            padding-bottom: 18px; 

        }

        .message-incomplete .incomplete-indicator {

            display: block; 

            font-size: 0.8rem;

            color: var(--error-color);

            font-style: italic;

            margin-top: 10px; 

            text-align: right; 

            padding-right: 5px;

        }

        .btn-continue {

            background-color: var(--info-color);

            color: white;

            border: 1px solid var(--info-color);

        }

        .btn-continue:hover:not(:disabled) {

            filter: brightness(1.1);

        }

        .btn {

            padding: 10px 18px;

            border-radius: var(--border-radius-sm);

            font-weight: 500;

            font-size: 0.9rem;

            border: none;

            cursor: pointer;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            transition: var(--transition-fast);

            white-space: nowrap;

        }

        .btn svg { width: 16px; height: 16px; }

        .btn:disabled { opacity: 0.6; cursor: not-allowed; }

        .btn-primary { background: var(--accent-gradient); color: white; }

        .btn-primary:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 2px 8px rgba(37, 117, 252, 0.3); }

        .btn-primary:active:not(:disabled) { filter: brightness(0.95); }

        .btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); }

        .btn-secondary:hover:not(:disabled) { background: #383838; color: var(--text-primary); }

        .btn-danger { background: var(--error-color); color: white; }

        .btn-danger:hover:not(:disabled) { filter: brightness(1.1); }

        .status {

            font-size: 0.85rem;

            color: var(--text-secondary);

            display: flex;

            align-items: center;

            gap: 5px;

            margin-left: 10px;

        }

		#statusText {

            min-width: 325px;

            display: inline-block;

            text-align: left;

        }

		.status-dot {

			width: 10px;

			height: 10px;

			border-radius: 50%;

			background: var(--text-secondary);

			transition: background-color 0.3s ease;

			display: inline-block;

			vertical-align: middle;

			margin-left: 5px;

		}

        .status-dot.connected { background: var(--success-color); }

        .status-dot.error { background: var(--error-color); }

        .status-dot.busy { background: var(--info-color); animation: pulseStatus 1.5s infinite; }

		.token-counter {

			margin-left: 12px;

			font-size: 0.85rem;

			color: var(--text-secondary);

			background: rgba(255, 255, 255, 0.1);

			padding: 4px 8px;

			border-radius: var(--border-radius-sm);

		}

        @keyframes pulseStatus {

            0%, 100% { opacity: 1; }

            50% { opacity: 0.5; }

        }

        .chat-container {

            flex: 1 1 auto;

            overflow-y: auto;

            padding: 24px 20px;

            background: var(--bg-primary);

            display: flex;

            flex-direction: column;

            gap: 20px;

            position: relative;

        }

        .chat-container::-webkit-scrollbar { width: 10px; }

        .chat-container::-webkit-scrollbar-track { background: var(--scrollbar-track); }

        .chat-container::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; border: 2px solid var(--scrollbar-track); }

        .chat-container::-webkit-scrollbar-thumb:hover { background: #555; }

        .message {

			min-width: 60%;

            max-width: 60%;

            padding: 14px 20px;

            border-radius: var(--border-radius);

            line-height: 1.6;

            word-wrap: break-word;

            box-shadow: 0 3px 8px var(--shadow-light);

            position: relative;

            animation: fadeIn 0.4s ease-out;

            display: flex;

            flex-direction: column;

			margin-left: auto;

			margin-right: auto;

        }

        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(10px); }

            to { opacity: 1; transform: translateY(0); }

        }

        .message-content {

            flex-grow: 1;

            user-select: text;

            -webkit-user-select: text;

            -moz-user-select: text;

            -ms-user-select: text;

        }

		.user-message .message-content {

			white-space: pre-wrap; 

			word-wrap: break-word; 

		}

		.user-message {

			background: var(--user-bubble-bg);

			color: var(--text-primary);

			align-self: flex-end;

			border-bottom-right-radius: 4px;

		}

        .ai-message {

            background: var(--ai-bubble-bg);

            color: var(--text-primary);

            align-self: flex-start;

            border-bottom-left-radius: 4px;

            border-left: 4px solid var(--accent-secondary);

        }

        .system-message {

            font-size: 0.85rem;

            color: var(--text-secondary);

            text-align: center;

            background: rgba(0, 0, 0, 0.1);

            padding: 8px 12px;

finish the code