83 lines
3.9 KiB
HTML
83 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Süper Racing - Chrome Store Görsel Oluşturucu</title>
|
||
<style>
|
||
body { font-family: sans-serif; background: #0f172a; color: #fff; padding: 20px; text-align: center; }
|
||
.asset-card { background: #1e293b; padding: 15px; border-radius: 12px; margin: 15px auto; max-width: 700px; }
|
||
canvas { border: 2px solid #38bdf8; border-radius: 8px; margin-top: 10px; display: block; margin-left: auto; margin-right: auto; }
|
||
a.btn { display: inline-block; background: #2563eb; color: #fff; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: bold; margin-top: 10px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🏎️ Süper Racing - Chrome Web Store Görsel Üretici</h1>
|
||
<p>Aşağıdaki butonlara basarak Chrome Web Store'un istediği birebir boyutlardaki görselleri bilgisayarınıza indirebilirsiniz.</p>
|
||
|
||
<div class="asset-card">
|
||
<h3>1. Mağaza Simgesi (128x128 px)</h3>
|
||
<canvas id="cvIcon" width="128" height="128"></canvas>
|
||
<a id="dlIcon" class="btn" download="magaza_simgesi_128x128.png">📥 128x128 Simgeyi İndir</a>
|
||
</div>
|
||
|
||
<div class="asset-card">
|
||
<h3>2. Ekran Görüntüsü (640x400 px)</h3>
|
||
<canvas id="cvSS" width="640" height="400"></canvas>
|
||
<a id="dlSS" class="btn" download="ekran_goruntusu_640x400.png">📥 640x400 Ekran Görüntüsünü İndir</a>
|
||
</div>
|
||
|
||
<div class="asset-card">
|
||
<h3>3. Küçük Tanıtım Bloğu (440x280 px)</h3>
|
||
<canvas id="cvPromo" width="440" height="280"></canvas>
|
||
<a id="dlPromo" class="btn" download="kucuk_tanitim_440x280.png">📥 440x280 Tanıtım Bloğunu İndir</a>
|
||
</div>
|
||
|
||
<script>
|
||
// 1. Icon 128x128
|
||
const c1 = document.getElementById('cvIcon');
|
||
const x1 = c1.getContext('2d');
|
||
x1.fillStyle = '#0f172a'; x1.fillRect(0,0,128,128);
|
||
x1.fillStyle = '#ef4444'; x1.beginPath(); x1.arc(64,64,50,0,Math.PI*2); x1.fill();
|
||
x1.fillStyle = '#fff'; x1.font = 'bold 36px sans-serif'; x1.textAlign = 'center'; x1.textBaseline = 'middle';
|
||
x1.fillText('🏎️', 64, 64);
|
||
document.getElementById('dlIcon').href = c1.toDataURL('image/png');
|
||
|
||
// 2. Screenshot 640x400
|
||
const c2 = document.getElementById('cvSS');
|
||
const x2 = c2.getContext('2d');
|
||
x2.fillStyle = '#15803d'; x2.fillRect(0,0,640,400); // Grass
|
||
x2.fillStyle = '#334155'; x2.fillRect(140,0,360,400); // Asphalt
|
||
x2.fillStyle = '#f59e0b'; x2.fillRect(145,0,5,400); x2.fillRect(490,0,5,400); // Lines
|
||
x2.fillStyle = '#fff';
|
||
for(let y=10; y<400; y+=40) {
|
||
x2.fillRect(230,y,3,20); x2.fillRect(320,y,3,20); x2.fillRect(410,y,3,20);
|
||
}
|
||
// Red Car
|
||
x2.fillStyle = '#ef4444'; x2.fillRect(302, 280, 36, 64);
|
||
x2.fillStyle = '#38bdf8'; x2.fillRect(307, 290, 26, 14);
|
||
// Blue Car
|
||
x2.fillStyle = '#0284c7'; x2.fillRect(212, 100, 36, 64);
|
||
// HUD Header
|
||
x2.fillStyle = 'rgba(15,23,42,0.9)'; x2.fillRect(150, 10, 340, 35);
|
||
x2.fillStyle = '#fff'; x2.font = 'bold 12px sans-serif';
|
||
x2.fillText('SÜPER RACING - 1. Bölüm Sahil Yolu | SKOR: 1,450', 160, 32);
|
||
document.getElementById('dlSS').href = c2.toDataURL('image/png');
|
||
|
||
// 3. Promo 440x280
|
||
const c3 = document.getElementById('cvPromo');
|
||
const x3 = c3.getContext('2d');
|
||
const g = x3.createLinearGradient(0,0,440,280);
|
||
g.addColorStop(0, '#dc2626'); g.addColorStop(0.5, '#1e1b4b'); g.addColorStop(1, '#0284c7');
|
||
x3.fillStyle = g; x3.fillRect(0,0,440,280);
|
||
x3.fillStyle = '#f59e0b'; x3.fillRect(160, 40, 120, 24);
|
||
x3.fillStyle = '#000'; x3.font = '900 12px sans-serif'; x3.textAlign = 'center';
|
||
x3.fillText('🏁 TURBO EDITION', 220, 56);
|
||
x3.fillStyle = '#fff'; x3.font = '900 32px sans-serif';
|
||
x3.fillText('SÜPER RACING', 220, 120);
|
||
x3.font = '600 14px sans-serif'; x3.fillStyle = '#38bdf8';
|
||
x3.fillText('Aksiyon Dolu Otoban Araba Yarışı', 220, 150);
|
||
document.getElementById('dlPromo').href = c3.toDataURL('image/png');
|
||
</script>
|
||
</body>
|
||
</html>
|