<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>File Dialog - Dark Mode Concepts</title>
<style>
:root {
--page:#101112;
--win:#171819;
--bar:#141516;
--panel:#222324;
--panel2:#2b2c2d;
--panel3:#343536;
--field:#454647;
--line-dark:#060707;
--line:#4b4d4f;
--line-soft:#343638;
--text:#cfc9c1;
--strong:#f0eadf;
--muted:#929292;
--accent:#74c4e4;
--accent-dim:#315664;
--sel:#4b4d4f;
--sel-border:#77797b;
--folder:#66686a;
--folder-hi:#86898c;
--radius:0px;
--scale:1;
--glow:0;
--window-gradient:none;
--panel-gradient:none;
--scan-opacity:0;
--dot-opacity:.055;
--button:linear-gradient(#4d4f52,#303235);
--primary:linear-gradient(#526b75,#314954);
--primary-text:#f0eadf;
--shadow:0 0 0 1px #2e3032 inset, 0 14px 28px rgb(0 0 0 / .38);
--inner:inset 1px 1px 0 rgb(255 255 255 / .06), inset -2px -2px 0 rgb(0 0 0 / .58);
}
body[data-concept="simple"] {
--win:#18191a; --panel:#232425; --panel2:#2b2c2d; --panel3:#343536;
--field:#464748; --sel:#4d4e50; --button:linear-gradient(#4b4d50,#313336);
--primary:linear-gradient(#4a6068,#2c4149); --window-gradient:none;
}
body[data-concept="gradient"] {
--win:#151719; --bar:#121416; --panel:#202326; --panel2:#292d31; --panel3:#34393e;
--field:#44494d; --sel:#465057; --radius:2px;
--button:linear-gradient(180deg,#5a5e62,#35393c 58%,#282b2e);
--primary:linear-gradient(180deg,#5a7680,#36525d 58%,#263d45);
--window-gradient:radial-gradient(circle at 18% 0%,rgb(255 255 255 / .08),transparent 36%),radial-gradient(circle at 100% 100%,rgb(116 196 228 / .08),transparent 34%);
--panel-gradient:linear-gradient(180deg,rgb(255 255 255 / .035),transparent 45%);
--shadow:0 0 0 1px #34383c inset,0 20px 42px rgb(0 0 0 / .52),0 0 34px rgb(116 196 228 / .08);
}
body[data-concept="expressive"] {
--page:#0c0d0e; --win:#141516; --bar:#101112; --panel:#202123; --panel2:#2b2d30; --panel3:#3a3d41;
--field:#4c5054; --line:#63666a; --line-soft:#3d4044; --text:#d9d6cf; --strong:#fff8ec; --muted:#aaa;
--accent:#8ad8f5; --accent-dim:#376576; --sel:#56616a; --sel-border:#a0b3bd;
--folder:#707377; --folder-hi:#989ca0;
--button:linear-gradient(#686c71,#393d42); --primary:linear-gradient(#678895,#3a5f6c);
--shadow:0 0 0 1px #46494d inset,0 18px 32px rgb(0 0 0 / .52);
}
body[data-concept="depth"] {
--page:#0e1012; --win:#131619; --bar:#101316; --panel:#1d2125; --panel2:#272c31; --panel3:#333a41;
--field:#42494f; --line:#4f5a62; --line-soft:#313840; --sel:#42515d; --sel-border:#7891a1; --radius:4px;
--button:linear-gradient(#565e64,#30363b); --primary:linear-gradient(#557180,#314d59);
--window-gradient:radial-gradient(circle at 22% 0%,rgb(255 255 255 / .07),transparent 35%),radial-gradient(circle at 95% 88%,rgb(116 196 228 / .08),transparent 34%);
--panel-gradient:linear-gradient(145deg,rgb(255 255 255 / .04),transparent 42%,rgb(0 0 0 / .08));
--shadow:0 1px 0 rgb(255 255 255 / .06) inset,0 26px 54px rgb(0 0 0 / .58),0 0 0 1px #2d3338 inset;
}
body[data-concept="mono"] {
--page:#101010; --win:#171717; --bar:#131313; --panel:#212121; --panel2:#292929; --panel3:#363636;
--field:#424242; --line:#5a5a5a; --line-soft:#383838; --text:#d2d2d2; --strong:#f3f3f3; --muted:#9b9b9b;
--accent:#eeeeee; --accent-dim:#6d6d6d; --sel:#464646; --sel-border:#a7a7a7; --folder:#707070; --folder-hi:#969696;
--button:linear-gradient(#303030,#202020); --primary:linear-gradient(#f4f4f4,#bdbdbd); --primary-text:#111;
--shadow:0 0 0 1px #323232 inset,0 16px 32px rgb(0 0 0 / .44);
}
body[data-concept="compact"] {
--page:#101010; --win:#171717; --bar:#131313; --panel:#202020; --panel2:#272727; --panel3:#303030;
--field:#3f3f3f; --line:#444; --line-soft:#303030; --text:#cacaca; --strong:#eee; --muted:#8d8d8d;
--accent:#c6d0d6; --accent-dim:#4e5559; --sel:#3f4549; --sel-border:#828a90;
--button:linear-gradient(#4d4d4d,#303030); --primary:linear-gradient(#5a6469,#394247); --scale:.92;
--shadow:0 0 0 1px #2b2b2b inset,0 12px 22px rgb(0 0 0 / .42);
}
body[data-concept="striped"] {
--page:#0d0e0f; --win:#151617; --bar:#111213; --panel:#202123; --panel2:#292b2d; --panel3:#373a3d;
--field:#45484b; --line:#55595d; --line-soft:#393c3f; --text:#d4d1cb; --strong:#f4efe6; --muted:#9b9d9e;
--accent:#d9e0e5; --accent-dim:#596169; --sel:#4d5359; --sel-border:#aab2b8; --folder:#6e7174; --folder-hi:#94989b;
--button:linear-gradient(#55585c,#313438); --primary:linear-gradient(#e8ecef,#aeb6bc); --primary-text:#111;
--panel-gradient:repeating-linear-gradient(135deg,rgb(255 255 255 / .035) 0 2px,transparent 2px 7px);
--shadow:0 0 0 1px #393c40 inset,0 18px 34px rgb(0 0 0 / .52);
}
body[data-concept="outline"] {
--page:#0f1011; --win:#151616; --bar:#111212; --panel:#1f2021; --panel2:#28292a; --panel3:#323436;
--field:#3f4143; --line:#686a6d; --line-soft:#3a3c3e; --text:#d0cdc7; --strong:#f2eee6; --muted:#949494;
--accent:#f0f0f0; --accent-dim:#64676b; --sel:#35383b; --sel-border:#e0e0e0; --folder:#696b6e; --folder-hi:#929497;
--button:linear-gradient(#3d3f42,#252729); --primary:linear-gradient(#505356,#303235); --primary-text:#f6f6f6;
--shadow:0 0 0 1px #6f7174 inset,0 0 0 3px #0b0c0d,0 16px 30px rgb(0 0 0 / .48);
}
body[data-concept="soft"] {
--page:#0d0f11; --win:#171a1d; --bar:#121518; --panel:#22262a; --panel2:#2b3035; --panel3:#363d43;
--field:#454d54; --line:#46505a; --line-soft:#303840; --text:#d5d1ca; --strong:#f5efe5; --muted:#969da2;
--accent:#cfd9df; --accent-dim:#5b6870; --sel:#454e56; --sel-border:#9aa8b1; --folder:#6a7177; --folder-hi:#929aa0; --radius:6px;
--button:linear-gradient(180deg,#565e65,#343a40); --primary:linear-gradient(180deg,#dce3e7,#98a5ad); --primary-text:#131619;
--window-gradient:radial-gradient(circle at 50% 0%,rgb(255 255 255 / .065),transparent 46%);
--panel-gradient:linear-gradient(180deg,rgb(255 255 255 / .03),transparent 50%);
--shadow:0 1px 0 rgb(255 255 255 / .05) inset,0 22px 48px rgb(0 0 0 / .50);
}
body[data-concept="crisp"] {
--page:#0b0c0d; --win:#121314; --bar:#0f1011; --panel:#1c1d1f; --panel2:#25272a; --panel3:#313438;
--field:#46494d; --line:#767b80; --line-soft:#44484c; --text:#dedbd4; --strong:#fff9ef; --muted:#ababab;
--accent:#f2f4f5; --accent-dim:#747b82; --sel:#5a6067; --sel-border:#f0f3f5; --folder:#777b7f; --folder-hi:#a6aaae;
--button:linear-gradient(#62666b,#373b40); --primary:linear-gradient(#f7f7f7,#c7c7c7); --primary-text:#0d0d0d;
--shadow:0 0 0 1px #55595e inset,0 12px 24px rgb(0 0 0 / .62);
}
body[data-concept="bevel"] {
--page:#101112; --win:#18191b; --bar:#131416; --panel:#222427; --panel2:#2d3033; --panel3:#3a3d41;
--field:#494d51; --line:#595d62; --line-soft:#3b3e42; --text:#d6d2ca; --strong:#f6f1e7; --muted:#9f9f9f;
--accent:#e6ecef; --accent-dim:#667078; --sel:#4d5359; --sel-border:#b1b8bd; --folder:#707478; --folder-hi:#9ca0a4;
--button:linear-gradient(145deg,#6a6e73 0%,#3c4045 48%,#282b2f 100%); --primary:linear-gradient(145deg,#f1f4f5 0%,#aeb8be 54%,#828c93 100%); --primary-text:#101010;
--inner:inset 2px 2px 0 rgb(255 255 255 / .12), inset -3px -3px 0 rgb(0 0 0 / .62);
--shadow:0 0 0 1px #3f4246 inset,0 17px 34px rgb(0 0 0 / .50);
}
body[data-concept="terminal"] {
/* Wariant odtworzony z podanego kodu: Bardziej wyrazisty */
--page:#0c0d0e;
--win:#141516;
--bar:#151617;
--panel:#202123;
--panel2:#2b2d30;
--panel3:#393c40;
--field:#4c5054;
--line:#63666a;
--line-soft:#3c3f43;
--text:#d8d5ce;
--strong:#fff8ec;
--muted:#a8a8a8;
--accent:#7fd0f0;
--accent-dim:#315f70;
--sel:#56616a;
--sel-border:#a0b3bd;
--folder:#66686a;
--folder-hi:#86898c;
--button:linear-gradient(#676b70,#393d42);
--primary:linear-gradient(#628390,#385c68);
--primary-text:#fff8ec;
--window-gradient:none;
--panel-gradient:none;
--scan-opacity:.05;
--dot-opacity:.06;
--scale:1;
--shadow:0 0 0 1px #45484c inset,0 16px 30px rgb(0 0 0 / .50);
}
*{box-sizing:border-box} body{margin:0;min-height:100vh;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at center,rgb(255 255 255 / var(--dot-opacity)) 0 1px,transparent 1px) 0 0/8px 8px,var(--page);font:20px/1.1 "Courier New",Consolas,monospace;color:var(--text)}
.shell{display:grid;gap:10px}.concept-panel{width:760px;background:var(--win);border:2px solid var(--line-dark);box-shadow:var(--shadow);padding:10px;display:grid;grid-template-columns:145px 1fr;gap:10px;position:relative}.concept-panel:before,.window:before{content:"";position:absolute;inset:0;background:var(--window-gradient);pointer-events:none;border-radius:inherit}.concept-panel label{color:var(--strong);align-self:center;position:relative;z-index:1}
select{appearance:none;height:38px;padding:0 42px 0 12px;border:2px solid var(--line-dark);box-shadow:var(--inner),0 0 0 1px var(--line) inset;background:linear-gradient(45deg,transparent 50%,var(--strong) 50%) calc(100% - 19px) 15px/8px 8px no-repeat,linear-gradient(135deg,var(--strong) 50%,transparent 50%) calc(100% - 11px) 15px/8px 8px no-repeat,var(--panel2);color:var(--strong);font:18px/1 "Courier New",Consolas,monospace;border-radius:var(--radius);position:relative;z-index:1}
.cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:7px;position:relative;z-index:1}.card{border:2px solid var(--line-dark);box-shadow:0 0 0 1px var(--line-soft) inset;background:var(--panel);padding:7px;cursor:pointer;min-height:78px;border-radius:var(--radius)}.card.active{background:var(--sel);box-shadow:inset 3px 0 0 var(--accent),0 0 0 1px var(--sel-border) inset}.card b{display:block;color:var(--strong);font-size:14px;margin-bottom:5px}.card span{display:block;color:var(--muted);font-size:11px;line-height:1.22}.mini{display:grid;grid-template-columns:19px 1fr;gap:4px;margin-top:7px}.mini i{height:18px;border:2px solid var(--line-dark);box-shadow:0 0 0 1px var(--line) inset}.mini .i{background:var(--folder)}.mini .b{background:var(--panel3)}
.window{width:760px;height:522px;background:var(--win);border:2px solid var(--line-dark);box-shadow:var(--shadow);position:relative;overflow:hidden;border-radius:var(--radius);transform:scale(var(--scale));transform-origin:top center}.window:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(to bottom,rgb(255 255 255 / var(--scan-opacity)) 0 1px,transparent 1px 3px)}.titlebar{height:36px;display:flex;align-items:center;padding:0 8px 0 12px;border-bottom:2px solid var(--line-dark);box-shadow:0 1px 0 var(--line-soft);background:var(--bar);color:var(--strong);letter-spacing:.5px;position:relative;z-index:1}.titlebar .title{flex:1}.close{width:22px;height:22px;border:2px solid var(--line-dark);box-shadow:0 0 0 1px var(--line) inset;display:grid;place-items:center;color:var(--muted);font-size:20px;line-height:1;background:var(--button);border-radius:var(--radius)}
.toolbar{margin:7px 8px 0;height:34px;border:2px solid var(--line-dark);box-shadow:0 0 0 1px var(--line-soft) inset;background:var(--bar);display:flex;align-items:center;gap:6px;padding:3px 6px;position:relative;z-index:1}.nav{width:26px;height:26px;border:2px solid var(--line-dark);background:var(--button);box-shadow:var(--inner);border-radius:var(--radius);position:relative}.nav:before{content:"";position:absolute;inset:5px;border-style:solid}.back:before{border-width:7px 10px 7px 0;border-color:transparent var(--muted) transparent transparent}.forward:before{border-width:7px 0 7px 10px;border-color:transparent transparent transparent var(--muted)}.up:before{border-width:0 8px 10px 8px;border-color:transparent transparent var(--muted) transparent;top:6px}.pc{width:22px;height:20px;margin-left:4px;border:2px solid var(--line-dark);background:var(--accent-dim);box-shadow:0 0 0 2px var(--panel3) inset}.crumb{color:var(--strong);font-size:18px}.sep{color:var(--line);margin:0 2px}
.content{display:grid;grid-template-columns:228px 1fr 18px;gap:5px;height:260px;padding:8px;position:relative;z-index:1}.sidebar,.files{background:var(--panel);background-image:var(--panel-gradient);border:2px solid var(--line-dark);box-shadow:0 0 0 1px var(--line-soft) inset;overflow:hidden;padding:7px;border-radius:var(--radius)}.row,.file-row{height:32px;display:flex;align-items:center;gap:7px;padding:0 6px;color:var(--text);white-space:nowrap}.row:hover,.file-row:hover{background:var(--panel2)}.selected{background:var(--sel)!important;color:var(--strong);box-shadow:inset 4px 0 0 var(--accent),0 0 0 1px var(--sel-border) inset}.chev{width:10px;height:10px;border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(-45deg);margin-right:2px}.folder{width:22px;height:18px;border:3px solid var(--line-dark);background:var(--folder);box-shadow:0 0 0 2px var(--folder-hi) inset;position:relative;flex:0 0 auto}.folder:before{content:"";position:absolute;left:0;top:-8px;width:12px;height:8px;background:var(--folder);border:3px solid var(--line-dark);border-bottom:0}.drive{width:22px;height:18px;border:3px solid var(--line-dark);background:var(--panel3);box-shadow:0 0 0 2px var(--folder) inset;position:relative;flex:0 0 auto}.drive:after{content:"HDD";position:absolute;left:1px;top:3px;font-size:8px;color:var(--muted)}.files{padding:4px 5px}.file-row .folder{transform:scale(.86);transform-origin:left center}
.scrollbar{display:grid;grid-template-rows:22px 1fr 22px;gap:4px}.scroll-btn,.scroll-thumb{border:2px solid var(--line-dark);background:var(--button);box-shadow:var(--inner);border-radius:var(--radius)}.scroll-track{background:var(--panel);border:2px solid var(--line-dark);box-shadow:0 0 0 1px var(--line-soft) inset;position:relative}.scroll-thumb{height:54px;margin:38px 2px 0;background:var(--panel3)}
.bottom{margin:0 8px 8px;height:170px;border:2px solid var(--line-dark);box-shadow:0 0 0 1px var(--line-soft) inset;background:var(--panel);background-image:var(--panel-gradient);display:grid;grid-template-columns:126px 1fr;grid-template-rows:40px 40px 58px;gap:8px;padding:12px 18px;position:relative;z-index:1;border-radius:var(--radius)}.label{align-self:center;color:var(--strong)}.input{border:2px solid var(--line-dark);box-shadow:var(--inner),0 0 0 1px var(--line) inset;background:var(--field);color:var(--strong);height:32px;display:flex;align-items:center;padding:0 8px;border-radius:var(--radius)}.caret{width:2px;height:23px;background:var(--accent);box-shadow:0 0 8px rgb(116 196 228 / .25)}.hint{color:var(--muted);font-size:14px;margin-left:8px}.actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;align-items:center}button{min-width:122px;height:42px;border:2px solid var(--line-dark);background:var(--button);color:var(--text);box-shadow:var(--inner),0 0 0 1px var(--line) inset;font:700 18px/1 "Courier New",Consolas,monospace;border-radius:var(--radius)}button.primary{background:var(--primary);color:var(--primary-text);box-shadow:var(--inner),0 0 0 1px var(--accent-dim) inset,0 0 18px rgb(116 196 228 / .08)}body[data-concept="mono"] button{text-transform:uppercase;letter-spacing:.5px;background:#202020;color:#e8e8e8;box-shadow:0 0 0 1px #808080 inset,inset 0 1px 0 rgb(255 255 255 / .10)}body[data-concept="mono"] button.primary{background:linear-gradient(#f5f5f5,#bdbdbd);color:#111;box-shadow:0 0 0 1px #fff inset,0 0 0 2px #242424,0 6px 18px rgb(255 255 255 / .10)}body[data-concept="compact"] .window{height:492px}body[data-concept="compact"] .content{height:242px}body[data-concept="compact"] .row,body[data-concept="compact"] .file-row{height:28px;font-size:18px}body[data-concept="compact"] .bottom{height:158px;grid-template-rows:36px 36px 50px;padding:10px 18px}
/* Prążki jak w poprzednim layoucie: techniczny pas pod tytułem */
.titlebar .title{position:relative;z-index:2}
body[data-concept="expressive"] .titlebar,
body[data-concept="striped"] .titlebar{
overflow:hidden;
background:#101112;
}
body[data-concept="expressive"] .titlebar:before,
body[data-concept="striped"] .titlebar:before{
content:"";
position:absolute;
left:7px;
right:42px;
top:5px;
height:25px;
background:
repeating-linear-gradient(
135deg,
rgb(255 255 255 / .16) 0 2px,
rgb(255 255 255 / .045) 2px 4px,
transparent 4px 8px
),
linear-gradient(180deg,rgb(255 255 255 / .075),rgb(0 0 0 / .12));
border:1px solid rgb(255 255 255 / .14);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / .16),
inset 0 -1px 0 rgb(0 0 0 / .58),
0 0 0 1px rgb(0 0 0 / .34);
pointer-events:none;
}
body[data-concept="expressive"] .titlebar:after,
body[data-concept="striped"] .titlebar:after{
content:"";
position:absolute;
left:7px;
right:42px;
top:5px;
height:25px;
background:linear-gradient(90deg,rgb(0 0 0 / .44),transparent 20%,transparent 74%,rgb(0 0 0 / .42));
pointer-events:none;
z-index:1;
}
body[data-concept="expressive"] .titlebar .title,
body[data-concept="striped"] .titlebar .title{
color:#fff8ec;
text-shadow:1px 1px 0 #000,0 0 4px rgb(255 255 255 / .12);
}
body[data-concept="striped"] .toolbar,
body[data-concept="striped"] .bottom{background-image:var(--panel-gradient)}
body[data-concept="crisp"] .selected{box-shadow:inset 5px 0 0 var(--accent),0 0 0 1px var(--sel-border) inset,0 0 0 2px rgb(255 255 255 / .05) inset}
body[data-concept="outline"] .window,body[data-concept="outline"] .concept-panel{border-color:#85878a}
</style>
</head>
<body data-concept="simple">
<main class="shell">
<section class="concept-panel">
<label for="conceptSelect">Koncept GUI</label>
<select id="conceptSelect">
<option value="simple">1. Prosty / czysty dark</option>
<option value="gradient">2. Subtelne gradienty</option>
<option value="expressive">3. Wyrazisty z prążkami</option>
<option value="depth">4. Więcej głębi</option>
<option value="mono">5. Mono akcje</option>
<option value="compact">6. Kompaktowy / narzędziowy</option>
<option value="striped">7. Prążki / tech panel</option>
<option value="outline">8. Konturowy / ramki</option>
<option value="soft">9. Miękki dark</option>
<option value="crisp">10. Kontrastowy crisp</option>
<option value="bevel">11. Mocny bevel</option>
<option value="terminal">12. Wyrazisty z kodu</option>
</select>
<div class="cards" id="cards">
<div class="card active" data-concept="simple"><b>Prosty</b><span>Czyste płaszczyzny, minimum efektów.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="gradient"><b>Gradient</b><span>Delikatne światło i miękkie przejścia.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="expressive"><b>Wyrazisty</b><span>Prążki pod tytułem, mocniejszy kontrast.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="depth"><b>Głębia</b><span>Cienie, warstwy, bardziej panelowy look.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="mono"><b>Mono</b><span>Neutralny dark plus przyciski jak z mono.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="compact"><b>Kompakt</b><span>Gęstszy, bardziej techniczny layout.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="striped"><b>Prążki</b><span>Techniczny pattern także na panelach.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="outline"><b>Kontur</b><span>Mocniejsze ramki, mniej gradientów.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="soft"><b>Miękki</b><span>Zaokrąglenia, spokojna głębia.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="crisp"><b>Crisp</b><span>Wyższy kontrast, jasne aktywne stany.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="bevel"><b>Bevel</b><span>Retro wypukłe elementy i cięższe akcje.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
<div class="card" data-concept="terminal"><b>Wyrazisty z kodu</b><span>Tło i scanline z podanego wariantu.</span><div class="mini"><i class="i"></i><i class="b"></i></div></div>
</div>
</section>
<section class="window">
<div class="titlebar"><div class="title">Test File Dialog Window 1</div><div class="close">×</div></div>
<div class="toolbar">
<div class="nav back"></div><div class="nav forward"></div><div class="nav up"></div>
<div class="pc"></div><div class="crumb">This PC</div><div class="sep">›</div><div class="crumb">Disc (C:)</div><div class="sep">›</div><div class="crumb">0_MyPrograms</div>
</div>
<div class="content">
<div class="sidebar">
<div class="row"><span class="chev"></span><span class="folder"></span>Music</div>
<div class="row"><span class="chev"></span><span class="folder"></span>Pictures</div>
<div class="row"><span></span><span class="folder"></span>Downloads</div>
<div class="row"><span class="chev"></span><span class="folder"></span>Desktop</div>
<div class="row"><span class="chev"></span><span class="folder"></span>Videos</div>
<div class="row"><span class="chev"></span><span class="drive"></span>Disc (C:)</div>
<div class="row"><span class="chev"></span><span class="drive"></span>Disc (D:)</div>
</div>
<div class="files">
<div class="file-row"><span class="folder"></span>Anim-Paint</div>
<div class="file-row selected"><span class="folder"></span>Editor-RPG2D</div>
<div class="file-row"><span class="folder"></span>Editor-RPG2D-alpha</div>
<div class="file-row"><span class="folder"></span>H3D</div>
<div class="file-row"><span class="folder"></span>Pathfinder</div>
<div class="file-row"><span class="folder"></span>Tiled</div>
</div>
<div class="scrollbar"><div class="scroll-btn"></div><div class="scroll-track"><div class="scroll-thumb"></div></div><div class="scroll-btn"></div></div>
</div>
<div class="bottom">
<div class="label">Filename</div><div class="input"><span class="caret"></span><span class="hint">type file or folder name</span></div>
<div class="label">Visuals</div>
<select id="conceptSelectInside"><option value="simple">Prosty / czysty</option><option value="gradient">Subtelne gradienty</option><option value="expressive">Wyrazisty z prążkami</option><option value="depth">Więcej głębi</option><option value="mono">Mono akcje</option><option value="compact">Kompaktowy</option><option value="striped">Prążki / tech panel</option><option value="outline">Konturowy / ramki</option><option value="soft">Miękki dark</option><option value="crisp">Kontrastowy crisp</option><option value="bevel">Mocny bevel</option><option value="terminal">Wyrazisty z kodu</option></select>
<div class="actions"><button class="primary">select</button><button>cancel</button></div>
</div>
</section>
</main>
<script>
const selects=[document.getElementById('conceptSelect'),document.getElementById('conceptSelectInside')];
const cards=[...document.querySelectorAll('.card')];
function setConcept(name){document.body.dataset.concept=name;selects.forEach(s=>s.value=name);cards.forEach(c=>c.classList.toggle('active',c.dataset.concept===name));}
selects.forEach(s=>s.addEventListener('change',e=>setConcept(e.target.value)));
cards.forEach(c=>c.addEventListener('click',()=>setConcept(c.dataset.concept)));
</script>
</body>
</html>