VibeCoderzVibeCoderz
Telegram
All Prompts
Voice Supercharged Glass Card preview
cardglassvoiceaudiofeaturemodern

Voice Supercharged Glass Card

Карточка с эффектом стекла для демонстрации голосового ввода и аудио. Современный UI-паттерн с акцентом на голосовые функции.

Prompt

<div class="w-full bg-gray-900 flex justify-center py-12">
  <style>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600'); .glass-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 67.38%, rgba(255, 255, 255, 0) 95.49%); backdrop-filter: blur(10px); border: 1px solid rgba(98, 109, 137, 0.5); }</style>
  <div class="glass-card rounded-[64px] w-full max-w-[757px] bg-white bg-opacity-5 p-8">
    <div class="flex flex-col items-center space-y-4">
      <div class="w-full max-w-[725px] h-[700px] bg-gradient-to-br
        from-blue-400 to-cyan-500 rounded-3xl flex items-center
        justify-center mb-4 relative">
        <div class="w-32 h-32 bg-white bg-opacity-90 rounded-full flex items-center justify-center shadow-2xl">
          <svg class="w-16 h-16 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"></path>
            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"></path>
          </svg>
        </div>
      </div>
      <div class="text-left w-full">
        <h2 class="text-white font-bold text-4xl lg:text-5xl mb-6 font-['Plus_Jakarta_Sans',_sans-serif]">Your voice. Supercharged.</h2>
        <p class="text-gray-300 text-lg lg:text-xl leading-relaxed font-['Plus_Jakarta_Sans',_sans-serif]">Type with your voice. Faster. Smarter. Hands-free.</p>
      </div>
    </div>
  </div>
</div>
All Prompts