ai6-m2/docs/roles/graphics-designer-artyom.md

ARTYOM - GRAPHICS DESIGNER MISSION Your Role: Visual Designer | Your File: static/style.css

💡 What You're Building: You're making the game look amazing with Russian themes!

📋 LESSON 1-2: SETUP & RUSSIAN COLOR THEME

Step 1: Fork and Clone (10 minutes)

1. Go to: https://gitea.techshare.cc/technolyceum/ai6-m2
2. Click the "Fork" button (creates your copy)
3. Copy your forked repository URL
4. Open Terminal and type: git clone [YOUR-FORKED-URL-HERE] cd ai6-m2 git checkout -b artyom-graphics-work

Step 2: Enhance the Russian Color Theme (30 minutes) Open static/style.css and find the body section.

DELETE these lines:

body { background: #1a2a6c; color: white; min-height: 100vh; padding: 20px; }

TYPE THIS instead:

body { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); color: white; min-height: 100vh; padding: 20px; font-family: 'Arial', 'Helvetica', sans-serif; }

Step 3: Make the Header Look Russian (20 minutes) Find the header section.

DELETE these lines:

header { text-align: center; margin-bottom: 20px; padding: 15px; background: #b21f1f; border-radius: 8px; }

TYPE THIS instead:

/* Keep container styling from current implementation */ .container { background: rgba(255, 255, 255, 0.9); color: #333; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin: 15px 0; }

h1 { color: #1a237e; text-align: center; font-size: 2.5rem; margin: 20px 0; }

Save and push: git add static/style.css git commit -m "feat: enhanced Russian color theme" git push origin artyom-graphics-work

📋 LESSON 3-4: GAME ELEMENTS STYLING

Step 4: Style the Question Container (25 minutes) Find the question-container section.

DELETE these lines:

.question-box { background: rgba(255, 255, 255, 0.9); color: #333; padding: 15px; border-radius: 8px; margin: 15px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

.question { font-size: 1.4rem; margin-bottom: 15px; text-align: center; font-weight: bold; }

TYPE THIS instead:

.question-container { background: rgba(255, 255, 255, 0.15); padding: 25px; border-radius: 15px; margin-bottom: 25px; border: 1px solid rgba(253, 187, 45, 0.3); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); }

.question { font-size: 1.4rem; margin-bottom: 25px; text-align: center; font-weight: bold; color: #fdbb2d; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }

.question-number { color: #fdbb2d; font-size: 1.1rem; margin-bottom: 15px; text-align: center; font-weight: bold; }

Step 5: Make Answer Buttons Beautiful (25 minutes) Find the option styling.

DELETE these lines:

.option { background: #2196f3; color: white; padding: 12px; border-radius: 5px; cursor: pointer; text-align: center; margin: 5px 0; transition: background 0.3s; font-weight: bold; }

.option:hover { background: #1976d2; }

.option.correct { background: #4caf50; }

.option.wrong { background: #f44336; }

TYPE THIS instead:

.option { background: linear-gradient(135deg, #fdbb2d, #e6a923); color: #1a2a6c; padding: 18px; border-radius: 10px; cursor: pointer; text-align: center; font-weight: bold; border: 2px solid #1a2a6c; transition: all 0.3s ease; font-size: 1.1rem; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); }

.option:hover { background: linear-gradient(135deg, #e6a923, #fdbb2d); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

.option:active { transform: translateY(1px); }

Save and push: git add static/style.css git commit -m "feat: enhanced question and option styling" git push origin artyom-graphics-work

📋 LESSON 5-6: LIFELINES & FINAL TOUCHES

Step 6: Style Lifelines and Game Over Screen (40 minutes) Find the lifelines section.

DELETE these lines:

.lifelines { background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px; }

.lifeline-buttons { display: flex; gap: 10px; justify-content: center; }

.lifeline-btn { background: #1a2a6c; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }

TYPE THIS instead:

.result.correct { background: #c8e6c9; color: #2e7d32; padding: 10px; border-radius: 5px; margin: 10px 0; }

.result.incorrect { background: #ffcdd2; color: #c62828; padding: 10px; border-radius: 5px; margin: 10px 0; }

.lifeline { background: #ff9800; color: white; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; display: block; margin: 15px auto; font-weight: bold; transition: background 0.3s; }

.lifeline:hover { background: #f57c00; }

.lifeline:disabled { background: #ccc; cursor: not-allowed; }

Step 7: Make Game Over Screen Epic (20 minutes) Find the game-over-screen section.

DELETE these lines:

.game-over-screen { text-align: center; padding: 30px; }

TYPE THIS instead:

.game-over-screen { text-align: center; padding: 30px; background: white; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin: 15px 0; }

.game-over-screen h2 { color: #d32f2f; font-size: 2rem; margin-bottom: 15px; }

.game-over-screen p { font-size: 1.2rem; margin-bottom: 20px; color: #333; }

.game-over-screen button { background: #d32f2f; color: white; border: none; padding: 12px 24px; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background 0.3s; }

.game-over-screen button:hover { background: #b71c1c; }

Final push: git add static/style.css git commit -m "feat: completed Russian-themed visual design" git push origin artyom-graphics-work

✅ ARTYOM'S COMPLETION CHECKLIST ☐ Russian flag colors used throughout (white, blue, red, gold) ☐ Gradient backgrounds look professional ☐ Buttons have hover effects and animations ☐ Game elements have shadows and borders ☐ Text is readable with good contrast ☐ Game over screen looks exciting ☐ All code pushed to your branch ☐ Created Pull Request for teacher to review

🎉 Congratulations Artyom! You made the game look amazing!