html_content = f"""\n <!DOCTYPE html>\n <html>\n <head>\n <title>Text Viewer</title>\n <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>\n <style>\n * {{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }}\n \n body {{\n font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;\n background: #1a1a1a;\n color: #cccccc;\n height: 100vh;\n overflow: hidden;\n }}\n \n .text-content {{\n background: #1a1a1a;\n color: #cccccc;\n padding: 20px 20px 0 20px;\n height: 100vh;\n width: 100vw;\n overflow-y: auto;\n font-size: 15px;\n white-space: pre-wrap;\n word-wrap: break-word;\n border: none;\n outline: none;\n resize: none;\n line-height: 1.6;\n }}\n \n .markdown-content {{\n background: #1a1a1a;\n color: #cccccc;\n padding: 20px 20px 0 20px;\n height: 100vh;\n width: 100vw;\n overflow-y: auto;\n font-size: 15px;\n line-height: 1.6;\n }}\n \n .markdown-content h1, .markdown-content h2, .markdown-content h3, \n .markdown-content h4, .markdown-content h5, .markdown-content h6 {{\n color: #D1E550;\n margin: 20px 0 10px 0;\n }}\n \n .markdown-content h1 {{ font-size: 2em; }}\n .markdown-content h2 {{ font-size: 1.5em; }}\n .markdown-content h3 {{ font-size: 1.3em; }}\n \n .markdown-content p {{\n margin: 10px 0;\n }}\n \n .markdown-content code {{\n background: #2a2a2a;\n padding: 2px 6px;\n border-radius: 3px;\n font-family: 'JetBrains Mono', monospace;\n }}\n \n .markdown-content pre {{\n background: #2a2a2a;\n padding: 15px;\n border-radius: 5px;\n overflow-x: auto;\n margin: 15px 0;\n }}\n \n .markdown-content pre code {{\n background: none;\n padding: 0;\n }}\n \n .markdown-content blockquote {{\n border-left: 4px solid #D1E550;\n padding-left: 15px;\n margin: 15px 0;\n color: #999;\n }}\n \n .markdown-content ul, .markdown-content ol {{\n margin: 10px 0;\n padding-left: 20px;\n }}\n \n .markdown-content li {{\n margin: 5px 0;\n }}\n \n .markdown-content table {{\n border-collapse: collapse;\n width: 100%;\n margin: 15px 0;\n }}\n \n .markdown-content th, .markdown-content td {{\n border: 1px solid #444;\n padding: 8px 12px;\n text-align: left;\n }}\n \n .markdown-content th {{\n background: #2a2a2a;\n color: #D1E550;\n }}\n \n .markdown-content a {{\n color: #D1E550;\n text-decoration: none;\n }}\n \n .markdown-content a:hover {{\n text-decoration: underline;\n }}\n \n .text-content::-webkit-scrollbar,\n .markdown-content::-webkit-scrollbar {{\n width: 8px;\n }}\n \n .text-content::-webkit-scrollbar-track,\n .markdown-content::-webkit-scrollbar-track {{\n background: #1a1a1a;\n }}\n \n .text-content::-webkit-scrollbar-thumb,\n .markdown-content::-webkit-scrollbar-thumb {{\n background: #D1E550;\n border-radius: 4px;\n }}\n \n .text-content::-webkit-scrollbar-thumb:hover,\n .markdown-content::-webkit-scrollbar-thumb:hover {{\n background: #E8FF59;\n }}\n \n .error {{\n color: #ff6b6b;\n padding: 20px;\n text-align: center;\n }}\n \n .spinner {{\n display: inline-block;\n width: 50px;\n height: 50px;\n border: 3px solid rgba(209, 229, 80, 0.3);\n border-radius: 50%;\n border-top-color: #D1E550;\n animation: spin 1s ease-in-out infinite;\n margin-right: 15px;\n }}\n \n @keyframes spin {{\n to {{ transform: rotate(360deg); }}\n }}\n \n .loading-container {{\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n gap: 20px;\n }}\n \n .loading-text {{\n font-size: 18px;\n color: #D1E550;\n font-weight: 500;\n }}\n \n .progress-container {{\n width: 300px;\n margin-top: 10px;\n }}\n \n .progress-bar {{\n width: 100%;\n height: 6px;\n background-color: rgba(209, 229, 80, 0.2);\n border-radius: 3px;\n overflow: hidden;\n margin-bottom: 8px;\n }}\n \n .progress-fill {{\n height: 100%;\n background-color: #D1E550;\n border-radius: 3px;\n width: 0%;\n transition: width 0.3s ease;\n }}\n \n .progress-text {{\n font-size: 14px;\n color: #cccccc;\n text-align: center;\n }}\n \n .truncation-message {{\n background: #2a2a2a;\n border: 2px solid #D1E550;\n border-radius: 8px;\n padding: 15px;\n margin: 20px 0;\n color: #D1E550;\n font-weight: bold;\n text-align: center;\n font-size: 16px;\n }}\n \n .truncation-end {{\n background: #2a2a2a;\n border: 1px solid #666;\n border-radius: 5px;\n padding: 0;\n margin: 0;\n color: #D1E550;\n font-style: italic;\n text-align: center;\n font-size: 12px;\n }}\n </style>\n </head>\n <body>\n <div id="content" class="text-content">{file_content.replace('<', '<').replace('>', '>')}</div>\n </body>\n </html>\n """
0 commit comments