Ai. Assistant

ai-assistant.markdown

Ai. Assistant

A Pen by istockmarket on CodePen.

License.

index.html

<h1 class="title">🎉 Funny Audio & Video Studio 🎊</h1>
<div class="container">
  <!-- Profile Selection -->
  <div class="section">
    <h2>👤 Choose Your Profile</h2>
    <div id="profileSelection">
      <button class="emoji-btn" onclick="setProfile('🐶')">🐶</button>
      <button class="emoji-btn" onclick="setProfile('🐱')">🐱</button>
      <button class="emoji-btn" onclick="setProfile('🦁')">🦁</button>
      <button class="emoji-btn" onclick="setProfile('🐼')">🐼</button>
      <button class="emoji-btn" onclick="setProfile('🦄')">🦄</button>
      <button class="emoji-btn" onclick="setProfile('🤖')">🤖</button>
      <button class="emoji-btn" onclick="setProfile('👽')">👽</button>
      <button class="emoji-btn" onclick="setProfile('🎃')">🎃</button>
      <button class="emoji-btn" onclick="setProfile('🌟')">🌟</button>
      <button class="emoji-btn" onclick="setProfile('🔥')">🔥</button>
    </div>
    <div id="currentProfile" style="font-size:50px; margin-top:15px;">Select your emoji!</div>
  </div>

  <!-- Sound Effects -->
  <div class="section">
    <h2>🔊 Sound Effects</h2>
    <div class="sound-grid">
      <button class="sound-btn" onclick="playSound('boing')">🎪 BOING!</button>
      <button class="sound-btn" onclick="playSound('tada')">🎺 TADA!</button>
      <button class="sound-btn" onclick="playSound('laugh')">😂 HAHA!</button>
      <button class="sound-btn" onclick="playSound('woohoo')">🎉 WOOHOO!</button>
      <button class="sound-btn" onclick="playSound('oops')">😅 OOPS!</button>
      <button class="sound-btn" onclick="playSound('yay')">🌟 YAY!</button>
    </div>
  </div>

  <!-- Animation Stage, Webcam, AI Buddy... same as before -->
</div>

script.js

/* ====== Profile System with localStorage ====== */
const adjectives=["Silly","Happy","Crazy","Lazy","Funny","Sneaky","Sparkly","Bouncy","Cheerful","Mysterious"];
const animals=["Dog","Cat","Lion","Panda","Unicorn","Robot","Alien","Pumpkin","Star","Flame"];
let userProfile={emoji:null,name:null};

window.onload=function(){
    const saved=localStorage.getItem('userProfile');
    if(saved){
        userProfile=JSON.parse(saved);
        document.getElementById('currentProfile').textContent=`Profile: ${userProfile.name} ${userProfile.emoji}`;
    }
}
function generateProfileName(){return adjectives[Math.floor(Math.random()*adjectives.length)]+animals[Math.floor(Math.random()*animals.length)];}
function setProfile(emoji){
    userProfile.emoji=emoji;
    userProfile.name=generateProfileName();
    document.getElementById('currentProfile').textContent=`Profile: ${userProfile.name} ${userProfile.emoji}`;
    localStorage.setItem('userProfile', JSON.stringify(userProfile));
}

/* ====== Sound System ====== */
const audioContext=new (window.AudioContext||window.webkitAudioContext)();
function playSound(type){
    const osc=audioContext.createOscillator(), gain=audioContext.createGain();
    osc.connect(gain); gain.connect(audioContext.destination);
    /* ...rest of your sound logic... */
}

/* ====== Animation Stage / Webcam / AI Buddy ... same as before */

style.css

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Comic Sans MS', cursive, sans-serif;
    background:linear-gradient(45deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);
    background-size:400% 400%;
    animation:gradientShift 15s ease infinite;
    min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:20px;
}
@keyframes gradientShift {
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}
.title{ font-size:3em;color:white;text-shadow:3px 3px 6px rgba(0,0,0,0.3);margin-bottom:30px; animation:bounce 2s infinite; }
@keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);} }
/* rest of your CSS for .container, .section, .sound-btn, .animation-area, etc. */