Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancing User Experience with Interactive Design and Colorful UI Updates #580

Merged
merged 1 commit into from
Nov 9, 2024
Merged

Enhancing User Experience with Interactive Design and Colorful UI Updates #580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 103 additions & 21 deletions src/app/components/practice/practice.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,52 @@
/* Host and container setup */
:host {
display: block;
background-color: #f0f4f8;
background: linear-gradient(135deg, #3498db, #9b59b6, #f39c12, #e74c3c); /* Gradient with multiple colors */
min-height: 100vh;
padding: 2rem 0;
}

/* Question Bank Container */
.question-bank-container {
max-width: 1500px;
margin-top: 100px;
padding: 20px;
background-color: #f8f9fa;
padding: 30px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
display: flex;
}
.question-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
background-color: #f7f7f7;
border-color: #9b59b6;
}


/* Sidebar styling */
.sidebar {
flex: 0 0 250px;
position: sticky;
top: 20px;
background-color: #333;
background: linear-gradient(135deg, #3498db, #f39c12); /* Blue and Orange Gradient */
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
margin-right: 20px;
transition: all 0.3s ease-in-out;
}

.sidebar:hover {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* Enhanced shadow effect on hover */
}

.sidebar h3 {
margin-bottom: 1rem;
color: white;
color: #ecf0f1;
font-size: 1.8rem;
text-transform: uppercase;
font-weight: 700;
}

.sidebar ul {
Expand All @@ -38,35 +56,85 @@

.sidebar li {
cursor: pointer;
padding: 0.5rem 0;
color: #3498db;
transition: color 0.3s;
padding: 0.8rem 0;
color: #ecf0f1;
transition: color 0.3s ease, background-color 0.3s ease, padding-left 0.3s ease;
font-size: 1.2rem;
display: flex;
align-items: center;
}

.sidebar li:hover {
color: #2980b9;
background-color: rgba(0, 0, 0, 0.1);
padding-left: 1rem;
transform: translateX(10px);
}


.sidebar li.active {
color: #fff;
background-color: #2c3e50; /* Darker background for active state */
border-left: 5px solid #f39c12; /* Active state border */
}

.sidebar li i {
margin-right: 10px;
font-size: 1.4rem;
}

/* Content area */
.content {
flex: 1;
}

/* Header Styles */
.header {
text-align: center;
margin-bottom: 20px;
}
.practice-heading {
font-size: 2rem;
color: #e74c3c;
transition: color 0.3s ease-in-out;
}

.practice-heading:hover {
color: #9b59b6;
}

.question-title:hover {
color: #9b59b6;
}


.title {
font-size: 2.5rem;
color: #333;
color: #3498db; /* Bright Blue */
margin-bottom: 10px;
}

.intro {
font-size: 1.2rem;
color: #666;
color: #7f8c8d;
}

/* Practice Your Skills Heading */
.practice-heading {
font-size: 2rem;
color: #e74c3c; /* Red */
text-align: center;
margin-bottom: 30px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s ease-in-out;
}

.practice-heading:hover {
color: #9b59b6; /* Purple on hover */
}

/* Search Bar Styles */
.search-container {
display: flex;
justify-content: center;
Expand All @@ -79,63 +147,77 @@
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s;
transition: border-color 0.3s ease-in-out;
}

.search-input:focus {
border-color: #3498db;
border-color: #9b59b6;
outline: none;
}

/* Loading Indicator */
.loading-indicator {
text-align: center;
font-size: 1.2rem;
color: #3498db;
color: #9b59b6;
margin: 2rem 0;
}

/* Grid Setup */
.question-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}

/* Question Card Styles */
.question-card {
background: #fff;
background: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, box-shadow 0.2s;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

.question-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
background-color: #f7f7f7; /* Light grey background on hover */
}

/* Question Titles */
.question-title {
font-size: 1.5rem;
color: #333;
color: #3498db; /* Bright Blue */
margin: 0 0 10px;
transition: color 0.3s ease-in-out;
}

.question-title:hover {
color: #9b59b6; /* Purple on hover */
}

/* Question Descriptions */
.question-description {
font-size: 1rem;
color: #555;
margin-bottom: 15px;
}

/* Start Solving Button */
.start-solving-button {
display: inline-block;
padding: 10px 15px;
background-color: #3498db;
background-color: #e74c3c;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.start-solving-button:hover {
background-color: #2980b9;
background-color: #9b59b6;
transform: translateY(-2px);
}

2 changes: 1 addition & 1 deletion src/app/components/practice/practice.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,4 @@ <h2 class="question-title">{{ question.title }}</h2>
</div>
</div>
</div>
</div>
</div>