Initial commit

.gitignore

@@ -0,0 +1,14 @@
+_site/
+.sass-cache/
+.jekyll-cache/
+.jekyll-metadata
+# Ignore folders generated by Bundler
+.bundle/
+vendor/
+
+# System files
+.DS_Store
+Thumbs.db
+ehthumbs.db
+Icon?
+._*

CNAME

@@ -0,0 +1 @@
+app.tirkio.com

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Tirkio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,131 @@
+# TiRKiO Finance
+
+**TiRKiO Finance** is a Progressive Web Application (PWA) designed for personal finance management. The app provides a seamless and native-like experience for users, combining the power of Onsen UI, Firebase, Jekyll, and GitHub Pages. Hosted on [app.tirkio.com](https://app.tirkio.com), this application enables users to track and manage their finances effectively.
+
+---
+
+## **Features**
+
+- **PWA Functionality**:
+  - Installable on mobile and desktop devices.
+  - Works offline with cached resources.
+- **Native-Like UI**:
+  - Built with Onsen UI for a polished iOS/Android experience.
+- **Firebase Integration**:
+  - Authentication for secure access.
+  - Cloud Firestore for storing and retrieving financial data.
+- **Responsive Design**:
+  - Fully functional on mobile, tablet, and desktop devices.
+- **Modular Navigation**:
+  - Tab-based navigation for key finance areas:
+    - Vermögen (Wealth)
+    - Rückställungen (Provisions)
+    - Anlagen (Investments)
+    - Vorsorge (Retirement)
+
+---
+
+## **Technology Stack**
+
+1. **Frontend**:
+   - [Onsen UI](https://onsen.io/): Native-like UI components.
+   - [Jekyll](https://jekyllrb.com/): Static site generator.
+2. **Backend**:
+   - [Firebase](https://firebase.google.com/): Authentication and Firestore database.
+3. **Hosting**:
+   - [GitHub Pages](https://pages.github.com/): Free and easy static site hosting.
+
+---
+
+## **Project Structure**
+
+```
+tirkio-finance/
+├── _layouts/               # Jekyll layouts
+│   └── default.html        # Main layout file
+├── assets/
+│   ├── css/
+│   │   └── style.css       # Custom styles
+│   ├── js/
+│   │   ├── firebase.js     # Firebase configuration and logic
+│   │   └── service-worker.js # Service worker for offline support
+├── index.html              # Main entry point
+├── manifest.json           # PWA manifest
+├── wealth.html             # Wealth section
+├── provisions.html         # Provisions section
+├── investments.html        # Investments section
+├── retirement.html         # Retirement section
+```
+
+---
+
+## **Setup and Installation**
+
+### **1. Clone the Repository**
+```bash
+git clone https://github.com/tirkio/app.tirkio.com.git
+cd app.tirkio.com
+```
+
+### **2. Firebase Setup**
+1. Go to [Firebase Console](https://console.firebase.google.com/) and create a project.
+2. Set up Authentication (e.g., Email/Password or Google Sign-In).
+3. Enable Cloud Firestore.
+4. Replace `firebase.js` configuration with your Firebase project credentials.
+
+```javascript
+const firebaseConfig = {
+  apiKey: "YOUR_API_KEY",
+  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
+  projectId: "YOUR_PROJECT_ID",
+  storageBucket: "YOUR_PROJECT_ID.appspot.com",
+  messagingSenderId: "YOUR_SENDER_ID",
+  appId: "YOUR_APP_ID"
+};
+```
+
+### **3. Deploy to GitHub Pages**
+1. Push the project to a GitHub repository.
+2. Go to the repository’s **Settings > Pages** and enable GitHub Pages.
+3. Set the branch to `main` and folder to `/root`.
+4. Your app will be live at `https://github.com/tirkio/app.tirkio.com.git`.
+
+---
+
+## **Usage**
+
+### **Key Sections**
+- **Vermögen** (Wealth):
+  - Track and manage your wealth.
+- **Rückställungen** (Provisions):
+  - Monitor provisions and obligations.
+- **Anlagen** (Investments):
+  - Analyze and plan your investments.
+- **Vorsorge** (Retirement):
+  - Plan for retirement securely.
+
+### **Offline Support**
+- The app uses a service worker (`service-worker.js`) to cache essential resources and enable offline functionality.
+
+---
+
+## **Contributing**
+
+We welcome contributions to enhance the app. To contribute:
+1. Fork the repository.
+2. Create a feature branch: `git checkout -b feature-name`.
+3. Commit your changes: `git commit -m 'Add feature'`.
+4. Push to the branch: `git push origin feature-name`.
+5. Open a Pull Request.
+
+---
+
+## **License**
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+---
+
+## **Contact**
+
+For any questions or feedback, feel free to reach out on GitHub.

_includes/footer.html

@@ -0,0 +1,6 @@
+<ons-tabbar swipeable position="auto">
+    <ons-tab label="Vermögen" icon="fa-home" page="wealth.html" active></ons-tab>
+    <ons-tab label="Rückstellungen" icon="fa-file-invoice" page="provisions.html"></ons-tab>
+    <ons-tab label="Anlagen" icon="fa-chart-line" page="investments.html"></ons-tab>
+    <ons-tab label="Vorsorge" icon="fa-user-shield" page="retirement.html"></ons-tab>
+  </ons-tabbar>

_layouts/default.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ page.title }} - TiRKiO Finance</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.0/dist/quartz/bootstrap.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
+    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
+    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"></script>
+    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
+    <link rel="stylesheet" href="/assets/css/style.css">
+</head>
+<body>
+    {{ content }}
+
+    {% include footer.html %}
+    <script>if ("serviceWorker" in navigator) {navigator.serviceWorker.register("/assets/js/service-worker.js");}</script>    <script type="module">
+        // Import Firebase functions (using type="module" for ES modules)
+        import { addWealthItem, getWealthItems } from '/assets/js/firebase.js';
+
+        document.addEventListener('init', function(event) {
+            const page = event.target;
+
+            if (page.id === 'home') {
+                page.querySelector('#wealthButton').onclick = function() {
+                    document.querySelector('#navigator').pushPage('wealth.html', { data: { title: 'Vermögen' } });
+                };
+            } else if (page.id === 'wealth') {
+                // Example of using Firebase functions (you'll need to adapt this)
+                const userId = 'CURRENT_USER_ID'; // You'd get this from Firebase Auth
+
+                // Load wealth items on page initialization
+                getWealthItems(userId)
+                    .then(items => {
+                        // Update the UI with the retrieved items
+                        console.log("Wealth items:", items);
+                        // ... your code to display the items in the 'wealth' page ...
+                    })
+                    .catch(error => {
+                        console.error("Error loading wealth items:", error);
+                    });
+
+                // Example of adding a new wealth item (you'd likely have a form for this)
+                const newItem = {
+                    description: 'Example Asset',
+                    value: 10000
+                };
+                addWealthItem(userId, newItem)
+                    .then(docId => {
+                        console.log("New wealth item added with ID:", docId);
+                        // ... update the UI to reflect the new item ...
+                    })
+                    .catch(error => {
+                        console.error("Error adding wealth item:", error);
+                    });
+            }
+        });
+    </script>
+<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script>
+  <script src="/assets/js/firebase-auth.js"></script>
+</body>
+</html>

assets/css/style.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
+  color: #333;
+}

assets/js/firebase-auth.js

@@ -0,0 +1,12 @@
+// Initialize Firebase (Ensure this is loaded before other scripts that use Firebase)
+const firebaseConfig = {
+  apiKey: "AIzaSyDINDQ8gwkSBgzQP1hwXsll6byIOWcKmtU",
+  authDomain: "tirkio-c3cdb.firebaseapp.com",
+  projectId: "tirkio-c3cdb",
+  storageBucket: "tirkio-c3cdb.firebasestorage.app",
+  messagingSenderId: "4329063605",
+  appId: "1:4329063605:web:88f807998de584a760aafc",
+  measurementId: "G-D259PRVH67"
+};
+
+firebase.initializeApp(firebaseConfig);

assets/js/firebase.js

@@ -0,0 +1,62 @@
+// Firebase-Konfiguration
+import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
+import { getFirestore, collection, addDoc, getDocs } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js";
+import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-analytics.js";
+import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyDINDQ8gwkSBgzQP1hwXsll6byIOWcKmtU",
+  authDomain: "tirkio-c3cdb.firebaseapp.com",
+  projectId: "tirkio-c3cdb",
+  storageBucket: "tirkio-c3cdb.firebasestorage.app",
+  messagingSenderId: "4329063605",
+  appId: "1:4329063605:web:88f807998de584a760aafc",
+  measurementId: "G-D259PRVH67"
+};
+
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+const analytics = getAnalytics(app);
+const auth = getAuth(app);
+
+// Authentifizierungsfunktionen
+export async function login(email, password) {
+  try {
+    const userCredential = await signInWithEmailAndPassword(auth, email, password);
+    return userCredential.user;
+  } catch (error) {
+    console.error("Login fehlgeschlagen:", error);
+    throw error;
+  }
+}
+
+export async function register(email, password) {
+  try {
+    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+    return userCredential.user;
+  } catch (error) {
+    console.error("Registrierung fehlgeschlagen:", error);
+    throw error;
+  }
+}
+
+export async function logout() {
+  try {
+    await signOut(auth);
+    console.log("Erfolgreich abgemeldet");
+  } catch (error) {
+    console.error("Abmeldung fehlgeschlagen:", error);
+    throw error;
+  }
+}
+
+// Funktionen für Vermögensdaten
+export async function addWealthItem(userId, item) {
+  const docRef = await addDoc(collection(db, ), item);
+  return docRef.id;
+}
+
+export async function getWealthItems(userId) {
+  const querySnapshot = await getDocs(collection(db, ));
+  return querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+}

assets/js/service-worker.js

@@ -0,0 +1,20 @@
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open('tirkio-cache-v1').then(cache => {
+      return cache.addAll([
+        '/index.html',
+        '/wealth.html',
+        '/assets/css/style.css',
+        '/assets/js/firebase.js'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request).then(response => {
+      return response || fetch(event.request);
+    })
+  );
+});

firestore.rules

@@ -0,0 +1,8 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /wealth/{document=**} {
+      allow read, write: if request.auth != null && request.auth.uid == resource.data.userId;
+    }
+  }
+}

index.html

@@ -0,0 +1,34 @@
+---
+layout: default
+title: TiRKiO Finance
+---
+
+<ons-navigator id="navigator"></ons-navigator>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    firebase.auth().onAuthStateChanged(function (user) {
+      if (user) {
+        document.querySelector("#navigator").resetToPage("home");
+      } else {
+        document.querySelector("#navigator").resetToPage("login.html");
+      }
+    });
+  });
+</script>
+
+<template id="home">
+  <ons-page id="home">
+    <ons-toolbar>
+      <div class="center">TiRKiO Finance</div>
+    </ons-toolbar>
+    <div style="text-align: center; margin-top: 50px">
+      <h1>Willkommen</h1>
+      <p>Erfasse und verwalte deine Finanzen</p>
+      <ons-button
+        onclick="document.querySelector('#navigator').pushPage('login.html')"
+        >Login</ons-button
+      >
+      <ons-button id="wealthButton">Vermögen</ons-button>
+    </div>
+  </ons-page>
+</template>