SmartPast by @silvione87 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

relServe a definire la relazione tra il documento e una risorsa.
<tfoot>Definisce il footer o sezione inferiore di una tabella.
requiredRende obbligatorio un campo di input
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
formmethodDefinisce il metodo di invio dei dati oltre a method
<textarea>Area di testo libero espandibile per form HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Curriculum HTML

Ethical hacking

Heads Or Tails Random Tally

esercizio:sito web

Heads Or Tails Random Tally

Prova lezione 1

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartPast</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>SmartPast</h1>
        <div class="aggiungi-farmaco">
            <h2>Aggiungi Farmaco</h2>
            <label for="nome">Nome:</label>
            <input type="text" id="nome" name="nome">
            <label for="ora">Ora:</label>
            <input type="time" id="ora" name="ora">
            <label for="colore">Colore:</label>
            <input type="color" id="colore" name="colore" value="#007bff">
            <button id="aggiungi">Aggiungi</button>
        </div>
        <div class="lista-farmaci">
            <h2>Farmaci</h2>
            <ul id="farmaci-list"></ul>
        </div>
        <div class="notifica" id="notifica">
            <p id="notifica-titolo"></p>
            <p id="notifica-descrizione"></p>
            <button id="conferma">Presa</button>
            <button id="sveglia">Sveglia snoozata</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

body {
    font-family:'Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif'
    

    background-color: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #333;
}

.container {
    width: 80%;
    margin: 40px auto;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 2.5rem;
    color: #fb3604;
    text-align: center;
}

.aggiungi-farmaco {
    margin-bottom: 30px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="time"],
input[type="color"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #f13a3a;
    border-radius: 5px;
    box-sizing: border-box;
}

input[type="text"],
input[type="time"]:focus,
input[type="color"]:focus {
    outline: none;
    border-color: #d10808;
}

button {
    padding: 12px 20px;
    background-color: #c44343;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #b12e2e;
}

.lista-farmaci {
    margin-bottom: 30px;
}

.lista-farmaci h2 {
    color: #007bff;
}

.farmaco {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.farmaco .nome {
    flex-grow: 1;
    margin-right: 10px;
}

.farmaco .colore {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.notifica {
    display: none;
    background-color: #fefefe;

const nomeInput = document.getElementById('nome');
const oraInput = document.getElementById('ora');
const coloreInput = document.getElementById('colore');
const aggiungiButton = document.getElementById('aggiungi');
const farmaciList = document.getElementById('farmaci-list');
const notificaTitolo = document.getElementById('notifica-titolo');
const notificaDescrizione = document.getElementById('notifica-descrizione');
const confermaButton = document.getElementById('conferma');
const svegliaButton = document.getElementById('sveglia');

let farmaci = [];
let notificaFarmaco = null;

// Carica i farmaci salvati nel localStorage
caricaFarmaci();

// Aggiunge un nuovo farmaco
aggiungiButton.addEventListener('click', aggiungiFarmaco);

// Gestisce il click su un farmaco nella lista
farmaciList.addEventListener('click', gestisciClickFarmaco);

// Gestisce la conferma dell'assunzione del farmaco
confermaButton.addEventListener('click', confermaPresa);

// Gestisce il posticipo della notifica
svegliaButton.addEventListener('click', svegliaSnooze);

function caricaFarmaci() {
    const farmaciJSON = localStorage.getItem('farmaci');
    if (farmaciJSON) {
        farmaci = JSON.parse(farmaciJSON);
        popolaListaFarmaci();
    }
}

function salvaFarmaci() {
    localStorage.setItem('farmaci', JSON.stringify(farmaci));
}

function aggiungiFarmaco() {
    const nome = nomeInput.value.trim();
    const ora = oraInput.value;
    const colore = coloreInput.value;

    if (!nome || !ora || !colore) {
        alert('Compila tutti i campi.');
        return;
    }

    const nuovoFarmaco = {
        id: Math.random().toString(36).substr(2, 9),
        nome,
        ora,
        colore
    };

    farmaci.push(nuovoFarmaco);
    salvaFarmaci();
    popolaListaFarmaci();

    nomeInput.value = '';
    oraInput.value = '';
    coloreInput.value = '#007bff';
}

function popolaListaFarmaci() {
    farmaciList.innerHTML = '';
    farmaci.forEach(farmaco => {
        const li = document.createElement('li');
        li.classList.add('farmaco');
        li.dataset.id = farmaco.id;
        li.innerHTML = `
            <span class="nome" style="color: <span class="math-inline">\{farmaco\.colore\}"\></span>{farmaco.nome}</span>
            <span class="colore" style="background-color: ${farmaco.colore}"></span>
        `;
        farmaciList.appendChild(li);
    });
}

function gestisciClickFarmaco(event) {
    const farmacoId = event.target.closest('.farmaco').dataset.id;
    const farmaco = farmaci.find(farmaco => farmaco.id === farmacoId);

    if (farmaco) {
        mostraNotifica(farmaco);
        notificaFarmaco = farmaco;
    }
}

function mostraNotifica(farmaco) {
    notificaTitolo.textContent = `Promemoria: ${farmaco.nome}`;
    notificaDescrizione.textContent = `Assumi il tuo farmaco alle ${farmaco.ora}.`;
    notifica.style.display = 'block';

    // Imposta un allarme per il momento dell'assunzione del farmaco
    const oraNotifica = new Date();
    oraNotifica.setHours(farmaco.ora.split(':')[0]);
    oraNotifica.setMinutes(farmaco.ora.split(':')[1]);

    if (oraNotifica < Date.now()) {
        oraNotifica.setDate(oraNotifica.getDate() + 1);
    }

    if (window.Notification && Notification.permission === 'granted') {
        const notification = new Notification(`Promemoria: ${farmaco.nome}`, {
            body: `Assumi il tuo farmaco alle ${farmaco.ora}.`,
            tag: 'promemoria-pillole'
        });
        notification.onclick = () => {
            mostraNotifica(farmaco);
        };
        notification.onclose = () => {
            if (notificaFarmaco && notificaFarmaco.id === farmaco.id) {
                confer