suphicakir/kakeibo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(arayüz): logo ve uygulama ikonları

Browse Source 
- Logo: indigo zemin, spiral defter ve ¥ (frontend/brand/*.svg)
- scripts/icons.sh (npm run icons): favicon (svg/ico), PWA 192/512, maskable, Apple touch icon, Tauri 1024
- Logo bileşeni (components/logo.tsx)
- index.html: ikon bağlantıları, theme-color, açıklama

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
suphicakir
2026-11-12 00:30:39 +03:00
parent 440523b176
commit f9be08114d
18 changed files with 194 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/brand/icon-1024.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

frontend/brand/logo-fullbleed.svg
+24
View File
@@ -0,0 +1,24 @@
<!-- Köşesiz kare sürüm: Android "maskable" ve Apple touch icon (sistem kendi şekliyle kırpar).
İçerik %82'ye küçültülmüştür → maskable güvenli alanı (merkezde %80 çaplı daire) içinde kalır. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="kakeibo-bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3b4aa8"/>
<stop offset="1" stop-color="#26307a"/>
</linearGradient>
</defs>
<rect width="512" height="512" fill="url(#kakeibo-bg)"/>
<g transform="translate(256 256) scale(0.82) translate(-260 -256)">
<rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea"/>
<rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf"/>
<rect x="166" y="92" width="26" height="328" fill="#e6dfcf"/>
<g fill="#26307a">
<circle cx="140" cy="150" r="13"/><circle cx="140" cy="220" r="13"/>
<circle cx="140" cy="290" r="13"/><circle cx="140" cy="360" r="13"/>
</g>
<g fill="none" stroke="#26307a" stroke-width="22" stroke-linecap="round" stroke-linejoin="round">
<path d="M238 178 L292 254 L346 178"/><path d="M292 254 V342"/>
<path d="M250 266 H334"/><path d="M250 304 H334"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

frontend/brand/logo.svg
+23
View File
@@ -0,0 +1,23 @@
<!-- Kakeibo logosu (ana kaynak). Değiştirirseniz: scripts/icons.sh -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="kakeibo-bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3b4aa8"/>
<stop offset="1" stop-color="#26307a"/>
</linearGradient>
</defs>
<rect width="512" height="512" rx="112" fill="url(#kakeibo-bg)"/>
<g id="mark">
<rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea"/>
<rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf"/>
<rect x="166" y="92" width="26" height="328" fill="#e6dfcf"/>
<g fill="#26307a">
<circle cx="140" cy="150" r="13"/><circle cx="140" cy="220" r="13"/>
<circle cx="140" cy="290" r="13"/><circle cx="140" cy="360" r="13"/>
</g>
<g fill="none" stroke="#26307a" stroke-width="22" stroke-linecap="round" stroke-linejoin="round">
<path d="M238 178 L292 254 L346 178"/><path d="M292 254 V342"/>
<path d="M250 266 H334"/><path d="M250 304 H334"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

frontend/index.html
+8
View File
@@ -5,6 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="color-scheme" content="light dark" />
<title>Kakeibo</title>
<meta name="description" content="Kakeibo — hane bazlı kişisel ev finans defteri" />
<!-- İkonlar: scripts/icons.sh ile frontend/brand/*.svg kaynaklarından üretilir -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Mobil tarayıcı çubuğu rengi (tema arka planıyla aynı) -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" />
<!-- Tema: React yüklenmeden önce uygulanır → ilk açılışta "beyaz parlama" olmaz (lib/theme.tsx ile aynı mantık) -->
<script>
try {
frontend/public/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

frontend/public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

frontend/public/favicon.svg
+23
View File
@@ -0,0 +1,23 @@
<!-- Kakeibo logosu (ana kaynak). Değiştirirseniz: scripts/icons.sh -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="kakeibo-bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3b4aa8"/>
<stop offset="1" stop-color="#26307a"/>
</linearGradient>
</defs>
<rect width="512" height="512" rx="112" fill="url(#kakeibo-bg)"/>
<g id="mark">
<rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea"/>
<rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf"/>
<rect x="166" y="92" width="26" height="328" fill="#e6dfcf"/>
<g fill="#26307a">
<circle cx="140" cy="150" r="13"/><circle cx="140" cy="220" r="13"/>
<circle cx="140" cy="290" r="13"/><circle cx="140" cy="360" r="13"/>
</g>
<g fill="none" stroke="#26307a" stroke-width="22" stroke-linecap="round" stroke-linejoin="round">
<path d="M238 178 L292 254 L346 178"/><path d="M292 254 V342"/>
<path d="M250 266 H334"/><path d="M250 304 H334"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

frontend/public/icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

frontend/public/icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

frontend/public/icon-maskable-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

frontend/src/App.tsx
+4 -1
View File
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react'
import { Plus } from 'lucide-react'
import { Logo } from '@/components/logo'
import { ThemeToggle } from '@/components/theme-toggle'
import { Button } from '@/components/ui/button'
import { formatDate, formatMoney, formatQuantity, toIsoDate } from '@/lib/format'
@@ -25,7 +26,9 @@ export default function App() {
<main className="mx-auto flex max-w-3xl flex-col gap-8 px-4 py-8">
<header className="flex flex-wrap items-center justify-between gap-4">
<div>
<h1 className="text-3xl font-bold tracking-tight">📒 Kakeibo</h1>
<h1>
<Logo size={44} withText />
</h1>
<p className="text-muted-foreground">Tasarım sistemi önizlemesi</p>
</div>
<ThemeToggle />
frontend/src/components/logo.tsx
+67
View File
@@ -0,0 +1,67 @@
import { useId } from 'react'
import { cn } from '@/lib/utils'
/**
* Kakeibo logosu (kaynak: `frontend/brand/logo.svg` — ikisi aynı tutulmalı).
* `withText` ile yanında "Kakeibo" yazısı gösterilir.
*/
export function Logo({
size = 32,
withText = false,
className,
}: {
size?: number
withText?: boolean
className?: string
}) {
// Sayfada birden fazla logo olursa gradient kimlikleri çakışmasın
const gradientId = useId()
return (
<span className={cn('inline-flex items-center gap-2.5', className)}>
<svg
viewBox="0 0 512 512"
width={size}
height={size}
role="img"
aria-label={withText ? undefined : 'Kakeibo'}
aria-hidden={withText || undefined}
className="shrink-0"
>
<defs>
<linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stopColor="#3b4aa8" />
<stop offset="1" stopColor="#26307a" />
</linearGradient>
</defs>
<rect width="512" height="512" rx="112" fill={`url(#${gradientId})`} />
<rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea" />
<rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf" />
<rect x="166" y="92" width="26" height="328" fill="#e6dfcf" />
<g fill="#26307a">
<circle cx="140" cy="150" r="13" />
<circle cx="140" cy="220" r="13" />
<circle cx="140" cy="290" r="13" />
<circle cx="140" cy="360" r="13" />
</g>
<g
fill="none"
stroke="#26307a"
strokeWidth="22"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M238 178 L292 254 L346 178" />
<path d="M292 254 V342" />
<path d="M250 266 H334" />
<path d="M250 304 H334" />
</g>
</svg>
{withText && (
<span className="font-bold tracking-tight" style={{ fontSize: size * 0.6 }}>
Kakeibo
</span>
)}
</span>
)
}