app first commit

app/src/App.css

@@ -0,0 +1,28 @@
+.floating-tab-bar {
+  /* position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 500px; */
+  height: 60px;
+
+  background: #ffffff10;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+
+  border-top: 3px solid #ffffff20;
+
+  /* border-radius: 9999999999999px; */
+  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  padding: 0 10px;
+  z-index: 999;
+
+  --background: transparent;
+  --border: none;
+}

app/src/App.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders without crashing', () => {
+  const { baseElement } = render(<App />);
+  expect(baseElement).toBeDefined();
+});

app/src/App.tsx

@@ -0,0 +1,54 @@
+import './App.css';
+import './theme/variables.css';
+import '@ionic/react/css/core.css';
+import '@ionic/react/css/display.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/palettes/dark.system.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/typography.css';
+
+import { IonApp, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, setupIonicReact } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { list, musicalNote, search } from 'ionicons/icons';
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+import { currentTrackAtom } from './atoms';
+import { mocks } from './mocks';
+import Tab1 from './pages/Tab1';
+import Tab2 from './pages/Tab2';
+import Tab3 from './pages/Tab3';
+import Tab from './pages/Tab3';
+
+/* Core CSS required for Ionic components to work properly */
+/* Basic CSS for apps built with Ionic */
+/* Optional CSS utils that can be commented out */
+/* Dark mode */
+/* Theme variables */
+/* Custom CSS */
+setupIonicReact();
+
+const App: React.FC = () => {
+  const [current, setCurrent] = useAtom(currentTrackAtom)
+
+  useEffect(() => {
+    setCurrent(mocks.nowPlaying)
+  }, [])
+
+  return (
+    <IonApp>
+      {/* {current && <Background imageUrl={current.coverUrl} color={current.color}/>} */}
+      <IonReactRouter>
+        <Tab />
+      </IonReactRouter>
+    </IonApp>
+  );
+};
+
+export default App;

app/src/atoms/index.tsx

@@ -0,0 +1,5 @@
+import { atom } from 'jotai';
+import { NowPlayingData } from '../mocks';
+
+export const themeAtom = atom<'light' | 'dark' | 'red'>('light');
+export const currentTrackAtom = atom<NowPlayingData>()

