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

feat(brand): mavi/beyaz tema, yer tutucu logo, ikon üretimi ve PWA manifest

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
suphicakir
2026-11-05 01:35:10 +03:00
parent 4f41c0f668
commit c875847b65
14 changed files with 251 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/apple-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

src/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

src/app/globals.css
+98 -60
View File
@@ -18,6 +18,14 @@
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-income: var(--income);
--color-income-foreground: var(--income-foreground);
--color-expense: var(--expense);
--color-expense-foreground: var(--expense-foreground);
--color-budget: var(--budget);
--color-budget-foreground: var(--budget-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
@@ -48,73 +56,98 @@
--radius-4xl: calc(var(--radius) * 2.6);
}
/*
* BÜTÇEM marka paleti — mavi ve beyaz tonları (oklch). Sabit renk kodu yalnızca burada.
* Anlamsal renkler: --income (gelir/yeşil), --expense (gider/kırmızı),
* --budget (bütçe-plan/mavi), --warning (uyarı/turuncu). Grafikler de bunları kullanır.
*/
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--background: oklch(0.99 0.004 250);
--foreground: oklch(0.22 0.04 262);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--card-foreground: oklch(0.22 0.04 262);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--popover-foreground: oklch(0.22 0.04 262);
--primary: oklch(0.49 0.17 258);
--primary-foreground: oklch(0.99 0.004 250);
--secondary: oklch(0.955 0.016 250);
--secondary-foreground: oklch(0.3 0.06 260);
--muted: oklch(0.955 0.012 250);
--muted-foreground: oklch(0.5 0.03 258);
--accent: oklch(0.935 0.03 250);
--accent-foreground: oklch(0.3 0.08 260);
--destructive: oklch(0.56 0.21 25);
--border: oklch(0.905 0.016 252);
--input: oklch(0.89 0.018 252);
--ring: oklch(0.6 0.15 258);
--income: oklch(0.58 0.15 152);
--income-foreground: oklch(0.99 0.004 250);
--expense: oklch(0.56 0.21 25);
--expense-foreground: oklch(0.99 0.004 250);
--budget: oklch(0.55 0.17 258);
--budget-foreground: oklch(0.99 0.004 250);
--warning: oklch(0.68 0.17 55);
--warning-foreground: oklch(0.22 0.04 262);
--chart-1: var(--income);
--chart-2: var(--budget);
--chart-3: var(--expense);
--chart-4: var(--warning);
--chart-5: oklch(0.65 0.08 230);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--sidebar: oklch(0.975 0.008 250);
--sidebar-foreground: oklch(0.22 0.04 262);
--sidebar-primary: oklch(0.49 0.17 258);
--sidebar-primary-foreground: oklch(0.99 0.004 250);
--sidebar-accent: oklch(0.935 0.03 250);
--sidebar-accent-foreground: oklch(0.3 0.08 260);
--sidebar-border: oklch(0.905 0.016 252);
--sidebar-ring: oklch(0.6 0.15 258);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--background: oklch(0.18 0.04 264);
--foreground: oklch(0.96 0.01 250);
--card: oklch(0.22 0.045 264);
--card-foreground: oklch(0.96 0.01 250);
--popover: oklch(0.22 0.045 264);
--popover-foreground: oklch(0.96 0.01 250);
--primary: oklch(0.76 0.12 245);
--primary-foreground: oklch(0.18 0.04 264);
--secondary: oklch(0.27 0.045 264);
--secondary-foreground: oklch(0.96 0.01 250);
--muted: oklch(0.26 0.04 264);
--muted-foreground: oklch(0.73 0.03 250);
--accent: oklch(0.3 0.06 262);
--accent-foreground: oklch(0.96 0.01 250);
--destructive: oklch(0.7 0.18 22);
--border: oklch(1 0 0 / 11%);
--input: oklch(1 0 0 / 16%);
--ring: oklch(0.7 0.12 245);
--income: oklch(0.75 0.16 152);
--income-foreground: oklch(0.18 0.04 264);
--expense: oklch(0.7 0.18 22);
--expense-foreground: oklch(0.18 0.04 264);
--budget: oklch(0.73 0.13 245);
--budget-foreground: oklch(0.18 0.04 264);
--warning: oklch(0.79 0.15 62);
--warning-foreground: oklch(0.18 0.04 264);
--chart-1: var(--income);
--chart-2: var(--budget);
--chart-3: var(--expense);
--chart-4: var(--warning);
--chart-5: oklch(0.7 0.07 230);
--sidebar: oklch(0.2 0.045 264);
--sidebar-foreground: oklch(0.96 0.01 250);
--sidebar-primary: oklch(0.76 0.12 245);
--sidebar-primary-foreground: oklch(0.18 0.04 264);
--sidebar-accent: oklch(0.28 0.055 262);
--sidebar-accent-foreground: oklch(0.96 0.01 250);
--sidebar-border: oklch(1 0 0 / 11%);
--sidebar-ring: oklch(0.7 0.12 245);
}
@layer base {
@@ -128,3 +161,8 @@
@apply font-sans;
}
}
/* Mobil alt menü + iOS ana ekran çentiği için güvenli alan */
@utility pb-safe {
padding-bottom: env(safe-area-inset-bottom);
}
src/app/icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

src/app/manifest.ts
+26
View File
@@ -0,0 +1,26 @@
import type { MetadataRoute } from "next";
import { tr } from "@/i18n/tr";
/** PWA manifest: "Ana ekrana ekle" ile kurulabilir. İkonlar: npm run icons. */
export default function manifest(): MetadataRoute.Manifest {
return {
id: "/",
name: tr.app.name,
short_name: tr.app.name,
description: tr.app.tagline,
lang: "tr-TR",
dir: "ltr",
start_url: "/dashboard",
scope: "/",
display: "standalone",
orientation: "portrait",
background_color: "#fafcfe",
theme_color: "#105bbe",
categories: ["finance", "productivity"],
icons: [
{ src: "/icons/icon-192.png", sizes: "192x192", type: "image/png", purpose: "any" },
{ src: "/icons/icon-512.png", sizes: "512x512", type: "image/png", purpose: "any" },
{ src: "/icons/maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
],
};
}
src/components/brand/logo.tsx
+27
View File
@@ -0,0 +1,27 @@
import Image from "next/image";
import { cn } from "@/lib/utils";
import { tr } from "@/i18n/tr";
/**
* Marka logosu: açık temada logo.svg, koyu temada logo-dark.svg (CSS ile seçilir,
* hydration uyumsuzluğu olmaz). Dosyalar public/brand/ altında.
*/
export function Logo({ className, priority }: { className?: string; priority?: boolean }) {
const common = { width: 120, height: 32, priority, unoptimized: true } as const;
return (
<span className={cn("inline-flex items-center", className)}>
<Image
src="/brand/logo.svg"
alt={tr.app.name}
className="h-8 w-auto dark:hidden"
{...common}
/>
<Image
src="/brand/logo-dark.svg"
alt=""
className="hidden h-8 w-auto dark:block"
{...common}
/>
</span>
);
}