Merge pull request #14 from dbsectrainer/claude/convert-to-flutter-011CUvSoGyHQ3xAPnd9aEXnU

Author: dbsectrainer

.gitignore

@@ -15,7 +15,7 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
+# lib/ - commented out for Flutter compatibility
 lib64/
 parts/
 sdist/
@@ -65,3 +65,57 @@ coverage.xml
 
 # Mac
 .DS_Store
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Web related
+lib/generated_plugin_registrant.dart
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release
+
+# iOS/XCode related
+**/ios/**/*.mode1v3
+**/ios/**/*.mode2v3
+**/ios/**/*.moved-aside
+**/ios/**/*.pbxuser
+**/ios/**/*.perspectivev3
+**/ios/**/*sync/
+**/ios/**/.sconsign.dblite
+**/ios/**/.tags*
+**/ios/**/.vagrant/
+**/ios/**/DerivedData/
+**/ios/**/Icon?
+**/ios/**/Pods/
+**/ios/**/.symlinks/
+**/ios/**/profile
+**/ios/**/xcuserdata
+**/ios/.generated/
+**/ios/Flutter/App.framework
+**/ios/Flutter/Flutter.framework
+**/ios/Flutter/Flutter.podspec
+**/ios/Flutter/Generated.xcconfig
+**/ios/Flutter/ephemeral/
+**/ios/Flutter/app.flx
+**/ios/Flutter/app.zip
+**/ios/Flutter/flutter_assets/
+**/ios/Flutter/flutter_export_environment.sh
+**/ios/ServiceDefinitions.json
+**/ios/Runner/GeneratedPluginRegistrant.*

README.md

@@ -5,13 +5,15 @@
 
 A focused Modern Standard Arabic learning platform designed to take learners from foundational script and pronunciation to advanced professional fluency over a 40-day journey. The program offers modular daily lessons through interactive audio‑visual materials, YouTube video demonstrations, real‑world conversation practice, and culturally relevant topics—ideal for travelers, professionals, and global citizens.
 
+**Now available as a Flutter mobile application!** 📱
+
 ## Technical Skills Demonstrated
 
-### Web Development
-- Interactive, responsive web interface using HTML5, CSS3, and modern JavaScript
-- Dynamic content updates and micro‑interactions for enhanced user engagement
-- YouTube API integration for embedded instructional videos
-- Mobile‑first responsive design using media queries and grid layouts
+### Flutter/Mobile Development
+- Cross-platform mobile application (iOS & Android) using Flutter & Dart
+- Native performance with smooth animations and transitions
+- Offline-first architecture with local asset management
+- Material Design UI with custom theming and RTL support
 
 ### Python Development
 - Automated content generation scripts for lesson materials
@@ -42,23 +44,25 @@ A focused Modern Standard Arabic learning platform designed to take learners fro
 
 ## Project Structure
 
-- `index.html`: Main dashboard with daily progress overview
-- `day.html`: Daily lesson interface with audio, text, and exercises
-- `supplementary.html`: Additional learning resources and practice materials
-- `css/`: Stylesheets for the web interface
-  - `styles.css`: Main stylesheet
-  - `video-player.css`: Styles for the YouTube video player
-  - `native-speaker.css`: Styles for native speaker content
-- `js/`: JavaScript functionality and interactive features
-  - `script.js`: Core application logic
-  - `video-loader.js`: Loads YouTube videos for lessons
-  - `video-loader-supplementary.js`: Loads supplementary YouTube videos
-- `audio_files/`:
-  - Supplementary audio files in `supplementary/`
-- `text_files/`:
-  - Supplementary text files in `supplementary/`
+### Flutter Application
+- `lib/`: Flutter/Dart source code
+  - `main.dart`: Application entry point
+  - `models/`: Data models (LessonDay, SupplementaryContent, VideoInfo)
+  - `screens/`: UI screens (Dashboard, Lesson, Supplementary)
+  - `services/`: Business logic (ContentService, ProgressService)
+  - `utils/`: Utilities (AppTheme, constants)
+- `pubspec.yaml`: Flutter project configuration and dependencies
+- `analysis_options.yaml`: Dart/Flutter linting rules
+
+### Assets & Content
+- `audio_files/`: MP3 audio files for lessons
+  - `supplementary/`: Supplementary audio files
+- `text_files/`: Lesson content in three languages
+  - `supplementary/`: Supplementary text files
 - `videos.json`: YouTube video IDs for each daily lesson
 - `videos_supplementary.json`: IDs for supplementary videos
