sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fa637abff0607ab50984db1ec97d78b110f04ef3
office_translator/stitch_translation_app_ui_redesign/code.html
sepehr b50419e2ec
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2s
Details
fix: integrate deepseek, resolve silent google api errors, fix google cloud keys
2026-05-17 17:11:06 +02:00

391 lines
21 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>LinguistPro - Translation Workspace</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary": "#ffffff",
"on-primary-container": "#eeefff",
"on-secondary-container": "#54647a",
"surface-tint": "#0053db",
"tertiary-container": "#656d84",
"on-primary-fixed": "#00174b",
"on-error-container": "#93000a",
"secondary-fixed-dim": "#b7c8e1",
"on-error": "#ffffff",
"inverse-surface": "#2e3132",
"primary-fixed": "#dbe1ff",
"on-tertiary-container": "#eef0ff",
"primary-container": "#2563eb",
"on-tertiary": "#ffffff",
"surface-bright": "#f8f9fa",
"on-tertiary-fixed-variant": "#3f465c",
"surface-container-lowest": "#ffffff",
"on-secondary-fixed": "#0b1c30",
"inverse-primary": "#b4c5ff",
"surface-container-high": "#e7e8e9",
"secondary-container": "#d0e1fb",
"secondary-fixed": "#d3e4fe",
"surface-dim": "#d9dadb",
"error": "#ba1a1a",
"outline-variant": "#c3c6d7",
"on-secondary-fixed-variant": "#38485d",
"surface-container-low": "#f3f4f5",
"primary-fixed-dim": "#b4c5ff",
"on-background": "#191c1d",
"surface": "#f8f9fa",
"on-surface-variant": "#434655",
"on-primary-fixed-variant": "#003ea8",
"secondary": "#505f76",
"on-tertiary-fixed": "#131b2e",
"background": "#f8f9fa",
"outline": "#737686",
"primary": "#004ac6",
"on-primary": "#ffffff",
"surface-variant": "#e1e3e4",
"tertiary-fixed": "#dae2fd",
"on-surface": "#191c1d",
"surface-container-highest": "#e1e3e4",
"inverse-on-surface": "#f0f1f2",
"error-container": "#ffdad6",
"tertiary-fixed-dim": "#bec6e0",
"tertiary": "#4d556b",
"surface-container": "#edeeef"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"xl": "32px",
"unit": "4px",
"sm": "8px",
"lg": "24px",
"xs": "4px",
"sidebar-width": "240px",
"md": "16px",
"container-max": "1440px"
},
"fontFamily": {
"h2": ["Inter"],
"code": ["Monospace"],
"h1": ["Inter"],
"body-md": ["Inter"],
"body-lg": ["Inter"],
"body-sm": ["Inter"],
"label-md": ["Inter"],
"h3": ["Inter"]
},
"fontSize": {
"h2": ["20px", { "lineHeight": "28px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
"code": ["13px", { "lineHeight": "20px", "fontWeight": "400" }],
"h1": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
"body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500" }],
"h3": ["16px", { "lineHeight": "24px", "fontWeight": "600" }]
}
}
}
}
</script>
</head>
<body class="bg-background text-on-background font-body-md text-body-md min-h-screen flex">
<!-- SideNavBar -->
<nav class="h-screen w-64 border-r fixed left-0 top-0 border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 font-sans text-sm font-medium tracking-tight flex flex-col h-full py-4 z-50">
<div class="px-6 pb-6 border-b border-slate-200 dark:border-slate-800 mb-4">
<h1 class="text-lg font-bold text-slate-900 dark:text-white truncate">LinguistPro</h1>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Enterprise Tier</p>
</div>
<div class="px-4 mb-6">
<button class="w-full py-2.5 px-4 bg-primary text-on-primary rounded-lg font-label-md text-label-md flex items-center justify-center gap-2 hover:opacity-90 transition-opacity shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)]">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
New Translation
</button>
</div>
<ul class="flex-1 space-y-1">
<li>
<a class="flex items-center gap-3 px-4 py-2 border-l-2 border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors Active: opacity-90 transition-all" href="#">
<span class="material-symbols-outlined">translate</span>
Workspace
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined">folder_open</span>
Projects
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined">book</span>
Glossary
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined">group</span>
Team
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined">settings</span>
Settings
</a>
</li>
</ul>
<div class="mt-auto border-t border-slate-200 dark:border-slate-800 pt-4">
<ul class="space-y-1">
<li>
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined">help</span>
Help Center
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined">account_circle</span>
Account
</a>
</li>
</ul>
</div>
</nav>
<!-- Main Content Area -->
<div class="flex-1 ml-[256px] flex flex-col h-screen overflow-hidden">
<!-- TopNavBar -->
<header class="docked full-width top-0 sticky z-40 border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md font-sans text-sm font-semibold flex justify-between items-center h-16 px-8 ml-64">
<div class="flex items-center gap-8">
<span class="text-xl font-black text-slate-900 dark:text-white">Translation Workspace</span>
<nav class="hidden md:flex gap-6 h-full items-center">
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-700 dark:hover:text-blue-300 h-full flex items-center border-b-2 border-transparent" href="#">Documents</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-700 dark:hover:text-blue-300 h-full flex items-center border-b-2 border-transparent" href="#">API</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-700 dark:hover:text-blue-300 h-full flex items-center border-b-2 border-transparent" href="#">History</a>
</nav>
</div>
<div class="flex items-center gap-4">
<div class="relative hidden sm:block">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" style="font-size: 18px;">search</span>
<input class="pl-9 pr-4 py-1.5 bg-slate-100 border-transparent rounded-lg text-sm focus:border-blue-500 focus:bg-white focus:ring-0 w-64 transition-colors" placeholder="Search workspace..." type="text"/>
</div>
<div class="flex items-center gap-2 border-l border-slate-200 pl-4 ml-2">
<button class="p-2 text-slate-600 hover:bg-slate-100 rounded-full transition-colors relative">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-blue-600 rounded-full border border-white"></span>
</button>
<button class="p-2 text-slate-600 hover:bg-slate-100 rounded-full transition-colors">
<span class="material-symbols-outlined">help_outline</span>
</button>
<button class="ml-2 w-8 h-8 rounded-full overflow-hidden border border-slate-200 hover:border-blue-500 transition-colors">
<img alt="User Avatar" class="w-full h-full object-cover" data-alt="A professional headshot of a corporate user, modern office background, bright lighting, realistic photography style." src="https://lh3.googleusercontent.com/aida/ADBb0uiQHyvZajfMu-xFqjkxj8fN8QgZKiJepfygOrdLqjKXjIEZeI210SlhhvN_YN0O_sAL1PjPawFb8e4UtB1oFVM9t4gdWfJUBNjLopR47O_ZRPcXfSvKGAcajFreDjLHic-eH-tFw2SbJ-vgt-6IO97IzzyLe3CAWe_rn-CYEzhYrrxP36O1kqeeMZ8NjHQ2FkzCaNGfUmZjlCqQZiHSNodufbz0IJ30DmjolIoJaQtmSv88kvmdGWdlK2WeUq5SflwZsBDxvmNoQvg"/>
</button>
</div>
</div>
</header>
<!-- Page Canvas -->
<main class="flex-1 overflow-y-auto p-8 bg-surface-bright">
<div class="max-w-[1200px] mx-auto space-y-6">
<!-- Top Section: Grid for File & Settings -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- File Upload Card -->
<div class="lg:col-span-2 bg-surface-container-lowest border border-surface-variant rounded-xl p-6 shadow-sm">
<h2 class="font-h2 text-h2 text-on-surface mb-4">Source Document</h2>
<div class="border-2 border-dashed border-outline-variant rounded-lg p-8 flex flex-col items-center justify-center text-center bg-surface hover:border-primary transition-colors cursor-pointer group">
<div class="w-12 h-12 bg-primary-fixed rounded-full flex items-center justify-center text-primary mb-3 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" style="font-size: 24px;">upload_file</span>
</div>
<p class="font-body-lg text-body-lg text-on-surface font-medium mb-1">Drag and drop file here</p>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-4">Supports .txt, .docx, .json, .csv (Max 50MB)</p>
<button class="px-4 py-2 bg-white border border-surface-variant rounded-lg font-label-md text-label-md text-on-surface hover:bg-surface-container-low transition-colors shadow-sm">
Browse Files
</button>
</div>
</div>
<!-- Configuration Card -->
<div class="bg-surface-container-lowest border border-surface-variant rounded-xl p-6 shadow-sm flex flex-col">
<h2 class="font-h2 text-h2 text-on-surface mb-4">Configuration</h2>
<div class="space-y-5 flex-1">
<div>
<label class="block font-label-md text-label-md text-on-surface-variant mb-1.5">Source Language</label>
<div class="relative">
<select class="w-full appearance-none bg-surface-container-lowest border border-surface-variant rounded-lg px-3 py-2 pr-8 font-body-md text-body-md text-on-surface focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
<option>English (US)</option>
<option>French (FR)</option>
<option>Spanish (ES)</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" style="font-size: 18px;">expand_more</span>
</div>
</div>
<div class="flex justify-center -my-2 relative z-10">
<button class="w-8 h-8 bg-surface-container-lowest border border-surface-variant rounded-full flex items-center justify-center text-on-surface-variant hover:text-primary hover:border-primary transition-colors shadow-sm bg-white">
<span class="material-symbols-outlined" style="font-size: 18px;">swap_vert</span>
</button>
</div>
<div>
<label class="block font-label-md text-label-md text-on-surface-variant mb-1.5">Target Language</label>
<div class="relative">
<select class="w-full appearance-none bg-surface-container-lowest border border-surface-variant rounded-lg px-3 py-2 pr-8 font-body-md text-body-md text-on-surface focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
<option>French (FR)</option>
<option>German (DE)</option>
<option>Japanese (JP)</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" style="font-size: 18px;">expand_more</span>
</div>
</div>
<div>
<label class="block font-label-md text-label-md text-on-surface-variant mb-1.5">Translation Engine</label>
<div class="relative">
<select class="w-full appearance-none bg-surface-container-lowest border border-surface-variant rounded-lg px-3 py-2 pr-8 font-body-md text-body-md text-on-surface focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
<option>Neural Machine Translation (Pro)</option>
<option>Standard MT</option>
<option>Glossary Strictly</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" style="font-size: 18px;">expand_more</span>
</div>
</div>
</div>
<button class="w-full mt-6 py-2.5 bg-primary text-on-primary rounded-lg font-label-md text-label-md flex items-center justify-center gap-2 hover:opacity-90 transition-opacity shadow-sm">
<span class="material-symbols-outlined" style="font-size: 18px;">bolt</span>
Start Translation
</button>
</div>
</div>
<!-- Recent Translations / Results Area -->
<div class="bg-surface-container-lowest border border-surface-variant rounded-xl shadow-sm overflow-hidden flex flex-col">
<div class="p-6 border-b border-surface-variant flex justify-between items-center bg-white">
<h2 class="font-h2 text-h2 text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-primary">history</span>
Recent Translations
</h2>
<div class="flex gap-2">
<button class="p-1.5 text-on-surface-variant hover:bg-surface-container-low rounded transition-colors border border-transparent hover:border-surface-variant">
<span class="material-symbols-outlined" style="font-size: 20px;">filter_list</span>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface font-label-md text-label-md text-on-surface-variant border-b border-surface-variant">
<th class="px-6 py-3 font-medium">File Name</th>
<th class="px-6 py-3 font-medium">Languages</th>
<th class="px-6 py-3 font-medium">Status</th>
<th class="px-6 py-3 font-medium">Date</th>
<th class="px-6 py-3 font-medium text-right">Action</th>
</tr>
</thead>
<tbody class="font-body-md text-body-md text-on-surface divide-y divide-surface-variant bg-white">
<!-- Row 1 -->
<tr class="hover:bg-surface-container-lowest transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-tertiary-container">description</span>
<span class="font-medium text-on-surface">marketing_copy_v2.docx</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2 text-sm">
<span class="px-2 py-0.5 bg-surface-container rounded text-on-surface-variant">EN</span>
<span class="material-symbols-outlined text-outline" style="font-size: 16px;">arrow_right_alt</span>
<span class="px-2 py-0.5 bg-primary-fixed rounded text-on-primary-fixed">FR</span>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-[#ecfdf5] text-[#065f46]">
<span class="w-1.5 h-1.5 rounded-full bg-[#10b981]"></span>
Completed
</span>
</td>
<td class="px-6 py-4 text-on-surface-variant text-sm">Today, 10:42 AM</td>
<td class="px-6 py-4 text-right">
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-surface-variant rounded-md text-sm font-medium text-primary hover:bg-primary-fixed transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100">
<span class="material-symbols-outlined" style="font-size: 16px;">download</span>
Download
</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-surface-container-lowest transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-tertiary-container">data_object</span>
<span class="font-medium text-on-surface">ui_strings_core.json</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2 text-sm">
<span class="px-2 py-0.5 bg-surface-container rounded text-on-surface-variant">EN</span>
<span class="material-symbols-outlined text-outline" style="font-size: 16px;">arrow_right_alt</span>
<span class="px-2 py-0.5 bg-primary-fixed rounded text-on-primary-fixed">DE</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2 w-32">
<div class="h-1.5 w-full bg-surface-variant rounded-full overflow-hidden">
<div class="h-full bg-primary w-2/3 rounded-full"></div>
</div>
<span class="text-xs text-on-surface-variant font-medium">65%</span>
</div>
</td>
<td class="px-6 py-4 text-on-surface-variant text-sm">Today, 09:15 AM</td>
<td class="px-6 py-4 text-right">
<button class="inline-flex items-center p-1.5 text-on-surface-variant hover:text-primary transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100" title="Cancel">
<span class="material-symbols-outlined" style="font-size: 20px;">close</span>
</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-surface-container-lowest transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-tertiary-container">description</span>
<span class="font-medium text-on-surface">legal_terms_2024.docx</span>
</div>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2 text-sm">
<span class="px-2 py-0.5 bg-surface-container rounded text-on-surface-variant">EN</span>
<span class="material-symbols-outlined text-outline" style="font-size: 16px;">arrow_right_alt</span>
<span class="px-2 py-0.5 bg-primary-fixed rounded text-on-primary-fixed">ES</span>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-[#ecfdf5] text-[#065f46]">
<span class="w-1.5 h-1.5 rounded-full bg-[#10b981]"></span>
Completed
</span>
</td>
<td class="px-6 py-4 text-on-surface-variant text-sm">Yesterday</td>
<td class="px-6 py-4 text-right">
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-surface-variant rounded-md text-sm font-medium text-primary hover:bg-primary-fixed transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100">
<span class="material-symbols-outlined" style="font-size: 16px;">download</span>
Download
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-surface-variant bg-surface text-center">
<button class="text-sm font-medium text-primary hover:text-on-primary-fixed transition-colors">
View All History
</button>
</div>
</div>
</div>
</main>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink