Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance Hero and Navbar components with cyberpunk effects and animations. Implement matrix rain background in Hero, add glitch effect to Navbar, and update styles. Remove unused assignment page styles.

Browse source
This commit is contained in:
Anton Kupriianov 2025-04-28 11:20:03 -07:00
parent 17f33651a6
commit 526b7bec18
12 changed files with 952 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

198
src/scss/page/_assignment.scss Normal file
View file

@ -0,0 +1,198 @@
// Assignment Page Styling
.assignment-page {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
section {
width: 100%;
max-width: 900px;
}
.assignment-header {
margin-bottom: 2rem;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 1rem;
h2 {
font-size: 3rem;
margin-bottom: 1rem;
color: #ffffff;
}
.due-date {
color: #c6c6c6;
font-size: 1.2rem;
}
}
.assignment-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 2rem;
.assignment-info {
margin-bottom: 2rem;
h3 {
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: #333;
}
.files-count {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.submission-note {
font-size: 0.9rem;
color: #666;
}
}
.file-upload-section {
margin-bottom: 2rem;
.upload-buttons {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
.file-upload-btn,
.record-audio-btn,
.record-video-btn {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.6rem 1rem;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s ease;
color: #333;
&:hover {
background-color: #e9e9e9;
}
}
}
.files-list {
background-color: #f9f9f9;
border-radius: 6px;
padding: 1rem;
h4 {
margin-bottom: 0.8rem;
font-size: 1rem;
}
ul {
list-style: none;
padding: 0;
.file-item {
display: flex;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
.file-name {
flex-grow: 1;
font-weight: 500;
}
.file-size {
color: #777;
margin: 0 1rem;
font-size: 0.8rem;
}
.remove-file-btn {
background-color: transparent;
border: none;
color: #ff5252;
cursor: pointer;
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
.comments-section {
margin-bottom: 2rem;
h4 {
margin-bottom: 0.8rem;
font-size: 1rem;
}
textarea {
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.8rem;
font-family: inherit;
resize: vertical;
&:focus {
outline: none;
border-color: #4a90e2;
}
}
}
.submission-buttons {
display: flex;
gap: 1rem;
.submit-btn,
.cancel-btn {
padding: 0.7rem 1.5rem;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.submit-btn {
background-color: #4a90e2;
color: white;
border: none;
&:hover {
background-color: #3a7bc8;
}
&:disabled {
background-color: #a0c3e8;
cursor: not-allowed;
}
}
.cancel-btn {
background-color: transparent;
border: 1px solid #ddd;
color: #666;
&:hover {
background-color: #f5f5f5;
}
}
}
}
}