Sonntag, 28 September 2025

Top 5 diese Woche

Ähnliche Tutorials

Virtuelles Cafe 2.0

Willkommen im digitalen Dreamcodes Cafe, in dem Unterhaltung, Kreativität und Technik zusammenfließen. Mit dem Cafeteria-Chat Script kannst du an mehreren „Tischen“ gleichzeitig Gespräche führen. Dabei hat jeder Tisch hat seinen eigenen Chatverlauf, eigene Notizen und jetzt auch ein eigenes Thema.

Zur Auswahl stehen zehn spannende Themen, von Gaming, Filme & Serien, Musik und Sport, über Reisen und Literatur bis hin zu Wissenschaft oder einem Retro-Café. Je nach Wahl passt sich dein KI-Kumpel automatisch in Stil und Ausdruck an: mal locker, mal nerdig, mal kreativ oder nostalgisch.

Die KI sorgt für authentische und humorvolle Antworten, während kleine Extras wie verrückte Café-Events, Emoji-Explosionen und Notizfunktionen für Abwechslung sorgen.

Highlights:

  • Mehrere Tische mit separaten Verläufen und Notizen
  • Themenwahl mit 10 verschiedenen Café-Stilen
  • KI-Kumpel passt sich automatisch dem Thema an
  • Überraschende Café-Events und witzige Animationen
  • Dreamcodes als Qualitätsgarantie für Spass und Unterhaltung 😉
<?php
session_start();
define('OPENAI_API_KEY', 'DEIN_OPENAI_API_KEY');

