Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Niurka77/tf-app/llms.txt

Use this file to discover all available pages before exploring further.

TF-App is not a single-page application. Rather than rendering different screens inside one HTML shell, it uses separate .html files for each view and navigates between them with window.location.href. This approach maps naturally to Capacitor’s WebView model — each view is a full HTML document with its own <head> resources, its own <script> modules, and its own Tailwind setup. There is no client-side router to configure, no virtual DOM to reconcile, and no hydration step; when you navigate to a view, the browser simply loads that file.

​
Available Views

View FileRoutePurpose
dist/index.html/Authentication screen — DNI and password form (app entry point)
dist/dashboard.html/dashboard.htmlMain app dashboard after successful login
dist/cargando.html/cargando.htmlLoading / transition screen shown between actions
The files under src/views/ (login.html, dashboard.html, cargando.html) are currently empty placeholders. All active view content lives in dist/ — the output directory Vite writes to on build and the directory Capacitor serves via webDir: "dist" in capacitor.config.json. During development, Vite’s dev server serves every HTML file in the project. You can navigate directly to any view by entering its path in the browser address bar, for example http://localhost:5173/dashboard.html, without going through the login flow. This makes it easy to develop and style each screen in isolation.
Navigation is handled by assigning a new path to window.location.href. The browser performs a full page load to the target file, which is the same behavior as clicking an <a> element. 
// Redirect to the dashboard after a successful login:
window.location.href = '/dashboard.html';

// Show the loading screen before a long operation:
window.location.href = '/cargando.html';

// Return to the login screen (e.g., after logout):
window.location.href = '/index.html';
Because each navigation triggers a full page load, any in-memory state from the previous view is discarded. If you need to pass data between views — for example, the authenticated user’s name — store it in sessionStorage before navigating and read it back in the destination view’s DOMContentLoaded handler. 
// Before navigating away:
sessionStorage.setItem('username', authenticatedUser);
window.location.href = '/dashboard.html';

// In dashboard.html's script:
document.addEventListener('DOMContentLoaded', () => {
  const username = sessionStorage.getItem('username');
  document.getElementById('welcomeMessage').textContent = `Bienvenido, ${username}`;
});

​
Adding a New View

1

Create the HTML file

Add a new file under dist/, for example dist/properties.html. Copy the shell from an existing view such as dist/dashboard.html to inherit the Tailwind CDN link, Font Awesome link, Montserrat font, and wave decoration markup. Note that src/views/ contains only empty placeholder files — the active view files live in dist/.
2

Add required head resources

Make sure the <head> of your new view includes all three CDN links:
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap" rel="stylesheet" />
3

Add a script module for page logic

Reference a new JS file specific to this view, or write inline logic inside a <script type="module"> block at the bottom of <body>:
<script type="module" src="/src/properties.js"></script>
4

Include the modal HTML structure

Paste the messageModal markup before the closing </body> tag so that calls to showMessage() in your view’s JS have the required DOM elements to target. See the UI Components guide for the full modal snippet.
5

Navigate to the new view

Trigger navigation from any other view by setting window.location.href:
window.location.href = '/properties.html';

​
Loading the Correct JS per View

Each view loads only the JavaScript it needs. Reference a view-specific module file with a <script type="module"> tag at the bottom of the view’s <body>: 
<!-- In dist/dashboard.html -->
<script type="module" src="/src/dashboard.js"></script>

<!-- In dist/index.html (login / entry view) -->
<script type="module" src="/src/main.js"></script>
The type="module" attribute defers execution until the DOM is parsed and enables ES module import/export syntax. This means you do not need a separate DOMContentLoaded guard for top-level code in a module script — module scripts are deferred by default. If two views share a utility (such as showMessage), extract it into a shared file and import it: 
// src/utils/modal.js
export function showMessage(title, message) { /* ... */ }

// src/main.js
import { showMessage } from '/src/utils/modal.js';

​
Back Navigation

To navigate back to the previous view, use either the browser history API or an explicit href: 
// Go back one step in the browser history stack:
window.history.back();

// Or navigate explicitly to a known previous view:
window.location.href = '/index.html';
For a back button element in your view’s HTML: 
<button onclick="window.history.back()" class="text-green-700 font-semibold">
  <i class="fas fa-arrow-left mr-1"></i> Volver
</button>
window.history.back() is equivalent to the user pressing the Android hardware back button. If you want a back button that always goes to a specific screen regardless of navigation history, use an explicit window.location.href assignment instead.

​
The Entry Point

dist/index.html is the app’s entry point — the file Capacitor loads when the app launches (/ maps to index.html in the WebView). It is also the output Vite writes when you run vite build. 
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Sign Up</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- ... font and icon links ... -->
  </head>
  <body class="bg-white min-h-screen flex flex-col">
    <!-- Login view markup -->
  </body>
</html>
Integration gap — main.js is not yet wired to the login form. main.js looks up elements by the IDs loginForm, username, password, and forgotPasswordLink, but dist/index.html does not set any of those IDs on the corresponding form, inputs, or link. As a result, the submit handler and forgot-password handler in main.js are not currently connected to the visible form. To complete the wiring, add the missing IDs to dist/index.html:
<!-- Add id="loginForm" to the <form> element -->
<form id="loginForm" class="flex flex-col space-y-4">

<!-- Add id="username" to the DNI input -->
<input id="username" aria-label="Escribir DNI" type="text" ... />

<!-- Add id="password" to the password input -->
<input id="password" aria-label="Contraseña" type="password" ... />

<!-- Add id="forgotPasswordLink" to the forgot-password <a> tag -->
<a id="forgotPasswordLink" href="#" ...>¿Olvidaste tu contraseña?</a>
Also add a <script type="module" src="/src/main.js"></script> tag before the closing </body> tag, and include the messageModal HTML structure (see UI Components).
When Vite builds the project, it processes the source entry point (index.html at the project root), hashes asset filenames for cache-busting, and writes the output to dist/. Asset paths are updated to reflect the hashed filenames (e.g., logo-tf-LZ8NebR2.png).
If you later migrate TF-App toward a single-page architecture, use history.pushState() to update the browser URL without triggering a full page reload. This lets you transition screens with animations while keeping all JS state in memory. A full SPA migration would also let you bundle a single tailwind.css output instead of loading the CDN script on every view.

Build docs developers (and LLMs) love

Get started for freeTalk to us