kingpin1dev.github.io/preview-featured-cards.html at main · kingpin1dev/kingpin1dev.github.io · GitHub

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
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Öne Çıkan Projeler — Alternatif Tasarım Önizleme</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">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Fira+Code:wght@400;500;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['Fira Code', 'monospace'] },
                    colors: { neon: '#58a6ff', darkbg: '#0d1117', cardbg: '#161b22' }
                }
            }
        }
    </script>
    <style>
        body { background-color: #0d1117; color: #c9d1d9; font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="p-10">

    <p class="text-center text-gray-500 text-sm font-mono mb-2">— Alternatif Tasarım Önizlemesi —</p>
    <h1 class="text-center text-white font-bold text-xl mb-10">Öne Çıkan Projeler</h1>

    <!-- 2 KOLON GRID -->
    <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-20">

        <!-- BokMail Kartı -->
        <div class="group bg-[#161b22] rounded-2xl overflow-hidden border border-gray-800 hover:border-neon/50 transition-all duration-300 flex flex-col">
            <div class="relative h-28 bg-gradient-to-br from-[#0d2847] via-[#0d1f3c] to-[#0a0f1a] flex items-center justify-center overflow-hidden">
                <div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(circle at 30% 50%, #58a6ff 0%, transparent 60%), radial-gradient(circle at 80% 20%, #1f6feb 0%, transparent 50%);"></div>
                <i class="fas fa-envelope-open-text text-neon text-5xl relative z-10 drop-shadow-[0_0_20px_rgba(88,166,255,0.6)]"></i>
                <div class="absolute top-3 right-3">
                    <span class="text-[10px] font-mono bg-neon/20 text-neon border border-neon/30 px-2 py-0.5 rounded-full">Web App</span>
                </div>
            </div>
            <div class="p-6 flex flex-col flex-1">
                <h3 class="text-xl font-bold text-white mb-1">BokMail</h3>
                <p class="text-gray-400 text-sm mb-5 flex-1 leading-relaxed">Gerçek e-posta adresinizi koruyun. Şifresiz, anında aktif, kalıcı saklama destekli anonim geçici e-posta servisi.</p>
                <div class="flex flex-wrap gap-2 mb-5">
                    <span class="text-xs font-mono bg-neon/5 text-neon/70 border border-neon/10 px-2 py-1 rounded-md">Şifresiz</span>
                    <span class="text-xs font-mono bg-neon/5 text-neon/70 border border-neon/10 px-2 py-1 rounded-md">Kalıcı Depolama</span>
                    <span class="text-xs font-mono bg-neon/5 text-neon/70 border border-neon/10 px-2 py-1 rounded-md">Anonim</span>
                    <span class="text-xs font-mono bg-neon/5 text-neon/70 border border-neon/10 px-2 py-1 rounded-md">Spam Koruması</span>
                </div>
                <div class="flex gap-3 pt-4 border-t border-gray-800">
                    <a href="https://bokmails.com" target="_blank" class="flex-1 text-center py-2.5 bg-neon text-darkbg font-bold rounded-lg text-sm hover:opacity-90 transition flex items-center justify-center gap-2">
                        <i class="fas fa-arrow-up-right-from-square text-xs"></i> Siteyi Ziyaret Et
                    </a>
                    <a href="https://github.com/kingpin1dev/" target="_blank" class="px-4 py-2.5 border border-gray-700 hover:border-gray-500 text-gray-400 hover:text-white rounded-lg text-sm transition flex items-center gap-2">
                        <i class="fab fa-github"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Sonar Vice Widget Kartı -->
        <div class="group bg-[#161b22] rounded-2xl overflow-hidden border border-gray-800 hover:border-[#f96815]/50 transition-all duration-300 flex flex-col">
            <div class="relative h-28 bg-gradient-to-br from-[#2a1500] via-[#1a0f00] to-[#0a0a0a] flex items-center justify-center overflow-hidden">
                <div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(circle at 30% 50%, #f96815 0%, transparent 60%), radial-gradient(circle at 80% 20%, #c0440a 0%, transparent 50%);"></div>
                <i class="fas fa-headphones text-[#f96815] text-5xl relative z-10 drop-shadow-[0_0_20px_rgba(249,104,21,0.6)]"></i>
                <div class="absolute top-3 right-3">
                    <span class="text-[10px] font-mono bg-[#f96815]/20 text-[#f96815] border border-[#f96815]/30 px-2 py-0.5 rounded-full">Windows</span>
                </div>
            </div>
            <div class="p-6 flex flex-col flex-1">
                <h3 class="text-xl font-bold text-white mb-1">Sonar Vice Widget</h3>
                <p class="text-gray-400 text-sm mb-5 flex-1 leading-relaxed">SteelSeries Sonar için masaüstü widget'ı. Ses kanalları, EQ profilleri ve RGB aydınlatmayı ekranın istediğin yerinden yönet.</p>
                <div class="flex flex-wrap gap-2 mb-5">
                    <span class="text-xs font-mono bg-[#f96815]/5 text-[#f96815]/70 border border-[#f96815]/10 px-2 py-1 rounded-md">Ses Kontrolü</span>
                    <span class="text-xs font-mono bg-[#f96815]/5 text-[#f96815]/70 border border-[#f96815]/10 px-2 py-1 rounded-md">EQ Profilleri</span>
                    <span class="text-xs font-mono bg-[#f96815]/5 text-[#f96815]/70 border border-[#f96815]/10 px-2 py-1 rounded-md">RGB</span>
                    <span class="text-xs font-mono bg-[#f96815]/5 text-[#f96815]/70 border border-[#f96815]/10 px-2 py-1 rounded-md">Sürüklenebilir</span>
                </div>
                <div class="flex gap-3 pt-4 border-t border-gray-800">
                    <a href="https://github.com/kingpin1dev/sonar-vice-widget-releases/releases" target="_blank" class="flex-1 text-center py-2.5 bg-[#f96815] hover:bg-[#f96815]/85 text-white font-bold rounded-lg text-sm transition flex items-center justify-center gap-2">
                        <i class="fas fa-download text-xs"></i> İndir
                    </a>
                    <a href="https://github.com/kingpin1dev/sonar-vice-widget-releases" target="_blank" class="px-4 py-2.5 border border-gray-700 hover:border-gray-500 text-gray-400 hover:text-white rounded-lg text-sm transition flex items-center gap-2">
                        <i class="fab fa-github"></i>
                    </a>
                </div>
            </div>
        </div>

    </div>

    <hr class="border-gray-800 max-w-5xl mx-auto mb-16">
    <p class="text-center text-gray-600 text-xs font-mono mb-10">— Mevcut Tasarım (karşılaştırma için) —</p>

    <!-- MEVCUT TASARIM -->
    <div class="max-w-5xl mx-auto space-y-6">
        <div class="bg-gradient-to-r from-[#0d1f3c] to-[#0d1117] border border-[#58a6ff]/30 rounded-2xl p-6 md:p-8 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-72 h-72 bg-[#58a6ff]/5 rounded-full blur-[80px] pointer-events-none"></div>
            <div class="relative flex flex-col md:flex-row md:items-center gap-6">
                <div class="flex-shrink-0 w-14 h-14 bg-[#58a6ff]/10 border border-[#58a6ff]/30 rounded-xl flex items-center justify-center">
                    <i class="fas fa-envelope-open-text text-[#58a6ff] text-2xl"></i>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2 flex-wrap">
                        <h3 class="text-2xl font-bold text-white">BokMail</h3>
                        <span class="text-xs font-mono bg-[#58a6ff]/10 text-[#58a6ff] border border-[#58a6ff]/20 px-2 py-0.5 rounded-full">Öne Çıkan Proje</span>
                    </div>
                    <p class="text-gray-400 text-sm md:text-base mb-4 max-w-2xl">Gerçek e-posta adresinizi koruyun. Şifresiz, anında aktif, kalıcı saklama destekli anonim geçici e-posta servisi.</p>
                    <div class="flex flex-wrap gap-2 mb-5">
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-1 rounded">Şifresiz Giriş</span>
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-1 rounded">Kalıcı Depolama</span>
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-1 rounded">Anlık Aktivasyon</span>
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-1 rounded">Spam Koruması</span>
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <a href="#" class="px-5 py-2.5 bg-[#58a6ff] text-[#0d1117] font-bold rounded-lg text-sm flex items-center gap-2"><i class="fas fa-arrow-up-right-from-square"></i> Siteyi Ziyaret Et</a>
                        <a href="#" class="px-5 py-2.5 border border-gray-600 text-white font-bold rounded-lg text-sm flex items-center gap-2"><i class="fab fa-github"></i> GitHub</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-r from-[#1a1a0d] to-[#0d1117] border border-[#f96815]/30 rounded-2xl p-6 md:p-8 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-72 h-72 bg-[#f96815]/5 rounded-full blur-[80px] pointer-events-none"></div>
            <div class="relative flex flex-col md:flex-row md:items-center gap-6">
                <div class="flex-shrink-0 w-14 h-14 bg-[#f96815]/10 border border-[#f96815]/30 rounded-xl flex items-center justify-center">
                    <i class="fas fa-headphones text-[#f96815] text-2xl"></i>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2 flex-wrap">
                        <h3 class="text-2xl font-bold text-white">Sonar Vice Widget</h3>
                        <span class="text-xs font-mono bg-[#f96815]/10 text-[#f96815] border border-[#f96815]/20 px-2 py-0.5 rounded-full">Öne Çıkan Proje</span>
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-0.5 rounded-full">Windows</span>
                    </div>
                    <p class="text-gray-400 text-sm md:text-base mb-4 max-w-2xl">SteelSeries Sonar için masaüstü widget'ı. Ses kanalları, EQ profilleri ve RGB aydınlatmayı yönet.</p>
                    <div class="flex flex-wrap gap-2 mb-5">
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-1 rounded">Ses Kontrolü</span>
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-1 rounded">EQ Profilleri</span>
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-1 rounded">RGB Aydınlatma</span>
                        <span class="text-xs font-mono bg-white/5 text-gray-400 border border-gray-700 px-2 py-1 rounded">Sürüklenebilir</span>
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <a href="#" class="px-5 py-2.5 bg-[#f96815] text-white font-bold rounded-lg text-sm flex items-center gap-2"><i class="fas fa-download"></i> İndir</a>
                        <a href="#" class="px-5 py-2.5 border border-gray-600 text-white font-bold rounded-lg text-sm flex items-center gap-2"><i class="fab fa-github"></i> GitHub</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p class="text-center text-gray-600 text-xs font-mono mt-16">Üstteki alternatif tasarımı onaylıyorsan söyle, siteye uygulayayım.</p>

</body>
</html>