+
+### Content Generation (Python)
 - Python content generation scripts:
   - `arabic_phrases_days_01_07.py`: Phrases for days 1-7
   - `arabic_phrases_days_08_14.py`: Phrases for days 8-14
@@ -69,6 +73,11 @@ A focused Modern Standard Arabic learning platform designed to take learners fro
   - `video_search.py`: Tool for searching relevant videos
 - `requirements.txt`: Python package dependencies
 
+### Legacy Web Version
+- `index.html`, `day.html`, `supplementary.html`: Original web interface
+- `css/`: Web stylesheets
+- `js/`: Web JavaScript files
+
 ## Course Structure (40 Days)
 
 ### Foundations (Days 1–7)
@@ -133,14 +142,58 @@ A focused Modern Standard Arabic learning platform designed to take learners fro
 
 ## Development Setup
 
-### Requirements
+### Flutter Application Setup
+
+#### Requirements
+- Flutter SDK 3.0.0 or higher
+- Dart SDK 3.0.0 or higher
+- Android Studio / Xcode (for mobile deployment)
+- An emulator or physical device
+
+#### Installation
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/dbsectrainer/Arabic-Pathways.git
+   cd Arabic-Pathways
+   ```
+
+2. Install Flutter dependencies:
+   ```bash
+   flutter pub get
+   ```
+
+3. Run the app:
+   ```bash
+   # On a connected device or emulator
+   flutter run
+
+   # For specific platforms
+   flutter run -d android
+   flutter run -d ios
+   ```
+
+#### Building for Production
+```bash
+# Android APK
+flutter build apk
+
+# Android App Bundle
+flutter build appbundle
+
+# iOS
+flutter build ios
+```
+
+### Content Generation (Python)
+
+#### Requirements
 - Python 3.12+
 - Required Python packages:
   ```bash
   pip install gtts edge-tts pandas
   ```
 
-### Generate Lessons
+#### Generate Lessons
 ```bash
 # Generate content for days 1-40
 python arabic_phrases_days_01_07.py
@@ -153,36 +206,36 @@ python arabic_phrases_days_31_40.py
 python arabic_phrases_supplementary.py
 ```
 
-### Run the Site
+### Legacy Web Version
 Open `index.html` in any modern browser—no server setup required.
 
 ## Usage Guide
-1. Launch the dashboard and select your current day
-2. Listen to English explanations and native Arabic pronunciations
-3. Read along with transliteration and Arabic script
-4. Complete interactive exercises and script tracing drills
-5. Watch YouTube demonstrations for cultural and pronunciation context
-6. Earn daily badges and track your fluency progress
-
-## Storage
-Uses localStorage to save:
-- Completed lessons and last visited day
-- Audio playback preferences (e.g., speed, loop)
-- Custom notes and bookmarks
+1. Launch the app and view the dashboard with all 40 days
+2. Select any day to start learning
+3. Switch between Arabic, transliteration, and English views
+4. Listen to native Arabic pronunciation and English explanations
+5. Watch embedded YouTube videos for visual learning
+6. Mark lessons complete to track your progress
+7. Access supplementary content for additional practice
 
 ## Features
-- 40 days of Arabic phrases with audio and transliteration
-- Supplementary materials
-- Video and audio search
 
-## Getting Started
-1. Clone the repo
-2. Install requirements: `pip install -r requirements.txt`
-3. Run scripts as needed
+### Mobile App Features
+- **Offline Support**: All lessons and audio work without internet
+- **Progress Tracking**: Track completed lessons with persistent storage
+- **Trilingual Display**: Toggle between Arabic, transliteration, and English
+- **Audio Playback**: Built-in audio player for pronunciation practice
+- **Video Integration**: Embedded YouTube videos for each lesson
+- **Responsive Design**: Works on phones and tablets
+- **RTL Support**: Proper right-to-left text rendering for Arabic
 
 ## Running Tests
 ```bash
