xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor formatting changes

Browse Source
This commit is contained in:
Frank Tovar
2026-02-03 01:10:38 +01:00
parent edc8760465
commit 84ebc25340
6 changed files with 1189 additions and 831 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -23,3 +23,4 @@ App_Data/
# OS cruft # OS cruft
Thumbs.db Thumbs.db
Desktop.ini Desktop.ini
Properties/launchSettings.json

4
.prettierrc Normal file
View File

@@ -0,0 +1,4 @@
{
"tabWidth": 4,
"useTabs": false
}

4
Properties/launchSettings.json
View File

@@ -16,7 +16,7 @@
"applicationUrl": "http://localhost:5116", "applicationUrl": "http://localhost:5116",
"environmentVariables": { "environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development", "ASPNETCORE_ENVIRONMENT": "Development",
"ADMIN_PASSWORD": "changeme" "ADMIN_PASSWORD": "cookiedonut"
} }
}, },
"https": { "https": {
@@ -26,7 +26,7 @@
"applicationUrl": "https://localhost:7103;http://localhost:5116", "applicationUrl": "https://localhost:7103;http://localhost:5116",
"environmentVariables": { "environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development", "ASPNETCORE_ENVIRONMENT": "Development",
"ADMIN_PASSWORD": "changeme" "ADMIN_PASSWORD": "cookiedonut"
} }
}, },
"IIS Express": { "IIS Express": {

1241
wwwroot/app.js
View File

File diff suppressed because it is too large Load Diff

2
wwwroot/index.html
View File

@@ -58,7 +58,7 @@
<button type="submit" data-i18n="auth.registerSubmit">Create account</button> <button type="submit" data-i18n="auth.registerSubmit">Create account</button>
</form> </form>
<div class="stack"> <div class="stack">
<a class="auth-toggle-link" id="auth-toggle" href="#" data-i18n="auth.switchToRegister">Need an account? Register</a> <a class="auth-toggle-link link" id="auth-toggle" href="#" data-i18n="auth.switchToRegister">Need an account? Register</a>
</div> </div>
</section> </section>

768
wwwroot/styles.css
View File

@@ -1,372 +1,606 @@
:root { :root {
font-family: "Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; font-family:
background: #f6e9d6; "Baloo 2",
color: #2c1c0d; "Nunito",
"Segoe UI",
system-ui,
-apple-system,
sans-serif;
background: #f6e9d6;
color: #2c1c0d;
} }
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
.page { .page {
margin: 0; margin: 0;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
min-height: 100vh; min-height: 100vh;
background: url("background.png") center/cover no-repeat fixed, #f6e9d6; background:
url("background.png") center/cover no-repeat fixed,
#f6e9d6;
} }
.lang-field { margin-top: 8px; } .lang-field {
.lang-field select { min-width: 160px; } margin-top: 8px;
.compact-select { min-width: 120px; } }
.lang-field select {
min-width: 160px;
}
.compact-select {
min-width: 120px;
}
.status-bar { .status-bar {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
gap: 30px; gap: 30px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.12); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
padding: 10px 14px; padding: 10px 14px;
}
.status-left,
.status-center,
.status-right {
display: flex;
align-items: center;
gap: 10px;
}
.inline-link {
font-size: 14px;
margin-left: 5px;
} }
.status-left, .status-center, .status-right { display: flex; align-items: center; gap: 10px; }
.inline-link { font-size: 14px; margin-left: 5px; }
.logo-mark { .logo-mark {
height: 65px; height: 65px;
margin: -10px; margin: -10px;
width: auto; width: auto;
} }
.counts { .counts {
color: #5f513b; color: #5f513b;
font-size: 13px; font-size: 13px;
} }
.phase-bar { display: none; } .phase-bar {
display: none;
}
.grid { .grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 16px; gap: 16px;
width: 100%; width: 100%;
max-width: 1280px; max-width: 1280px;
} }
.suggest-grid { .suggest-grid {
display: grid; display: grid;
grid-template-columns: 1.1fr 1fr; grid-template-columns: 1.1fr 1fr;
gap: 16px; gap: 16px;
align-items: start; align-items: start;
} }
.suggest-grid .card-grid { .suggest-grid .card-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.phase-header { .phase-header {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
border-radius: 12px; border-radius: 12px;
padding: 12px 16px; padding: 12px 16px;
box-shadow: 0 10px 24px rgba(0,0,0,0.1); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
margin-bottom: 12px; margin-bottom: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
}
.phase-header h2 {
margin: 0;
}
.phase-header .hint {
margin: 0;
} }
.phase-header h2 { margin: 0; }
.phase-header .hint { margin: 0; }
.card { .card {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
border-radius: 14px; border-radius: 14px;
padding: 16px; padding: 16px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
margin-bottom: 16px; margin-bottom: 16px;
} }
.card h2 { margin-top: 0; margin-bottom: 8px; } .card h2 {
margin-top: 0;
.split { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; } margin-bottom: 8px;
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack.horizontal { flex-direction: row; flex-wrap: wrap; }
input, textarea, select, button {
font: inherit;
border-radius: 8px;
border: 1px solid #d5c7b5;
background: #fffaf3;
color: #2c1c0d;
padding: 10px 12px;
min-width: 0;
} }
textarea { min-height: 80px; resize: vertical; } .split {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
flex-wrap: wrap;
}
.stack {
display: flex;
flex-direction: column;
gap: 8px;
}
.stack.horizontal {
flex-direction: row;
flex-wrap: wrap;
}
input,
textarea,
select,
button {
font: inherit;
border-radius: 8px;
border: 1px solid #d5c7b5;
background: #fffaf3;
color: #2c1c0d;
padding: 10px 12px;
min-width: 0;
}
textarea {
min-height: 80px;
resize: vertical;
}
button { button {
cursor: pointer; cursor: pointer;
background: linear-gradient(-5deg, #30afea, #80e2ff); background: linear-gradient(-5deg, #30afea, #80e2ff);
border-color: #124b88; border-color: #124b88;
font-weight: 700; font-weight: 700;
color: #2c1c0d; color: #2c1c0d;
} }
button:hover { background: linear-gradient(-5deg, #40e2ff, #e0f0ff ); }
button.danger { background: #e0564f; border-color: #c54740; color: #fffaf3; } button:hover {
background: linear-gradient(-5deg, #40e2ff, #e0f0ff);
}
button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; } button.danger {
background: #e0564f;
border-color: #c54740;
color: #fffaf3;
}
.label { color: #6c5a42; font-size: 14px; } button.ghost {
.hint { color: #8c7a63; font-size: 12px; margin: 8px 0 12px 0; } background: transparent;
.hint.warning { color: #c26c1a; } border-color: #d5c7b5;
.disabled-form { opacity: 0.5; pointer-events: none; } color: #2c1c0d;
}
.label {
color: #6c5a42;
font-size: 14px;
}
.hint {
color: #8c7a63;
font-size: 12px;
margin: 8px 0 12px 0;
}
.hint.warning {
color: #c26c1a;
}
.disabled-form {
opacity: 0.5;
pointer-events: none;
}
.card-grid { .card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 12px; gap: 12px;
margin-top: 12px; margin-top: 12px;
width: 100%; width: 100%;
max-width: 1280px; max-width: 1280px;
margin-inline: auto; margin-inline: auto;
}
.results-grid {
max-width: none;
} }
.results-grid { max-width: none; }
.game-card { .game-card {
background: #fffaf3; background: #fffaf3;
border: 1px solid #e5d6c2; border: 1px solid #e5d6c2;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 220px; min-height: 220px;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.grid { min-width: auto; width: 100%; } .grid {
.suggest-grid { grid-template-columns: 1fr; } min-width: auto;
width: 100%;
}
.suggest-grid {
grid-template-columns: 1fr;
}
} }
.card-visual { .card-visual {
height: 200px; height: 200px;
background: linear-gradient(135deg, #f0d9b5, #f6b24f); background: linear-gradient(135deg, #f0d9b5, #f6b24f);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #f6b24f; background-color: #f6b24f;
cursor: pointer; cursor: pointer;
border: none; border: none;
width: 100%; width: 100%;
display: block; display: block;
padding: 0; padding: 0;
}
.card-visual.hovering {
cursor: zoom-in;
} }
.card-visual.hovering { cursor: zoom-in; }
.card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .card-body {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
h3 { margin: 0; font-size: 18px; } h3 {
margin: 0;
font-size: 18px;
}
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; } .card-title-row {
.card-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } display: flex;
.title-meta { display: flex; align-items: center; gap: 8px; } justify-content: space-between;
.title-meta .chip { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } align-items: center;
p { margin: 0; } gap: 8px;
.muted { color: #7a6a53; margin: 0; } min-width: 0;
.link { color: #30afea; text-decoration: none; font-weight: 700; } }
.link:hover { text-decoration: underline; } .card-title {
.link.compact { font-size: 14px; } flex: 1;
.auth-toggle-link { text-align: center; display: inline-block; } min-width: 0;
.chip { background: #c5dff1; color: #2c1c0d; padding: 4px 8px; border-radius: 999px; font-size: 12px; } white-space: nowrap;
.chip.danger-chip { background: #e0564f; border: 1px solid #c54740; color: #fffaf3; } overflow: hidden;
text-overflow: ellipsis;
}
.title-meta {
display: flex;
align-items: center;
gap: 8px;
}
.title-meta .chip {
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
margin: 0;
}
.muted {
color: #7a6a53;
margin: 0;
}
.link {
color: #30afea;
text-decoration: none;
font-weight: 700;
}
.link:hover {
text-decoration: underline;
}
.link.compact {
font-size: 14px;
}
.auth-toggle-link {
text-align: center;
display: inline-block;
margin-top: 10px;
}
.chip {
background: #c5dff1;
color: #2c1c0d;
padding: 4px 8px;
border-radius: 999px;
font-size: 12px;
}
.chip.danger-chip {
background: #e0564f;
border: 1px solid #c54740;
color: #fffaf3;
}
.vote-controls { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 6px; } .vote-controls {
.score { font-weight: 700; min-width: 36px; text-align: center; } display: flex;
.score-emoji { font-size: 24px; text-align: center; } gap: 10px;
align-items: center;
margin-top: auto;
padding-top: 6px;
}
.score {
font-weight: 700;
min-width: 36px;
text-align: center;
}
.score-emoji {
font-size: 24px;
text-align: center;
}
.results-grid .game-card { border-color: #f0c56b; } .results-grid .game-card {
border-color: #f0c56b;
}
.results-frame { .results-frame {
background: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.92);
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
border-radius: 14px; border-radius: 14px;
padding: 12px; padding: 12px;
box-shadow: 0 10px 28px rgba(0,0,0,0.12); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
} }
/* Slider */ /* Slider */
input[type="range"].full-slider { input[type="range"].full-slider {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
height: 20px; height: 20px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(90deg, #c52222, #d5c522, #22c55e); background: linear-gradient(90deg, #c52222, #d5c522, #22c55e);
outline: none; outline: none;
box-shadow: inset 0 0 0 1px #e3d4bd, 0 4px 12px rgba(0,0,0,0.18); box-shadow:
inset 0 0 0 1px #e3d4bd,
0 4px 12px rgba(0, 0, 0, 0.18);
} }
input[type="range"].full-slider::-webkit-slider-thumb { input[type="range"].full-slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #fffaf3; background: #fffaf3;
border: 2px solid #d5c7b5; border: 2px solid #d5c7b5;
box-shadow: 0 4px 10px rgba(0,0,0,0.25); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
} }
input[type="range"].full-slider::-moz-range-thumb { input[type="range"].full-slider::-moz-range-thumb {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #fffaf3; background: #fffaf3;
border: 2px solid #d5c7b5; border: 2px solid #d5c7b5;
box-shadow: 0 4px 10px rgba(0,0,0,0.25); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
} }
input[type="range"].full-slider::-moz-range-track { input[type="range"].full-slider::-moz-range-track {
height: 14px; height: 14px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(90deg, #f28b3c, #f2c94c, #2ca25f); background: linear-gradient(90deg, #f28b3c, #f2c94c, #2ca25f);
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
} }
.score { font-weight: 700; min-width: 36px; font-size: 24px; text-align: center; } .score {
font-weight: 700;
min-width: 36px;
font-size: 24px;
text-align: center;
}
.hidden { display: none !important; } .hidden {
display: none !important;
}
.toast { .toast {
position: fixed; position: fixed;
bottom: 16px; bottom: 16px;
right: 16px; right: 16px;
background: #1db4ac; background: #1db4ac;
color: #0f2f2d; color: #0f2f2d;
padding: 10px 14px; padding: 10px 14px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 10px 24px rgba(0,0,0,0.2); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
max-width: 320px; max-width: 320px;
}
.toast.error {
background: #e0564f;
color: #fffaf3;
} }
.toast.error { background: #e0564f; color: #fffaf3; }
.auth-card .active { font-weight: 700; } .auth-card .active {
.auth-form { margin-top: 8px; } font-weight: 700;
}
.auth-form {
margin-top: 8px;
}
.auth-logo { .auth-logo {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 12px; margin-bottom: 12px;
} }
.auth-logo img { .auth-logo img {
max-width: 200px; max-width: 200px;
width: 100%; width: 100%;
height: auto; height: auto;
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25)); filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
} }
.admin-toggle { .admin-toggle {
position: fixed; position: fixed;
bottom: 18px; bottom: 18px;
right: 18px; right: 18px;
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 50%; border-radius: 50%;
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
background: rgba(255,255,255,0.9); background: rgba(255, 255, 255, 0.9);
color: #6c5a42; color: #6c5a42;
font-weight: 700; font-weight: 700;
box-shadow: 0 8px 20px rgba(0,0,0,0.18); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
z-index: 30; z-index: 30;
} }
.admin-panel { .admin-panel {
position: fixed; position: fixed;
bottom: 70px; bottom: 70px;
right: 18px; right: 18px;
width: 320px; width: 320px;
z-index: 40; z-index: 40;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
.lightbox { .lightbox {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0,0,0,0.7); background: rgba(0, 0, 0, 0.7);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 100; z-index: 100;
} }
.lightbox-content { .lightbox-content {
position: relative; position: relative;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
background: #fffaf3; background: #fffaf3;
padding: 12px; padding: 12px;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,0.35); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
} }
.lightbox-content img { .lightbox-content img {
max-width: 100%; max-width: 100%;
max-height: 80vh; max-height: 80vh;
display: block; display: block;
border-radius: 8px; border-radius: 8px;
} }
.lightbox-close { .lightbox-close {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
background: #1db4ac; background: #1db4ac;
color: #0f2f2d; color: #0f2f2d;
border: 1px solid #128b88; border: 1px solid #128b88;
border-radius: 999px; border-radius: 999px;
width: 32px; width: 32px;
height: 32px; height: 32px;
font-size: 16px; font-size: 16px;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
} }
.edit-modal { .edit-modal {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0,0,0,0.55); background: rgba(0, 0, 0, 0.55);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 110; z-index: 110;
} }
.edit-modal .edit-panel { .edit-modal .edit-panel {
background: #fffaf3; background: #fffaf3;
border: 1px solid #e3d4bd; border: 1px solid #e3d4bd;
border-radius: 12px; border-radius: 12px;
width: min(960px, 94vw); width: min(960px, 94vw);
max-height: 92vh; max-height: 92vh;
padding: 16px; padding: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
box-shadow: 0 20px 48px rgba(0,0,0,0.25); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
}
.edit-modal .edit-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.edit-modal .edit-body {
overflow: auto;
max-height: 70vh;
} }
.edit-modal .edit-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.edit-modal .edit-body { overflow: auto; max-height: 70vh; }
.panel-header { display: flex; justify-content: space-between; align-items: center; } .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.results-table { width: 100%; border-collapse: collapse; } .results-table {
.results-table th, .results-table td { padding: 10px; } width: 100%;
.results-table tr { border-bottom: 1px solid #e3d4bd; } border-collapse: collapse;
.results-table th { text-align: left; color: #7a6a53; font-size: 12px; letter-spacing: 0.3px; } }
.results-table .game-cell { display: flex; gap: 10px; align-items: center; min-width: 0; } .results-table th,
.results-table .thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e3d4bd; cursor: pointer; } .results-table td {
.results-table .game-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } padding: 10px;
.results-table .title-line { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.results-table .author-cell { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .results-table tr {
.results-table .muted.small { font-size: 12px; color: #7a6a53; } border-bottom: 1px solid #e3d4bd;
.thumb-open { background: #fffaf3; border: 1px solid #e3d4bd; color: #2c1c0d; border-radius: 6px; padding: 4px 8px; cursor: pointer; } }
.results-table th {
text-align: left;
color: #7a6a53;
font-size: 12px;
letter-spacing: 0.3px;
}
.results-table .game-cell {
display: flex;
gap: 10px;
align-items: center;
min-width: 0;
}
.results-table .thumb {
width: 72px;
height: 48px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #e3d4bd;
cursor: pointer;
}
.results-table .game-meta {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.results-table .title-line {
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.results-table .author-cell {
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.results-table .muted.small {
font-size: 12px;
color: #7a6a53;
}
.thumb-open {
background: #fffaf3;
border: 1px solid #e3d4bd;
color: #2c1c0d;
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
}