Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Victor Hugo Digital - Assistant de Traduction Littéraire</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Libre Baskerville', serif; | |
| overflow-x: hidden; | |
| background-color: #f5f2e9; | |
| color: #3a3226; | |
| } | |
| #three-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.15; | |
| } | |
| .quill-pen { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233a3226"><path d="M19.48 13.03l-.02-.03a1 1 0 0 0-1.15-.17l-2.22 1.17-7.56-7.6 1.18-2.22a1 1 0 0 0-.17-1.15l-.03-.03a3.52 3.52 0 0 0-4.93 0l-1.72 1.73a3.52 3.52 0 0 0 0 4.93l.02.03a1 1 0 0 0 1.15.17l2.22-1.17 7.55 7.59-1.17 2.22a1 1 0 0 0 .17 1.15l.03.03a3.51 3.51 0 0 0 4.93 0l1.73-1.73a3.51 3.51 0 0 0 0-4.93z"/></svg>'); | |
| background-repeat: no-repeat; | |
| pointer-events: none; | |
| z-index: 100; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .page-turn { | |
| animation: pageTurn 1.5s ease-out forwards; | |
| } | |
| @keyframes pageTurn { | |
| 0% { transform: rotateY(0deg); } | |
| 100% { transform: rotateY(-180deg); } | |
| } | |
| .book-text { | |
| font-family: 'Crimson Pro', serif; | |
| line-height: 1.8; | |
| text-align: justify; | |
| hyphens: auto; | |
| } | |
| .translation-card { | |
| background: rgba(255, 253, 245, 0.9); | |
| border-left: 4px solid #8b6b4a; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .ink-blot { | |
| position: absolute; | |
| width: 80px; | |
| height: 80px; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233a322680"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8 0-.9.2-1.8.5-2.6C7.3 10.2 9.5 10 12 10s4.7.2 7.5 1.4c.3.8.5 1.7.5 2.6 0 4.4-3.6 8-8 8z"/></svg>'); | |
| background-repeat: no-repeat; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div id="three-container"></div> | |
| <header class="bg-amber-900 text-amber-50 py-6 px-4 shadow-md"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <h1 class="text-3xl font-bold flex items-center"> | |
| <span class="mr-2">✒️</span> | |
| Victor Hugo Digital | |
| </h1> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:text-amber-200 transition">Accueil</a></li> | |
| <li><a href="#" class="hover:text-amber-200 transition">Bibliothèque</a></li> | |
| <li><a href="#" class="hover:text-amber-200 transition">Historique</a></li> | |
| <li><a href="#" class="hover:text-amber-200 transition">Paramètres</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <main class="container mx-auto py-8 px-4"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Original Text Section --> | |
| <section class="lg:w-1/2 bg-white p-6 rounded-lg shadow-lg relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 bg-amber-800 text-white px-4 py-1 rounded-bl-lg"> | |
| <span class="text-sm">Original</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-amber-900">Les Misérables</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 p-2 rounded-full transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| <span class="text-gray-500">Page 124</span> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 p-2 rounded-full transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="book-text mb-6 relative"> | |
| <p class="mb-4">Il y a des pensées qui sont des prières. Il y a des moments où, quelle que soit l'attitude du corps, l'âme est à genoux.</p> | |
| <p class="mb-4">Le portail était béant. Il se risqua à regarder dans la rue. Personne ne passait. La rue était déserte. On entendait au loin quelques rares bruits de pas.</p> | |
| <p class="mb-4">Il prit sa résolution, traversa la chambre en hâte, atteignit la porte, l'ouvrit, et sortit.</p> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded flex items-center transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M7 4a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1z" clip-rule="evenodd" /> | |
| </svg> | |
| Analyser | |
| </button> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-4 py-2 rounded flex items-center transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /> | |
| </svg> | |
| Annoter | |
| </button> | |
| </div> | |
| <button id="highlight-btn" class="bg-amber-800 hover:bg-amber-900 text-white px-4 py-2 rounded flex items-center transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" /> | |
| </svg> | |
| Surligner | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Translation Section --> | |
| <section class="lg:w-1/2"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg mb-6 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 bg-amber-800 text-white px-4 py-1 rounded-bl-lg"> | |
| <span class="text-sm">Traduction</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <select class="bg-amber-50 border border-amber-200 text-amber-800 rounded px-4 py-2 mr-4 focus:outline-none focus:ring-2 focus:ring-amber-500"> | |
| <option>Anglais</option> | |
| <option>Espagnol</option> | |
| <option>Allemand</option> | |
| <option>Italien</option> | |
| <option>Portugais</option> | |
| </select> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded flex items-center transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" /> | |
| </svg> | |
| Traduire | |
| </button> | |
| </div> | |
| <div class="book-text mb-6"> | |
| <div class="translation-card p-4 mb-4"> | |
| <p class="text-gray-700">"There are thoughts which are prayers. There are moments when, whatever the attitude of the body, the soul is on its knees."</p> | |
| <div class="flex justify-end mt-2"> | |
| <span class="text-xs text-amber-600">- Traduction littéraire</span> | |
| </div> | |
| </div> | |
| <div class="translation-card p-4 mb-4"> | |
| <p class="text-gray-700">"The gate was gaping open. He ventured to look out into the street. No one was passing. The street was deserted. In the distance could be heard a few rare sounds of footsteps."</p> | |
| <div class="flex justify-end mt-2"> | |
| <span class="text-xs text-amber-600">- Traduction littéraire</span> | |
| </div> | |
| </div> | |
| <div class="translation-card p-4"> | |
| <p class="text-gray-700">"He made up his mind, crossed the room hastily, reached the door, opened it, and went out."</p> | |
| <div class="flex justify-end mt-2"> | |
| <span class="text-xs text-amber-600">- Traduction littéraire</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-600 mr-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" /> | |
| </svg> | |
| <span class="text-sm text-gray-600">Style Victor Hugo appliqué</span> | |
| </div> | |
| <button class="bg-amber-800 hover:bg-amber-900 text-white px-4 py-2 rounded flex items-center transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
| </svg> | |
| Exporter | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Literary Analysis --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-4">Analyse Littéraire</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-semibold text-amber-800">Style d'écriture</h4> | |
| <p class="text-gray-700 text-sm">Phrases longues et complexes, utilisation de métaphores et d'images fortes, rythme soutenu.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-amber-800">Conseils de traduction</h4> | |
| <ul class="list-disc pl-5 text-gray-700 text-sm space-y-1"> | |
| <li>Conserver la structure complexe des phrases</li> | |
| <li>Garder le rythme et la musicalité du texte</li> | |
| <li>Privilégier les équivalents littéraires plutôt que les traductions mot à mot</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-amber-800">Références culturelles</h4> | |
| <p class="text-gray-700 text-sm">Allusions à la société française du XIXe siècle. À adapter selon le public cible.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <footer class="bg-amber-900 text-amber-50 py-6 px-4 mt-12"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-xl font-bold">Victor Hugo Digital</h2> | |
| <p class="text-amber-200 text-sm">Assistant de traduction littéraire</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-amber-200 transition">À propos</a> | |
| <a href="#" class="hover:text-amber-200 transition">Contact</a> | |
| <a href="#" class="hover:text-amber-200 transition">Confidentialité</a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-amber-800 text-center text-sm text-amber-200"> | |
| <p>"La traduction est une chose difficile. Il faut conserver à la fois la lettre et l'esprit." — Victor Hugo</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <div id="quill-pen" class="quill-pen"></div> | |
| <script> | |
| // Three.js Scene Setup | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ alpha: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('three-container').appendChild(renderer.domElement); | |
| // Lighting | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | |
| scene.add(ambientLight); | |
| const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); | |
| directionalLight.position.set(1, 1, 1); | |
| scene.add(directionalLight); | |
| // Book Model | |
| const bookGeometry = new THREE.BoxGeometry(6, 8, 0.5); | |
| const bookMaterial = new THREE.MeshPhongMaterial({ | |
| color: 0x8b6b4a, | |
| specular: 0x111111, | |
| shininess: 30 | |
| }); | |
| const book = new THREE.Mesh(bookGeometry, bookMaterial); | |
| scene.add(book); | |
| // Pages | |
| const pageGeometry = new THREE.PlaneGeometry(5.8, 7.8); | |
| const pageMaterial = new THREE.MeshBasicMaterial({ | |
| color: 0xf8f5ee, | |
| side: THREE.DoubleSide | |
| }); | |
| const leftPage = new THREE.Mesh(pageGeometry, pageMaterial); | |
| leftPage.position.set(-3, 0, 0.26); | |
| leftPage.rotation.y = Math.PI / 2; | |
| scene.add(leftPage); | |
| const rightPage = new THREE.Mesh(pageGeometry, pageMaterial); | |
| rightPage.position.set(3, 0, 0.26); | |
| rightPage.rotation.y = -Math.PI / 2; | |
| scene.add(rightPage); | |
| // Camera Position | |
| camera.position.z = 10; | |
| camera.position.y = 3; | |
| camera.rotation.x = -0.2; | |
| // Controls | |
| const controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableZoom = false; | |
| controls.enablePan = false; | |
| controls.maxPolarAngle = Math.PI / 2; | |
| controls.minPolarAngle = Math.PI / 3; | |
| controls.autoRotate = true; | |
| controls.autoRotateSpeed = 0.5; | |
| // Animation | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle Window Resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Quill Pen Animation | |
| const quillPen = document.getElementById('quill-pen'); | |
| const highlightBtn = document.getElementById('highlight-btn'); | |
| highlightBtn.addEventListener('click', () => { | |
| quillPen.style.opacity = '1'; | |
| quillPen.style.left = '20%'; | |
| quillPen.style.top = '40%'; | |
| setTimeout(() => { | |
| quillPen.style.left = '60%'; | |
| quillPen.style.top = '50%'; | |
| setTimeout(() => { | |
| quillPen.style.left = '30%'; | |
| quillPen.style.top = '60%'; | |
| setTimeout(() => { | |
| quillPen.style.opacity = '0'; | |
| // Create ink blots | |
| for (let i = 0; i < 3; i++) { | |
| createInkBlot(); | |
| } | |
| }, 500); | |
| }, 500); | |
| }, 500); | |
| }); | |
| function createInkBlot() { | |
| const inkBlot = document.createElement('div'); | |
| inkBlot.className = 'ink-blot'; | |
| const x = Math.random() * 80 + 10; | |
| const y = Math.random() * 80 + 10; | |
| const size = Math.random() * 40 + 40; | |
| const rotation = Math.random() * 360; | |
| inkBlot.style.left = `${x}%`; | |
| inkBlot.style.top = `${y}%`; | |
| inkBlot.style.width = `${size}px`; | |
| inkBlot.style.height = `${size}px`; | |
| inkBlot.style.transform = `rotate(${rotation}deg)`; | |
| document.querySelector('.book-text').appendChild(inkBlot); | |
| setTimeout(() => { | |
| inkBlot.style.opacity = '0'; | |
| setTimeout(() => inkBlot.remove(), 1000); | |
| }, 3000); | |
| } | |
| // Page Turn Effect | |
| const pageTurnElements = document.querySelectorAll('.book-text p'); | |
| let currentPage = 0; | |
| setInterval(() => { | |
| pageTurnElements[currentPage].classList.remove('page-turn'); | |
| currentPage = (currentPage + 1) % pageTurnElements.length; | |
| pageTurnElements[currentPage].classList.add('page-turn'); | |
| }, 8000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=arkleinberg/victorhugo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |