Improve survey design

Author: DPKaragyozova21

My_path_team9/student/templates/survey.html

@@ -2,11 +2,65 @@
 
 {% block content %}
 <style>
+/* Survey Container */
 .survey-container {
   max-width: 900px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
+
+/* Progress Bar */
+.progress-container {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: var(--shadow-large);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.progress-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--dark-blue);
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--gradient-primary);
+  border-radius: 10px;
+  transition: width 0.5s ease;
+  position: relative;
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
 /* Main Survey Form */
 .survey-form {
   background: rgba(255, 255, 255, 0.95);
@@ -67,6 +121,8 @@
   font-size: 2rem;
   box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
 }
+
+/* Question Cards */
 .question-card {
   background: rgba(255, 255, 255, 0.8);
   border-radius: 20px;
@@ -77,67 +133,19 @@
   position: relative;
   overflow: hidden;
 }
-.question-number {
-  display: inline-block;
-  width: 35px;
-  height: 35px;
-  background: var(--gradient-primary);
-  color: white;
-  border-radius: 50%;
-  text-align: center;
-  line-height: 35px;
-  font-weight: 700;
-  font-size: 0.9rem;
-  margin-bottom: 1rem;
-  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
-}
-.submit-section {
-  text-align: center;
-  margin-top: 3rem;
-  padding-top: 2rem;
-  border-top: 2px solid rgba(59, 130, 246, 0.1);
-}
-
-.submit-button {
-  background: var(--gradient-primary);
-  color: white;
-  font-weight: 700;
-  font-size: 1.1rem;
-  padding: 1.2rem 3rem;
-  border: none;
-  border-radius: 50px;
-  cursor: pointer;
-  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
 
-.submit-button::before {
+.question-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-  transition: left 0.6s ease;
+  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
+  transition: left 0.5s ease;
 }
 
-.submit-button:hover::before {
-  left: 100%;
-}
 
-.submit-button:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.4);
-}
-
-.submit-button:active {
-  transform: translateY(-1px);
-}
 
 
 </style>