SmartPast by @silvione87 - Codewith.it

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

Referenze

<q>Indica una parte di testo come citazione breve
minImposta il valore numerico o temporale minimo per un elemento input
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<em>Formatta il testo in corsivo/italico enfatizzato
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
valueValore alfanumerico o booleano contenuto in un elemento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Crunchyroll Replica

pagina America(2)

Pagina prova html

esercitazione5.html

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