+# Python tests
 pytest
+
+# Flutter tests
+flutter test
 ```
 
 ## Contributing

analysis_options.yaml

@@ -0,0 +1,13 @@
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  rules:
+    - always_declare_return_types
+    - avoid_print
+    - prefer_const_constructors
+    - prefer_const_declarations
+    - prefer_const_literals_to_create_immutables
+    - prefer_final_fields
+    - prefer_final_locals
+    - sort_child_properties_last
+    - use_key_in_widget_constructors

fonts/README.md

@@ -0,0 +1,39 @@
+# Fonts Setup
+
+This Flutter application uses two font families:
+
+## Required Fonts
+
+### 1. Poppins
+- Download from [Google Fonts](https://fonts.google.com/specimen/Poppins)
+- Required weights:
+  - `Poppins-Regular.ttf` (400)
+  - `Poppins-Bold.ttf` (700)
+
+### 2. Noto Sans Arabic
+- Download from [Google Fonts](https://fonts.google.com/noto/specimen/Noto+Sans+Arabic)
+- Required weights:
+  - `NotoSansArabic-Regular.ttf` (400)
+  - `NotoSansArabic-Bold.ttf` (700)
+
+## Installation
+
+1. Download the font files from the links above
+2. Place them in this `fonts/` directory with the exact names listed
+3. The fonts should be automatically detected by Flutter via `pubspec.yaml`
+
+## Alternative: System Fonts
+
+If you prefer not to bundle fonts, you can modify `lib/utils/app_theme.dart` to use system fonts instead by removing or commenting out the `fontFamily` properties.
+
+## Font File Structure
+
+After setup, your directory should look like:
+```
+fonts/
+├── README.md (this file)
+├── Poppins-Regular.ttf
+├── Poppins-Bold.ttf
+├── NotoSansArabic-Regular.ttf
+└── NotoSansArabic-Bold.ttf
+```

lib/main.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'screens/dashboard_screen.dart';
+import 'utils/app_theme.dart';
+
+void main() {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  // Set preferred orientations
+  SystemChrome.setPreferredOrientations([
+    DeviceOrientation.portraitUp,
+    DeviceOrientation.portraitDown,
+    DeviceOrientation.landscapeLeft,
+    DeviceOrientation.landscapeRight,
+  ]);
+
+  runApp(const ArabicPathwaysApp());
+}
+
+class ArabicPathwaysApp extends StatelessWidget {
+  const ArabicPathwaysApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Arabic Pathways',
+      theme: AppTheme.lightTheme,
+      debugShowCheckedModeBanner: false,
+      home: const DashboardScreen(),
+    );
+  }
+}

lib/models/lesson_day.dart

@@ -0,0 +1,39 @@
+class LessonDay {
+  final int dayNumber;
+  final String title;
+  final String arabicContent;
+  final String transliterationContent;
+  final String englishContent;
+  final String arabicAudioPath;
+  final String englishAudioPath;
+  final String? videoId;
+  final String level;
+
+  LessonDay({
+    required this.dayNumber,
+    required this.title,
+    required this.arabicContent,
+    required this.transliterationContent,
+    required this.englishContent,
+    required this.arabicAudioPath,
+    required this.englishAudioPath,
+    this.videoId,
+    required this.level,
+  });
+
+  String get levelName {
+    if (dayNumber <= 7) return 'Level 1: Foundations';
+    if (dayNumber <= 14) return 'Level 2: Essential Daily Phrases';
+    if (dayNumber <= 22) return 'Level 3: Cultural & Social';
+    if (dayNumber <= 30) return 'Level 4: Professional Communication';
+    return 'Level 5: Advanced Fluency';
+  }
+
+  String get levelColor {
+    if (dayNumber <= 7) return '#4A90E2';
+    if (dayNumber <= 14) return '#50C878';
+    if (dayNumber <= 22) return '#FF6B6B';
+    if (dayNumber <= 30) return '#9B59B6';
+    return '#F39C12';
+  }
+}