rifikaru/python-data-structures-explorer
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>Python Data Structures Explorer</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 primary: {17 500: '#f59e0b',18 },19 secondary: {20 500: '#f59e0b',21 }22 }23 }24 }25 }26 </script>27</head>28<body class="bg-gray-50">29 <custom-navbar></custom-navbar>30 31 <main class="container mx-auto px-4 py-8">32 <section class="mb-12">33 <h1 class="text-4xl font-bold text-amber-500 mb-6">Python Data Structures Explorer</h1>34 <p class="text-lg text-gray-700 mb-8">Learn about Python's fundamental data structures: Lists, Tuples, Sets, and Dictionaries with interactive examples.</p>35 36 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">37 <div class="bg-white p-6 rounded-lg shadow-md">38 <h2 class="text-2xl font-semibold text-amber-500 mb-4">Lists & Tuples</h2>39 <p class="mb-4">Lists are mutable ordered collections, while tuples are immutable ordered collections.</p>40 <div class="space-y-4">41 <div class="p-4 bg-amber-50 rounded">42 <h3 class="font-medium">List Example:</h3>43 <code class="block bg-gray-100 p-2 rounded mt-2">my_list = [1, 2, "ba", 4, 0.5]</code>44 </div>45 <div class="p-4 bg-amber-50 rounded">46 <h3 class="font-medium">Tuple Example:</h3>47 <code class="block bg-gray-100 p-2 rounded mt-2">today = (1, 2, "ba", 4, 0.5)</code>48 </div>49 </div>50 </div>51 52 <div class="bg-white p-6 rounded-lg shadow-md">53 <h2 class="text-2xl font-semibold text-amber-500 mb-4">Sets & Dictionaries</h2>54 <p class="mb-4">Sets are unordered unique collections, while dictionaries store key-value pairs.</p>55 <div class="space-y-4">56 <div class="p-4 bg-amber-50 rounded">57 <h3 class="font-medium">Set Example:</h3>58 <code class="block bg-gray-100 p-2 rounded mt-2">s = {2, 3, 5, 11}</code>59 </div>60 <div class="p-4 bg-amber-50 rounded">61 <h3 class="font-medium">Dictionary Example:</h3>62 <code class="block bg-gray-100 p-2 rounded mt-2">house = {"Phòng ngủ": 5, "Thành phố": "Hà Nội"}</code>63 </div>64 </div>65 </div>66 </div>67 </section>68 69 <section class="mb-12">70 <h2 class="text-3xl font-bold text-amber-500 mb-6">Control Flow</h2>71 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">72 <div class="bg-white p-6 rounded-lg shadow-md">73 <h3 class="text-xl font-semibold mb-4">Conditional Statements</h3>74 <pre class="bg-gray-100 p-4 rounded overflow-x-auto"><code>name = "NeuTech"75if name.lower() == "neutech":76 print("That's my name too!")77elif name.lower() == "santa":78 print("That's a funny name.")79else:80 print(f"Hello {name}!")</code></pre>81 </div>82 <div class="bg-white p-6 rounded-lg shadow-md">83 <h3 class="text-xl font-semibold mb-4">Loops</h3>84 <pre class="bg-gray-100 p-4 rounded overflow-x-auto"><code># For loop85for n in [1, 3, -1, 5]:86 print(n)87 88# While loop89n = 590while n > 0:91 print(n)92 n -= 1</code></pre>93 </div>94 </div>95 </section>96 97 <section class="mb-12">98 <h2 class="text-3xl font-bold text-amber-500 mb-6">Interactive Examples</h2>99 <div class="bg-white p-6 rounded-lg shadow-md">100 <div id="code-executor" class="space-y-4">101 <div class="flex items-center space-x-4">102 <select id="example-select" class="flex-1 p-2 border rounded">103 <option value="list">List Operations</option>104 <option value="tuple">Tuple Operations</option>105 <option value="set">Set Operations</option>106 <option value="dict">Dictionary Operations</option>107 <option value="if">If Statement</option>108 <option value="for">For Loop</option>109 <option value="while">While Loop</option>110 </select>111 <button id="run-btn" class="bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded">Run</button>112 </div>113 <div class="p-4 bg-gray-100 rounded">114 <h3 class="font-medium mb-2">Code:</h3>115 <pre id="code-display" class="bg-white p-3 rounded"></pre>116 </div>117 <div class="p-4 bg-gray-100 rounded">118 <h3 class="font-medium mb-2">Output:</h3>119 <div id="output-display" class="bg-white p-3 rounded min-h-20"></div>120 </div>121 </div>122 </div>123 </section>124 </main>125 126 <custom-footer></custom-footer>127 128 <script src="components/navbar.js"></script>129 <script src="components/footer.js"></script>130 <script src="script.js"></script>131 <script>feather.replace();</script>132<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>133</body>134</html>