DoubleD31/binary-whisperer-code-matrix
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>theMan: Your AI Coding Study Buddy (pocket-edition)</title>7 <meta name="description" content="Your friendly AI coding mentor for web, mobile, and backend development">8 <meta name="keywords" content="coding, programming, AI mentor, web development, mobile development">9 <link rel="stylesheet" href="assets/css/styles.css">10 <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet">11 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👨💻</text></svg>">12</head>13<body class="theme-light">14 <matrix-background></matrix-background>15 <custom-header></custom-header>16 17 <main class="main-container">18 <section class="hero-section">19 <div class="hero-content">20 <h2 class="hero-title">21 <span class="typewriter" id="greeting"></span>22 </h2>23 <p class="hero-subtitle">Your friendly AI coding mentor, ready to help you crush those coding goals!</p>24 <div class="quick-stats">25 <div class="stat-item">26 <span class="stat-number">5</span>27 <span class="stat-label">Pathways</span>28 </div>29 <div class="stat-item">30 <span class="stat-number">∞</span>31 <span class="stat-label">Challenges</span>32 </div>33 <div class="stat-item">34 <span class="stat-number">24/7</span>35 <span class="stat-label">Available</span>36 </div>37 </div>38 </div>39 </section>40 41 <section class="pathways-section">42 <h3 class="section-title">Choose Your Learning Path</h3>43 <div class="pathways-grid">44 <button class="pathway-card" data-path="web">45 <span class="pathway-icon">🌐</span>46 <h4>Web Development</h4>47 <p>HTML, CSS, JS, React, Vue, Angular</p>48 <span class="difficulty-badge beginner">Beginner Friendly</span>49 </button>50 <button class="pathway-card" data-path="mobile">51 <span class="pathway-icon">📱</span>52 <h4>Mobile Development</h4>53 <p>React Native, Flutter, Swift, Kotlin</p>54 <span class="difficulty-badge intermediate">Intermediate</span>55 </button>56 <button class="pathway-card" data-path="backend">57 <span class="pathway-icon">⚙️</span>58 <h4>Backend</h4>59 <p>Node.js, Python, Java, Go</p>60 <span class="difficulty-badge intermediate">Intermediate</span>61 </button>62 <button class="pathway-card" data-path="database">63 <span class="pathway-icon">🗄️</span>64 <h4>Databases</h4>65 <p>SQL, NoSQL, Firebase</p>66 <span class="difficulty-badge advanced">Advanced</span>67 </button>68 <button class="pathway-card" data-path="devops">69 <span class="pathway-icon">🚀</span>70 <h4>DevOps & Tools</h4>71 <p>Git, Docker, CI/CD</p>72 <span class="difficulty-badge advanced">Advanced</span>73 </button>74 </div>75 </section>76 77 <section class="chat-section">78 <div class="chat-container">79 <div class="chat-header">80 <span class="chat-status">🟢 Online</span>81 <span class="chat-title">Ask theMan Anything!</span>82 </div>83 <div class="chat-messages" id="chatMessages">84 <div class="message ai-message">85 <div class="message-avatar">👨💻</div>86 <div class="message-content">87 <p>Hey coder! 👋 Ready to level up your skills? Pick a pathway above or ask me anything about coding!</p>88 </div>89 </div>90 </div>91 <div class="chat-input-container">92 <div class="input-wrapper">93 <input 94 type="text" 95 id="chatInput" 96 class="chat-input" 97 placeholder="What's cooking, developer? Type your question here..."98 maxlength="200"99 >100 <button id="sendMessage" class="send-btn" aria-label="Send message">101 <span>➤</span>102 </button>103 </div>104 <div class="quick-questions">105 <button class="quick-btn" data-question="How do I start with React?">React basics</button>106 <button class="quick-btn" data-question="Explain async/await">Async/await</button>107 <button class="quick-btn" data-question="Git commands cheat sheet">Git commands</button>108 <button class="quick-btn" data-question="Debug my code">Help debug</button>109 </div>110 </div>111 </div>112 </section>113 114 <section class="code-snippet-section" id="codeSection" style="display: none;">115 <div class="snippet-container">116 <div class="snippet-header">117 <h4>Code Example</h4>118 <button class="copy-btn" id="copyCode">📋 Copy</button>119 </div>120 <pre class="code-block"><code id="codeDisplay"></code></pre>121 </div>122 </section>123 </main>124 125 <custom-footer></custom-footer>126 127 <!-- Component Scripts -->128 <script src="components/header.js"></script>129 <script src="components/matrix.js"></script>130 <script src="components/footer.js"></script>131 132 <!-- Main App Script -->133 <script src="assets/js/app.js"></script>134</body>135</html>