z-control Landing Page

A modern, mobile-first landing page built with Ionic and Angular, highlighting the z-control open-source applications and developer tools. Designed for responsiveness, accessibility, and seamless user experience across all devices.

🌟 Features

Modern Design: Clean, professional interface following Ionic design principles
Dark Mode Support: Automatic light/dark theme switching with proper contrast
Mobile Responsive: Optimized for all devices from mobile to desktop
Multi-language Support for Privacy: Privacy policies available in German and English
Version Management: Built-in changelog system with user-friendly updates
Firebase Ready: Configured for Firebase hosting and deployment with Firebase Analytics
Accessibility: WCAG compliant with keyboard navigation and screen reader support
Firebase Analytics: Integrated event tracking and consent management (see details)
GitHub Analytics: Automated fetching and display of repository traffic (see details)

🚀 Live Demo

🔗 View Live Site on Google Firebase

📱 Showcased Applications

z-control QR Code App

Web App: Try directly in browser without installation
Android App: Available on Google Play Store
Source Code: GitHub Repository
Features: QR code generation, offline functionality, multi-language support, qr code settings, configured e-mail sending

z-control Translator App

Web App: Try directly in browser without installation
Android App: Available on Google Play Store — currently available through closed testing.
Source Code: GitHub Repository
Features: Multi-language translation, text-to-speech functionality, customizable translation preferences, generous free translation allowance

z-control Ionic Setup App

Web App: Try directly in browser without installation
Android App: Available on Google Play Store — currently available through internal testing.
Source Code: GitHub Repository
Features: Starter template for Ionic Apps, Quota management, built in help, and settings tab with accordions for configuration, Feedback, Change-log, Privacy Policy, and support

🛠️ Tech Stack

Framework: Ionic 8 with Angular 20
Language: TypeScript
Styling: SCSS with Ionic CSS Variables
Hosting: Firebase Hosting
Build Tool: Angular CLI
Icons: Ionicons
Firebase Analytics: Event tracking, consent management
Firebase Storage
GitHub Analytics API: Automated traffic data collection and display

📁 Project Structure

landing-page/
├─ .angular/
├─ .browserslistrc
├─ .editorconfig
├─ .env.local                   # local secrets (do NOT commit)
├─ .eslintrc.json
├─ .gitignore
├─ .vscode/
├─ angular.json
├─ capacitor.config.ts
├─ firebase-example.json
├─ ionic.config.json
├─ karma.conf.js
├─ LICENSE
├─ package-lock.json
├─ package.json
├─ README.md
├─ tsconfig.app.json
├─ tsconfig.json
├─ tsconfig.spec.json
├─ docs/                        # technical documentation
│  ├─ FIREBASE_ANALYTICS.md
│  ├─ FIREBASE_ANALYTICS_USED_IN_APP.md
│  ├─ FIREBASE_CONFIG_ENVIRONMENT_FILES.md
│  ├─ FIREBASE_DEPLOYMENT_GUIDE.md
│  ├─ FIREBASE_SECURITY.md
│  ├─ GITHUB_ANALYTICS_ARCHITECTURE.md
│  ├─ GITHUB_ANALYTICS_TEST_LOCALLY.md
│  ├─ GITHUB_ANALYTICS_EXPLANATION.md
│  ├─ PRIVACY_POLICY_ARCHITECTURE.md
│  ├─ unit-tests/
│  │  ├─ FIREBASE_ANALYTICS_SERVICE_TESTS.md
│  │  └─ UNIT_TESTING_PLAN.md
│  └─ ...other docs...
├─ functions/                   # Firebase Cloud Functions (GitHub Analytics)
│  ├─ lib/
│  ├─ node_modules/
│  ├─ src/
│  │  ├─ shared/
│  │  │  └─ GitHubConstants.ts
│  │  ├─ GitHubAnalytics.ts
│  │  ├─Index.ts
│  │  └─ testEnv.ts
│  └─ ...other files, like package.json, tsconfig.json...
├─ node_modules/
├─ shared/
│  └─ GitHubConstants.ts
├─ tools/
│  ├─ generate-env.js
│  ├─ backup_non_committed_files.ps1
│  ├─ backup_non_committed_files.txt
│  ├─ CHANGELOG_template.md
│  ├─ CHANGELOG_template DE.md
│  └─ README.md
└─ src/
   ├─ index.html
   ├─ index_DEBUG_FIREBASE-config.html  # local debug index (do NOT commit)
   ├─ global.scss
   ├─ main.html
   ├─ environments/
   │  ├─ environment.ts
   │  └─ environment.prod.ts
   ├─ assets/
   │  ├─ icon/
   │  ├─ app-docs/
   │  │  ├─ backup-scripts-app/
   │  │  │   └─ example folders and files
   │  │  └─ backend-functions-app/
   │  │     ├─ github-analytics-help.md
   │  │     └─ firebase-functions-multi-app-deploy-playbook.md
   │  ├─ logs/
   │  │  └─ change-logs/
   │  │        ├─ CHANGELOG_LANDING-PAGE.md
   │  │        ├─ CHANGELOG_MULTI-LANGUAGE-TRANSLATOR.md
   │  │        ├─ CHANGELOG_IONIC-SETUP.md
   │  │        └─ CHANGELOG_QR-CODE.md
   │  └─ privacy/
   │     └─ policies/
   │        ├─ landing-page/
   │        │  ├─ landing-page-en.html
   │        │  └─ landing-page-de.html
   │        ├─ multi-language-translator/
   │        │  ├─ multi-language-translator-en.html
   │        │  └─ multi-language-translator-de.html
   │        └─ qr-code-generator/
   │           ├─ qr-code-generator-en.html
   │           └─ qr-code-generator-de.html
   └─ app/
      ├─ app.component.ts
      ├─ app.component.html
      ├─ app.component.scss
      ├─ app.routes.ts
      ├─ home/                    # main landing page sources
      ├─ privacy/                 # privacy policy system
      │  ├─ components/
      │  │  └─ privacy-viewer/
      │  │     ├─ privacy-viewer.component.ts
      │  │     └─ privacy-viewer.component.html
      │  ├─ policies/
      │  │  └─ README.md
      │  └─ services/
      │     └─ privacy.service.ts
      ├─ services/                # app-wide / cross-cutting services
      │  ├─ firebase-analytics.service.ts
      │  ├─ firebase-firestore.service.ts
      │  ├─ local-storage.service.ts
      │  ├─ utils.service.ts
      ├─ ui/
      │  └─ components/
      │     ├─ backup-scripts-section/
      │     ├─ footer/
      │     ├─ github-analytics/
      │     ├─ header/
      │     ├─ markdown-viewer/
      │     ├─ multi-language-translator-section/
      │     ├─ ionic-setup-section/
      │     ├─ qr-code-generator-section/
      │     └─ index.ts
      └─ theme/                    # global styling (variables, global.scss)

