diff --git a/keynote/index.html b/keynote/index.html
new file mode 100644
index 0000000..49320c8
--- /dev/null
+++ b/keynote/index.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+ Freestylear.la
+
+
+
+
+
+
+
+
+
+
+
- - - - - - - - - - - -
+
+
+
+
+
+
+
+
+ 30
+
+
隆Freestyleala!
+
+
+
+
隆Fin!
+
驴Standing ovation?
+
+
+
+
+
驴C贸mo se juega?
+
+ - Apret谩 en "Generar keynote"
+ - Se te ocurrio una idea de charla. Ten茅s 22 segundos. 隆Cont谩la!
+ - El resto dice si se para y aplaude o no
+
+
+
+
+
${title}
`;
+ startupNameEl.classList.add('active', 'fade-in');
+ setTimeout(() => {
+ startupNameEl.classList.remove('fade-in');
+ }, 500);
+};
+
+const resetDisplay = () => {
+ startupNameEl.innerHTML = '- - - - -
';
+ startupNameEl.classList.remove('active');
+ timerDisplay.classList.add('hidden');
+ gameOverDisplay.classList.add('hidden');
+ generateBtn.disabled = false;
+ generateBtn.textContent = 'Generar T铆tulo';
+};
+
+const startCountdown = () => {
+ let timeLeft = 22;
+ countdownNumber.textContent = timeLeft;
+ timerDisplay.classList.remove('hidden');
+
+ const timerCircle = document.querySelector('.timer-circle');
+ timerCircle.classList.add('pulse');
+
+ countdownInterval = setInterval(() => {
+ timeLeft--;
+ countdownNumber.textContent = timeLeft;
+
+ // Add urgency animation in last 10 seconds
+ if (timeLeft <= 10) {
+ timerCircle.style.background = 'linear-gradient(45deg, #ff4757, #ff6b6b)';
+ }
+
+ // Add final countdown animation in last 5 seconds
+ if (timeLeft <= 5) {
+ timerCircle.classList.add('pulse');
+ countdownNumber.style.color = '#ff4757';
+ }
+
+ if (timeLeft <= 0) {
+ clearInterval(countdownInterval);
+ endGame();
+ }
+ }, 1000);
+};
+
+const endGame = () => {
+ gameState = 'finished';
+ timerDisplay.classList.add('hidden');
+ gameOverDisplay.classList.remove('hidden');
+ generateBtn.disabled = false;
+ generateBtn.textContent = 'Generar nueva startup';
+
+ // Reset timer circle styles
+ const timerCircle = document.querySelector('.timer-circle');
+ timerCircle.classList.remove('pulse');
+ timerCircle.style.background = 'linear-gradient(45deg, #ff6b6b, #ff8e8e)';
+ countdownNumber.style.color = '#ff6b6b';
+};
+
+const startGame = () => {
+ if (gameState === 'ready' || gameState === 'finished') {
+ resetDisplay();
+ currentStartupName = generateUniqueKeynoteTitle();
+ displayKeynoteTitle(currentStartupName);
+ gameState = 'pitching';
+ generateBtn.disabled = true;
+ generateBtn.textContent = 'Pitching...';
+ setTimeout(() => {
+ startCountdown();
+ }, 1000);
+ }
+};
+
+// Event listeners
+generateBtn.addEventListener('click', startGame);
diff --git a/keynote/styles.css b/keynote/styles.css
new file mode 100644
index 0000000..c37722b
--- /dev/null
+++ b/keynote/styles.css
@@ -0,0 +1,308 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Inter', sans-serif;
+ background: black;
+ min-height: 100vh;
+ color: #333;
+ line-height: 1.6;
+}
+
+.main-container {
+ max-width: 500px;
+ margin: 0 auto;
+ padding: 20px;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+/* Header */
+.header {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+h1 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: white;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+ margin-bottom: 10px;
+}
+
+h2 {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 5px;
+}
+
+h3 {
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 1.1rem;
+ font-weight: 400;
+}
+
+.logo {
+ width: 7em;
+ height: auto;
+ margin-bottom: 20px;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Startup Display */
+.keynote-display {
+ display: flex;
+ justify-content: center;
+}
+
+.keynote-name {
+ background: white;
+ border-radius: 20px;
+ padding: 25px 20px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ min-width: 300px;
+ text-align: center;
+ transition: all 0.3s ease;
+ border: 3px solid transparent;
+}
+
+.keynote-name.active {
+ border-color: #00d4ff;
+ box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
+ transform: scale(1.05);
+}
+
+.keynote-name p {
+ font-size: 1.8rem;
+ font-weight: 600;
+ color: #333;
+ margin: 0;
+}
+
+/* Game Controls */
+.game-controls {
+ text-align: center;
+ margin: 40px 0;
+}
+
+.generate-button {
+ background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
+ color: white;
+ border: none;
+ padding: 18px 36px;
+ font-size: 1.2rem;
+ font-weight: 600;
+ border-radius: 50px;
+ cursor: pointer;
+ box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
+ transition: all 0.3s ease;
+ font-family: inherit;
+}
+
+.generate-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 12px 35px rgba(255, 107, 107, 0.4);
+}
+
+.generate-button:active {
+ transform: translateY(0);
+}
+
+.generate-button:disabled {
+ background: #ccc;
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+}
+
+/* Timer */
+.timer-display {
+ margin-top: 30px;
+}
+
+.timer-circle {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 15px;
+ box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
+ position: relative;
+ overflow: hidden;
+}
+
+.timer-circle::before {
+ content: '';
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ right: 5px;
+ bottom: 5px;
+ background: white;
+ border-radius: 50%;
+ z-index: 1;
+}
+
+#countdown-number {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: #ff6b6b;
+ z-index: 2;
+ position: relative;
+}
+
+.timer-label {
+ color: white;
+ font-size: 1.2rem;
+ font-weight: 600;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Game Over */
+.game-over h2 {
+ color: white;
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 10px;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.game-over p {
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 1.2rem;
+}
+
+/* Instructions */
+.instructions {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 15px;
+ padding: 25px;
+ margin: 30px 0;
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.instructions h3 {
+ color: #333;
+ font-size: 1.3rem;
+ font-weight: 600;
+ margin-bottom: 15px;
+ text-align: center;
+}
+
+.instructions ol {
+ padding-left: 20px;
+}
+
+.instructions li {
+ margin-bottom: 8px;
+ color: #555;
+}
+
+.instructions strong {
+ font-weight: 600;
+}
+
+/* Footer */
+.footer {
+ text-align: center;
+ margin-top: auto;
+ padding-top: 20px;
+}
+
+.footer p,
+.footer p a {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 0.9rem;
+}
+
+/* Utility Classes */
+.hidden {
+ display: none;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+ .main-container {
+ padding: 15px;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .startup-name {
+ min-width: 250px;
+ padding: 20px 15px;
+ }
+
+ .startup-name p {
+ font-size: 1.5rem;
+ }
+
+ .generate-button {
+ padding: 15px 30px;
+ font-size: 1.1rem;
+ }
+
+ .timer-circle {
+ width: 100px;
+ height: 100px;
+ }
+
+ #countdown-number {
+ font-size: 2rem;
+ }
+
+ .instructions {
+ padding: 20px;
+ }
+}
+
+/* Animations */
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+
+ 50% {
+ transform: scale(1.05);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+}
+
+.timer-circle.pulse {
+ animation: pulse 1s infinite;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.startup-name.fade-in {
+ animation: fadeIn 0.5s ease;
+}
\ No newline at end of file
+