Initial commit
This commit is contained in:
372
web/static/css/styles.css
Normal file
372
web/static/css/styles.css
Normal file
@@ -0,0 +1,372 @@
|
||||
/* Neo-Brutalism Maze Generator Styles */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Neo-Brutalism Color Palette */
|
||||
--black: #000000;
|
||||
--white: #FFFFFF;
|
||||
--neon-yellow: #FFE500;
|
||||
--neon-pink: #FF10F0;
|
||||
--neon-cyan: #00F0FF;
|
||||
--neon-green: #39FF14;
|
||||
--gray-bg: #F5F5F5;
|
||||
--gray-dark: #333333;
|
||||
|
||||
/* Spacing */
|
||||
--border-thick: 6px;
|
||||
--border-medium: 4px;
|
||||
--shadow-offset: 8px;
|
||||
--spacing-sm: 12px;
|
||||
--spacing-md: 20px;
|
||||
--spacing-lg: 32px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Space Grotesk', monospace, sans-serif;
|
||||
background-color: var(--gray-bg);
|
||||
color: var(--black);
|
||||
line-height: 1.4;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background-color: var(--neon-yellow);
|
||||
border: var(--border-thick) solid var(--black);
|
||||
padding: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--black);
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* Main Grid Layout */
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 350px 1fr 400px;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.main-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Panels */
|
||||
.panel {
|
||||
background-color: var(--white);
|
||||
border: var(--border-thick) solid var(--black);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
background-color: var(--neon-cyan);
|
||||
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--black);
|
||||
}
|
||||
|
||||
.viz-panel {
|
||||
background-color: var(--white);
|
||||
box-shadow: calc(var(--shadow-offset) * -1) var(--shadow-offset) 0 var(--neon-pink);
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.results-panel {
|
||||
background-color: var(--neon-green);
|
||||
box-shadow: var(--shadow-offset) calc(var(--shadow-offset) * -1) 0 var(--black);
|
||||
max-height: 800px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: var(--border-medium) solid var(--black);
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
.control-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.control-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.text-input,
|
||||
.select-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-family: 'Space Grotesk', monospace, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
background-color: var(--white);
|
||||
border: var(--border-medium) solid var(--black);
|
||||
box-shadow: 4px 4px 0 var(--black);
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
}
|
||||
|
||||
.text-input:focus,
|
||||
.select-input:focus {
|
||||
outline: none;
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 var(--black);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
font-family: 'Space Grotesk', monospace, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
border: var(--border-medium) solid var(--black);
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, box-shadow 0.1s;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translate(4px, 4px);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translate(6px, 6px);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--neon-pink);
|
||||
box-shadow: 6px 6px 0 var(--black);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--neon-yellow);
|
||||
box-shadow: 4px 4px 0 var(--black);
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
background-color: var(--white);
|
||||
box-shadow: 4px 4px 0 var(--black);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Canvas Container */
|
||||
.canvas-container {
|
||||
background-color: var(--white);
|
||||
border: var(--border-medium) solid var(--black);
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#mazeCanvas {
|
||||
border: 2px solid var(--black);
|
||||
}
|
||||
|
||||
/* Info Box */
|
||||
.info-box {
|
||||
background-color: var(--neon-yellow);
|
||||
border: var(--border-medium) solid var(--black);
|
||||
padding: var(--spacing-md);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Results Content */
|
||||
.results-content {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
color: var(--gray-dark);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
background-color: var(--white);
|
||||
border: var(--border-medium) solid var(--black);
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.result-section h3 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 8px;
|
||||
border-bottom: 2px solid var(--black);
|
||||
}
|
||||
|
||||
.result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.result-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.result-table th,
|
||||
.result-table td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
border: 2px solid var(--black);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.result-table th {
|
||||
background-color: var(--neon-yellow);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.result-table tr:nth-child(even) {
|
||||
background-color: var(--gray-bg);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--white);
|
||||
border: var(--border-thick) solid var(--black);
|
||||
box-shadow: 12px 12px 0 var(--neon-pink);
|
||||
padding: var(--spacing-lg);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.file-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.file-item {
|
||||
padding: 12px;
|
||||
background-color: var(--gray-bg);
|
||||
border: var(--border-medium) solid var(--black);
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: var(--neon-cyan);
|
||||
}
|
||||
|
||||
/* Status Messages */
|
||||
.status-message {
|
||||
padding: var(--spacing-md);
|
||||
border: var(--border-medium) solid var(--black);
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: var(--neon-green);
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: var(--neon-pink);
|
||||
}
|
||||
|
||||
.status-info {
|
||||
background-color: var(--neon-cyan);
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid var(--black);
|
||||
border-radius: 0;
|
||||
border-top-color: transparent;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
Reference in New Issue
Block a user