Notes:

Real Firebase config and local debug index are not committed (.env.local, index_DEBUG_FIREBASE-config.html).
Privacy policy HTML templates are in src/assets/privacy/policies and loaded dynamically.
GitHub analytics architecture and Firestore integration are described in docs/GITHUB_ANALYTICS_ARCHITECTURE.md.

🔧 Development

Available Scripts

# generate environment files
npm run generate-env

# Development server
ionic serve

# Build for production
ionic build --prod

# Run tests
ng test

# Lint code
ng lint

Environment Configuration

Update version information and firebase config in .env.local and run npm run generate-env.

Here is the structure of the generated environment files (src/environments/environment.ts and src/environments/environment.prod.ts). This structure is committed in environment.template.ts, but the actual files with real values are generated locally and not committed to the repository.

// @ts-nocheck
export const environment = {
  production: __PRODUCTION__,
  version: {
    major: __MAJOR__,
    minor: __MINOR__,
    date: "__DATE__",
  },
  logAnalyticsInDevMode: __LOG_ANALYTICS_IN_DEV_MODE__,
  useFirebaseEmulator: __USE_FIREBASE_EMULATOR__,
  appSection: {
    QR: {
      maxInputLength: __appSection.QR.MAX_INPUT_LENGTH__,
    },
    MLT: {
      maxTargetLanguages: __appSection.MLT.MAX_TARGET_LANGUAGES__,
      maxFreeTranslateCharsPerMonth: __appSection.MLT.MAX_FREE_TRANSLATE_CHARS_PER_MONTH__,
      maxFreeTranslateCharsPerMonthForUser: __appSection.MLT.MAX_FREE_TRANSLATE_CHARS_PER_MONTH_FOR_USER__,
      maxFreeTranslateCharsBufferPerMonth: __appSection.MLT.MAX_FREE_TRANSLATE_CHARS_BUFFER_PER_MONTH__,
      maxInputLength: __appSection.MLT.MAX_INPUT_LENGTH__,
    },
    IS: {
      maxFeatureCharsTotalPerMonth: __appSection.IS.MAX_FEATURE_CHARS_TOTAL_PER_MONTH__,
      maxFeatureCharsUserPerMonth: __appSection.IS.MAX_FEATURE_CHARS_USER_PER_MONTH__,
    },
  },
  firebase: {
    apiKey: "__FIREBASE_API_KEY__",
    authDomain: "__FIREBASE_AUTH_DOMAIN__",
    projectId: "__FIREBASE_PROJECT_ID__",
    storageBucket: "__FIREBASE_STORAGE_BUCKET__",
    messagingSenderId: "__FIREBASE_MESSAGING_SENDER_ID__",
    appId: "__FIREBASE_APP_ID__",
    measurementId: "__FIREBASE_MEASUREMENT_ID__",
  },
};

