truncgit/dekupai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add interactive Credits panel for Umit Tunc under Truncgil Teknoloji

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-23 10:55:42 +03:00
parent 2556249a5f
commit c8d56b5e02
5 changed files with 325 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+135 -38
View File
@@ -1,18 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dekupai - Turunçgil AI Dekupaj</title>
<title>Dekupai - Trunçgil AI Dekupaj</title>
<!-- Google Fonts: Inter & Outfit -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<!-- CropperJS CSS from node_modules (linked locally) -->
<link rel="stylesheet" href="node_modules/cropperjs/dist/cropper.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Ambient Background Orbs -->
<div class="ambient-glow bg-orb-1"></div>
@@ -22,28 +26,40 @@
<header class="app-titlebar">
<div class="titlebar-logo">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" fill="url(#neon-grad)" stroke="#fff" stroke-opacity="0.2" stroke-width="1.5"/>
<path d="M2 17L12 22L22 17" stroke="url(#neon-grad)" stroke-width="2" stroke-linecap="round"/>
<path d="M2 12L12 17L22 12" stroke="#a78bfa" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round"/>
<path d="M12 2L2 7L12 12L22 7L12 2Z" fill="url(#neon-grad)" stroke="#fff" stroke-opacity="0.2"
stroke-width="1.5" />
<path d="M2 17L12 22L22 17" stroke="url(#neon-grad)" stroke-width="2" stroke-linecap="round" />
<path d="M2 12L12 17L22 12" stroke="#a78bfa" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round" />
<defs>
<linearGradient id="neon-grad" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
<stop stop-color="#ff7a00"/>
<stop offset="1" stop-color="#ffb800"/>
<stop stop-color="#ff7a00" />
<stop offset="1" stop-color="#ffb800" />
</linearGradient>
</defs>
</svg>
<span>DEKUPAI</span>
<span class="badge">Turunçgil AI</span>
<span class="badge">Trunçgil AI</span>
</div>
<div class="titlebar-controls">
<button class="win-btn info-btn" id="btn-show-credits" title="Credits & Info">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
</button>
<div class="divider-v" style="height: 16px; opacity: 0.15; margin: 0 4px; -webkit-app-region: no-drag;"></div>
<button class="win-btn min-btn" id="win-min" title="Minimize">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
<button class="win-btn max-btn" id="win-max" title="Maximize">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="5" y="5" width="14" height="14" rx="2"></rect></svg>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<rect x="5" y="5" width="14" height="14" rx="2"></rect>
</svg>
</button>
<button class="win-btn close-btn" id="win-close" title="Close">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</header>
@@ -53,9 +69,12 @@
<div class="setup-wizard text-center">
<div class="wizard-header">
<div class="glow-icon-container">
<svg class="glow-icon animated-float" width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2V6M12 18V22M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M2 12H6M18 12H22M4.93 19.07L7.76 16.24M16.24 7.76L19.07 4.93" stroke="url(#neon-grad)" stroke-width="2" stroke-linecap="round"/>
<circle cx="12" cy="12" r="4" fill="url(#neon-grad)" opacity="0.3"/>
<svg class="glow-icon animated-float" width="64" height="64" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2V6M12 18V22M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M2 12H6M18 12H22M4.93 19.07L7.76 16.24M16.24 7.76L19.07 4.93"
stroke="url(#neon-grad)" stroke-width="2" stroke-linecap="round" />
<circle cx="12" cy="12" r="4" fill="url(#neon-grad)" opacity="0.3" />
</svg>
</div>
<h1>Initializing AI Engine</h1>
@@ -91,7 +110,10 @@
<div class="wizard-actions">
<button class="btn btn-primary" id="btn-start-setup">
<span>Configure Engine (Automatic)</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
@@ -105,7 +127,8 @@
<div class="dropzone" id="dropzone">
<div class="dropzone-content">
<div class="dropzone-glow-icon">
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
@@ -132,27 +155,40 @@
<div class="editor-controls glass-panel-inner">
<div class="btn-group">
<button class="ctrl-btn" id="ctrl-crop-drag" title="Drag / Navigate Image" class="active">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20"></path></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20"></path>
</svg>
</button>
<button class="ctrl-btn" id="ctrl-crop-box" title="Crop Selection Box">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-2-2h-5m-9 0h5M3 8v8a2 2 0 0 0 2 2h8m9 0h-5"></path><path d="M10 2L2 10m20 4l-8 8"></path></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-2-2h-5m-9 0h5M3 8v8a2 2 0 0 0 2 2h8m9 0h-5"></path>
<path d="M10 2L2 10m20 4l-8 8"></path>
</svg>
</button>
</div>
<div class="divider-v"></div>
<div class="btn-group">
<button class="ctrl-btn" id="ctrl-rot-l" title="Rotate Left 90°">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M21.34 8a10 10 0 1 0-.45 7"></path></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21.5 2v6h-6M21.34 8a10 10 0 1 0-.45 7"></path>
</svg>
</button>
<button class="ctrl-btn" id="ctrl-rot-r" title="Rotate Right 90°">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2.5 2v6h6M2.66 8a10 10 0 1 1 .45 7"></path></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M2.5 2v6h6M2.66 8a10 10 0 1 1 .45 7"></path>
</svg>
</button>
<button class="ctrl-btn" id="ctrl-flip-h" title="Flip Horizontal">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20M7 8l-5 4 5 4M17 8l5 4-5 4"></path></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M2 12h20M7 8l-5 4 5 4M17 8l5 4-5 4"></path>
</svg>
</button>
<button class="ctrl-btn" id="ctrl-flip-v" title="Flip Vertical">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20M8 7l4-5 4 5M8 17l4 5 4-5"></path></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M2 12h20M8 7l4-5 4 5M8 17l4 5 4-5"></path>
</svg>
</button>
</div>
@@ -172,13 +208,21 @@
<div class="divider-v"></div>
<button class="btn btn-secondary btn-sm glow-btn-purple" id="ctrl-auto-trim" title="Automatically shrink crop box to subject edges" disabled>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path><path d="M8 8h8v8H8z"></path></svg>
<button class="btn btn-secondary btn-sm glow-btn-purple" id="ctrl-auto-trim"
title="Automatically shrink crop box to subject edges" disabled>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path>
<path d="M8 8h8v8H8z"></path>
</svg>
<span>Auto-Trim</span>
</button>
<button class="ctrl-btn btn-danger-icon" id="ctrl-reset" title="Reset Image State">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
<path d="M3 3v5h5"></path>
</svg>
</button>
</div>
</div>
@@ -217,9 +261,12 @@
<span class="step-badge">2</span>
<h3>Background Removal</h3>
</div>
<button class="btn btn-primary w-full" id="btn-remove-bg" disabled>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-2-2h-5m-9 0h5M3 8v8a2 2 0 0 0 2 2h8m9 0h-5"></path></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-2-2h-5m-9 0h5M3 8v8a2 2 0 0 0 2 2h8m9 0h-5"></path>
</svg>
<span>Extract Subject</span>
</button>
@@ -242,7 +289,7 @@
<span class="step-badge">3</span>
<h3>Background Settings</h3>
</div>
<div class="bg-mode-tabs glass-panel-inner">
<button class="bg-tab active" data-mode="transparent" id="tab-bg-trans">
<span>Transparent</span>
@@ -266,7 +313,11 @@
<button class="swatch green" data-color="#10b981"></button>
<button class="swatch custom" id="btn-custom-color-picker" title="Pick Custom Color">
<input type="color" id="custom-color-picker" value="#a78bfa">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 14.7255 3.09032 17.1962 4.85857 19C5.34306 18.6653 5.96205 18.5 6.6 18.5C8.47772 18.5 10 20.0223 10 21.9C10 21.9335 9.99965 21.9669 9.99896 22H12Z"></path></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 14.7255 3.09032 17.1962 4.85857 19C5.34306 18.6653 5.96205 18.5 6.6 18.5C8.47772 18.5 10 20.0223 10 21.9C10 21.9335 9.99965 21.9669 9.99896 22H12Z">
</path>
</svg>
</button>
</div>
</div>
@@ -275,12 +326,18 @@
<div class="bg-settings-subpanel hidden" id="subpanel-gradient">
<label class="panel-sublabel">Select High-End Gradient</label>
<div class="gradient-swatches-grid">
<button class="grad-swatch grad-1 active" data-gradient="linear-gradient(135deg, #a78bfa, #06b6d4)" title="Violet Cyan Glow"></button>
<button class="grad-swatch grad-2" data-gradient="linear-gradient(135deg, #f43f5e, #f97316)" title="Sunset Horizon"></button>
<button class="grad-swatch grad-3" data-gradient="linear-gradient(135deg, #10b981, #06b6d4)" title="Emerald Sea"></button>
<button class="grad-swatch grad-4" data-gradient="linear-gradient(135deg, #ec4899, #8b5cf6)" title="Cyber Punk Pink"></button>
<button class="grad-swatch grad-5" data-gradient="linear-gradient(135deg, #3b82f6, #8b5cf6)" title="Aether Blue"></button>
<button class="grad-swatch grad-6" data-gradient="linear-gradient(135deg, #f59e0b, #ef4444)" title="Warm Ember"></button>
<button class="grad-swatch grad-1 active" data-gradient="linear-gradient(135deg, #a78bfa, #06b6d4)"
title="Violet Cyan Glow"></button>
<button class="grad-swatch grad-2" data-gradient="linear-gradient(135deg, #f43f5e, #f97316)"
title="Sunset Horizon"></button>
<button class="grad-swatch grad-3" data-gradient="linear-gradient(135deg, #10b981, #06b6d4)"
title="Emerald Sea"></button>
<button class="grad-swatch grad-4" data-gradient="linear-gradient(135deg, #ec4899, #8b5cf6)"
title="Cyber Punk Pink"></button>
<button class="grad-swatch grad-5" data-gradient="linear-gradient(135deg, #3b82f6, #8b5cf6)"
title="Aether Blue"></button>
<button class="grad-swatch grad-6" data-gradient="linear-gradient(135deg, #f59e0b, #ef4444)"
title="Warm Ember"></button>
</div>
</div>
</section>
@@ -314,7 +371,12 @@
</div>
<button class="btn btn-primary glow-btn-cyan w-full" id="btn-export">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span>Export Masterpiece</span>
</button>
</section>
@@ -331,8 +393,43 @@
<button class="toast-close" id="btn-close-toast">&times;</button>
</div>
<!-- Credits Overlay Modal -->
<div class="overlay-container glass-panel hidden" id="credits-overlay" style="width: 440px; text-align: center; z-index: 100010;">
<div class="setup-wizard">
<div class="wizard-header">
<div class="glow-icon-container">
<svg class="glow-icon animated-float" width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" fill="url(#neon-grad)" opacity="0.3" stroke="url(#neon-grad)" stroke-width="1.5"/>
<path d="M12 12C12 13.6569 10.6569 15 9 15C7.34315 15 6 13.6569 6 12C6 10.3431 7.34315 9 9 9C10.6569 9 12 10.3431 12 12Z" fill="url(#neon-grad)" stroke="url(#neon-grad)" stroke-width="1.5"/>
<path d="M12 12C12 13.6569 13.3431 15 15 15C16.6569 15 18 13.6569 18 12C18 10.3431 16.6569 9 15 9C13.3431 9 12 10.3431 12 12Z" fill="url(#neon-grad)" stroke="url(#neon-grad)" stroke-width="1.5"/>
</svg>
</div>
<h1 style="font-size: 28px; margin-bottom: 2px; font-family: var(--font-heading);">DEKUPAI</h1>
<div style="font-size: 11px; font-weight: 700; color: #ff7a00; letter-spacing: 1.5px; margin-bottom: 12px; text-transform: uppercase;">Version 1.0.0</div>
<div class="glass-panel-inner" style="margin-top: 14px; text-align: center; display: flex; flex-direction: column; gap: 10px; padding: 20px !important;">
<p style="font-size: 13px; color: var(--text-muted); font-weight: 500;">Developed under the vision of</p>
<h2 style="font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: #ff7a00; text-shadow: 0 0 12px rgba(255, 122, 0, 0.35);">Trunçgil Teknoloji</h2>
<p style="font-size: 12px; color: var(--text-muted-dark); line-height: 1.4;">by the engineering expertise of</p>
<h3 style="font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: #fff;">Ümit Tunç</h3>
</div>
<div style="margin-top: 16px; font-size: 12px; color: var(--text-muted-dark); line-height: 1.5; padding: 0 10px;">
Dekupai is an advanced deep-learning desktop workspace that provides local, high-precision background removal using BiRefNet neural segmentation networks.
</div>
</div>
<div class="wizard-actions" style="margin-top: 10px; width: 100%;">
<button class="btn btn-secondary w-full" id="btn-close-credits">
<span>Close Credits</span>
</button>
</div>
</div>
</div>
<!-- Loaded locally in package.json dependencies -->
<script src="node_modules/cropperjs/dist/cropper.js"></script>
<script src="renderer.js"></script>
</body>
</html>
</html>