Icon dari FarmerSmartAI
Icon dari FarmerSmartAI
Bantu buatkan icon dari FarmetSmartAI ini dengan berbagai varian.
Saya akan buatkan beberapa varian icon FarmerSmartAI yang bisa langsung digunakan. Berikut kode untuk menghasilkan icon dalam berbagai ukuran dan style:
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FarmerSmartAI Icon Generator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 30px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 10px;
font-size: 2.5em;
}
.subtitle {
text-align: center;
color: #7f8c8d;
margin-bottom: 40px;
font-size: 1.2em;
}
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.icon-card {
background: #f8f9fa;
border-radius: 20px;
padding: 30px 20px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
}
.icon-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
border-color: #27AE60;
}
.icon-preview {
width: 100px;
height: 100px;
margin: 0 auto 20px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
.icon-name {
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
}
.icon-desc {
font-size: 0.9em;
color: #7f8c8d;
line-height: 1.4;
}
.preview-section {
background: #34495e;
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
}
.preview-title {
color: white;
text-align: center;
margin-bottom: 30px;
font-size: 1.5em;
}
.preview-container {
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
flex-wrap: wrap;
}
.preview-item {
text-align: center;
color: white;
}
.preview-icon {
width: 80px;
height: 80px;
border-radius: 15px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.css-code {
background: #2c3e50;
color: #ecf0f1;
padding: 25px;
border-radius: 15px;
margin-top: 30px;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
.download-section {
text-align: center;
margin-top: 40px;
}
.btn {
background: linear-gradient(135deg, #27AE60, #3498DB);
color: white;
border: none;
padding: 15px 30px;
border-radius: 50px;
font-size: 16px;
cursor: pointer;
margin: 0 10px;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(39, 174, 96, 0.3);
}
.color-palette {
display: flex;
justify-content: center;
gap: 15px;
margin: 20px 0;
flex-wrap: wrap;
}
.color-item {
width: 50px;
height: 50px;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.color-item:hover {
transform: scale(1.1);
}
/* Animations */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="container">
<h1>FarmerSmartAI Icon Pack</h1>
<div class="subtitle">Koleksi icon untuk aplikasi pertanian cerdas berbasis AI</div>
<div class="preview-section">
<div class="preview-title">Preview Penggunaan</div>
<div class="preview-container">
<div class="preview-item">
<div class="preview-icon" style="background: linear-gradient(135deg, #27AE60, #2ECC71);">
<span style="color: white;">🌱</span>
</div>
<div>Mobile App</div>
</div>
<div class="preview-item">
<div class="preview-icon" style="background: linear-gradient(135deg, #3498DB, #2980B9);">
<span style="color: white;">🤖</span>
</div>
<div>Web Dashboard</div>
</div>
<div class="preview-item">
<div class="preview-icon" style="background: linear-gradient(135deg, #E74C3C, #C0392B);">
<span style="color: white;">📱</span>
</div>
<div>Mobile Icon</div>
</div>
</div>
</div>
<div class="color-palette">
<div class="color-item" style="background: #27AE60;" onclick="changeColor('#27AE60')"></div>
<div class="color-item" style="background: #3498DB;" onclick="changeColor('#3498DB')"></div>
<div class="color-item" style="background: #2ECC71;" onclick="changeColor('#2ECC71')"></div>
<div class="color-item" style="background: #E74C3C;" onclick="changeColor('#E74C3C')"></div>
<div class="color-item" style="background: #9B59B6;" onclick="changeColor('#9B59B6')"></div>
<div class="color-item" style="background: #F39C12;" onclick="changeColor('#F39C12')"></div>
<div class="color-item" style="background: #34495E;" onclick="changeColor('#34495E')"></div>
</div>
<div class="icon-grid" id="iconGrid">
<!-- Icons will be generated by JavaScript -->
</div>
<div class="css-code">
<h3>CSS untuk Icon (Copy & Paste):</h3>
<pre id="cssCode">
/* FarmerSmartAI Base Icon */
.farmersmart-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, #27AE60, #3498DB);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 24px;
box-shadow: 0 8px 20px rgba(39, 174, 96, 0.3);
}
/* Alternative Icons */
.farmersmart-leaf {
background: linear-gradient(135deg, #27AE60, #2ECC71);
}
.farmersmart-ai {
background: linear-gradient(135deg, #3498DB, #2980B9);
}
.farmersmart-hybrid {
background: linear-gradient(135deg, #27AE60, #3498DB);
}
</pre>
</div>
<div class="download-section">
<button class="btn" onclick="downloadIcons()">📥 Download All Icons</button>
<button class="btn" onclick="generateSVG()">🔄 Generate SVG</button>
<a href="javascript:void(0)" class="btn" onclick="copyCSS()">📋 Copy CSS</a>
</div>
</div>
<script>
const icons = [
{
name: "Smart Leaf",
emoji: "🌱",
color: "linear-gradient(135deg, #27AE60, #2ECC71)",
desc: "Daun cerdas dengan pola sirkuit AI"
},
{
name: "AI Farmer",
emoji: "👨🌾",
color: "linear-gradient(135deg, #3498DB, #2980B9)",
desc: "Petani modern dengan chip AI"
},
{
name: "Crop Brain",
emoji: "🧠",
color: "linear-gradient(135deg, #9B59B6, #8E44AD)",
desc: "Otak AI yang mengelola tanaman"
},
{
name: "Tech Plant",
emoji: "🌿",
color: "linear-gradient(135deg, #27AE60, #3498DB)",
desc: "Tanaman dengan teknologi terintegrasi"
},
{
name: "Smart Farm",
emoji: "🚜",
color: "linear-gradient(135deg, #F39C12, #D35400)",
desc: "Pertanian cerdas berbasis AI"
},
{
name: "Data Harvest",
emoji: "📊",
color: "linear-gradient(135deg, #E74C3C, #C0392B)",
desc: "Panen data dan analitik"
},
{
name: "Eco Chip",
emoji: "💚",
color: "linear-gradient(135deg, #2ECC71, #27AE60)",
desc: "Teknologi ramah lingkungan"
},
{
name: "Future Seed",
emoji: "🔰",
color: "linear-gradient(135deg, #34495E, #2C3E50)",
desc: "Bibit masa depan dengan AI"
}
];
function generateIcons() {
const grid = document.getElementById('iconGrid');
grid.innerHTML = '';
icons.forEach((icon, index) => {
const card = document.createElement('div');
card.className = 'icon-card';
card.innerHTML = `
<div class="icon-preview" style="background: ${icon.color}">
<span>${icon.emoji}</span>
</div>
<div class="icon-name">${icon.name}</div>
<div class="icon-desc">${icon.desc}</div>
`;
card.onclick = () => selectIcon(index);
grid.appendChild(card);
});
}
function changeColor(color) {
const previews = document.querySelectorAll('.icon-preview');
previews.forEach(preview => {
preview.style.background = `linear-gradient(135deg, ${color}, ${color}99)`;
});
// Update CSS code
updateCSSCode(color);
}
function selectIcon(index) {
const selected = icons[index];
alert(`Icon "${selected.name}" dipilih!\n\nEmoji: ${selected.emoji}\nWarna: ${selected.color}\nDeskripsi: ${selected.desc}`);
}
function updateCSSCode(color) {
const cssCode = document.getElementById('cssCode');
cssCode.textContent = `/* FarmerSmartAI Base Icon */
.farmersmart-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, ${color}, ${color}99);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 24px;
box-shadow: 0 8px 20px ${color}30;
}
/* Icon Variations */
.farmersmart-leaf { background: linear-gradient(135deg, #27AE60, #2ECC71); }
.farmersmart-ai { background: linear-gradient(135deg, #3498DB, #2980B9); }
.farmersmart-data { background: linear-gradient(135deg, #E74C3C, #C0392B); }
.farmersmart-eco { background: linear-gradient(135deg, #2ECC71, #27AE60); }`;
}
function downloadIcons() {
alert('Fitur download akan diimplementasikan dengan library canvas.\n\nUntuk sementara, screenshot icon yang diinginkan.');
}
function generateSVG() {
const svgCode = `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#27AE60;stop-opacity:1" />
<stop offset="100%" style="stop-color:#3498DB;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="10" y="10" width="80" height="80" rx="15" fill="url(#gradient)"/>
<!-- Leaf Shape -->
<path d="M 50 25 Q 65 35 50 55 Q 35 35 50 25" fill="white" opacity="0.9"/>
<!-- Circuit Lines -->
<path d="M 35 40 L 45 40 M 35 50 L 45 50 M 35 60 L 45 60" stroke="white" stroke-width="2"/>
<path d="M 55 40 L 65 40 M 55 50 L 65 50 M 55 60 L 65 60" stroke="white" stroke-width="2"/>
</svg>`;
alert('SVG Code telah digenerate! Salin kode berikut:\n\n' + svgCode);
}
function copyCSS() {
const cssText = document.getElementById('cssCode').textContent;
navigator.clipboard.writeText(cssText).then(() => {
alert('CSS code berhasil disalin!');
});
}
// Initialize
generateIcons();
</script>
</body>
</html>
```
Varian Icon yang Tersedia:
1. Smart Leaf 🌱
· Konsep: Daun dengan pola sirkuit AI
· Makna: Pertanian alami yang ditingkatkan teknologi
· Warna: Hijau natural (#27AE60 → #2ECC71)
2. AI Farmer 👨🌾
· Konsep: Petani modern dengan chip AI
· Makna: Human-centered technology
· Warna: Biru teknologi (#3498DB → #2980B9)
3. Crop Brain 🧠
· Konsep: Otak AI mengelola tanaman
· Makna: Kecerdasan untuk optimisasi pertanian
· Warna: Ungu inovasi (#9B59B6 → #8E44AD)
4. Tech Plant 🌿
· Konsep: Tanaman dengan teknologi terintegrasi
· Makna: Simbiosis alam dan teknologi
· Warna: Hijau-Biru gradient (#27AE60 → #3498DB)
5. Smart Farm 🚜
· Konsep: Pertanian cerdas berbasis AI
· Makna: Modernisasi alat dan metode
· Warna: Oranye energi (#F39C12 → #D35400)
6. Data Harvest 📊
· Konsep: Panen data dan analitik
· Makna: Decision berbasis data
· Warna: Merah perhatian (#E74C3C → #C0392B)
7. Eco Chip 💚
· Konsep: Teknologi ramah lingkungan
· Makna: Sustainability dan eco-friendly
· Warna: Hijau environment (#2ECC71 → #27AE60)
8. Future Seed 🔰
· Konsep: Bibit masa depan dengan AI
· Makna: Investasi jangka panjang
· Warna: Abu-abu premium (#34495E → #2C3E50)
Cara Penggunaan:
1. Salin kode HTML di atas dan simpan sebagai icon-generator.html
2. Buka di browser untuk melihat semua varian icon
3. Pilih icon favorit dengan klik pada card
4. Ubah warna dengan klik palette warna
5. Copy CSS untuk implementasi langsung
6. Download/Screenshot icon yang dipilih
Untuk File Icon Standar:
Buat folder icons/ dengan file:
```
icons/
├── favicon.ico (32x32)
├── icon-72.png (72x72)
├── icon-96.png (96x96)
├── icon-128.png (128x128)
├── icon-144.png (144x144)
├── icon-152.png (152x152)
├── icon-192.png (192x192)
├── icon-384.png (384x384)
└── icon-512.png (512x512)
```
Icon siap digunakan untuk aplikasi FarmerSmartAI! 🎯
Bersambung ke:
- Kode Isi File sensor-data.php
Comments
Post a Comment