Important: do NOT commit generated files

Keep real Firebase config in .env.local (listed in .gitignore).
Run npm run generate-env locally or in CI to create src/environments/environment*.ts.
Do not commit src/environments/environment*.ts or an index.html with real measurement ID.

🚀 Deployment

Firebase Hosting

Install Firebase CLI
```
npm install -g firebase-tools
```
Login to Firebase
```
firebase login
```
Initialize project (first time only)
```
firebase init hosting
```
Build and deploy
```
ionic build --prod
firebase deploy
```

For detailed deployment instructions, see docs/FIREBASE_DEPLOYMENT_GUIDE.md.

🎨 Customization

Theming

The app uses Ionic CSS Variables for consistent theming. Main theme files:

src/theme/variables.scss - Color definitions
src/global.scss - Global styles
Component-specific SCSS files for custom styling

Adding New Apps

Update home page content and routing

📚 Documentation & Changelogs

Technical Documentation

📖 For a complete overview and documentation index, see docs/README.md

Quick Links:

Dark Mode Guide - Implementation details for dark mode support
Firebase Security - Security configuration and best practices
Firebase Analytics Usage - Analytics integration and event tracking
Firebase Analytics Architecture - Service architecture and implementation
GitHub Analytics Architecture - Automated traffic data collection and Firestore integration
Privacy Policy Architecture - Multi-language privacy system details
Firebase Deployment Guide - Deployment procedures
Firebase Config Environment Files - Environment setup and secrets management
Unit Testing Plan - Comprehensive testing strategy
Firebase Analytics Service Tests - Detailed test documentation

Changelogs

Changelogs for each app are stored in src/assets/logs/change-logs/:

CHANGELOG_LANDING-PAGE.md — for the landing page
CHANGELOG_MULTI-LANGUAGE-TRANSLATOR.md — for the multi-language translator app
CHANGELOG_IONIC-SETUP.md — for the ionic setup app
CHANGELOG_QR-CODE.md — for the z-control QR Code Generator app

🧪 Testing

# Run unit tests
npm run test

# Check code coverage
npm run test:coverage

📱 Mobile App Development

This landing page showcases the z-control mobile application. The mobile app is now available on the Google Play Store. For updates and source code, see the z-control QR Code Generator app in GitHub repository.

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Hans Zöchbauer

Email: hans.zoechbauer@gmail.com
GitHub: zoechbauer

🙏 Acknowledgments

Built with Ionic Framework
Icons by Ionicons
Hosted on Firebase
Hosted on Google Play

Built with ❤️ using Ionic and Angular

Navigation Menu

Repository files navigation

z-control Landing Page

🌟 Features

🚀 Live Demo

📱 Showcased Applications

z-control QR Code App

z-control Translator App

z-control Ionic Setup App

🛠️ Tech Stack

📁 Project Structure

🔧 Development

Available Scripts

Environment Configuration

🚀 Deployment

Firebase Hosting

🎨 Customization

Theming

Adding New Apps

📚 Documentation & Changelogs

Technical Documentation

Changelogs

🧪 Testing

📱 Mobile App Development

🤝 Contributing

📄 License

👨‍💻 Author

🙏 Acknowledgments

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 95 Commits
.github		.github
.vscode		.vscode
docs		docs
src		src
tools		tools
.browserslistrc		.browserslistrc
.copilotignore		.copilotignore
.editorconfig		.editorconfig
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
angular.json		angular.json
capacitor.config.ts		capacitor.config.ts
ionic.config.json		ionic.config.json
karma.conf.js		karma.conf.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.eslint.json		tsconfig.eslint.json
tsconfig.json		tsconfig.json
tsconfig.spec.json		tsconfig.spec.json

Folders and files

Latest commit

History

Repository files navigation

z-control Landing Page

🌟 Features

🚀 Live Demo

📱 Showcased Applications

z-control QR Code App

z-control Translator App

z-control Ionic Setup App

🛠️ Tech Stack

📁 Project Structure

🔧 Development

Available Scripts

Environment Configuration

🚀 Deployment

Firebase Hosting

🎨 Customization

Theming

Adding New Apps

📚 Documentation & Changelogs

Technical Documentation

Changelogs

🧪 Testing

📱 Mobile App Development

🤝 Contributing

📄 License

👨‍💻 Author

🙏 Acknowledgments

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages