IbrahimIbrahim285/index.html

## index.html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Erinnerungs-App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input[type="text"], input[type="datetime-local"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            background: #f8f9fa;
            margin: 8px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Erinnerungs-App</h1>
        <form id="reminderForm">
            <label for="text">Erinnerungstext:</label>
            <input type="text" id="text" placeholder="z.B. Meeting mit Team" required>

            <label for="datetime">Datum und Uhrzeit:</label>
            <input type="datetime-local" id="datetime" required>

            <label for="location">Ort:</label>
            <input type="text" id="location" placeholder="z.B. Büro, Konferenzraum 3" required>

            <button type="submit">Erinnerung hinzufügen</button>
        </form>

        <h2>Erinnerungen</h2>
        <ul id="reminderList"></ul>
    </div>

    <script>
        const reminderForm = document.getElementById('reminderForm');
        const reminderList = document.getElementById('reminderList');
        let reminders = [];

        // Funktion zum Hinzufügen einer Erinnerung
        reminderForm.addEventListener('submit', function(event) {
            event.preventDefault();

            const text = document.getElementById('text').value;
            const datetime = document.getElementById('datetime').value;
            const location = document.getElementById('location').value;

            if (text && datetime && location) {
                const reminder = {
                    text: text,
                    datetime: datetime,
                    location: location,
                    notified: false // Flag für Benachrichtigung
                };
                reminders.push(reminder);
                updateReminderList();
                reminderForm.reset();
            } else {
                alert('Bitte füllen Sie alle Felder aus.');
            }
        });

        // Funktion zur Aktualisierung der Erinnerungsliste
        function updateReminderList() {
            reminderList.innerHTML = '';
            reminders.forEach((reminder, index) => {
                const li = document.createElement('li');
                li.innerHTML = `
                    <strong>${reminder.text}</strong><br>
                    <small>${new Date(reminder.datetime).toLocaleString()}</small><br>
                    <small>Ort: ${reminder.location}</small>
                `;
                reminderList.appendChild(li);
            });
        }

        // Funktion zum Abspielen eines Klingeltons
        function playSound() {
            const audio = new Audio('erinnerung_ton.mp3'); // Pfad zur Musikdatei
            audio.play().catch(error => console.error('Fehler beim Abspielen der Musik:', error));
        }

        // Funktion zur Überprüfung der Erinnerungen
        function checkReminders() {
            const now = new Date();
            reminders.forEach((reminder, index) => {
                const reminderTime = new Date(reminder.datetime);
                const tenMinutesBefore = new Date(reminderTime.getTime() - 10 * 60000);

                // Benachrichtigung 10 Minuten vorher
                if (now >= tenMinutesBefore && now < reminderTime && !reminder.notified) {
                    playSound();
                    alert(Bald: ${reminder.text} am ${reminderTime.toLocaleString()} in ${reminder.location}!);
                    reminder.notified = true; // Markiere als benachrichtigt
                }

                // Benachrichtigung zur exakten Zeit
                if (now >= reminderTime) {
                    playSound();
                    alert(Jetzt: ${reminder.text} am ${reminderTime.toLocaleString()} in ${reminder.location}!);
                    reminders.splice(index, 1); // Erinnerung entfernen
                    updateReminderList();
                }
            });
        }

        // Erinnerungen jede Minute überprüfen
        setInterval(checkReminders, 60000);
    </script>
</body>
</html>

## main.js
// Empty

## package.json
{
  "name": "fine-knowledge-unlock-9wxr7",
  "productName": "fine-knowledge-unlock-9wxr7",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "ftsib",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "33.3.0"
  }
}

## preload.js
/**
 * The preload script runs before `index.html` is loaded
 * in the renderer. It has access to web APIs as well as
 * Electron's renderer process modules and some polyfilled
 * Node.js functions.
 *
 * https://www.electronjs.org/docs/latest/tutorial/sandbox
 */
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

## styles.css
/* styles.css */

