Spaces:

Minerva666
/

energy-modelling

Runtime error

App Files Files Community

Minerva666 commited on Feb 16

Commit

e532bcc

verified ·

1 Parent(s): d1a7526

Upload download.html

Browse files

Files changed (1) hide show

static/download.html +347 -0

static/download.html ADDED Viewed

	@@ -0,0 +1,347 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Download — Energy Modelling Tools</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #f4f2ee;
+    --text: #1a1a1a;
+    --text-muted: #5c5c5c;
+    --accent: #2d6a4f;
+    --card-bg: #ffffff;
+    --card-shadow: 0 2px 20px rgba(0,0,0,0.06);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+  }
+  .bg-deco {
+    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
+  }
+  .bg-deco::before {
+    content: '';
+    position: absolute;
+    top: -30%; right: -20%;
+    width: 900px; height: 900px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(45,106,79,0.06) 0%, transparent 70%);
+  }
+  .container {
+    position: relative; z-index: 1;
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 0 24px;
+  }
+  /* Back link */
+  .back {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 40px;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: color 0.2s;
+  }
+  .back:hover { color: var(--accent); }
+  .back svg { width: 18px; height: 18px; }
+  /* Header */
+  .page-header {
+    text-align: center;
+    padding: 40px 0 12px;
+  }
+  .page-header .icon {
+    width: 72px; height: 72px;
+    border-radius: 50%;
+    margin: 0 auto 18px;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--accent);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+  }
+  .page-header h1 {
+    font-family: 'Playfair Display', serif;
+    font-weight: 600;
+    font-size: 2rem;
+    margin-bottom: 6px;
+  }
+  .page-header p {
+    color: var(--text-muted);
+    font-size: 1rem;
+  }
+  .divider {
+    width: 50px; height: 3px;
+    background: var(--accent);
+    margin: 28px auto 36px;
+    border-radius: 2px;
+  }
+  /* Form */
+  .download-card {
+    background: var(--card-bg);
+    border-radius: 16px;
+    padding: 36px 32px;
+    box-shadow: var(--card-shadow);
+    margin-bottom: 60px;
+    animation: fadeUp 0.45s ease forwards;
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
+  .field { margin-bottom: 20px; }
+  .field label {
+    display: block;
+    font-weight: 500;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+  }
+  .field select {
+    width: 100%;
+    padding: 12px 16px;
+    font-family: inherit;
+    font-size: 0.95rem;
+    border: 1.5px solid #ddd;
+    border-radius: 10px;
+    background: #fafaf8;
+    color: var(--text);
+    appearance: none;
+    cursor: pointer;
+    transition: border-color 0.2s;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235c5c5c'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+  }
+  .field select:focus {
+    outline: none;
+    border-color: var(--accent);
+  }
+  .field select:disabled {
+    opacity: 0.5;
+    cursor: wait;
+  }
+  .btn-download {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    padding: 14px 32px;
+    background: var(--accent);
+    color: #fff;
+    border: none;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s, transform 0.15s;
+    width: 100%;
+    justify-content: center;
+  }
+  .btn-download:hover { background: #245a42; transform: translateY(-1px); }
+  .btn-download:active { transform: translateY(0); }
+  .btn-download:disabled {
+    background: #bbb;
+    cursor: not-allowed;
+    transform: none;
+  }
+  .btn-download svg { width: 20px; height: 20px; }
+  /* Preview area */
+  .preview {
+    margin-top: 24px;
+    overflow-x: auto;
+  }
+  .preview table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.82rem;
+  }
+  .preview th {
+    text-align: left;
+    padding: 8px 10px;
+    background: #f0ede8;
+    border-bottom: 2px solid #ddd;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+  .preview td {
+    padding: 7px 10px;
+    border-bottom: 1px solid #eee;
+    white-space: nowrap;
+  }
+  .preview tr:last-child td { border-bottom: none; }
+  .spinner {
+    display: inline-block;
+    width: 18px; height: 18px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .status-msg {
+    margin-top: 12px;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+  }
+  .status-msg.error { color: #c0392b; }
+  footer {
+    text-align: center;
+    padding: 24px 0;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    border-top: 1px solid rgba(0,0,0,0.06);
+  }
+</style>
+</head>
+<body>
+<div class="bg-deco"></div>
+<div class="container">
+  <a href="/" class="back">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+    All Tools
+  </a>
+  <div class="page-header">
+    <div class="icon" id="toolIcon">
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><path d="M3 3v18h18"/><path d="M7 16l4-6 4 4 5-8"/></svg>
+    </div>
+    <h1 id="toolTitle">Loading…</h1>
+    <p id="toolSubtitle"></p>
+  </div>
+  <div class="divider"></div>
+  <div class="download-card">
+    <div class="field">
+      <label for="datasetSelect">Dataset</label>
+      <select id="datasetSelect" disabled><option>Loading datasets…</option></select>
+    </div>
+    <div class="field">
+      <label for="fileSelect">File</label>
+      <select id="fileSelect" disabled><option>Select a dataset first</option></select>
+    </div>
+    <button class="btn-download" id="downloadBtn" disabled>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+      Download
+    </button>
+    <div id="status" class="status-msg"></div>
+    <div id="preview" class="preview"></div>
+  </div>
+</div>
+<footer>
+  <div class="container">© 2025–2026 CCG. and contributors</div>
+</footer>
+<script>
+const TOOL_META = {
+  maed: { color: '#1b3a5c', label: 'MAED', full_name: 'Model for Analysis of Energy Demand' },
+  OnStove: { color: '#c0392b', label: 'OnStove', full_name: 'Open-source Spatial Clean Cooking' },
+};
+const toolId = window.location.pathname.split('/').pop();
+const meta = TOOL_META[toolId] || { color: '#2d6a4f', label: toolId, full_name: '' };
+// Set header
+document.getElementById('toolTitle').textContent = meta.label;
+document.getElementById('toolSubtitle').textContent = meta.full_name;
+document.getElementById('toolIcon').style.background = meta.color;
+document.title = `${meta.label} — Energy Modelling Tools`;
+const datasetSel = document.getElementById('datasetSelect');
+const fileSel = document.getElementById('fileSelect');
+const dlBtn = document.getElementById('downloadBtn');
+const statusEl = document.getElementById('status');
+let currentDatasetValue = '';
+// Load datasets
+fetch(`/api/datasets/${toolId}`)
+  .then(r => r.json())
+  .then(data => {
+    datasetSel.innerHTML = '';
+    data.datasets.forEach((d, i) => {
+      const opt = document.createElement('option');
+      opt.value = d.value;
+      opt.textContent = d.label;
+      datasetSel.appendChild(opt);
+    });
+    datasetSel.disabled = false;
+    if (data.datasets.length) {
+      currentDatasetValue = data.datasets[0].value;
+      loadFiles(currentDatasetValue);
+    }
+  })
+  .catch(() => {
+    datasetSel.innerHTML = '<option>Error loading datasets</option>';
+  });
+datasetSel.addEventListener('change', () => {
+  currentDatasetValue = datasetSel.value;
+  loadFiles(currentDatasetValue);
+});
+function loadFiles(dataset) {
+  fileSel.disabled = true;
+  fileSel.innerHTML = '<option>Loading files…</option>';
+  dlBtn.disabled = true;
+  fetch(`/api/files/${toolId}?dataset=${encodeURIComponent(dataset)}`)
+    .then(r => r.json())
+    .then(data => {
+      fileSel.innerHTML = '';
+      data.files.forEach(f => {
+        const opt = document.createElement('option');
+        opt.value = f;
+        opt.textContent = f;
+        fileSel.appendChild(opt);
+      });
+      fileSel.disabled = false;
+      dlBtn.disabled = data.files.length === 0;
+    })
+    .catch(() => {
+      fileSel.innerHTML = '<option>Error loading files</option>';
+    });
+}
+fileSel.addEventListener('change', () => {
+  dlBtn.disabled = !fileSel.value;
+});
+dlBtn.addEventListener('click', () => {
+  const dataset = currentDatasetValue;
+  const file = fileSel.value;
+  if (!file) return;
+  const url = `/api/download/${toolId}?dataset=${encodeURIComponent(dataset)}&file=${encodeURIComponent(file)}`;
+  // Trigger download via hidden link
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = file;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  statusEl.textContent = `Downloading ${file}…`;
+  statusEl.className = 'status-msg';
+  setTimeout(() => { statusEl.textContent = ''; }, 4000);
+});
+</script>
+</body>
+</html>