Ku6epXBOCTuK/bropicker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: impl design header

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-05-07 19:49:45 +05:00
parent 7cc2b8542d
commit f425145e81
13 changed files with 978 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cargo.lock
Generated
+4
View File
@@ -606,10 +606,12 @@ dependencies = [
name = "bropicker"
version = "0.0.1"
dependencies = [
"i-slint-backend-winit",
"serde",
"serde_json",
"slint",
"slint-build",
"winit",
]
[[package]]
@@ -1815,6 +1817,7 @@ dependencies = [
"i-slint-common",
"i-slint-core",
"i-slint-renderer-femtovg",
"i-slint-renderer-skia",
"i-slint-renderer-software",
"input",
"memmap2",
@@ -4328,6 +4331,7 @@ checksum = "aac18da81ebbf05109ab275b157c22a653bb3c12cf884450179942f81bcbf6c3"
dependencies = [
"as-raw-xcb-connection",
"bytemuck",
"drm",
"fastrand",
"js-sys",
"memmap2",
Cargo.toml
+3 -1
View File
@@ -5,9 +5,11 @@ edition = "2024"
build = "build.rs"
[dependencies]
i-slint-backend-winit = "1.16.1"
serde = { version = "1.0.228", features = ["derive"] }
serde_json = "1.0.149"
slint = { version = "1.16.1", features = ["serde"] }
slint = { version = "1.16.1", features = ["renderer-skia", "serde"] }
winit = "0.30"
[build-dependencies]
slint-build = "1.16.1"
logos/external_link.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 3h6v6" />
<path d="M10 14 21 3" />
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 314 B

logos/globe.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
<path d="M2 12h20" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

refs/dark.html
+203 -39
View File
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Choose Browser - Dark</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
}
darkMode: "class",
};
</script>
</head>
<body class="dark min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex flex-col">
</head>
<body class="dark min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex flex-col">
<nav class="flex items-center justify-center gap-8 p-4 border-b border-slate-800">
<span class="text-sm font-mono text-slate-300">Dark</span>
<a href="light.html" class="text-sm font-mono text-slate-500 hover:text-slate-300 transition-colors">Light</a>
@@ -19,14 +19,29 @@
<main class="flex-1 flex items-center justify-center p-4">
<div class="w-full max-w-md">
<div class="bg-slate-900/80 backdrop-blur-xl border border-slate-700/50 rounded-2xl shadow-2xl shadow-black/50 overflow-hidden">
<div
class="bg-slate-900/80 backdrop-blur-xl border border-slate-700/50 rounded-2xl shadow-2xl shadow-black/50 overflow-hidden"
>
<div class="p-5 border-b border-slate-700/50">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<div
class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-white"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
<path
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
></path>
</svg>
</div>
<div>
@@ -35,7 +50,16 @@
</div>
</div>
<div class="flex items-center gap-2 px-4 py-3 bg-slate-800/50 rounded-xl border border-slate-700/50">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-500 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-slate-500 flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
@@ -46,46 +70,122 @@
<div class="p-3">
<div class="space-y-2">
<button class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-slate-800 ring-2 ring-blue-500/50">
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-orange-500 to-red-500">🦊</div>
<button
class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-slate-800 ring-2 ring-blue-500/50"
>
<div
class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-orange-500 to-red-500"
>
🦊
</div>
<div class="flex-1 text-left">
<div class="flex items-center gap-2">
<span class="font-medium text-white">Work browser</span>
<span class="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded-full">По умолчанию</span>
<span class="px-2 py-0.5 text-xs font-medium bg-blue-500/20 text-blue-400 rounded-full"
>По умолчанию</span
>
</div>
</div>
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-blue-500 text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</button>
<button class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-slate-800/30 hover:bg-slate-800/70 group">
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-pink-500 to-rose-500">🔥</div>
<button
class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-slate-800/30 hover:bg-slate-800/70 group"
>
<div
class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-pink-500 to-rose-500"
>
🔥
</div>
<div class="flex-1 text-left">
<span class="font-medium text-white">Ku6epXBOCTuK</span>
</div>
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-700/50 group-hover:bg-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-500 group-hover:text-slate-400" 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>
<div
class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-700/50 group-hover:bg-slate-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-slate-500 group-hover:text-slate-400"
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>
</div>
</button>
<button class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-slate-800/30 hover:bg-slate-800/70 group">
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-blue-500 to-green-500">🌐</div>
<button
class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-slate-800/30 hover:bg-slate-800/70 group"
>
<div
class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-blue-500 to-green-500"
>
🌐
</div>
<div class="flex-1 text-left">
<span class="font-medium text-white">Chrome</span>
</div>
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-700/50 group-hover:bg-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-500 group-hover:text-slate-400" 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>
<div
class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-700/50 group-hover:bg-slate-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-slate-500 group-hover:text-slate-400"
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>
</div>
</button>
<button class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-slate-800/30 hover:bg-slate-800/70 group">
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-violet-500 to-purple-500">🧘</div>
<button
class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-slate-800/30 hover:bg-slate-800/70 group"
>
<div
class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-violet-500 to-purple-500"
>
🧘
</div>
<div class="flex-1 text-left">
<span class="font-medium text-white">Zen Browser</span>
</div>
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-700/50 group-hover:bg-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-500 group-hover:text-slate-400" 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>
<div
class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-700/50 group-hover:bg-slate-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-slate-500 group-hover:text-slate-400"
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>
</div>
</button>
</div>
@@ -93,14 +193,29 @@
<div class="px-5 pb-4 space-y-3">
<label class="flex items-center gap-3 cursor-pointer group">
<div class="w-5 h-5 rounded-md border-2 border-slate-600 group-hover:border-slate-500 flex items-center justify-center transition-all"></div>
<div
class="w-5 h-5 rounded-md border-2 border-slate-600 group-hover:border-slate-500 flex items-center justify-center transition-all"
></div>
<span class="text-sm text-slate-400 group-hover:text-slate-300 transition-colors">
Запомнить выбор для <span class="text-slate-300 font-mono">ku6epxboctuk.github.io</span>
</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<div class="w-5 h-5 rounded-md border-2 border-blue-500 bg-blue-500 flex items-center justify-center transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<div
class="w-5 h-5 rounded-md border-2 border-blue-500 bg-blue-500 flex items-center justify-center transition-all"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-3 h-3 text-white"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<span class="text-sm text-slate-300 transition-colors">Всегда спрашивать</span>
</label>
@@ -109,21 +224,70 @@
<div class="px-5 py-4 border-t border-slate-700/50 flex items-center justify-between">
<div class="flex items-center gap-4">
<button class="flex items-center gap-2 text-sm text-slate-400 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path></svg>
<span>Настроить</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-sun-icon lucide-sun"
>
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m6.34 17.66-1.41 1.41" />
<path d="m19.07 4.93-1.41 1.41" />
</svg>
</button>
<button class="flex items-center gap-2 text-sm text-slate-400 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<span>Обратная связь</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-cog-icon lucide-cog"
>
<path d="M11 10.27 7 3.34" />
<path d="m11 13.73-4 6.93" />
<path d="M12 22v-2" />
<path d="M12 2v2" />
<path d="M14 12h8" />
<path d="m17 20.66-1-1.73" />
<path d="m17 3.34-1 1.73" />
<path d="M2 12h2" />
<path d="m20.66 17-1.73-1" />
<path d="m20.66 7-1.73 1" />
<path d="m3.34 17 1.73-1" />
<path d="m3.34 7 1.73 1" />
<circle cx="12" cy="12" r="2" />
<circle cx="12" cy="12" r="8" />
</svg>
</button>
</div>
<button class="px-6 py-2.5 rounded-xl font-medium text-sm bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:shadow-lg hover:shadow-blue-500/25 hover:scale-105 transition-all">
<div class="flex">
<p class="text-center text-xs text-slate-600">Esc - закрыть</p>
</div>
<button
class="px-6 py-2.5 rounded-xl font-medium text-sm bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:shadow-lg hover:shadow-blue-500/25 hover:scale-105 transition-all"
>
Открыть
</button>
</div>
</div>
<p class="text-center text-xs text-slate-600 mt-4">Нажмите Esc для отмены</p>
</div>
</main>
</body>
</body>
</html>
refs/light.html
+205 -41
View File
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Choose Browser - Light</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
}
darkMode: "class",
};
</script>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-100 via-white to-slate-100 flex flex-col">
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-100 via-white to-slate-100 flex flex-col">
<nav class="flex items-center justify-center gap-8 p-4 border-b border-slate-200">
<a href="dark.html" class="text-sm font-mono text-slate-500 hover:text-slate-700 transition-colors">Dark</a>
<span class="text-sm font-mono text-slate-600">Light</span>
@@ -19,14 +19,29 @@
<main class="flex-1 flex items-center justify-center p-4">
<div class="w-full max-w-md">
<div class="bg-white/80 backdrop-blur-xl border border-slate-200 rounded-2xl shadow-xl shadow-slate-200/50 overflow-hidden">
<div
class="bg-white/80 backdrop-blur-xl border border-slate-200 rounded-2xl shadow-xl shadow-slate-200/50 overflow-hidden"
>
<div class="p-5 border-b border-slate-100">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-blue-500/25">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<div
class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-blue-500/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-white"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
<path
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
></path>
</svg>
</div>
<div>
@@ -35,7 +50,16 @@
</div>
</div>
<div class="flex items-center gap-2 px-4 py-3 bg-slate-50 rounded-xl border border-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-slate-400 flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
@@ -46,46 +70,122 @@
<div class="p-3">
<div class="space-y-2">
<button class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-blue-50 ring-2 ring-blue-500/30">
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-orange-500 to-red-500">🦊</div>
<button
class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-blue-50 ring-2 ring-blue-500/30"
>
<div
class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-orange-500 to-red-500"
>
🦊
</div>
<div class="flex-1 text-left">
<div class="flex items-center gap-2">
<span class="font-medium text-slate-900">Work browser</span>
<span class="px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-600 rounded-full">По умолчанию</span>
<span class="px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-600 rounded-full"
>По умолчанию</span
>
</div>
</div>
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-blue-500 text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</button>
<button class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-white hover:bg-slate-50 group">
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-pink-500 to-rose-500">🔥</div>
<button
class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-white hover:bg-slate-50 group"
>
<div
class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-pink-500 to-rose-500"
>
🔥
</div>
<div class="flex-1 text-left">
<span class="font-medium text-slate-900">Ku6epXBOCTuK</span>
</div>
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-100 group-hover:bg-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 group-hover:text-slate-500" 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>
<div
class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-100 group-hover:bg-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-slate-400 group-hover:text-slate-500"
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>
</div>
</button>
<button class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-white hover:bg-slate-50 group">
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-blue-500 to-green-500">🌐</div>
<button
class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-white hover:bg-slate-50 group"
>
<div
class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-blue-500 to-green-500"
>
🌐
</div>
<div class="flex-1 text-left">
<span class="font-medium text-slate-900">Chrome</span>
</div>
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-100 group-hover:bg-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 group-hover:text-slate-500" 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>
<div
class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-100 group-hover:bg-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-slate-400 group-hover:text-slate-500"
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>
</div>
</button>
<button class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-white hover:bg-slate-50 group">
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-violet-500 to-purple-500">🧘</div>
<button
class="w-full flex items-center gap-4 p-4 rounded-xl transition-all duration-200 bg-white hover:bg-slate-50 group"
>
<div
class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl bg-gradient-to-br shadow-lg from-violet-500 to-purple-500"
>
🧘
</div>
<div class="flex-1 text-left">
<span class="font-medium text-slate-900">Zen Browser</span>
</div>
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-100 group-hover:bg-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 group-hover:text-slate-500" 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>
<div
class="w-6 h-6 rounded-full flex items-center justify-center bg-slate-100 group-hover:bg-slate-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-slate-400 group-hover:text-slate-500"
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>
</div>
</button>
</div>
@@ -93,14 +193,29 @@
<div class="px-5 pb-4 space-y-3">
<label class="flex items-center gap-3 cursor-pointer group">
<div class="w-5 h-5 rounded-md border-2 border-slate-300 group-hover:border-slate-400 flex items-center justify-center transition-all"></div>
<div
class="w-5 h-5 rounded-md border-2 border-slate-300 group-hover:border-slate-400 flex items-center justify-center transition-all"
></div>
<span class="text-sm text-slate-500 group-hover:text-slate-700 transition-colors">
Запомнить выбор для <span class="text-slate-700 font-mono">ku6epxboctuk.github.io</span>
</span>
</label>
<label class="flex items-center gap-3 cursor-pointer group">
<div class="w-5 h-5 rounded-md border-2 border-blue-500 bg-blue-500 flex items-center justify-center transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<div
class="w-5 h-5 rounded-md border-2 border-blue-500 bg-blue-500 flex items-center justify-center transition-all"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-3 h-3 text-white"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<span class="text-sm text-slate-700 transition-colors">Всегда спрашивать</span>
</label>
@@ -108,22 +223,71 @@
<div class="px-5 py-4 border-t border-slate-100 flex items-center justify-between">
<div class="flex items-center gap-4">
<button class="flex items-center gap-2 text-sm text-slate-500 hover:text-slate-900 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path></svg>
<span>Настроить</span>
<button class="flex items-center gap-2 text-sm text-slate-400 hover:text-white transition-colors">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-sun-icon lucide-sun"
>
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m6.34 17.66-1.41 1.41" />
<path d="m19.07 4.93-1.41 1.41" />
</svg>
</button>
<button class="flex items-center gap-2 text-sm text-slate-500 hover:text-slate-900 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<span>Обратная связь</span>
<button class="flex items-center gap-2 text-sm text-slate-400 hover:text-white transition-colors">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-cog-icon lucide-cog"
>
<path d="M11 10.27 7 3.34" />
<path d="m11 13.73-4 6.93" />
<path d="M12 22v-2" />
<path d="M12 2v2" />
<path d="M14 12h8" />
<path d="m17 20.66-1-1.73" />
<path d="m17 3.34-1 1.73" />
<path d="M2 12h2" />
<path d="m20.66 17-1.73-1" />
<path d="m20.66 7-1.73 1" />
<path d="m3.34 17 1.73-1" />
<path d="m3.34 7 1.73 1" />
<circle cx="12" cy="12" r="2" />
<circle cx="12" cy="12" r="8" />
</svg>
</button>
</div>
<button class="px-6 py-2.5 rounded-xl font-medium text-sm bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:shadow-lg hover:shadow-blue-500/25 hover:scale-105 transition-all">
<div class="flex">
<p class="text-center text-xs text-slate-600">Esc - закрыть</p>
</div>
<button
class="px-6 py-2.5 rounded-xl font-medium text-sm bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:shadow-lg hover:shadow-blue-500/25 hover:scale-105 transition-all"
>
Открыть
</button>
</div>
</div>
<p class="text-center text-xs text-slate-400 mt-4">Нажмите Esc для отмены</p>
</div>
</main>
</body>
</body>
</html>
src/main.rs
+71 -18
View File
@@ -1,43 +1,92 @@
use std::rc::Rc;
// use slint::BackendSelector;
// use crate::winit::center_window;
// mod winit;
slint::include_modules!();
fn init() -> State {
let browser_model = Rc::new(slint::VecModel::<BrowserConfig>::from(vec![
BrowserConfig {
icon: "chrome".into(),
path: "chrome.exe".into(),
flags: "profile 1".into(),
icon: "🦊".into(),
name: "Work browser".into(),
path: "firefox.exe".into(),
flags: "--profile work".into(),
is_default: true,
},
BrowserConfig {
icon: "chrome".into(),
icon: "🔥".into(),
name: "Ku6epXBOCTuK".into(),
path: "chrome.exe".into(),
flags: "profile 2".into(),
flags: "--profile personal".into(),
is_default: false,
},
BrowserConfig {
icon: "chrome".into(),
icon: "🌐".into(),
name: "Chrome".into(),
path: "chrome.exe".into(),
flags: "".into(),
is_default: false,
},
BrowserConfig {
icon: "🧘".into(),
name: "Zen Browser".into(),
path: "zen.exe".into(),
flags: "".into(),
},
BrowserConfig {
icon: "chrome".into(),
path: "edge.exe".into(),
flags: "".into(),
is_default: false,
},
]));
let main_window = MainWindow::new().unwrap();
{
main_window.window().on_close_requested(move || {
todo!();
});
main_window.set_current_url("ku6epxboctuk.github.io".into());
main_window.set_remember_choice(true);
main_window.set_always_ask(true);
main_window.on_browser_selected({
move |browser: BrowserConfig| {
println!("Selected browser: {:?} {:?}", browser.path, browser.flags);
}
});
main_window.on_toggle_remember(move |checked| {
println!("Remember choice: {}", checked);
});
main_window.on_toggle_always_ask(move |checked| {
println!("Always ask: {}", checked);
});
main_window.on_settings_clicked(move || {
println!("Settings clicked");
});
main_window.on_feedback_clicked(move || {
println!("Feedback clicked");
});
main_window.on_open_clicked(move || {
println!("Open clicked");
});
// main_window.on_request_drag(move || {
// main_window.window().with_winit_window(|winit_window| {
// winit_window.drag_window().ok();
// });
// });
// center_window(main_window.window());
main_window
.window()
.on_close_requested(move || slint::CloseRequestResponse::HideWindow);
main_window.set_browser_model(browser_model.clone().into());
State {
main_window,
browser_model: browser_model,
browser_model,
}
}
@@ -47,9 +96,13 @@ pub struct State {
}
pub fn main() {
// TODO: how to enable skia? not panics
// let _selector = BackendSelector::new()
// .backend_name("renderer_skia".into())
// .select()
// .unwrap();
let state = init();
let main_window = state.main_window.clone_strong();
#[cfg(target_os = "android")]
STATE.with(|ui| *ui.borrow_mut() = Some(state));
main_window.run().unwrap();
}
src/winit.rs
+39
View File
@@ -0,0 +1,39 @@
use i_slint_backend_winit::WinitWindowAccessor;
use i_slint_backend_winit::winit::dpi::PhysicalPosition;
use i_slint_backend_winit::winit::monitor::MonitorHandle;
use i_slint_backend_winit::winit::window::Window;
pub fn center_window(window: &slint::Window) {
println!("Centering window");
if window.has_winit_window() {
println!("Has winit");
window.with_winit_window(|window: &Window| {
match window.current_monitor() {
Some(monitor) => set_centered(window, &monitor),
None => (),
};
None as Option<()>
});
}
}
fn set_centered(window: &Window, monitor: &MonitorHandle) {
let window_size = window.outer_size();
let monitor_size = monitor.size();
let monitor_position = monitor.position();
println!("Monitor size: {:?}", monitor_size);
println!("Window size: {:?}", window_size);
let mut monitor_window_position = PhysicalPosition { x: 0, y: 0 };
monitor_window_position.x = (monitor_position.x as f32 + (monitor_size.width as f32 * 0.5)
- (window_size.width as f32 * 0.5)) as i32;
monitor_window_position.y = (monitor_position.y as f32 + (monitor_size.height as f32 * 0.5)
- (window_size.height as f32 * 0.5)) as i32;
window.set_outer_position(monitor_window_position);
}
ui/browser_item.slint
+76 -22
View File
@@ -1,42 +1,96 @@
import {
Button,
HorizontalBox,
VerticalBox,
} from "std-widgets.slint";
import { BrowserConfig } from "./types.slint";
export component BrowserItem {
height: 80px;
in property <BrowserConfig> browser;
in property <bool> selected;
height: 88px;
width: 100%;
Rectangle {
height: 100%;
width: 100%;
background: rgba(30, 41, 59, 0.3);
height: 100%;
border-radius: 16px;
background: selected ? #1e293b : #0f172a;
HorizontalBox {
height: 80px;
padding: 8px;
alignment: space-between;
Image {
height: 48px;
padding: 16px;
spacing: 16px;
Rectangle {
width: 48px;
source: @image-url("../logos/firefox_48x48.png");
}
height: 48px;
border-radius: 12px;
background: #1e293b;
Text {
text: browser.path;
vertical_alignment: center;
width: 100%;
height: 100%;
horizontal-alignment: center;
vertical-alignment: center;
text: browser.icon;
font-size: 24px;
}
}
Text {
text: browser.flags;
vertical_alignment: center;
}
VerticalLayout {
VerticalBox {
alignment: center;
Button {
text: "use";
spacing: 4px;
Text {
text: browser.name;
color: #f8fafc;
font-size: 16px;
font-weight: 500;
}
if (browser.is-default): Rectangle {
height: 22px;
border-radius: 4px;
background: #3b82f6;
Text {
text: "По умолчанию";
color: #60a5fa;
font-size: 12px;
}
}
}
VerticalBox {
alignment: center;
width: 24px;
height: 24px;
if (selected): Rectangle {
width: 24px;
height: 24px;
border-radius: 12px;
background: #3b82f6;
Text {
width: 100%;
height: 100%;
horizontal-alignment: center;
vertical-alignment: center;
text: "✓";
color: #ffffff;
font-size: 14px;
}
}
if (!selected): Text {
width: 100%;
height: 100%;
horizontal-alignment: center;
vertical-alignment: center;
text: ">";
color: #64748b;
font-size: 18px;
}
}
}
ui/footer.slint
+41
View File
@@ -0,0 +1,41 @@
import {
Button,
HorizontalBox,
VerticalBox,
} from "std-widgets.slint";
export component Footer inherits Rectangle {
callback settings-clicked();
callback feedback-clicked();
callback open-clicked();
HorizontalBox {
spacing: 16px;
padding-top: 16px;
HorizontalBox {
spacing: 16px;
Button {
text: "⚙️ Настроить";
clicked => {
root.settings-clicked();
}
}
Button {
text: "💬 Обратная связь";
clicked => {
root.feedback-clicked();
}
}
}
Button {
text: "Открыть";
clicked => {
root.open-clicked();
}
}
}
}
ui/header.slint
+92
View File
@@ -0,0 +1,92 @@
import { BrowserConfig } from "./types.slint";
export component Header inherits Rectangle {
in property <string> url;
property <brush> icon-gradient: @linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));
VerticalLayout {
// width: 100%;
width: 448px;
padding: 12px;
padding-top: 20px;
spacing: 12px;
HorizontalLayout {
spacing: 12px;
Rectangle {
width: 48px;
height: 48px;
border-radius: 12px;
background: icon-gradient;
Image {
source: @image-url("../logos/globe.svg");
colorize: white;
}
}
VerticalLayout {
alignment: center;
spacing: 4px;
Text {
font-family: "Segpoe UI";
text: "Выберите браузер";
color: #ffffff;
font-size: 18px;
font-weight: 600;
}
Text {
font-family: "Segpoe UI";
text: "Для открытия ссылки";
color: #94a3b8;
font-size: 14px;
}
}
}
Rectangle {
height: 44px;
border-radius: 12px;
background: #1e293b;
border-width: 1px;
border-color: #334155;
HorizontalLayout {
padding: 12px;
padding-left: 16px;
padding-right: 16px;
spacing: 8px;
alignment: start;
Image {
source: @image-url("../logos/external_link.svg");
width: 16px;
colorize: #64748b;
height: 16px;
}
VerticalLayout {
padding-top: 2px;
Text {
text: "ku6epxboctuk.github.io";
color: #cbd5e1;
font-size: 14px;
font-family: "Consolas";
}
}
}
}
}
Rectangle {
height: 1px;
width: 100%;
y: parent.height - self.height;
background: #334155;
}
}
ui/main.slint
+79 -31
View File
@@ -1,43 +1,91 @@
import {
SpinBox,
Button,
CheckBox,
Slider,
LineEdit,
ScrollView,
ListView,
HorizontalBox,
VerticalBox,
GridBox,
StandardButton,
Palette,
} from "std-widgets.slint";
import { Button, CheckBox, ListView } from "std-widgets.slint";
import { BrowserItem } from "./browser_item.slint";
import { Header } from "./header.slint";
import { Footer } from "./footer.slint";
import { BrowserConfig } from "./types.slint";
export component MainWindow inherits Window {
in property <[BrowserConfig]> browser-model: [];
in property <string> current-url: "";
in-out property <bool> remember-choice: false;
in-out property <bool> always-ask: true;
in property <int> selected-index: 0;
callback todo-added(string);
callback remove-done();
callback update_todo(BrowserConfig);
callback browser-selected(BrowserConfig);
callback toggle-remember(bool);
callback toggle-always-ask(bool);
callback settings-clicked();
callback feedback-clicked();
callback open-clicked();
callback request-drag();
preferred-width: 400px;
preferred-height: 600px;
// no-frame: true;
background: transparent;
width: 488px;
height: 800px;
default-font-family: "Segoe UI";
VerticalBox {
x: root.safe-area-insets.left;
y: root.safe-area-insets.top;
width: root.width - root.safe-area-insets.right - root.safe-area-insets.left;
height: root.height - root.safe-area-insets.bottom - root.safe-area-insets.top;
list-view := ScrollView {
VerticalLayout {
spacing: 10px;
padding: 5px;
for browser in root.browser-model: BrowserItem {
browser: browser;
alignment: start;
width: 488px;
height: 800px;
padding: 20px;
Rectangle {
max-width: 448px;
width: 100%;
height: 760px;
border-radius: 16px;
clip: true;
background: #0f172a;
border-width: 1px;
border-color: #334155;
VerticalLayout {
padding: 12px;
Header {
url: current-url;
}
// ListView {
// max-height: 400px;
// for browser[i] in root.browser-model: BrowserItem {
// browser: browser;
// selected: i == root.selected-index;
// }
// }
// spacing: 12px;
// padding-left: 4px;
// CheckBox {
// text: "Запомнить выбор для " + root.current-url;
// checked <=> root.remember-choice;
// toggled => {
// root.toggle-remember(root.remember-choice);
// }
// }
// CheckBox {
// text: "Всегда спрашивать";
// checked <=> root.always-ask;
// toggled => {
// root.toggle-always-ask(root.always-ask);
// }
// }
// }
Rectangle {
vertical-stretch: 1;
}
Footer {
settings-clicked => settings-clicked();
feedback-clicked => feedback-clicked();
open-clicked => open-clicked();
}
}
}
ui/types.slint
+2 -1
View File
@@ -1,7 +1,8 @@
@rust-attr(derive(serde::Serialize, serde::Deserialize))
export struct BrowserConfig {
icon: string,
name: string,
path: string,
flags: string,
is-default: bool,
}