From 0422fa6e122d1f114b3bee98186121f53e53d776 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Wed, 31 Dec 2025 20:15:48 +0300 Subject: [PATCH] fix --- .dockerignore | 1 - src/components/QuestionsModal.css | 435 ++++++++++++++++++++++++++++++ 2 files changed, 435 insertions(+), 1 deletion(-) create mode 100644 src/components/QuestionsModal.css diff --git a/.dockerignore b/.dockerignore index 907aca8..7f339d4 100644 --- a/.dockerignore +++ b/.dockerignore @@ -3,7 +3,6 @@ node_modules npm-debug.log* yarn-debug.log* yarn-error.log* -package-lock.json # Build output dist diff --git a/src/components/QuestionsModal.css b/src/components/QuestionsModal.css new file mode 100644 index 0000000..a01e44f --- /dev/null +++ b/src/components/QuestionsModal.css @@ -0,0 +1,435 @@ +.questions-modal-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(5px); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + padding: 20px; +} + +.questions-modal-content { + background: rgba(20, 20, 30, 0.95); + backdrop-filter: blur(20px); + border-radius: 20px; + padding: 30px; + max-width: 800px; + width: 100%; + max-height: 90vh; + overflow-y: auto; + border: 2px solid rgba(255, 215, 0, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); + position: relative; +} + +.questions-modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 25px; +} + +.questions-modal-title { + color: #ffd700; + font-size: 2rem; + margin: 0; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); +} + +.questions-modal-close { + background: rgba(255, 107, 107, 0.2); + color: #ff6b6b; + border: 2px solid rgba(255, 107, 107, 0.5); + border-radius: 50%; + width: 40px; + height: 40px; + font-size: 2rem; + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + flex-shrink: 0; +} + +.questions-modal-close:hover { + background: rgba(255, 107, 107, 0.4); + border-color: #ff6b6b; + transform: scale(1.1); +} + +.questions-modal-actions { + display: flex; + gap: 10px; + margin-bottom: 20px; +} + +.questions-modal-export-button, +.questions-modal-import-button { + flex: 1; + padding: 12px 20px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border: none; + border-radius: 12px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.questions-modal-export-button:hover, +.questions-modal-import-button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); +} + +.questions-modal-import-button { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); +} + +.questions-modal-import-button:hover { + box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4); +} + +.questions-modal-error { + background: rgba(255, 107, 107, 0.2); + color: #ff6b6b; + padding: 12px 15px; + border-radius: 8px; + margin-bottom: 20px; + border: 1px solid rgba(255, 107, 107, 0.5); + font-size: 0.9rem; +} + +.questions-modal-form { + background: rgba(255, 255, 255, 0.05); + border: 2px solid rgba(255, 215, 0, 0.2); + border-radius: 12px; + padding: 20px; + margin-bottom: 25px; +} + +.questions-modal-input { + width: 100%; + padding: 15px 20px; + border: 2px solid rgba(255, 215, 0, 0.3); + border-radius: 12px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + font-size: 1rem; + outline: none; + transition: all 0.3s ease; + margin-bottom: 20px; +} + +.questions-modal-input::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.questions-modal-input:focus { + border-color: #ffd700; + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); +} + +.questions-modal-answers { + margin-bottom: 20px; +} + +.questions-modal-answers-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + color: #fff; + font-size: 1.1rem; + font-weight: 500; +} + +.questions-modal-add-answer-button { + padding: 8px 15px; + background: rgba(78, 205, 196, 0.3); + color: #4ecdc4; + border: 2px solid rgba(78, 205, 196, 0.5); + border-radius: 8px; + font-size: 0.9rem; + cursor: pointer; + transition: all 0.3s ease; +} + +.questions-modal-add-answer-button:hover { + background: rgba(78, 205, 196, 0.5); + border-color: #4ecdc4; +} + +.questions-modal-answer-row { + display: flex; + gap: 10px; + margin-bottom: 10px; + align-items: center; +} + +.questions-modal-answer-input { + flex: 1; + padding: 12px 15px; + border: 2px solid rgba(255, 215, 0, 0.2); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + font-size: 0.95rem; + outline: none; + transition: all 0.3s ease; +} + +.questions-modal-answer-input::placeholder { + color: rgba(255, 255, 255, 0.4); +} + +.questions-modal-answer-input:focus { + border-color: #ffd700; + background: rgba(255, 255, 255, 0.15); +} + +.questions-modal-points-input { + width: 80px; + padding: 12px; + border: 2px solid rgba(255, 215, 0, 0.2); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + font-size: 0.95rem; + outline: none; + transition: all 0.3s ease; + text-align: center; +} + +.questions-modal-points-input:focus { + border-color: #ffd700; + background: rgba(255, 255, 255, 0.15); +} + +.questions-modal-remove-answer-button { + width: 35px; + height: 35px; + background: rgba(255, 107, 107, 0.3); + color: #ff6b6b; + border: 2px solid rgba(255, 107, 107, 0.5); + border-radius: 50%; + font-size: 1.3rem; + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + flex-shrink: 0; +} + +.questions-modal-remove-answer-button:hover { + background: rgba(255, 107, 107, 0.5); + border-color: #ff6b6b; + transform: scale(1.1); +} + +.questions-modal-form-buttons { + display: flex; + gap: 10px; +} + +.questions-modal-save-button { + flex: 1; + padding: 15px 30px; + background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); + color: white; + border: none; + border-radius: 12px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.questions-modal-save-button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4); +} + +.questions-modal-save-button:active { + transform: translateY(0); +} + +.questions-modal-cancel-button { + padding: 15px 30px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 12px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.questions-modal-cancel-button:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.5); +} + +.questions-modal-list { + margin-top: 25px; +} + +.questions-modal-list-title { + color: #ffd700; + font-size: 1.5rem; + margin-bottom: 15px; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); +} + +.questions-modal-items { + display: flex; + flex-direction: column; + gap: 10px; + max-height: 400px; + overflow-y: auto; +} + +.questions-modal-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px 20px; + background: rgba(255, 255, 255, 0.05); + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + transition: all 0.3s ease; +} + +.questions-modal-item:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 215, 0, 0.3); +} + +.questions-modal-item-content { + flex: 1; + min-width: 0; +} + +.questions-modal-item-text { + color: #fff; + font-size: 1.1rem; + font-weight: 500; + margin-bottom: 5px; + word-wrap: break-word; +} + +.questions-modal-item-info { + color: rgba(255, 255, 255, 0.6); + font-size: 0.9rem; +} + +.questions-modal-item-actions { + display: flex; + gap: 10px; + margin-left: 15px; + flex-shrink: 0; +} + +.questions-modal-edit-button, +.questions-modal-delete-button { + width: 40px; + height: 40px; + border-radius: 50%; + font-size: 1.2rem; + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + border: 2px solid; +} + +.questions-modal-edit-button { + background: rgba(78, 205, 196, 0.3); + color: #4ecdc4; + border-color: rgba(78, 205, 196, 0.5); +} + +.questions-modal-edit-button:hover { + background: rgba(78, 205, 196, 0.5); + border-color: #4ecdc4; + transform: scale(1.1); +} + +.questions-modal-delete-button { + background: rgba(255, 107, 107, 0.3); + color: #ff6b6b; + border-color: rgba(255, 107, 107, 0.5); +} + +.questions-modal-delete-button:hover { + background: rgba(255, 107, 107, 0.5); + border-color: #ff6b6b; + transform: scale(1.1); +} + +.questions-modal-empty { + color: rgba(255, 255, 255, 0.6); + text-align: center; + padding: 40px 20px; + font-size: 1.1rem; +} + +@media (max-width: 768px) { + .questions-modal-content { + padding: 20px; + max-height: 95vh; + } + + .questions-modal-title { + font-size: 1.5rem; + } + + .questions-modal-close { + width: 35px; + height: 35px; + font-size: 1.5rem; + } + + .questions-modal-actions { + flex-direction: column; + } + + .questions-modal-answer-row { + flex-wrap: wrap; + } + + .questions-modal-points-input { + width: 100%; + } + + .questions-modal-form-buttons { + flex-direction: column; + } + + .questions-modal-item { + flex-direction: column; + align-items: flex-start; + } + + .questions-modal-item-actions { + margin-left: 0; + margin-top: 10px; + width: 100%; + justify-content: flex-end; + } +} +