app/src/components/Backendtest.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+
+const FetchData = () => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch("https://fbbb261497e3.ngrok-free.app/api/data", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({}), // Body vuoto
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((json) => {
+        setData(json);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <p>Caricamento in corso...</p>;
+  if (error) return <p>Errore: {error}</p>;
+
+  return (
+    <div>
+      <h1>Risultato dalla POST</h1>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};
+
+export default FetchData;

app/src/components/Background.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+type BackgroundProps = {
+  imageUrl: string;
+  color: string;
+};
+
+const Background: React.FC<BackgroundProps> = ({ imageUrl, color }) => {
+  return (
+    <>
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          backgroundImage: `url(${imageUrl})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          filter: "blur(30px)",
+          zIndex: -2,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          backgroundColor: "rgba(0, 0, 0, 0.5)", // overlay nero semitrasparente
+          zIndex: -1,
+        }}
+      />
+    </>
+  );
+};
+
+export default Background;

app/src/components/ExploreContainer.css

@@ -0,0 +1,24 @@
+.container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+.container a {
+  text-decoration: none;
+}

app/src/components/ExploreContainer.tsx

@@ -0,0 +1,16 @@
+import './ExploreContainer.css';
+
+interface ContainerProps {
+  name: string;
+}
+
+const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
+  return (
+    <div className="container">
+      <strong>{name}</strong>
+      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+    </div>
+  );
+};
+
+export default ExploreContainer;

app/src/components/NowPlayingDisc.css

@@ -0,0 +1,54 @@
+/* @keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+} */
+
+.now-playing-disc {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+}
+
+.cover-circle {
+  animation: spin 8s linear infinite;
+  width: 220px;
+  height: 220px;
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+  box-shadow: var(--box-shadow, 0 4px 10px rgba(0, 0, 0, 0.3));
+  margin-bottom: 16px;
+  outline: 4px solid rgba(218, 218, 218, 0.05);
+}
+
+.song-info {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.song-now-playing {
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+}
+
+.song-title {
+  font-size: var(--title-font-size, 1.25rem);
+  font-weight: bold;
+  color: var(--text);
+}
+
+.song-artist {
+  font-size: var(--artist-font-size, 1rem);
+  font-weight: 800;
+  color: var(--text-shy);
+}

app/src/components/NowPlayingDisc.tsx

@@ -0,0 +1,28 @@
+import "./NowPlayingDisc.css";
+
+import { IonText } from "@ionic/react";
+import React from "react";
+
+import { NowPlayingData } from "../mocks";
+
+const NowPlayingDisc: React.FC<NowPlayingData> = ({
+  coverUrl,
+  title,
+  artist,
+}) => {
+  return (
+    <div className="now-playing-disc">
+      <div
+        className="cover-circle"
+        style={{ backgroundImage: `url(${coverUrl})` }}
+      />
+      <div className="song-info">
+        {/* <IonText className="song-now-playing">Now Playing</IonText> */}
+        <IonText className="song-title">{title}</IonText>
+        <IonText className="song-artist">{artist}</IonText>
+      </div>
+    </div>
+  );
+};
+
+export default NowPlayingDisc;

app/src/components/NowPlayingTab.css

@@ -0,0 +1,69 @@
+.now-playing-cover {
+  margin-top: 25px;
+  margin-left: 25px;
+  width: calc(100% - 50px);
+  height: auto;
+  object-fit: cover;
+  display: block;
+  position: relative;
+  border-radius: 8px;
+}
+
+.now-playing-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
+  pointer-events: none;
+}
+
+.now-playing-info {
+  padding: 0;
+  text-align: center;
+  color: white;
+}
+
+.now-playing-title {
+  font-size: 1.3rem;
+  font-weight: bold;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+
+.now-playing-artist {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-shy);
+  margin-top: 0;
+  opacity: 0.8;
+}
+
+.now-playing-timeline-wrapper {
+  padding: 0 25px;
+}
+
+.now-playing-timeline-bg {
+  height: 6px;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+  position: relative;
+}
+
+.now-playing-timeline-progress {
+  height: 100%;
+  background-color: white;
+  transition: width 1s linear;
+  border-radius: 3px;
+}
+
+.now-playing-time-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  color: white;
+  opacity: 0.7;
+  margin-top: 4px;
+}

app/src/components/NowPlayingTab.tsx

@@ -0,0 +1,74 @@
+import { IonContent } from "@ionic/react";
+import React, { useEffect, useState } from "react";
+import "./NowPlayingTab.css";
+
+export interface NowPlayingData {
+  coverUrl: string;
+  title: string;
+  artist: string;
+  color: string;
+}
+
+interface NowPlayingTabProps {
+  data: NowPlayingData;
+  startTime: number; // timestamp in ms
+  duration: number; // duration in ms
+}
+
+const formatTime = (ms: number) => {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+
+const NowPlayingTab: React.FC<NowPlayingTabProps> = ({
+  data,
+  startTime,
+  duration,
+}) => {
+  const [progress, setProgress] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const now = Date.now();
+      const newElapsed = now - startTime;
+      const percentage = Math.min(newElapsed / duration, 1);
+      setElapsed(newElapsed);
+      setProgress(percentage);
+    };
+
+    updateProgress();
+    const interval = setInterval(updateProgress, 1000);
+    return () => clearInterval(interval);
+  }, [startTime, duration]);
+
+  return (
+    <>
+      <div style={{ position: "relative" }}>
+        <img src={data.coverUrl} alt="cover" className="now-playing-cover" />
+        <div className="now-playing-overlay" />
+      </div>
+      <div className="now-playing-info">
+        <h2 className="now-playing-title">{data.title}</h2>
+        <p className="now-playing-artist">{data.artist}</p>
+      </div>
+      <div className="now-playing-timeline-wrapper">
+        <div className="now-playing-timeline-bg">
+          <div
+            className="now-playing-timeline-progress"
+            style={{ width: `${progress * 100}%` }}
+          />
+        </div>
+
+        <div className="now-playing-time-labels">
+          <span>{formatTime(elapsed)}</span>
+          <span>{formatTime(duration)}</span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default NowPlayingTab;

app/src/components/Queue.css

@@ -0,0 +1,77 @@
+.queue-container {
+  width: calc(100% - 40px);
+  margin: 20px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-bottom: 200px;
+}
+
+/* Header con titolo e icona */
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+h1.queue {
+  font-size: var(--title-font-size, 1.25rem);
+  font-weight: bold;
+  color: var(--text);
+  margin: 0;
+}
+
+/* Pulsante dell'icona di ricerca */
+.icon-button {
+  background: none;
+  color: var(--text);
+  font-size: 1.4rem;
+  margin-left: auto;
+  /* padding: 4px; */
+}
+
+/* Elementi della coda */
+.song-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.cover {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.text-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--text);
+}
+
+.artist {
+  font-size: 0.9rem;
+  font-weight: 800;
+  color: var(--text-muted);
+}
+
+/* Ionic modal override (optional styling) */
+ion-modal {
+  --border-radius: 16px;
+}
+
+/* Optional: fix spacing inside modal */
+ion-content {
+  padding: 16px;
+}

app/src/components/Queue.tsx

@@ -0,0 +1,73 @@
+import './Queue.css';
+
+import { IonButton, IonContent, IonHeader, IonIcon, IonModal, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
+import { add } from 'ionicons/icons';
+import React, { useState } from 'react';
+
+interface NowPlayingDiscProps {
+  coverUrl: string;
+  title: string;
+  artist: string;
+}
+
+interface QueueProps {
+  songs: NowPlayingDiscProps[];
+}
+
+const Queue: React.FC<QueueProps> = ({ songs }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [searchText, setSearchText] = useState("");
+
+  return (
+    <div className="queue-container">
+      <div className="queue-header">
+        <h1 className="queue">Up next</h1>
+        <IonButton
+          fill="clear"
+          onClick={() => setShowModal(true)}
+          className="icon-button"
+        >
+          <IonIcon icon={add} />
+        </IonButton>
+      </div>
+
+      {songs.map((song, index) => (
+        <div className="song-item" key={index}>
+          <img
+            className="cover"
+            src={song.coverUrl}
+            alt={`${song.title} cover`}
+          />
+          <div className="text-info">
+            <div className="title">{song.title}</div>
+            <div className="artist">{song.artist}</div>
+          </div>
+        </div>
+      ))}
+
+      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Add Songs</IonTitle>
+            <IonButton
+              slot="end"
+              fill="clear"
+              onClick={() => setShowModal(false)}
+            >
+              Close
+            </IonButton>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent>
+          <IonSearchbar
+            value={searchText}
+            onIonInput={(e) => setSearchText(e.detail.value!)}
+            placeholder="Search..."
+          />
+        </IonContent>
+      </IonModal>
+    </div>
+  );
+};
+
+export default Queue;

app/src/components/ThemeSelector.tsx

@@ -0,0 +1,19 @@
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+import { useTheme } from '../hooks/useTheme';
+
+export function ThemeSelector() {
+  const { theme, setTheme, themes } = useTheme();
+
+  return (
+    <IonItem>
+      <IonLabel>Seleziona tema</IonLabel>
+      <IonSelect value={theme} onIonChange={(e) => setTheme(e.detail.value)}>
+        {themes.map((t) => (
+          <IonSelectOption key={t} value={t}>
+            {t}
+          </IonSelectOption>
+        ))}
+      </IonSelect>
+    </IonItem>
+  );
+}

app/src/hooks/useTheme.tsx

@@ -0,0 +1,28 @@
+// src/hooks/useTheme.ts
+import { useEffect } from "react";
+import { useAtom } from "jotai";
+import { themeAtom } from "../atoms";
+
+const ALL_THEMES = ["light", "dark", "red"];
+
+export function useTheme() {
+  const [theme, setTheme] = useAtom(themeAtom);
+
+  useEffect(() => {
+    const body = document.body;
+    ALL_THEMES.forEach((t) => body.classList.remove(t));
+    body.classList.add(theme);
+    console.log('set ', theme)
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return {
+    theme,
+    setTheme,
+    toggleTheme,
+    themes: ALL_THEMES,
+  };
+}

app/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

app/src/mocks/index.tsx

@@ -0,0 +1,81 @@
+export interface NowPlayingData {
+  coverUrl: string;
+  title: string;
+  artist: string;
+  color: string;
+}
+
+const nowPlayingMock: NowPlayingData = {
+  coverUrl: 'https://m.media-amazon.com/images/I/61ZE7JzxGgL._UXNaN_FMjpg_QL85_.jpg',
+  title: "Without Warning",
+  artist: "Kesha",
+  color: "#ff1012",
+};
+
+const QueueMock: NowPlayingData[] = [
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700", // oro
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF", // blu intenso
+  },
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700",
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF",
+  },
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700",
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF",
+  },
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700",
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF",
+  },
+  {
+    coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
+    title: "Eternal Groove",
+    artist: "Kesha",
+    color: "#FFD700",
+  },
+  {
+    coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
+    title: "56 Nights",
+    artist: "Future",
+    color: "#1E90FF",
+  },
+];
+
+export const mocks = {
+  nowPlaying: nowPlayingMock,
+  queue: QueueMock,
+};

app/src/pages/Tab1.css

@@ -0,0 +1,6 @@
+.tab-1-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}

app/src/pages/Tab1.tsx

@@ -0,0 +1,30 @@
+import "./Tab1.css";
+
+import { IonContent, IonPage } from "@ionic/react";
+import { useAtom } from "jotai";
+
+import { currentTrackAtom } from "../atoms";
+import NowPlayingDisc from "../components/NowPlayingDisc";
+
+const Tab1: React.FC = () => {
+  const [current] = useAtom(currentTrackAtom);
+
+  return (
+    <IonPage>
+      <IonContent fullscreen className="transparent-content">
+        <div className="tab-1-container">
+          {current && (
+            <NowPlayingDisc
+              coverUrl={current.coverUrl}
+              title={current.title}
+              artist={current.artist}
+              color={current.color}
+            />
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;

app/src/pages/Tab2.tsx

@@ -0,0 +1,17 @@
+import Queue from '../components/Queue';
+import { mocks } from '../mocks';
+import './Tab2.css';
+
+import { IonContent, IonPage } from '@ionic/react';
+
+const Tab2: React.FC = () => {
+  return (
+    <IonPage>
+      <IonContent fullscreen className="transparent-content">
+        <Queue songs={mocks.queue} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;

app/src/pages/Tab3.tsx

@@ -0,0 +1,31 @@
+import { IonContent, IonPage } from '@ionic/react';
+import { useAtom } from 'jotai';
+import React from 'react';
+
+import { currentTrackAtom } from '../atoms';
+import NowPlayingTab from '../components/NowPlayingTab';
+import Queue from '../components/Queue';
+import { mocks } from '../mocks';
+
+const Tab: React.FC = () => {
+  const [current] = useAtom(currentTrackAtom);
+
+  const now = Date.now();
+
+  return (
+    <IonPage>
+      <IonContent fullscreen>
+        {current && (
+          <NowPlayingTab
+            data={current}
+            startTime={now - 15000} // es. iniziata 15 sec fa
+            duration={180000} // 3 minuti
+          />
+        )}
+        <Queue songs={mocks.queue} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab;

app/src/setupTests.ts

@@ -0,0 +1,14 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
+
+// Mock matchmedia
+window.matchMedia = window.matchMedia || function() {
+  return {
+      matches: false,
+      addListener: function() {},
+      removeListener: function() {}
+  };
+};

app/src/theme/variables.css

@@ -0,0 +1,75 @@
+.transparent-content {
+  /* --background: transparent; */
+  /* --background: red */
+}
+
+:root {
+  --title-font-size: 1.5rem;
+  --artist-font-size: 1.2rem;
+  --cover-border: 6px solid var(--ion-color-tertiary);
+  --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+
+  --text: white;
+  --text-supporting: rgba(255, 255, 255, 0.8);
+  --text-shy: rgba(255, 255, 255, 0.6);
+  --text-muted: rgba(255, 255, 255, 0.4);
+
+}
+
+/* TEMA DI BASE (light) */
+:root {
+  --ion-color-primary: #ff6f61;      /* corallo caldo, energico */
+  --ion-color-secondary: #4a90e2;    /* blu acceso, fresco */
+  --ion-color-tertiary: #f5a623;     /* arancione luminoso, vivace */
+  --ion-color-success: #2ecc71;      /* verde brillante, positivo */
+  --ion-color-warning: #f39c12;      /* giallo oro, invitante */
+  --ion-color-danger: #e74c3c;       /* rosso intenso, emozionante */
+  --ion-color-light: #fafafa;        /* bianco sporco, morbido */
+  --ion-color-medium: #95a5a6;       /* grigio neutro, equilibrato */
+  --ion-color-dark: #2c3e50;         /* blu notte, elegante */
+
+  --ion-background-color: #1e1e1e;   /* sfondo scuro per risaltare i contenuti */
+  --ion-text-color: #ffffff;          /* testo bianco per leggibilità */
+  --ion-toolbar-background: #2c3e50; /* toolbar scura e raffinata */
+  --ion-toolbar-color: #ffffff;       /* testo toolbar chiaro */
+  --ion-item-background: #34495e;     /* background di elementi, tono medio */
+}
+
+
+/* TEMA SCURO */
+body.dark {
+  --ion-color-primary: #222428;
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-tertiary: #5260ff;
+  --ion-color-success: #2fdf75;
+  --ion-color-warning: #ffc409;
+  --ion-color-danger: #eb445a;
+  --ion-color-light: #1e1e1e;
+  --ion-color-medium: #92949c;
+  --ion-color-dark: #f4f5f8;
+
+  --ion-background-color: #121212;
+  --ion-text-color: #f4f4f4;
+  --ion-toolbar-background: #1f1f1f;
+  --ion-toolbar-color: #f4f4f4;
+  --ion-item-background: #1e1e1e;
+}
+
+/* TEMA ROSSO PERSONALIZZATO */
+body.red {
+  --ion-color-primary: #ff4d4f;
+  --ion-color-secondary: #ffa39e;
+  --ion-color-tertiary: #d32029;
+  --ion-color-success: #52c41a;
+  --ion-color-warning: #faad14;
+  --ion-color-danger: #cf1322;
+  --ion-color-light: #fff1f0;
+  --ion-color-medium: #d9d9d9;
+  --ion-color-dark: #000000;
+
+  --ion-background-color: #fff2f0;
+  --ion-text-color: #330000;
+  --ion-toolbar-background: #fff1f0;
+  --ion-toolbar-color: #990000;
+  --ion-item-background: #fff0f0;
+}

app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />