File size: 7,895 Bytes
1b7a46e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supported Devices - Netagotchi Firmware Web Flasher</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'netagotchi-purple': '#7e22ce',
'netagotchi-blue': '#3b82f6',
'netagotchi-dark': '#0f172a',
'netagotchi-light': '#e0e7ff'
}
}
}
}
</script>
<style type="text/css">
.glow-box {
box-shadow: 0 0 15px rgba(126, 34, 206, 0.7);
border-radius: 12px;
border: 1px solid rgba(126, 34, 206, 0.3);
}
.device-card {
transition: all 0.3s ease;
border: 1px solid rgba(126, 34, 206, 0.2);
}
.device-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(126, 34, 206, 0.4);
border-color: rgba(126, 34, 206, 0.5);
}
</style>
</head>
<body class="bg-netagotchi-dark text-gray-200 min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="text-center mb-12">
<div class="flex justify-center mb-6">
<div class="bg-netagotchi-purple w-16 h-16 rounded-full flex items-center justify-center">
<i class="fas fa-microchip text-white text-2xl"></i>
</div>
</div>
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
Supported <span class="text-netagotchi-purple">Devices</span>
</h1>
<p class="text-netagotchi-light opacity-80 max-w-2xl mx-auto">
Explore the ESP32-based devices compatible with Netagotchi firmware
</p>
</header>
<div class="glow-box bg-gray-800 rounded-xl p-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Cardputer -->
<div class="device-card bg-gray-900 rounded-xl p-6">
<div class="text-center mb-4">
<div class="bg-netagotchi-purple w-20 h-20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i class="fas fa-credit-card text-white text-3xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">Cardputer</h3>
<p class="text-sm opacity-80">Portable keyboard computer</p>
</div>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span>ESP32-S3</span>
<span class="text-green-400">✓ Supported</span>
</div>
<div class="flex justify-between text-sm">
<span>Display</span>
<span>240x135 IPS</span>
</div>
<div class="flex justify-between text-sm">
<span>Storage</span>
<span>16MB Flash</span>
</div>
<div class="flex justify-between text-sm">
<span>Features</span>
<span>Keyboard, SD Card</span>
</div>
</div>
</div>
<!-- CYD (Cheap Yellow Display) -->
<div class="device-card bg-gray-900 rounded-xl p-6">
<div class="text-center mb-4">
<div class="bg-yellow-500 w-20 h-20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i class="fas fa-display text-white text-3xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">CYD</h3>
<p class="text-sm opacity-80">Cheap Yellow Display</p>
</div>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span>ESP32</span>
<span class="text-green-400">✓ Supported</span>
</div>
<div class="flex justify-between text-sm">
<span>Display</span>
<span>320x240 TFT</span>
</div>
<div class="flex justify-between text-sm">
<span>Storage</span>
<span>4MB Flash</span>
</div>
<div class="flex justify-between text-sm">
<span>Features</span>
<span>Touch, Buttons</span>
</div>
</div>
</div>
<!-- T-Embed -->
<div class="device-card bg-gray-900 rounded-xl p-6">
<div class="text-center mb-4">
<div class="bg-blue-500 w-20 h-20 rounded-xl flex items-center justify-center mx-auto mb-3">
<i class="fas fa-microchip text-white text-3xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">T-Embed</h3>
<p class="text-sm opacity-80">Advanced development board</p>
</div>
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span>ESP32-S3</span>
<span class="text-green-400">✓ Supported</span>
</div>
<div class="flex justify-between text-sm">
<span>Display</span>
<span>320x240 ST7789</span>
</div>
<div class="flex justify-between text-sm">
<span>Storage</span>
<span>16MB Flash</span>
</div>
<div class="flex justify-between text-sm">
<span>Features</span>
<span>Camera, PSRAM</span>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Footer -->
<div class="flex justify-center gap-6 mt-8">
<a href="index.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
<i class="fas fa-home mr-1"></i> Home
</a>
<a href="troubleshooting.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
<i class="fas fa-wrench mr-1"></i> Troubleshooting
</a>
<a href="about.html" class="text-netagotchi-light hover:text-netagotchi-purple transition-colors text-sm">
<i class="fas fa-info-circle mr-1"></i> About
</a>
</div>
</div>
<script>
// Navigation active state
const currentPage = window.location.pathname.split('/').pop();
document.querySelectorAll('a[href="' + currentPage + '"]').forEach(link => {
link.classList.add('text-netagotchi-purple', 'font-semibold');
link.classList.remove('hover:text-netagotchi-purple');
});
</script>
</body>
</html> |