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
styles.css
+164 -57
View File
@@ -2,25 +2,25 @@
:root {
--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Harmonious Dark / Neon Palette */
--bg-dark: #0a0a0f;
--panel-bg: rgba(16, 16, 24, 0.65);
--panel-bg-inner: rgba(255, 255, 255, 0.03);
--panel-border: rgba(255, 255, 255, 0.08);
--panel-border-inner: rgba(255, 255, 255, 0.04);
--text-main: #f3f4f6;
--text-muted: #9ca3af;
--text-muted-dark: #6b7280;
/* Neon Accents - Turunçgil Orange & Gold Palette */
/* Neon Accents - Trunçgil Orange & Gold Palette */
--accent-purple: #ff7a00;
--accent-purple-glow: rgba(255, 122, 0, 0.35);
--accent-cyan: #ffb800;
--accent-cyan-glow: rgba(255, 184, 0, 0.3);
--accent-pink: #f97316;
--danger: #ef4444;
--danger-glow: rgba(239, 68, 68, 0.3);
--success: #10b981;
@@ -72,9 +72,20 @@ body {
}
@keyframes orb-pulse {
0% { transform: scale(1) translate(0, 0); opacity: 0.25; }
50% { transform: scale(1.15) translate(30px, -50px); opacity: 0.33; }
100% { transform: scale(0.9) translate(-20px, 30px); opacity: 0.22; }
0% {
transform: scale(1) translate(0, 0);
opacity: 0.25;
}
50% {
transform: scale(1.15) translate(30px, -50px);
opacity: 0.33;
}
100% {
transform: scale(0.9) translate(-20px, 30px);
opacity: 0.22;
}
}
/* --- SLEEK FRAMELESS TITLEBAR --- */
@@ -162,8 +173,10 @@ body {
.app-workspace {
grid-template-columns: 1fr;
}
.control-tower {
display: none; /* Just simple responsive check */
display: none;
/* Just simple responsive check */
}
}
@@ -212,7 +225,8 @@ body {
cursor: pointer;
}
.dropzone:hover, .dropzone.dragover {
.dropzone:hover,
.dropzone.dragover {
border-color: var(--accent-purple);
background: rgba(139, 92, 246, 0.04);
box-shadow: 0 0 35px rgba(139, 92, 246, 0.1);
@@ -274,7 +288,8 @@ body {
letter-spacing: 1px;
}
.or-separator::before, .or-separator::after {
.or-separator::before,
.or-separator::after {
content: '';
flex: 1;
height: 1px;
@@ -305,16 +320,16 @@ body {
justify-content: center;
position: relative;
background-color: #121216;
box-shadow: inset 0 4px 20px rgba(0,0,0,0.5);
box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5);
}
/* Stunning Checkerboard Transparency Styling */
.checkerboard {
background-image:
linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%),
linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%);
background-image:
linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%),
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
@@ -480,7 +495,7 @@ body {
.tower-group:not(.disabled-group) .step-badge {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
border-color: rgba(255,255,255,0.1);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}
@@ -663,13 +678,26 @@ body {
}
@keyframes spin {
100% { transform: rotate(360deg); }
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
.loader-text {
@@ -776,39 +804,57 @@ select option {
letter-spacing: 0.6px;
}
.color-swatches-grid, .gradient-swatches-grid {
.color-swatches-grid,
.gradient-swatches-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.swatch, .grad-swatch {
.swatch,
.grad-swatch {
width: 28px;
height: 28px;
border-radius: 6px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.swatch:hover, .grad-swatch:hover {
.swatch:hover,
.grad-swatch:hover {
transform: scale(1.15);
z-index: 2;
}
.swatch.active, .grad-swatch.active {
.swatch.active,
.grad-swatch.active {
border-color: #fff;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0,0,0,0.3);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}
/* Swatches */
.swatch.white { background: #ffffff; }
.swatch.black { background: #000000; }
.swatch.red { background: #ef4444; }
.swatch.blue { background: #3b82f6; }
.swatch.green { background: #10b981; }
.swatch.white {
background: #ffffff;
}
.swatch.black {
background: #000000;
}
.swatch.red {
background: #ef4444;
}
.swatch.blue {
background: #3b82f6;
}
.swatch.green {
background: #10b981;
}
.swatch.custom {
background: rgba(255, 255, 255, 0.04);
@@ -836,12 +882,29 @@ select option {
}
/* Premium Gradients */
.grad-1 { background: linear-gradient(135deg, #a78bfa, #06b6d4); }
.grad-2 { background: linear-gradient(135deg, #f43f5e, #f97316); }
.grad-3 { background: linear-gradient(135deg, #10b981, #06b6d4); }
.grad-4 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.grad-5 { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.grad-6 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.grad-1 {
background: linear-gradient(135deg, #a78bfa, #06b6d4);
}
.grad-2 {
background: linear-gradient(135deg, #f43f5e, #f97316);
}
.grad-3 {
background: linear-gradient(135deg, #10b981, #06b6d4);
}
.grad-4 {
background: linear-gradient(135deg, #ec4899, #8b5cf6);
}
.grad-5 {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
.grad-6 {
background: linear-gradient(135deg, #f59e0b, #ef4444);
}
/* --- EXPORT STUDIO PANEL --- */
.export-settings-box {
@@ -876,8 +939,8 @@ select option {
/* Glass Slider Styling */
input[type="range"] {
appearance: none;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.04);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.04);
height: 6px;
border-radius: 5px;
outline: none;
@@ -1010,7 +1073,8 @@ input[type="range"]::-webkit-slider-thumb:hover {
border-radius: 50px;
overflow: hidden;
position: relative;
display: none; /* Shows during setup */
display: none;
/* Shows during setup */
}
.progress-bar {
@@ -1046,7 +1110,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
border-left: 4px solid var(--accent-purple);
z-index: 100000;
animation: slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.toast-notification.success {
@@ -1095,23 +1159,49 @@ input[type="range"]::-webkit-slider-thumb:hover {
/* --- ANIMATIONS --- */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-down {
from { transform: translateY(-10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
from {
transform: translateY(-10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in {
from { transform: translateX(50px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes scale-up {
from { transform: translate(-50%, -40%) scale(0.95); opacity: 0; }
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
from {
transform: translate(-50%, -40%) scale(0.95);
opacity: 0;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.animated-float {
@@ -1119,9 +1209,17 @@ input[type="range"]::-webkit-slider-thumb:hover {
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0px); }
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
}
/* --- HELPER CLASSES --- */
@@ -1129,6 +1227,15 @@ input[type="range"]::-webkit-slider-thumb:hover {
display: none !important;
}
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.text-muted {
color: var(--text-muted);
}
.text-center {
text-align: center;
}
.py-2 {
padding-top: 8px;
padding-bottom: 8px;
}