Spaces:
Running
Running
| ```typescript | |
| import { Component, OnInit } from '@angular/core'; | |
| import { HttpClient } from '@angular/common/http'; | |
| @Component({ | |
| selector: 'app-tasks', | |
| templateUrl: './tasks.component.html', | |
| styleUrls: ['./tasks.component.css'] | |
| }) | |
| export class TasksComponent implements OnInit { | |
| tasks = [ | |
| { | |
| id: 1, | |
| title: 'Sketch Concept', | |
| description: 'Create initial sketches for the new character design', | |
| buttonText: 'Submit Sketch' | |
| }, | |
| { | |
| id: 2, | |
| title: 'Color Palette', | |
| description: 'Define the color scheme for the forest scene', | |
| buttonText: 'Upload Palette' | |
| }, | |
| { | |
| id: 3, | |
| title: 'Storyboard', | |
| description: 'Complete storyboard frames for sequence 5', | |
| buttonText: 'Send Storyboard' | |
| }, | |
| { | |
| id: 4, | |
| title: 'Background Art', | |
| description: 'Paint background for the mountain village scene', | |
| buttonText: 'Submit Art' | |
| }, | |
| { | |
| id: 5, | |
| title: 'Animation Check', | |
| description: 'Review and approve animation for main character', | |
| buttonText: 'Approve' | |
| }, | |
| { | |
| id: 6, | |
| title: 'Sound Design', | |
| description: 'Add sound effects to the flying sequence', | |
| buttonText: 'Upload Sounds' | |
| } | |
| ]; | |
| isLoggedIn = false; | |
| constructor(private http: HttpClient) {} | |
| ngOnInit() { | |
| // Check login status | |
| this.isLoggedIn = false; // Replace with actual auth check | |
| } | |
| completeTask(taskId: number) { | |
| if (this.isLoggedIn) { | |
| // Make API call with auth token | |
| this.http.post('/api/tasks/complete', { taskId }) | |
| .subscribe(response => { | |
| console.log('Task completed', response); | |
| }); | |
| } | |
| } | |
| } | |
| ``` | |
| These files create a complete Angular application with: | |
| 1. A responsive navbar with Home and Tasks links | |
| 2. Google login functionality (placeholder) | |
| 3. Profile display when logged in | |
| 4. Tasks page with disabled buttons when not logged in | |
| 5. Ghibli-inspired design with soft colors and animations | |
| 6. Responsive layout using Tailwind CSS | |
| Note: You'll need to: | |
| 1. Set up Angular CLI | |
| 2. Implement actual Google Sign-In | |
| 3. Create backend API endpoints | |
| 4. Set up proper routing | |
| 5. Add proper error handling and loading states | |
| Would you like me to add any additional components or features to this setup? |