| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Introducing Dicta-LM 3.0!</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
| overflow: hidden; |
| } |
| |
| .announcement-container { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| min-height: 100vh; |
| background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #3b82f6 100%); |
| padding: 20px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| |
| #fireworks-canvas { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| z-index: 1; |
| } |
| |
| .content { |
| position: relative; |
| z-index: 2; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .announcement-logo { |
| width: 200px; |
| height: auto; |
| margin-bottom: 40px; |
| animation: bounce 2s ease-in-out infinite; |
| filter: drop-shadow(0 10px 30px rgba(255,215,0,0.5)); |
| } |
| |
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0) scale(1); } |
| 50% { transform: translateY(-10px) scale(1.05); } |
| } |
| |
| .announcement-title { |
| font-size: 3.5em; |
| font-weight: bold; |
| color: white; |
| text-align: center; |
| margin-bottom: 20px; |
| text-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,215,0,0.5); |
| animation: titleGlow 2s ease-in-out infinite; |
| } |
| |
| @keyframes titleGlow { |
| 0%, 100% { |
| text-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,215,0,0.5); |
| transform: scale(1); |
| } |
| 50% { |
| text-shadow: 0 0 30px rgba(255,215,0,1), 0 0 60px rgba(255,215,0,0.8), 0 0 80px rgba(255,215,0,0.5); |
| transform: scale(1.02); |
| } |
| } |
| |
| .announcement-subtitle { |
| font-size: 1.8em; |
| color: #ffd700; |
| text-align: center; |
| margin-bottom: 15px; |
| font-weight: 500; |
| animation: sparkle 1.5s ease-in-out infinite; |
| } |
| |
| @keyframes sparkle { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
| |
| .announcement-tagline { |
| font-size: 1.3em; |
| color: #e0e0e0; |
| text-align: center; |
| margin-bottom: 50px; |
| font-weight: 300; |
| max-width: 600px; |
| line-height: 1.6; |
| } |
| |
| .buttons-container { |
| display: flex; |
| gap: 30px; |
| flex-wrap: wrap; |
| justify-content: center; |
| margin-bottom: 40px; |
| } |
| |
| .btn { |
| padding: 18px 40px; |
| font-size: 1.2em; |
| font-weight: 600; |
| border: none; |
| border-radius: 50px; |
| cursor: pointer; |
| text-decoration: none; |
| transition: all 0.3s ease; |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%); |
| color: #1a1a2e; |
| box-shadow: 0 8px 30px rgba(255,215,0,0.4); |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-3px) scale(1.05); |
| box-shadow: 0 12px 40px rgba(255,215,0,0.6); |
| } |
| |
| .btn-secondary { |
| background: rgba(255, 255, 255, 0.1); |
| color: white; |
| border: 2px solid rgba(255, 255, 255, 0.3); |
| backdrop-filter: blur(10px); |
| } |
| |
| .btn-secondary:hover { |
| background: rgba(255, 255, 255, 0.2); |
| transform: translateY(-3px) scale(1.05); |
| border-color: rgba(255, 255, 255, 0.5); |
| } |
| |
| .celebration-emojis { |
| font-size: 2em; |
| margin-bottom: 30px; |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-15px); } |
| } |
| |
| |
| .sparkle { |
| position: absolute; |
| width: 10px; |
| height: 10px; |
| background: radial-gradient(circle, #ffd700 0%, transparent 70%); |
| border-radius: 50%; |
| pointer-events: none; |
| animation: sparkleFloat 4s ease-in-out infinite; |
| } |
| |
| @keyframes sparkleFloat { |
| 0%, 100% { |
| opacity: 0; |
| transform: translateY(0) scale(0); |
| } |
| 50% { |
| opacity: 1; |
| transform: translateY(-100px) scale(1); |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .announcement-title { font-size: 2.2em; } |
| .announcement-subtitle { font-size: 1.3em; } |
| .announcement-tagline { font-size: 1.1em; } |
| .btn { padding: 15px 30px; font-size: 1em; } |
| .buttons-container { gap: 15px; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="announcement-container"> |
| <canvas id="fireworks-canvas"></canvas> |
| |
| <div class="content"> |
| <a href="https://dicta.org.il" target="_blank"> |
| <img src="dicta-logo.jpg" alt="Dicta Logo" class="announcement-logo"> |
| </a> |
| |
| <div class="celebration-emojis">🎉 🎊 🚀 🎊 🎉</div> |
| |
| <h1 class="announcement-title">Introducing Dicta-LM 3.0!</h1> |
| |
| <p class="announcement-subtitle">✨ The Future of Hebrew AI is Here ✨</p> |
| |
| <p class="announcement-tagline"> |
| We're thrilled to announce the next generation of Hebrew language models.<br/> |
| More powerful. More accurate. More incredible than ever before. |
| </p> |
| |
| <div class="buttons-container"> |
| <a href="https://chat.dicta.org.il" class="btn btn-primary" target="_blank"> |
| 🚀 Try it out now! |
| </a> |
| <a href="http://dicta.org.il/dicta-lm-3" class="btn btn-secondary" target="_blank"> |
| 📖 View the Release |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const canvas = document.getElementById('fireworks-canvas'); |
| const ctx = canvas.getContext('2d'); |
| |
| function resizeCanvas() { |
| canvas.width = window.innerWidth; |
| canvas.height = window.innerHeight; |
| } |
| resizeCanvas(); |
| window.addEventListener('resize', resizeCanvas); |
| |
| class Particle { |
| constructor(x, y, color, velocity, decay) { |
| this.x = x; |
| this.y = y; |
| this.color = color; |
| this.velocity = velocity; |
| this.alpha = 1; |
| this.decay = decay; |
| this.gravity = 0.02; |
| } |
| |
| draw() { |
| ctx.save(); |
| ctx.globalAlpha = this.alpha; |
| ctx.beginPath(); |
| ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); |
| ctx.fillStyle = this.color; |
| ctx.fill(); |
| ctx.restore(); |
| } |
| |
| update() { |
| this.velocity.y += this.gravity; |
| this.x += this.velocity.x; |
| this.y += this.velocity.y; |
| this.alpha -= this.decay; |
| } |
| } |
| |
| class Firework { |
| constructor(x, targetY) { |
| this.x = x; |
| this.y = canvas.height; |
| this.targetY = targetY; |
| this.velocity = { x: 0, y: -8 - Math.random() * 4 }; |
| this.color = `hsl(${Math.random() * 60 + 30}, 100%, 60%)`; |
| this.exploded = false; |
| this.particles = []; |
| } |
| |
| draw() { |
| if (!this.exploded) { |
| ctx.beginPath(); |
| ctx.arc(this.x, this.y, 3, 0, Math.PI * 2); |
| ctx.fillStyle = this.color; |
| ctx.fill(); |
| } |
| this.particles.forEach(p => p.draw()); |
| } |
| |
| explode() { |
| const particleCount = 80 + Math.random() * 40; |
| const colors = [ |
| '#ffd700', '#ff6b6b', '#4ecdc4', '#45b7d1', |
| '#96ceb4', '#ffeaa7', '#dfe6e9', '#fd79a8' |
| ]; |
| |
| for (let i = 0; i < particleCount; i++) { |
| const angle = (Math.PI * 2 / particleCount) * i; |
| const speed = 2 + Math.random() * 4; |
| const color = colors[Math.floor(Math.random() * colors.length)]; |
| |
| this.particles.push(new Particle( |
| this.x, |
| this.y, |
| color, |
| { |
| x: Math.cos(angle) * speed, |
| y: Math.sin(angle) * speed |
| }, |
| 0.01 + Math.random() * 0.015 |
| )); |
| } |
| this.exploded = true; |
| } |
| |
| update() { |
| if (!this.exploded) { |
| this.y += this.velocity.y; |
| if (this.y <= this.targetY) { |
| this.explode(); |
| } |
| } |
| this.particles.forEach(p => p.update()); |
| this.particles = this.particles.filter(p => p.alpha > 0); |
| } |
| |
| isDone() { |
| return this.exploded && this.particles.length === 0; |
| } |
| } |
| |
| let fireworks = []; |
| |
| function createFirework() { |
| const x = Math.random() * canvas.width; |
| const targetY = canvas.height * 0.2 + Math.random() * canvas.height * 0.3; |
| fireworks.push(new Firework(x, targetY)); |
| } |
| |
| function animate() { |
| ctx.fillStyle = 'rgba(30, 58, 95, 0.2)'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| |
| fireworks.forEach(fw => { |
| fw.draw(); |
| fw.update(); |
| }); |
| |
| fireworks = fireworks.filter(fw => !fw.isDone()); |
| |
| if (Math.random() < 0.03) { |
| createFirework(); |
| } |
| |
| requestAnimationFrame(animate); |
| } |
| |
| |
| for (let i = 0; i < 5; i++) { |
| setTimeout(createFirework, i * 300); |
| } |
| |
| animate(); |
| </script> |
| </body> |
| </html> |
|
|
