Skip to content

This is a landing page for the z-control QR code generator and other future applications. Here you can find information about our apps, how to use them, and how to contact us.

License

Notifications You must be signed in to change notification settings

zoechbauer/z-control-landing-page

Repository files navigation

z-control Landing Page

A modern, responsive landing page built with Ionic Angular, showcasing the z-control QR Code app and serving as a central hub for future applications.

🌟 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: 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
  • Accessibility: WCAG compliant with keyboard navigation and screen reader support

πŸš€ Live Demo

πŸ”— View Live Site

πŸ“± Showcased Applications

z-control QR Code App

πŸ› οΈ Tech Stack

  • Framework: Ionic 8 with Angular 18
  • Language: TypeScript
  • Styling: SCSS with Ionic CSS Variables
  • Hosting: Firebase Hosting
  • Build Tool: Angular CLI
  • Icons: Ionicons

πŸ“ Project Structure

landing-page/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ app/
β”‚   β”‚   β”œβ”€β”€ home/              # Main landing page
β”‚   β”‚   β”œβ”€β”€ privacy/           # Privacy policy system
β”‚   β”‚   β”œβ”€β”€ services/          # Application services
β”‚   β”‚   └── ui/
β”‚   β”‚       └── components/    # Reusable UI components
β”‚   β”œβ”€β”€ assets/                # Static assets (including logs/change-logs)
β”‚   β”‚   └── logs/
β”‚   β”‚       └── change-logs/  # Changelogs for each app (e.g., CHANGELOG_LANDING-PAGE.md, CHANGELOG_QR-CODE.md)
β”‚   β”œβ”€β”€ environments/         # Environment configurations
β”‚   └── theme/                # Global styling
β”œβ”€β”€ tools/                    # Project-wide dev tools (e.g. CHANGELOG-Templates)
β”œβ”€β”€ docs/                     # Technical documentation
β”œβ”€β”€ firebase.json            # Firebase configuration
└── README.md                # This file

🏁 Quick Start

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn
  • Ionic CLI

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/z-control-landing-page.git
    cd z-control-landing-page
  2. Install dependencies

    npm install
  3. Install Ionic CLI (if not already installed)

    npm install -g @ionic/cli
  4. Start development server

    ionic serve
  5. Open in browser

    http://localhost:8100
    

πŸ”§ Development

Available Scripts

# Development server
ionic serve

# Build for production
ionic build

# Run tests
ng test

# Lint code
ng lint

# Build and preview
ionic build && ionic serve --prod

Environment Configuration

Update version information in src/environments/environment.ts:

export const environment = {
  production: false,
  version: {
    major: 1,
    minor: 1,
    date: "2025-07-01",
  },
};

πŸš€ Deployment

Firebase Hosting

  1. Install Firebase CLI

    npm install -g firebase-tools
  2. Login to Firebase

    firebase login
  3. Initialize project (first time only)

    firebase init hosting
  4. Build and deploy

    ionic build
    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 Content

  1. Update changelog: Modify src/services/changelog-simple.service.ts
  2. Add new apps: Update home page content and routing
  3. Customize styling: Use Ionic CSS variables for theme consistency

πŸ“š Documentation & Changelogs

Technical documentation is available in the /docs folder:

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

  • CHANGELOG_LANDING-PAGE.md β€” for the landing page
  • CHANGELOG_QR-CODE.md β€” for the z-control QR Code Generator app

πŸ§ͺ Testing

# Run unit tests
ng test

# Run e2e tests
ng e2e

# Check code coverage
ng test --code-coverage

πŸ“± Mobile App Development

This landing page showcases the z-control ion-title { text-align: center; width: 100%; justify-content: center; display: flex; } mobile application. The mobile app is now available on the Google Play Store (currently in internal testing). For updates and source code, see the z-control QR Code Generator app in GitHub repository.

🀝 Contributing

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

πŸ“„ License

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

πŸ‘¨β€πŸ’» Author

Hans ZΓΆchbauer

πŸ™ Acknowledgments

πŸ“Š Project Status

  • βœ… Landing Page: Complete and deployed
  • βœ… Privacy Policy System: Complete
  • βœ… Dark Mode Support: Complete
  • βœ… Firebase Hosting: Complete
  • πŸ”„ Mobile App: in testing mode
  • πŸ”„ Google Play Store: in testing mode

Built with ❀️ using Ionic and Angular

About

This is a landing page for the z-control QR code generator and other future applications. Here you can find information about our apps, how to use them, and how to contact us.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published