if (!isset($_SESSION['tables'])) { $_SESSION['tables'] = []; }
if (!isset($_SESSION['tableNotes'])) { $_SESSION['tableNotes'] = []; }
if (!isset($_SESSION['tableThemes'])) { $_SESSION['tableThemes'] = []; }

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'];

    if ($action === 'createTable') {
        $tableName = $_POST['name'] ?: "Tisch " . (count($_SESSION['tables']) + 1);
        $_SESSION['tables'][$tableName] = [];
        $_SESSION['tableNotes'][$tableName] = "";
        $_SESSION['tableThemes'][$tableName] = "Café-Standard";
        echo json_encode(["success"=>true,"name"=>$tableName]);
        exit;
    }

    if ($action === 'sendMessage') {
        $table = $_POST['table'];
        $msg = htmlspecialchars($_POST['message']);
        $_SESSION['tables'][$table][] = ["user"=>"Du","msg"=>$msg,"avatar"=>"👤"];

        // System-Prompt nach gewähltem Thema
        $theme = $_SESSION['tableThemes'][$table];
        $systemPrompt = "Du bist ein freundlicher, humorvoller Kumpel in einem virtuellen Café.";
        switch($theme){
            case "Gaming-Café": $systemPrompt="Du bist ein lockerer Gaming-Kumpel, plauderst über Spiele, Memes, Tipps."; break;
            case "Tech & Programmierung": $systemPrompt="Du bist ein freundlicher Tech-Kumpel, gibst kurze Coding-Tipps und Ideen."; break;
            case "Film- & Serien-Café": $systemPrompt="Du diskutierst locker über Filme, Serien, Empfehlungen und Fun-Facts."; break;
            case "Musik-Café": $systemPrompt="Du redest locker über Musik, Genres, Songs und kleine Quizfragen."; break;
            case "Sportbar-Style": $systemPrompt="Du bist ein lockerer Sport-Kumpel, diskutierst Ergebnisse, Tipps, Live-Kommentare."; break;
            case "Reise-Café": $systemPrompt="Du plauderst locker über Städte, Länder, Reise-Tipps und Trivia."; break;
            case "Bücher & Literatur": $systemPrompt="Du bist ein literarischer Kumpel, plauderst über Bücher, Empfehlungen, kleine Rätsel."; break;
            case "Kreativ-Café": $systemPrompt="Du bist ein kreativer Kumpel, reagierst auf Geschichten, Gedichte, Witze."; break;
            case "Wissenschafts-Café": $systemPrompt="Du redest locker über Physik, Astronomie, Technik und Fun-Facts."; break;
            case "Retro-Café": $systemPrompt="Du bist ein nostalgischer Kumpel, redest über 80er, 90er, klassische Spiele, Musik."; break;
        }

        // OpenAI Anfrage
        $postData = [
            "model"=>"gpt-3.5-turbo",
            "messages"=>[
                ["role"=>"system","content"=>$systemPrompt],
                ["role"=>"user","content"=>$msg]
            ],
            "temperature"=>0.8
        ];

        $ch = curl_init("https://api.openai.com/v1/chat/completions");
        curl_setopt($ch, CURLOPT_HTTPHEADER, [
            "Content-Type: application/json",
            "Authorization: Bearer ".OPENAI_API_KEY
        ]);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);
        curl_setopt($ch, CURLOPT_POST,true);
        curl_setopt($ch, CURLOPT_POSTFIELDS,json_encode($postData));
        $result = curl_exec($ch);
        curl_close($ch);

        $responseText = "Hmm, etwas ist schiefgelaufen 😅";
        if($result){
            $data = json_decode($result,true);
            if(isset($data['choices'][0]['message']['content'])){
                $responseText = trim($data['choices'][0]['message']['content']);
            }
        }

        $_SESSION['tables'][$table][] = ["user"=>"Kumpel","msg"=>$responseText,"avatar"=>"🤖","mood"=>"neutral"];

        // Zufällige verrückte Café-Events
        if(rand(1,10)==1){
            $_SESSION['tables'][$table][]=["user"=>"Café-Event","msg"=>"🌟 Überraschung! Ein Kuchen fliegt durch die Luft! 🎂","avatar"=>"🎉","mood"=>"verrückt"];
        }

        echo json_encode(["success"=>true,"messages"=>$_SESSION['tables'][$table]]);
        exit;
    }

    if ($action === 'getMessages'){
        $table=$_POST['table'];
        echo json_encode(["success"=>true,"messages"=>$_SESSION['tables'][$table],"note"=>$_SESSION['tableNotes'][$table],"theme"=>$_SESSION['tableThemes'][$table]]);
        exit;
    }

    if($action==='saveNote'){
        $table=$_POST['table'];
        $_SESSION['tableNotes'][$table]=htmlspecialchars($_POST['note']);
        echo json_encode(["success"=>true]);
        exit;
    }

    if($action==='changeTheme'){
        $table=$_POST['table'];
        $_SESSION['tableThemes'][$table]=$_POST['theme'];
        echo json_encode(["success"=>true]);
        exit;
    }
}
?>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dreamcodes - Cafeteria-Chat – Themenwahl</title>
<style>
body{font-family:Arial,sans-serif;background:#f7f3ed;}
.container{display:flex;}
.tables{width:240px;border-right:2px solid #ccc;padding:10px;}
.tables button{display:block;margin:5px 0;width:100%;}
.chat{flex:1;padding:10px;position:relative;}
.messages{height:400px;overflow-y:auto;border:1px solid #aaa;padding:10px;background:#fff;}
.msg-user{color:#2c3e50;font-weight:bold;}
.msg-bot{color:#16a085;font-weight:bold;}
.msg-crazy{color:#e74c3c;font-weight:bold;animation:wobble 0.5s, shake 0.5s;}
.msg-event{color:#d35400;font-weight:bold;animation:bounce 0.5s;}
@keyframes wobble{0%{transform:rotate(-10deg);}50%{transform:rotate(10deg);}100%{transform:rotate(0);}}
@keyframes shake{0%{transform:translateX(-5px);}50%{transform:translateX(5px);}100%{transform:translateX(0);}}
@keyframes bounce{0%{transform:translateY(-10px);}50%{transform:translateY(5px);}100%{transform:translateY(0);}}
.input-box{margin-top:10px;display:flex;gap:5px;}
#tableNote{width:100%;margin-top:10px;height:60px;}
.footer-note{margin-top:20px;font-size:12px;color:#555;text-align:center;}
</style>
</head>
<body>
<h1>☕ Cafeteria-Chat – Wähle dein Thema</h1>
<div class="container">
<div class="tables">
<h3>Tische</h3>
<div id="tableList"></div>
<input type="text" id="newTableName" placeholder="Neuer Tischname">
<button onclick="createTable()">➕ Tisch eröffnen</button>
</div>
<div class="chat">
<h3 id="activeTableTitle">Kein Tisch ausgewählt</h3>
<div>
Thema: 
<select id="themeSelect" onchange="changeThemeSelect()">
<option>Café-Standard</option>
<option>Gaming-Café</option>
<option>Tech & Programmierung</option>
<option>Film- & Serien-Café</option>
<option>Musik-Café</option>
<option>Sportbar-Style</option>
<option>Reise-Café</option>
<option>Bücher & Literatur</option>
<option>Kreativ-Café</option>
<option>Wissenschafts-Café</option>
<option>Retro-Café</option>
</select>
</div>
<div class="messages" id="messages"></div>
<div class="input-box">
<input type="text" id="message" placeholder="Nachricht..." onkeydown="if(event.key==='Enter'){sendMessage()}">
<button onclick="sendMessage()">Senden</button>
</div>
<div class="input-box">
<button onclick="quickSend('😂')">😂</button>
<button onclick="quickSend('☕')">☕</button>
<button onclick="quickSend('💥')">💥</button>
</div>
<textarea id="tableNote" placeholder="Tisch-Notizen speichern..."></textarea>
<button onclick="saveNote()">💾 Speichern</button>
</div>
</div>
<p class="footer-note">Powered by <a href="http://www.dreamcodes.net">Dreamcodes</a></p>

<script>
let activeTable=null;
function createTable(){
let name=document.getElementById('newTableName').value;
fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=createTable&name='+encodeURIComponent(name)})
.then(r=>r.json()).then(d=>{if(d.success) loadTables();});
}
function loadTables(){
let list=document.getElementById('tableList'); list.innerHTML='';
<?php foreach($_SESSION['tables'] as $name=>$msgs): ?>
let btn=document.createElement('button'); btn.innerText="<?php echo $name; ?>"; btn.onclick=()=>selectTable("<?php echo $name; ?>"); list.appendChild(btn);
<?php endforeach; ?>
}
function selectTable(name){
activeTable=name; document.getElementById('activeTableTitle').innerText=name;
fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=getMessages&table='+encodeURIComponent(name)})
.then(r=>r.json()).then(d=>{
if(d.success){ renderMessages(d.messages); document.getElementById('tableNote').value=d.note; document.getElementById('themeSelect').value=d.theme; }
});
}
function changeThemeSelect(){
if(!activeTable) return;
let theme=document.getElementById('themeSelect').value;
fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=changeTheme&table='+encodeURIComponent(activeTable)+'&theme='+encodeURIComponent(theme)})
.then(r=>r.json());
}
function sendMessage(){
if(!activeTable) return alert("Bitte zuerst einen Tisch auswählen!");
let msg=document.getElementById('message').value; document.getElementById('message').value='';
fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=sendMessage&table='+encodeURIComponent(activeTable)+'&message='+encodeURIComponent(msg)})
.then(r=>r.json()).then(d=>{if(d.success) renderMessages(d.messages);});
}
function quickSend(icon){ document.getElementById('message').value=icon; sendMessage(); }
function saveNote(){let note=document.getElementById('tableNote').value; fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=saveNote&table='+encodeURIComponent(activeTable)+'&note='+encodeURIComponent(note)}).then(r=>r.json()).then(d=>{if(d.success)alert("Notiz gespeichert!");});}
function renderMessages(msgs){
let box=document.getElementById('messages'); box.innerHTML='';
msgs.forEach(m=>{
let spanClass=(m.user==='Du')?'msg-user':(m.mood==='verrückt'||m.user==='Café-Event')?'msg-crazy':'msg-bot';
if(m.user==='Café-Event') spanClass='msg-event';
let div=document.createElement('div');
div.innerHTML='<span class="'+spanClass+'">'+m.avatar+' '+m.user+':</span> '+m.msg;
box.appendChild(div);
});
box.scrollTop=box.scrollHeight;
}
loadTables();
</script>
</body>
</html>
Vorheriges Tutorial

Hier etwas für dich dabei?