sn351621/claude-s-code-canvas-clone
0
1 2<!DOCTYPE html>3<html lang="en" class="h-full">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>CodePlayground</title>8 <link rel="stylesheet" href="style.css">9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css">11 <script src="https://cdn.tailwindcss.com"></script>12 <script src="components/navbar.js"></script>13</head>14<body class="h-full bg-gray-900">15 <custom-navbar></custom-navbar>16 <div class="container mx-auto px-4 py-6 h-[calc(100%-64px)]">17 <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full flex flex-col">18 <div class="bg-gray-700 px-4 py-3 border-b border-gray-600 flex justify-between items-center">19 <div class="flex space-x-4">20 <button class="view-btn active px-3 py-1 bg-blue-600 text-white rounded-md text-sm" data-view="code">Code</button>21 <button class="view-btn px-3 py-1 bg-gray-600 text-white rounded-md text-sm" data-view="preview">Preview</button>22 <div class="flex space-x-2 ml-4">23 <button class="tab-btn active px-3 py-1 bg-blue-600 text-white rounded-md text-sm" data-lang="html">HTML</button>24 <button class="tab-btn px-3 py-1 bg-gray-600 text-white rounded-md text-sm" data-lang="css">CSS</button>25 <button class="tab-btn px-3 py-1 bg-gray-600 text-white rounded-md text-sm" data-lang="js">JS</button>26 </div>27 </div>28 <div class="flex space-x-2">29 <button id="ai-setup-btn" class="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded-md text-sm flex items-center transition-colors">30 <span class="mr-1">⚙️</span> AI Setup31 </button>32 <button id="ai-btn" class="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded-md text-sm flex items-center transition-colors">33 <span class="mr-1">🤖</span> AI Assist34 </button>35 <button id="run-btn" class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm flex items-center transition-colors">36 <span class="mr-1">▶</span> Run37 </button>38 </div>39 </div>40 <div id="editor-container" class="flex-grow relative">41 <div id="preview-container" class="absolute inset-0 bg-white hidden overflow-auto p-4"></div>42 </div>43</div>44 </div>45 46 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>47 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>48 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>49 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>50 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>51 <script src="components/ai-panel.js"></script>52 <script src="script.js"></script>53 <custom-ai-panel></custom-ai-panel>54</body>55</html>56