added more functions
This commit is contained in:
2
.github/workflows/docker-publish.yml
vendored
2
.github/workflows/docker-publish.yml
vendored
@@ -5,7 +5,7 @@ name: Docker Image CI for Electricity Calculator
|
||||
# Controls when the workflow will run
|
||||
on:
|
||||
push:
|
||||
branches: [ "main" ] # Triggers on pushes to the main branch
|
||||
branches: [ "master" ] # Triggers on pushes to the main branch
|
||||
# Allows you to run this workflow manually from the Actions tab
|
||||
workflow_dispatch:
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ FROM nginx:stable-alpine
|
||||
RUN rm -rf /usr/share/nginx/html/*
|
||||
|
||||
# Copy the web application files (your index.html) to the Nginx web root directory
|
||||
COPY index.html /usr/share/nginx/html/index.html
|
||||
COPY pages/ /usr/share/nginx/html/
|
||||
|
||||
# Expose port 80 for HTTP traffic
|
||||
EXPOSE 80
|
||||
|
||||
88
index.html
88
index.html
@@ -1,88 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Energy Calculator - Home</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f4f6f8;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
header {
|
||||
background: #2d6cdf;
|
||||
color: #fff;
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card-container {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
padding: 2rem 2.5rem;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(45,108,223,0.15);
|
||||
}
|
||||
.card a {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
padding: 0.7rem 1.5rem;
|
||||
background: #2d6cdf;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.card a:hover {
|
||||
background: #1b4e9b;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.card-container {
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Energy Calculator</h1>
|
||||
<p>Benvenuto! Scegli una funzione per iniziare:</p>
|
||||
</header>
|
||||
<main>
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<h2>Calcolatore Risparmi</h2>
|
||||
<p>Scopri quanto puoi risparmiare con il nostro calcolatore.</p>
|
||||
<a href="savings-calculator.html">Vai al Calcolatore Risparmi</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Calcolatore Costi</h2>
|
||||
<p>Calcola i costi energetici in modo semplice e veloce.</p>
|
||||
<a href="cost-calculator.html">Vai al Calcolatore Costi</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
77
pages/index.html
Normal file
77
pages/index.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Energy Calculator - Home</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f0f4f8;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
|
||||
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #4299e1;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin-top: auto; /* Aligns button to the bottom */
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #3182ce;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col">
|
||||
<!-- Header Section -->
|
||||
<header class="text-center py-8 bg-white shadow-md">
|
||||
<h1 class="text-4xl font-bold text-gray-800">Energy Calculator Suite</h1>
|
||||
<p class="text-gray-600 mt-2 text-lg">I tuoi strumenti per un'analisi energetica completa e consapevole.</p>
|
||||
</header>
|
||||
|
||||
<!-- Main Content with Cards -->
|
||||
<main class="flex-grow flex items-center justify-center p-6">
|
||||
<div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
|
||||
<!-- Card for Advanced Cost Calculator -->
|
||||
<div class="card p-8 flex flex-col">
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-4">Calcolatore Costi Avanzato</h2>
|
||||
<p class="text-gray-700 mb-6 flex-grow">
|
||||
Simula i consumi e i costi dell'elettricità. Include opzioni per analizzare l'impatto di un impianto fotovoltaico e di una batteria di accumulo per una stima precisa e dettagliata.
|
||||
</p>
|
||||
<a href="cost-calculator.html" class="btn-primary text-center">Vai al Calcolatore Costi</a>
|
||||
</div>
|
||||
|
||||
<!-- Card for Photovoltaic Savings Calculator -->
|
||||
<div class="card p-8 flex flex-col">
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-4">Calcolatore Risparmio Fotovoltaico</h2>
|
||||
<p class="text-gray-700 mb-6 flex-grow">
|
||||
Analizza in dettaglio i costi, i risparmi e i possibili guadagni derivanti dall'installazione di un impianto fotovoltaico. Ottimo per valutare il tuo investimento.
|
||||
</p>
|
||||
<a href="savings-calculator.html" class="btn-primary text-center">Vai al Calcolatore Risparmi</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<footer class="text-center py-6 text-sm text-gray-500 bg-white mt-8">
|
||||
<p>© 2024 Calcolatore Energetico Avanzato. Creato per scopi illustrativi.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user