Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sentence Mining App</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .card-container { | |
| perspective: 1000px; | |
| } | |
| .card { | |
| transition: transform 0.6s, box-shadow 0.3s; | |
| transform-style: preserve-3d; | |
| } | |
| .card:hover { | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .card-expanded { | |
| transform: translateY(-10px); | |
| } | |
| .cube { | |
| transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| transform-origin: center; | |
| backface-visibility: hidden; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 4px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| text-align: center; | |
| padding: 2px; | |
| word-break: break-word; | |
| } | |
| .card-expanded .cube { | |
| transform: translateX(0) ; | |
| opacity: 1 ; | |
| } | |
| .original-text { | |
| border-right: 2px dashed #cbd5e0; | |
| } | |
| .audio-btn { | |
| transition: all 0.2s; | |
| } | |
| .audio-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .audio-btn:active { | |
| transform: scale(0.95); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-indigo-700 mb-2">Sentence Mining</h1> | |
| <p class="text-lg text-gray-600">Click on cards to reveal translations and breakdowns</p> | |
| </header> | |
| <div class="space-y-8"> | |
| <!-- Card 1 --> | |
| <div class="card-container"> | |
| <div class="card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer"> | |
| <div class="flex flex-col md:flex-row"> | |
| <!-- Left side - Original text --> | |
| <div class="original-text p-6 md:w-1/2 flex flex-col"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="text-sm font-medium text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full">Japanese</span> | |
| <button class="audio-btn bg-indigo-100 p-2 rounded-full text-indigo-700 hover:bg-indigo-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <p class="text-2xl font-medium text-gray-800 mb-4">今日はとても疲れています。</p> | |
| <div class="mt-auto flex items-center text-sm text-gray-500"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| Added 2 days ago | |
| </div> | |
| </div> | |
| <!-- Right side - Cubes --> | |
| <div class="p-6 md:w-1/2 relative overflow-hidden cube-container" style="min-height: 180px;"> | |
| <!-- Sentence parts as uniform cubes --> | |
| <div class="cube absolute">I'm</div> | |
| <div class="cube absolute">very</div> | |
| <div class="cube absolute">tired</div> | |
| <div class="cube absolute">today</div> | |
| <div class="cube absolute">.</div> | |
| <div class="cube absolute bg-indigo-100 text-indigo-700">I'm very tired today.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="card-container"> | |
| <div class="card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer"> | |
| <div class="flex flex-col md:flex-row"> | |
| <!-- Left side - Original text --> | |
| <div class="original-text p-6 md:w-1/2 flex flex-col"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="text-sm font-medium text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full">Spanish</span> | |
| <button class="audio-btn bg-emerald-100 p-2 rounded-full text-emerald-700 hover:bg-emerald-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <p class="text-2xl font-medium text-gray-800 mb-4">¿Dónde está la biblioteca?</p> | |
| <div class="mt-auto flex items-center text-sm text-gray-500"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| Added 1 week ago | |
| </div> | |
| </div> | |
| <!-- Right side - Cubes --> | |
| <div class="p-6 md:w-1/2 flex flex-wrap justify-between items-center relative overflow-hidden" style="min-height: 180px;"> | |
| <!-- Cubes will be positioned absolutely --> | |
| <div class="cube absolute w-16 h-16 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateX(150px) rotate(15deg); opacity: 0; transition-delay: 0.1s;">Where</div> | |
| <div class="cube absolute w-16 h-16 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateX(-150px) rotate(-15deg); opacity: 0; transition-delay: 0.2s;">is</div> | |
| <div class="cube absolute w-20 h-20 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateY(80px) rotate(10deg); opacity: 0; transition-delay: 0.3s;">the</div> | |
| <div class="cube absolute w-24 h-24 rounded-lg bg-emerald-100 shadow-sm flex items-center justify-center font-medium text-emerald-700" style="transform: scale(0.3) rotate(30deg); opacity: 0; transition-delay: 0.4s;">library</div> | |
| <div class="cube absolute w-28 h-28 rounded-lg bg-white shadow-md flex items-center justify-center font-medium" style="transform: scale(0.8); opacity: 0; transition-delay: 0.5s;">Where is the library?</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="card-container"> | |
| <div class="card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer"> | |
| <div class="flex flex-col md:flex-row"> | |
| <!-- Left side - Original text --> | |
| <div class="original-text p-6 md:w-1/2 flex flex-col"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="text-sm font-medium text-amber-600 bg-amber-50 px-3 py-1 rounded-full">French</span> | |
| <button class="audio-btn bg-amber-100 p-2 rounded-full text-amber-700 hover:bg-amber-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <p class="text-2xl font-medium text-gray-800 mb-4">Je voudrais un café, s'il vous plaît.</p> | |
| <div class="mt-auto flex items-center text-sm text-gray-500"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| Added 3 days ago | |
| </div> | |
| </div> | |
| <!-- Right side - Cubes --> | |
| <div class="p-6 md:w-1/2 flex flex-wrap justify-between items-center relative overflow-hidden" style="min-height: 180px;"> | |
| <!-- Cubes will be positioned absolutely --> | |
| <div class="cube absolute w-16 h-16 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateX(180px) translateY(-50px); opacity: 0; transition-delay: 0.1s;">I would</div> | |
| <div class="cube absolute w-16 h-16 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateX(-180px) translateY(50px); opacity: 0; transition-delay: 0.2s;">like</div> | |
| <div class="cube absolute w-20 h-20 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateX(100px) translateY(100px); opacity: 0; transition-delay: 0.3s;">a coffee</div> | |
| <div class="cube absolute w-16 h-16 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateX(-100px) translateY(-100px); opacity: 0; transition-delay: 0.4s;">please</div> | |
| <div class="cube absolute w-28 h-28 rounded-lg bg-amber-100 shadow-sm flex items-center justify-center font-medium text-amber-700" style="transform: scale(0.6); opacity: 0; transition-delay: 0.5s;">I would like a coffee, please</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="card-container"> | |
| <div class="card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer"> | |
| <div class="flex flex-col md:flex-row"> | |
| <!-- Left side - Original text --> | |
| <div class="original-text p-6 md:w-1/2 flex flex-col"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="text-sm font-medium text-purple-600 bg-purple-50 px-3 py-1 rounded-full">German</span> | |
| <button class="audio-btn bg-purple-100 p-2 rounded-full text-purple-700 hover:bg-purple-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <p class="text-2xl font-medium text-gray-800 mb-4">Wie spät ist es?</p> | |
| <div class="mt-auto flex items-center text-sm text-gray-500"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| Added yesterday | |
| </div> | |
| </div> | |
| <!-- Right side - Cubes --> | |
| <div class="p-6 md:w-1/2 flex flex-wrap justify-between items-center relative overflow-hidden" style="min-height: 180px;"> | |
| <!-- Cubes will be positioned absolutely --> | |
| <div class="cube absolute w-20 h-20 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateX(120px) rotate(45deg); opacity: 0; transition-delay: 0.1s;">What</div> | |
| <div class="cube absolute w-20 h-20 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateX(-120px) rotate(-45deg); opacity: 0; transition-delay: 0.2s;">time</div> | |
| <div class="cube absolute w-16 h-16 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateY(120px); opacity: 0; transition-delay: 0.3s;">is</div> | |
| <div class="cube absolute w-16 h-16 rounded-lg shadow-sm flex items-center justify-center text-sm font-medium" style="transform: translateY(-120px); opacity: 0; transition-delay: 0.4s;">it</div> | |
| <div class="cube absolute w-24 h-24 rounded-lg bg-purple-100 shadow-sm flex items-center justify-center font-medium text-purple-700" style="transform: scale(0.4); opacity: 0; transition-delay: 0.5s;">What time is it?</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const cards = document.querySelectorAll('.card'); | |
| function scatterCubes(cubes, container) { | |
| const containerRect = container.getBoundingClientRect(); | |
| cubes.forEach(cube => { | |
| const maxX = containerRect.width - cube.offsetWidth; | |
| const maxY = containerRect.height - cube.offsetHeight; | |
| const angle = Math.random() * 2 * Math.PI; | |
| const distance = Math.random() * 60; | |
| const x = Math.cos(angle) * distance + (Math.random() * maxX * 0.5); | |
| const y = Math.sin(angle) * distance + (Math.random() * maxY * 0.5); | |
| const rot = (Math.random() - 0.5) * 40; | |
| const scale = 0.95 + Math.random() * 0.1; | |
| cube.style.transition = 'all 0.8s ease-in-out'; | |
| cube.style.left = `${x}px`; | |
| cube.style.top = `${y}px`; | |
| cube.style.transform = `rotate(${rot}deg) scale(${scale})`; | |
| cube.style.opacity = '0.8'; | |
| }); | |
| } | |
| function arrangeCubes(cubes, container) { | |
| const containerRect = container.getBoundingClientRect(); | |
| const cols = 4; | |
| const cubeSize = 24; | |
| const padding = 8; | |
| const totalWidth = (cols * (cubeSize + padding)) - padding; | |
| const startX = (containerRect.width - totalWidth) / 2; | |
| cubes.forEach((cube, index) => { | |
| const row = Math.floor(index / cols); | |
| const col = index % cols; | |
| const x = startX + (col * (cubeSize + padding)); | |
| const y = 20 + (row * (cubeSize + padding)); | |
| cube.style.transition = `all 0.8s ease-in-out ${index * 50}ms`; | |
| cube.style.left = `${x}px`; | |
| cube.style.top = `${y}px`; | |
| cube.style.transform = 'rotate(0deg) scale(1)'; | |
| cube.style.opacity = '1'; | |
| }); | |
| } | |
| cards.forEach(card => { | |
| const cubes = card.querySelectorAll('.cube'); | |
| const container = card.querySelector('.cube-container') || card.querySelector('[class*="cube-container"], [class*="relative"]'); | |
| // Initial scatter | |
| scatterCubes(cubes, container); | |
| card.addEventListener('click', function () { | |
| const isExpanded = this.classList.toggle('card-expanded'); | |
| if (isExpanded) { | |
| arrangeCubes(cubes, container); | |
| } else { | |
| scatterCubes(cubes, container); | |
| } | |
| }); | |
| }); | |
| // Audio button functionality | |
| const audioButtons = document.querySelectorAll('.audio-btn'); | |
| audioButtons.forEach(button => { | |
| button.addEventListener('click', function (e) { | |
| e.stopPropagation(); // Prevent triggering card | |
| console.log('Playing audio for this sentence'); | |
| this.classList.add('animate-ping'); | |
| setTimeout(() => this.classList.remove('animate-ping'), 300); | |
| }); | |
| }); | |
| }); | |
| </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=ArthurZ/flash-card" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |