|
|
import React, { useState, useEffect } from 'react';
|
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
|
import { FileText, Code, Eye, ArrowLeft, Download, Copy, Check, Maximize2, ZoomIn, ZoomOut, Search } from 'lucide-react';
|
|
|
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
|
import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
|
|
import { marked } from 'marked';
|
|
|
|
|
|
const TextViewer = () => {
|
|
|
const [text, setText] = useState('');
|
|
|
const [fileName, setFileName] = useState('');
|
|
|
const [viewMode, setViewMode] = useState('text');
|
|
|
const [copied, setCopied] = useState(false);
|
|
|
const [fontSize, setFontSize] = useState(16);
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
const textParam = urlParams.get('text');
|
|
|
const fileParam = urlParams.get('file');
|
|
|
|
|
|
if (textParam) {
|
|
|
setText(decodeURIComponent(textParam));
|
|
|
} else {
|
|
|
const savedText = localStorage.getItem('extractedText');
|
|
|
if (savedText) setText(savedText);
|
|
|
}
|
|
|
|
|
|
if (fileParam) {
|
|
|
setFileName(decodeURIComponent(fileParam));
|
|
|
} else {
|
|
|
setFileName(localStorage.getItem('fileName') || 'extracted-text');
|
|
|
}
|
|
|
}, []);
|
|
|
|
|
|
const viewModes = [
|
|
|
{ id: 'text', label: 'Text', icon: <FileText size={18} />, ext: '.txt' },
|
|
|
{ id: 'markdown', label: 'Markdown', icon: <Code size={18} />, ext: '.md' },
|
|
|
{ id: 'html', label: 'Rendered', icon: <Eye size={18} />, ext: '.html' },
|
|
|
{ id: 'json', label: 'JSON', icon: <Code size={18} />, ext: '.json' }
|
|
|
];
|
|
|
|
|
|
const handleCopy = async () => {
|
|
|
try {
|
|
|
await navigator.clipboard.writeText(text);
|
|
|
setCopied(true);
|
|
|
setTimeout(() => setCopied(false), 2000);
|
|
|
} catch (err) {
|
|
|
console.error('Failed to copy text:', err);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleBack = () => {
|
|
|
window.history.back();
|
|
|
};
|
|
|
|
|
|
const adjustFontSize = (delta) => {
|
|
|
setFontSize(prev => Math.max(12, Math.min(24, prev + delta)));
|
|
|
}; cons
|
|
|
t renderContent = () => {
|
|
|
const baseStyle = { fontSize: `${fontSize}px`, lineHeight: 1.7 };
|
|
|
|
|
|
switch (viewMode) {
|
|
|
case 'text':
|
|
|
return (
|
|
|
<div className="reader-content" style={baseStyle}>
|
|
|
<pre className="text-reader">{text}</pre>
|
|
|
</div>
|
|
|
);
|
|
|
case 'markdown':
|
|
|
return (
|
|
|
<div className="reader-content">
|
|
|
<SyntaxHighlighter
|
|
|
language="markdown"
|
|
|
style={atomDark}
|
|
|
customStyle={{
|
|
|
...baseStyle,
|
|
|
background: 'transparent',
|
|
|
border: 'none',
|
|
|
padding: 0,
|
|
|
margin: 0
|
|
|
}}
|
|
|
>
|
|
|
{text}
|
|
|
</SyntaxHighlighter>
|
|
|
</div>
|
|
|
);
|
|
|
case 'html':
|
|
|
return (
|
|
|
<div
|
|
|
className="reader-content html-reader"
|
|
|
style={baseStyle}
|
|
|
dangerouslySetInnerHTML={{ __html: marked(text) }}
|
|
|
/>
|
|
|
);
|
|
|
case 'json':
|
|
|
const jsonData = {
|
|
|
metadata: {
|
|
|
fileName: fileName || 'extracted-text',
|
|
|
extractedAt: new Date().toISOString(),
|
|
|
characterCount: text.length,
|
|
|
lineCount: text.split('\n').length,
|
|
|
wordCount: text.split(/\s+/).filter(word => word.length > 0).length
|
|
|
},
|
|
|
content: {
|
|
|
rawText: text,
|
|
|
lines: text.split('\n'),
|
|
|
paragraphs: text.split('\n\n').filter(p => p.trim().length > 0)
|
|
|
}
|
|
|
};
|
|
|
return (
|
|
|
<div className="reader-content">
|
|
|
<SyntaxHighlighter
|
|
|
language="json"
|
|
|
style={atomDark}
|
|
|
customStyle={{
|
|
|
...baseStyle,
|
|
|
background: 'transparent',
|
|
|
border: 'none',
|
|
|
padding: 0,
|
|
|
margin: 0
|
|
|
}}
|
|
|
>
|
|
|
{JSON.stringify(jsonData, null, 2)}
|
|
|
</SyntaxHighlighter>
|
|
|
</div>
|
|
|
);
|
|
|
default:
|
|
|
return null;
|
|
|
}
|
|
|
}; return
|
|
|
(
|
|
|
<div className="text-viewer-app">
|
|
|
{/* Same background as main app */}
|
|
|
<div className="viewer-background">
|
|
|
<div className="giant-orb-background">
|
|
|
<div className="giant-orb-container">
|
|
|
<div className="gradient-orb orb-1"></div>
|
|
|
<div className="gradient-orb orb-2"></div>
|
|
|
<div className="gradient-orb orb-3"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className="viewer-glass-container">
|
|
|
{/* Professional Header */}
|
|
|
<motion.header
|
|
|
className="viewer-header"
|
|
|
initial={{ opacity: 0, y: -20 }}
|
|
|
animate={{ opacity: 1, y: 0 }}
|
|
|
transition={{ duration: 0.6 }}
|
|
|
>
|
|
|
<div className="header-left">
|
|
|
<motion.button
|
|
|
className="back-button"
|
|
|
onClick={handleBack}
|
|
|
whileHover={{ scale: 1.05 }}
|
|
|
whileTap={{ scale: 0.95 }}
|
|
|
>
|
|
|
<ArrowLeft size={18} />
|
|
|
Back
|
|
|
</motion.button>
|
|
|
|
|
|
<div className="document-info">
|
|
|
<h1 className="document-title">{fileName}</h1>
|
|
|
<span className="document-stats">
|
|
|
{text.length} chars • {text.split('\n').length} lines • {text.split(/\s+/).filter(w => w.length > 0).length} words
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className="header-actions">
|
|
|
<div className="search-container">
|
|
|
<Search size={16} />
|
|
|
<input
|
|
|
type="text"
|
|
|
placeholder="Search in document..."
|
|
|
value={searchTerm}
|
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
|
className="search-input"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div className="font-controls">
|
|
|
<button onClick={() => adjustFontSize(-2)} className="font-btn">
|
|
|
<ZoomOut size={16} />
|
|
|
</button>
|
|
|
<span className="font-size">{fontSize}px</span>
|
|
|
<button onClick={() => adjustFontSize(2)} className="font-btn">
|
|
|
<ZoomIn size={16} />
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<motion.button
|
|
|
className="action-btn"
|
|
|
onClick={handleCopy}
|
|
|
whileHover={{ scale: 1.05 }}
|
|
|
whileTap={{ scale: 0.95 }}
|
|
|
>
|
|
|
<AnimatePresence mode="wait">
|
|
|
{copied ? (
|
|
|
<motion.div key="copied" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
|
|
|
<Check size={16} />
|
|
|
</motion.div>
|
|
|
) : (
|
|
|
<motion.div key="copy" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
|
|
|
<Copy size={16} />
|
|
|
</motion.div>
|
|
|
)}
|
|
|
</AnimatePresence>
|
|
|
{copied ? 'Copied!' : 'Copy'}
|
|
|
</motion.button>
|
|
|
</div>
|
|
|
</motion.header>
|
|
|
{/* Format Selector */}
|
|
|
<motion.div
|
|
|
className="format-selector"
|
|
|
initial={{ opacity: 0, y: 20 }}
|
|
|
animate={{ opacity: 1, y: 0 }}
|
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
|
>
|
|
|
<div className="format-tabs">
|
|
|
{viewModes.map((mode, index) => (
|
|
|
<motion.button
|
|
|
key={mode.id}
|
|
|
className={`format-tab ${viewMode === mode.id ? 'active' : ''}`}
|
|
|
onClick={() => setViewMode(mode.id)}
|
|
|
whileHover={{ scale: 1.02 }}
|
|
|
whileTap={{ scale: 0.98 }}
|
|
|
initial={{ opacity: 0, x: -20 }}
|
|
|
animate={{ opacity: 1, x: 0 }}
|
|
|
transition={{ delay: index * 0.1 }}
|
|
|
>
|
|
|
{mode.icon}
|
|
|
<span className="tab-label">{mode.label}</span>
|
|
|
<span className="tab-ext">{mode.ext}</span>
|
|
|
|
|
|
{viewMode === mode.id && (
|
|
|
<motion.div
|
|
|
className="tab-indicator"
|
|
|
layoutId="viewModeIndicator"
|
|
|
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
|
|
/>
|
|
|
)}
|
|
|
</motion.button>
|
|
|
))}
|
|
|
</div>
|
|
|
</motion.div>
|
|
|
|
|
|
{/* Professional Reader */}
|
|
|
<motion.main
|
|
|
className="reader-main"
|
|
|
initial={{ opacity: 0, y: 20 }}
|
|
|
animate={{ opacity: 1, y: 0 }}
|
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
|
>
|
|
|
<div className="reader-panel">
|
|
|
<AnimatePresence mode="wait">
|
|
|
<motion.div
|
|
|
key={viewMode}
|
|
|
initial={{ opacity: 0, x: 20 }}
|
|
|
animate={{ opacity: 1, x: 0 }}
|
|
|
exit={{ opacity: 0, x: -20 }}
|
|
|
transition={{ duration: 0.3 }}
|
|
|
className="content-wrapper"
|
|
|
>
|
|
|
{renderContent()}
|
|
|
</motion.div>
|
|
|
</AnimatePresence>
|
|
|
</div>
|
|
|
</motion.main>
|
|
|
</div>
|
|
|
<style jsx>{`
|
|
|
.text-viewer-app {
|
|
|
min-height: 100vh;
|
|
|
background: #0f0f23;
|
|
|
color: #ffffff;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
|
|
|
position: relative;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
.viewer-background {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
pointer-events: none;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
|
|
|
.giant-orb-background {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
pointer-events: none;
|
|
|
z-index: -10;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.giant-orb-container {
|
|
|
width: 100vmin;
|
|
|
height: 100vmin;
|
|
|
position: relative;
|
|
|
pointer-events: none;
|
|
|
transform: translateY(-5vh);
|
|
|
}
|
|
|
|
|
|
.gradient-orb {
|
|
|
position: absolute;
|
|
|
border-radius: 50%;
|
|
|
filter: blur(100px);
|
|
|
opacity: 0.3;
|
|
|
}
|
|
|
|
|
|
.orb-1 {
|
|
|
top: 10%;
|
|
|
right: 20%;
|
|
|
width: 300px;
|
|
|
height: 300px;
|
|
|
background: linear-gradient(45deg, #4facfe, #8b5cf6);
|
|
|
animation: float1 20s ease-in-out infinite;
|
|
|
}
|
|
|
|
|
|
.orb-2 {
|
|
|
bottom: 20%;
|
|
|
left: 15%;
|
|
|
width: 250px;
|
|
|
height: 250px;
|
|
|
background: linear-gradient(45deg, #f093fb, #f5576c);
|
|
|
animation: float2 25s ease-in-out infinite;
|
|
|
}
|
|
|
|
|
|
.orb-3 {
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
background: linear-gradient(45deg, #06b6d4, #10b981);
|
|
|
animation: float3 30s ease-in-out infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes float1 {
|
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
|
25% { transform: translate(-20px, -30px) rotate(90deg); }
|
|
|
50% { transform: translate(10px, -20px) rotate(180deg); }
|
|
|
75% { transform: translate(-10px, 10px) rotate(270deg); }
|
|
|
}
|
|
|
|
|
|
@keyframes float2 {
|
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
|
33% { transform: translate(30px, -20px) rotate(120deg); }
|
|
|
66% { transform: translate(-20px, -40px) rotate(240deg); }
|
|
|
}
|
|
|
|
|
|
@keyframes float3 {
|
|
|
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
|
|
|
20% { transform: translate(-65%, -35%) rotate(72deg); }
|
|
|
40% { transform: translate(-35%, -35%) rotate(144deg); }
|
|
|
60% { transform: translate(-35%, -65%) rotate(216deg); }
|
|
|
80% { transform: translate(-65%, -65%) rotate(288deg); }
|
|
|
}
|
|
|
.viewer-glass-container {
|
|
|
backdrop-filter: blur(25px);
|
|
|
-webkit-backdrop-filter: blur(25px);
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
border: none;
|
|
|
border-radius: 16px;
|
|
|
margin: 12px;
|
|
|
min-height: calc(100vh - 24px);
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.viewer-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 20px 24px;
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.header-left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
.back-button {
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 8px;
|
|
|
padding: 8px 16px;
|
|
|
color: #ffffff;
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
|
font-size: 0.85rem;
|
|
|
transition: all 0.3s ease;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.back-button:hover {
|
|
|
background: rgba(255, 255, 255, 0.08);
|
|
|
border-color: rgba(79, 172, 254, 0.3);
|
|
|
}
|
|
|
|
|
|
.document-info {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 4px;
|
|
|
}
|
|
|
|
|
|
.document-title {
|
|
|
font-size: 1.25rem;
|
|
|
font-weight: 600;
|
|
|
color: #ffffff;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.document-stats {
|
|
|
font-size: 0.75rem;
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
}
|
|
|
|
|
|
.header-actions {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.search-container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 8px;
|
|
|
padding: 6px 12px;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.search-input {
|
|
|
background: none;
|
|
|
border: none;
|
|
|
color: #ffffff;
|
|
|
font-size: 0.85rem;
|
|
|
outline: none;
|
|
|
width: 200px;
|
|
|
}
|
|
|
|
|
|
.search-input::placeholder {
|
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
|
|
|
.font-controls {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 8px;
|
|
|
padding: 4px 8px;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.font-btn {
|
|
|
background: none;
|
|
|
border: none;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
cursor: pointer;
|
|
|
padding: 4px;
|
|
|
border-radius: 4px;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.font-btn:hover {
|
|
|
color: #ffffff;
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
|
|
|
.font-size {
|
|
|
font-size: 0.75rem;
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
min-width: 32px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.action-btn {
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 8px;
|
|
|
padding: 8px 16px;
|
|
|
color: #ffffff;
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
|
font-size: 0.85rem;
|
|
|
transition: all 0.3s ease;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.action-btn:hover {
|
|
|
background: rgba(255, 255, 255, 0.08);
|
|
|
border-color: rgba(79, 172, 254, 0.3);
|
|
|
}
|
|
|
.format-selector {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
padding: 16px 24px;
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.format-tabs {
|
|
|
display: flex;
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
border-radius: 12px;
|
|
|
padding: 4px;
|
|
|
backdrop-filter: blur(20px);
|
|
|
}
|
|
|
|
|
|
.format-tab {
|
|
|
background: none;
|
|
|
border: none;
|
|
|
padding: 12px 20px;
|
|
|
border-radius: 8px;
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
font-size: 0.85rem;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
|
min-width: 120px;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.format-tab:hover {
|
|
|
color: #ffffff;
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
}
|
|
|
|
|
|
.format-tab.active {
|
|
|
color: #ffffff;
|
|
|
background: rgba(255, 255, 255, 0.08);
|
|
|
}
|
|
|
|
|
|
.tab-label {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.tab-ext {
|
|
|
font-size: 0.75rem;
|
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.tab-indicator {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
height: 2px;
|
|
|
background: linear-gradient(90deg, #4facfe, #8b5cf6);
|
|
|
border-radius: 1px;
|
|
|
}
|
|
|
|
|
|
.reader-main {
|
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.reader-panel {
|
|
|
flex: 1;
|
|
|
overflow: auto;
|
|
|
padding: 0;
|
|
|
background: rgba(255, 255, 255, 0.02);
|
|
|
margin: 16px 24px 24px;
|
|
|
border-radius: 12px;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.content-wrapper {
|
|
|
height: 100%;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
.reader-content {
|
|
|
padding: 32px;
|
|
|
max-width: 900px;
|
|
|
margin: 0 auto;
|
|
|
line-height: 1.8;
|
|
|
}
|
|
|
|
|
|
.text-reader {
|
|
|
background: none;
|
|
|
border: none;
|
|
|
color: #ffffff;
|
|
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
|
white-space: pre-wrap;
|
|
|
word-wrap: break-word;
|
|
|
width: 100%;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
line-height: inherit;
|
|
|
} .ht
|
|
|
ml-reader {
|
|
|
color: #ffffff;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
|
|
|
}
|
|
|
|
|
|
.html-reader h1,
|
|
|
.html-reader h2,
|
|
|
.html-reader h3,
|
|
|
.html-reader h4,
|
|
|
.html-reader h5,
|
|
|
.html-reader h6 {
|
|
|
color: #ffffff;
|
|
|
margin-bottom: 24px;
|
|
|
margin-top: 40px;
|
|
|
font-weight: 600;
|
|
|
line-height: 1.3;
|
|
|
}
|
|
|
|
|
|
.html-reader h1 {
|
|
|
font-size: 2.5rem;
|
|
|
background: linear-gradient(45deg, #4facfe, #8b5cf6);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
background-clip: text;
|
|
|
border-bottom: 2px solid rgba(79, 172, 254, 0.3);
|
|
|
padding-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.html-reader h2 {
|
|
|
font-size: 2rem;
|
|
|
color: #4facfe;
|
|
|
border-left: 4px solid #4facfe;
|
|
|
padding-left: 16px;
|
|
|
}
|
|
|
|
|
|
.html-reader h3 {
|
|
|
font-size: 1.5rem;
|
|
|
color: #8b5cf6;
|
|
|
}
|
|
|
|
|
|
.html-reader p {
|
|
|
margin-bottom: 20px;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
text-align: justify;
|
|
|
}
|
|
|
|
|
|
.html-reader strong,
|
|
|
.html-reader b {
|
|
|
color: #ffffff;
|
|
|
font-weight: 700;
|
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.html-reader em,
|
|
|
.html-reader i {
|
|
|
color: rgba(255, 255, 255, 0.95);
|
|
|
font-style: italic;
|
|
|
}
|
|
|
|
|
|
.html-reader ul,
|
|
|
.html-reader ol {
|
|
|
margin-bottom: 20px;
|
|
|
padding-left: 32px;
|
|
|
}
|
|
|
|
|
|
.html-reader li {
|
|
|
margin-bottom: 12px;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.html-reader ul li::marker {
|
|
|
color: #4facfe;
|
|
|
}
|
|
|
|
|
|
.html-reader ol li::marker {
|
|
|
color: #8b5cf6;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.html-reader table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
margin: 32px 0;
|
|
|
background: rgba(0, 0, 0, 0.2);
|
|
|
border-radius: 12px;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
|
|
|
.html-reader th,
|
|
|
.html-reader td {
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
padding: 16px 20px;
|
|
|
text-align: left;
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
|
|
|
.html-reader th {
|
|
|
background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(139, 92, 246, 0.2));
|
|
|
font-weight: 700;
|
|
|
color: #ffffff;
|
|
|
text-transform: uppercase;
|
|
|
font-size: 0.85rem;
|
|
|
letter-spacing: 0.5px;
|
|
|
}
|
|
|
|
|
|
.html-reader td {
|
|
|
background: rgba(255, 255, 255, 0.02);
|
|
|
}
|
|
|
|
|
|
.html-reader tr:nth-child(even) td {
|
|
|
background: rgba(255, 255, 255, 0.04);
|
|
|
}
|
|
|
|
|
|
.html-reader tr:hover td {
|
|
|
background: rgba(79, 172, 254, 0.05);
|
|
|
}
|
|
|
|
|
|
.html-reader blockquote {
|
|
|
border-left: 4px solid #4facfe;
|
|
|
padding: 20px 24px;
|
|
|
margin: 24px 0;
|
|
|
background: rgba(79, 172, 254, 0.05);
|
|
|
border-radius: 0 8px 8px 0;
|
|
|
font-style: italic;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.html-reader blockquote::before {
|
|
|
content: '"';
|
|
|
font-size: 4rem;
|
|
|
color: rgba(79, 172, 254, 0.3);
|
|
|
position: absolute;
|
|
|
top: -10px;
|
|
|
left: 10px;
|
|
|
font-family: serif;
|
|
|
}
|
|
|
|
|
|
.html-reader code {
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
padding: 4px 8px;
|
|
|
border-radius: 6px;
|
|
|
font-family: 'SF Mono', Monaco, monospace;
|
|
|
font-size: 0.9em;
|
|
|
color: #4facfe;
|
|
|
border: 1px solid rgba(79, 172, 254, 0.2);
|
|
|
}
|
|
|
|
|
|
.html-reader pre {
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
padding: 24px;
|
|
|
border-radius: 12px;
|
|
|
overflow-x: auto;
|
|
|
margin: 24px 0;
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.html-reader pre code {
|
|
|
background: none;
|
|
|
padding: 0;
|
|
|
border: none;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
}
|
|
|
|
|
|
.html-reader a {
|
|
|
color: #4facfe;
|
|
|
text-decoration: none;
|
|
|
border-bottom: 1px solid rgba(79, 172, 254, 0.3);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.html-reader a:hover {
|
|
|
color: #8b5cf6;
|
|
|
border-bottom-color: rgba(139, 92, 246, 0.5);
|
|
|
text-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
|
|
|
}
|
|
|
|
|
|
.html-reader hr {
|
|
|
border: none;
|
|
|
height: 2px;
|
|
|
background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.5), transparent);
|
|
|
margin: 40px 0;
|
|
|
} |
