|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>ROTE PROJECT - Actor's Dialogue Trainer</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<style> |
|
@keyframes bob { |
|
0%, 100% { transform: translateY(0); } |
|
50% { transform: translateY(-5px); } |
|
} |
|
.cockatoo-pixel { |
|
image-rendering: pixelated; |
|
animation: bob 1s infinite ease-in-out; |
|
} |
|
.redacted { |
|
background-color: #333; |
|
color: transparent; |
|
border-radius: 3px; |
|
cursor: pointer; |
|
transition: all 0.2s ease; |
|
} |
|
.redacted:hover { |
|
background-color: #444; |
|
} |
|
.redacted.revealed { |
|
background-color: transparent; |
|
color: inherit; |
|
} |
|
.redacted.first-letter { |
|
background-color: #333; |
|
color: transparent; |
|
} |
|
.redacted.first-letter::first-letter { |
|
color: white; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col"> |
|
|
|
<nav class="bg-gray-800 p-4 flex justify-between items-center"> |
|
<div class="flex items-center space-x-2"> |
|
<h1 class="text-xl font-bold text-yellow-400">ROTE PROJECT</h1> |
|
<span class="text-sm text-gray-400">Actor's Dialogue Trainer</span> |
|
</div> |
|
<div class="flex space-x-4"> |
|
<button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded">Login</button> |
|
<button class="px-4 py-2 bg-yellow-600 hover:bg-yellow-500 rounded">Sign Up</button> |
|
</div> |
|
</nav> |
|
|
|
|
|
<main class="flex flex-1"> |
|
|
|
<aside class="w-64 bg-gray-800 p-4 hidden md:block"> |
|
<div class="mb-6"> |
|
<h2 class="text-lg font-semibold mb-2">My Scenes</h2> |
|
<ul class="space-y-1"> |
|
<li class="p-2 hover:bg-gray-700 rounded cursor-pointer">Hamlet Act 1</li> |
|
<li class="p-2 hover:bg-gray-700 rounded cursor-pointer">Romeo & Juliet</li> |
|
<li class="p-2 hover:bg-gray-700 rounded cursor-pointer">Death of a Salesman</li> |
|
</ul> |
|
<button class="mt-2 w-full py-2 bg-gray-700 hover:bg-gray-600 rounded">+ New Scene</button> |
|
</div> |
|
|
|
<div class="mb-6"> |
|
<h2 class="text-lg font-semibold mb-2">Practice Tools</h2> |
|
<button class="w-full py-2 px-4 mb-2 bg-gray-700 hover:bg-gray-600 rounded text-left">Redaction</button> |
|
<button class="w-full py-2 px-4 mb-2 bg-gray-700 hover:bg-gray-600 rounded text-left">AI Coach</button> |
|
<button class="w-full py-2 px-4 bg-gray-700 hover:bg-gray-600 rounded text-left">Recordings</button> |
|
</div> |
|
|
|
<div class="mt-8 pt-4 border-t border-gray-700"> |
|
<div class="flex justify-center"> |
|
|
|
<div class="cockatoo-pixel w-16 h-16"></div> |
|
</div> |
|
<p class="text-center text-xs text-gray-400 mt-2">Your practice companion</p> |
|
</div> |
|
</aside> |
|
|
|
|
|
<section class="flex-1 p-6"> |
|
<div class="max-w-4xl mx-auto"> |
|
|
|
<div class="mb-6"> |
|
<input type="text" value="Hamlet - Act 3, Scene 1" |
|
class="w-full text-2xl font-bold bg-transparent border-b border-gray-700 focus:border-yellow-500 outline-none pb-2"> |
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
<button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">Upload Script</button> |
|
<button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">Redact All</button> |
|
<button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">Show All</button> |
|
<button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">First Letters</button> |
|
<button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded">Record Audio</button> |
|
<button class="px-4 py-2 bg-yellow-700 hover:bg-yellow-600 rounded">AI Coach</button> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg mb-6"> |
|
<div class="mb-4"> |
|
<span class="font-semibold text-yellow-400">HAMLET</span> |
|
<p class="mt-1 text-lg leading-relaxed"> |
|
<span class="redacted">To</span> <span class="redacted">be,</span> <span class="redacted">or</span> <span class="redacted">not</span> <span class="redacted">to</span> <span class="redacted">be:</span> <span class="redacted">that</span> <span class="redacted">is</span> <span class="redacted">the</span> <span class="redacted">question:</span> |
|
</p> |
|
</div> |
|
<div class="mb-4"> |
|
<span class="font-semibold text-yellow-400">HAMLET</span> |
|
<p class="mt-1 text-lg leading-relaxed"> |
|
<span class="redacted first-letter">Whether</span> <span class="redacted first-letter">'tis</span> <span class="redacted first-letter">nobler</span> <span class="redacted first-letter">in</span> <span class="redacted first-letter">the</span> <span class="redacted first-letter">mind</span> <span class="redacted first-letter">to</span> <span class="redacted first-letter">suffer</span> |
|
</p> |
|
</div> |
|
<div> |
|
<span class="font-semibold text-yellow-400">HAMLET</span> |
|
<p class="mt-1 text-lg leading-relaxed"> |
|
<span class="redacted revealed">The</span> <span class="redacted">slings</span> <span class="redacted">and</span> <span class="redacted">arrows</span> <span class="redacted">of</span> <span class="redacted">outrageous</span> <span class="redacted">fortune,</span> |
|
</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex justify-center space-x-4 mb-8"> |
|
<button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold"><<</button> |
|
<button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold"><</button> |
|
<button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold">></button> |
|
<button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold">>></button> |
|
</div> |
|
|
|
|
|
<div id="loadingIndicator" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> |
|
<div class="text-center"> |
|
<div class="cockatoo-pixel w-32 h-32 mx-auto"></div> |
|
<p class="mt-4 text-xl">Processing your scene...</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
</main> |
|
|
|
|
|
<footer class="bg-gray-800 p-4 text-center text-sm text-gray-400"> |
|
<p>ROTE PROJECT © 2023 - Helping actors master their lines with confidence</p> |
|
</footer> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
const cockatoo = document.querySelector('.cockatoo-pixel'); |
|
const canvas = document.createElement('canvas'); |
|
canvas.width = 16; |
|
canvas.height = 16; |
|
canvas.style.width = '100%'; |
|
canvas.style.height = '100%'; |
|
cockatoo.appendChild(canvas); |
|
|
|
const ctx = canvas.getContext('2d'); |
|
|
|
|
|
const pixelMap = [ |
|
"................", |
|
".....YYY........", |
|
".....YYY........", |
|
".....WWWYYY.....", |
|
".....WWWWWW.....", |
|
"....WWWWWWWW....", |
|
"...WWWWWWWWWW....", |
|
"...WWWWWWWWWW....", |
|
"...WWWWWWWWWW....", |
|
"...WWWWWWWWW.....", |
|
"....WWWWWWWW.....", |
|
"......B.BB.......", |
|
".....OO..OO......", |
|
"................", |
|
"................", |
|
"................" |
|
]; |
|
|
|
const colorMap = { |
|
'.': 'rgba(0,0,0,0)', |
|
'Y': '#FFFF00', |
|
'W': '#FFFFFF', |
|
'B': '#000000', |
|
'O': '#FFAA00' |
|
}; |
|
|
|
|
|
for (let y = 0; y < pixelMap.length; y++) { |
|
for (let x = 0; x < pixelMap[y].length; x++) { |
|
ctx.fillStyle = colorMap[pixelMap[y][x]] || '#FF00FF'; |
|
ctx.fillRect(x, y, 1, 1); |
|
} |
|
} |
|
|
|
|
|
document.querySelectorAll('.redacted').forEach(el => { |
|
el.addEventListener('click', function() { |
|
this.classList.toggle('revealed'); |
|
}); |
|
|
|
el.addEventListener('mouseenter', function() { |
|
if (!this.classList.contains('revealed') && !this.classList.contains('first-letter')) { |
|
this.classList.add('hovered'); |
|
} |
|
}); |
|
|
|
el.addEventListener('mouseleave', function() { |
|
this.classList.remove('hovered'); |
|
}); |
|
}); |
|
|
|
|
|
document.querySelectorAll('button').forEach(btn => { |
|
btn.addEventListener('click', function() { |
|
if (this.textContent.includes('AI Coach') || this.textContent.includes('Upload')) { |
|
const loader = document.getElementById('loadingIndicator'); |
|
loader.classList.remove('hidden'); |
|
|
|
setTimeout(() => { |
|
loader.classList.add('hidden'); |
|
if (this.textContent.includes('AI Coach')) { |
|
alert("AI Coach: Focus on the existential dilemma in Hamlet's voice. Try emphasizing 'question' in the first line."); |
|
} |
|
}, 2000); |
|
} |
|
}); |
|
}); |
|
}); |
|
</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=rote1/roterote" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
