210 lines
7.2 KiB
Plaintext
210 lines
7.2 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="ru" class="h-full">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title><%= content_for(:title) { "Генератор колод — Clash Royale" } %></title>
|
||
|
||
<%# Tailwind CSS v4 via CDN %>
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
|
||
<%# Monrope font via CDN %>
|
||
<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=Nunito:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||
|
||
<style type="text/tailwindcss">
|
||
@theme {
|
||
--color-vs-bg: #1e1e1e;
|
||
--color-vs-sidebar: #252526;
|
||
--color-vs-panel: #2d2d30;
|
||
--color-vs-border: #3e3e42;
|
||
--color-vs-hover: #2a2d2e;
|
||
--color-vs-text: #d4d4d4;
|
||
--color-vs-muted: #858585;
|
||
--color-vs-blue: #569cd6;
|
||
--color-vs-orange: #ce9178;
|
||
--color-vs-green: #6a9955;
|
||
--color-vs-yellow: #dcdcaa;
|
||
--color-vs-purple: #c586c0;
|
||
--color-vs-cyan: #9cdcfe;
|
||
--color-vs-red: #f44747;
|
||
--color-vs-accent: #007acc;
|
||
|
||
--font-mono: "Manrope", ui-monospace, monospace;
|
||
}
|
||
|
||
* { font-family: "Manrope", sans-serif; }
|
||
|
||
body {
|
||
background-color: var(--color-vs-bg);
|
||
color: var(--color-vs-text);
|
||
}
|
||
|
||
.tab-bar {
|
||
background-color: var(--color-vs-sidebar);
|
||
border-bottom: 1px solid var(--color-vs-border);
|
||
}
|
||
|
||
.tab-active {
|
||
background-color: var(--color-vs-bg);
|
||
border-top: 1px solid var(--color-vs-accent);
|
||
color: var(--color-vs-text);
|
||
}
|
||
|
||
.tab-inactive {
|
||
background-color: var(--color-vs-sidebar);
|
||
color: var(--color-vs-muted);
|
||
}
|
||
|
||
.panel {
|
||
background-color: var(--color-vs-panel);
|
||
border: 1px solid var(--color-vs-border);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.status-bar {
|
||
background-color: var(--color-vs-accent);
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.card-slot {
|
||
background-color: var(--color-vs-panel);
|
||
border: 1px solid var(--color-vs-border);
|
||
border-radius: 3px;
|
||
transition: border-color 0.15s, background-color 0.15s;
|
||
}
|
||
|
||
.card-slot:hover {
|
||
border-color: var(--color-vs-accent);
|
||
background-color: var(--color-vs-hover);
|
||
}
|
||
|
||
.card-slot.filled {
|
||
border-color: var(--color-vs-blue);
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: var(--color-vs-accent);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
transition: opacity 0.15s;
|
||
}
|
||
|
||
.btn-primary:hover { opacity: 0.85; }
|
||
.btn-primary:active { opacity: 0.7; }
|
||
|
||
.btn-ghost {
|
||
background-color: transparent;
|
||
color: var(--color-vs-muted);
|
||
border: 1px solid var(--color-vs-border);
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.btn-ghost:hover {
|
||
color: var(--color-vs-text);
|
||
border-color: var(--color-vs-muted);
|
||
}
|
||
|
||
.input-field {
|
||
background-color: var(--color-vs-bg);
|
||
border: 1px solid var(--color-vs-border);
|
||
color: var(--color-vs-text);
|
||
border-radius: 2px;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
|
||
.input-field:focus {
|
||
border-color: var(--color-vs-accent);
|
||
}
|
||
|
||
.badge-elixir {
|
||
background-color: #6b21a8;
|
||
color: #e9d5ff;
|
||
font-size: 11px;
|
||
border-radius: 2px;
|
||
padding: 1px 5px;
|
||
}
|
||
|
||
.rarity-common { border-left: 3px solid #9ca3af; }
|
||
.rarity-rare { border-left: 3px solid var(--color-vs-blue); }
|
||
.rarity-epic { border-left: 3px solid var(--color-vs-purple); }
|
||
.rarity-legendary { border-left: 3px solid var(--color-vs-yellow); }
|
||
|
||
.sidebar-item {
|
||
color: var(--color-vs-muted);
|
||
cursor: pointer;
|
||
border-radius: 2px;
|
||
transition: color 0.15s, background-color 0.15s;
|
||
}
|
||
|
||
.sidebar-item:hover, .sidebar-item.active {
|
||
color: var(--color-vs-text);
|
||
background-color: var(--color-vs-hover);
|
||
}
|
||
|
||
.scrollbar-vs::-webkit-scrollbar { width: 6px; }
|
||
.scrollbar-vs::-webkit-scrollbar-track { background: transparent; }
|
||
.scrollbar-vs::-webkit-scrollbar-thumb {
|
||
background: var(--color-vs-border);
|
||
border-radius: 3px;
|
||
}
|
||
.scrollbar-vs::-webkit-scrollbar-thumb:hover {
|
||
background: var(--color-vs-muted);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="h-full flex flex-col">
|
||
|
||
<%# ── Верхняя строка с вкладками (имитация VS Code) ── %>
|
||
<div class="tab-bar flex items-center px-0 h-9 shrink-0 select-none">
|
||
<div class="flex items-stretch h-full">
|
||
<div class="tab-active flex items-center gap-2 px-4 text-sm h-full border-r border-[--color-vs-border]">
|
||
<svg class="w-3.5 h-3.5 text-[--color-vs-orange]" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1a6 6 0 1 1 0 12A6 6 0 0 1 8 2z"/>
|
||
<path d="M8 4a.5.5 0 0 1 .5.5v3.793l2.146 2.147a.5.5 0 0 1-.708.707L7.5 8.707V4.5A.5.5 0 0 1 8 4z"/>
|
||
</svg>
|
||
deck_builder.rb
|
||
</div>
|
||
<div class="tab-inactive flex items-center gap-2 px-4 text-sm h-full border-r border-[--color-vs-border] hover:text-[--color-vs-text] transition-colors cursor-pointer">
|
||
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5zm0 1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/>
|
||
</svg>
|
||
cards.json
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<%# ── Основная область ── %>
|
||
<main class="flex-1 flex overflow-hidden">
|
||
<%= yield %>
|
||
</main>
|
||
|
||
<%# ── Строка состояния ── %>
|
||
<div class="status-bar flex items-center justify-between px-3 h-6 shrink-0">
|
||
<div class="flex items-center gap-4">
|
||
<span class="flex items-center gap-1">
|
||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
||
</svg>
|
||
Clash Royale
|
||
</span>
|
||
<span>UTF-8</span>
|
||
<span>ERB</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<span>Hanami 2.3</span>
|
||
<span>Tailwind 4</span>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|