/* Add styles here to customize the appearance of your app */
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Erinnerungs-App</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f4f4f4;
	margin: 0;
	padding: 20px;
	}
	h1 {
	color: #333;
	}
	.container {
	max-width: 600px;
	margin: 0 auto;
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	label {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
	}
	input[type="text"], input[type="datetime-local"] {
	width: 100%;
	padding: 8px;
	margin-bottom: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}
	button {
	background-color: #28a745;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}
	button:hover {
	background-color: #218838;
	}
	ul {
	list-style-type: none;
	padding: 0;
	}
	li {
	background: #f8f9fa;
	margin: 8px 0;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Erinnerungs-App</h1>
	<form id="reminderForm">
	<label for="text">Erinnerungstext:</label>
	<input type="text" id="text" placeholder="z.B. Meeting mit Team" required>

	<label for="datetime">Datum und Uhrzeit:</label>
	<input type="datetime-local" id="datetime" required>

	<label for="location">Ort:</label>
	<input type="text" id="location" placeholder="z.B. Büro, Konferenzraum 3" required>

	<button type="submit">Erinnerung hinzufügen</button>
	</form>

	<h2>Erinnerungen</h2>
	<ul id="reminderList"></ul>
	</div>

	<script>
	const reminderForm = document.getElementById('reminderForm');
	const reminderList = document.getElementById('reminderList');
	let reminders = [];

	// Funktion zum Hinzufügen einer Erinnerung
	reminderForm.addEventListener('submit', function(event) {
	event.preventDefault();

	const text = document.getElementById('text').value;
	const datetime = document.getElementById('datetime').value;
	const location = document.getElementById('location').value;

	if (text && datetime && location) {
	const reminder = {
	text: text,
	datetime: datetime,
	location: location,
	notified: false // Flag für Benachrichtigung
	};
	reminders.push(reminder);
	updateReminderList();
	reminderForm.reset();
	} else {
	alert('Bitte füllen Sie alle Felder aus.');
	}
	});

	// Funktion zur Aktualisierung der Erinnerungsliste
	function updateReminderList() {
	reminderList.innerHTML = '';
	reminders.forEach((reminder, index) => {
	const li = document.createElement('li');
	li.innerHTML = `
	<strong>${reminder.text}</strong><br>
	<small>${new Date(reminder.datetime).toLocaleString()}</small><br>
	<small>Ort: ${reminder.location}</small>
	`;
	reminderList.appendChild(li);
	});
	}

	// Funktion zum Abspielen eines Klingeltons
	function playSound() {
	const audio = new Audio('erinnerung_ton.mp3'); // Pfad zur Musikdatei
	audio.play().catch(error => console.error('Fehler beim Abspielen der Musik:', error));
	}

	// Funktion zur Überprüfung der Erinnerungen
	function checkReminders() {
	const now = new Date();
	reminders.forEach((reminder, index) => {
	const reminderTime = new Date(reminder.datetime);
	const tenMinutesBefore = new Date(reminderTime.getTime() - 10 * 60000);

	// Benachrichtigung 10 Minuten vorher
	if (now >= tenMinutesBefore && now < reminderTime && !reminder.notified) {
	playSound();
	alert(Bald: ${reminder.text} am ${reminderTime.toLocaleString()} in ${reminder.location}!);
	reminder.notified = true; // Markiere als benachrichtigt
	}

	// Benachrichtigung zur exakten Zeit
	if (now >= reminderTime) {
	playSound();
	alert(Jetzt: ${reminder.text} am ${reminderTime.toLocaleString()} in ${reminder.location}!);
	reminders.splice(index, 1); // Erinnerung entfernen
	updateReminderList();
	}
	});
	}

	// Erinnerungen jede Minute überprüfen
	setInterval(checkReminders, 60000);
	</script>
	</body>
	</html>
	{
	"name": "fine-knowledge-unlock-9wxr7",
	"productName": "fine-knowledge-unlock-9wxr7",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "ftsib",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "33.3.0"
	}
	}
	/**
	* The preload script runs before `index.html` is loaded
	* in the renderer. It has access to web APIs as well as
	* Electron's renderer process modules and some polyfilled
	* Node.js functions.
	*
	* https://www.electronjs.org/docs/latest/tutorial/sandbox
	*/
	window.addEventListener('DOMContentLoaded', () => {
	const replaceText = (selector, text) => {
	const element = document.getElementById(selector)
	if (element) element.innerText = text
	}

	for (const type of ['chrome', 'node', 'electron']) {
	replaceText(`${type}-version`, process.versions[type])
	}
	})
	/* styles.css */

	/* Add styles here to customize the appearance of your app */