Skip to main content

​
Prerequisites

Before getting started with Playground, ensure you have:
1

Modern Web Browser

Chrome, Firefox, Safari, or Edge (latest version recommended)
2

Firebase Account

Access to Firebase console for configuration (for deployment)
3

User Credentials

Valid username and password provided by the administrator

​
Quick Start

​
Accessing the Application

1

Navigate to Login Page

Open your browser and navigate to the Playground login page at login.htmlLogin Page
2

Enter Your Credentials

Input your username and password in the login form
Your username will be converted to an email format automatically: [email protected]
3

Access the Dashboard

Upon successful authentication, you’ll be redirected to the main dashboard (index.html) with access to all modules

​
Setting Up Firebase (For Developers)

If you’re deploying your own instance of Playground, follow these steps:

​
1. Create Firebase Project

1

Create Project

Go to Firebase Console and create a new project
2

Enable Authentication

Navigate to Authentication → Sign-in method → Enable Email/Password authentication
3

Enable Realtime Database

Navigate to Realtime Database → Create Database → Choose region and start in test mode (configure security rules later)

​
2. Configure Firebase in Your Application

Update the Firebase configuration in your JavaScript files:
scriptLogin.js
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "your-project.firebaseapp.com",
    databaseURL: "https://your-project-default-rtdb.firebaseio.com",
    projectId: "your-project-id",
    storageBucket: "your-project.appspot.com",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}
Security Note: Never commit your actual Firebase credentials to version control. Use environment variables or a configuration management system in production.

​
3. Initialize Firebase

The application automatically initializes Firebase when the DOM loads: 
document.addEventListener('DOMContentLoaded', () => {
    if (!firebase.apps.length) {
        firebase.initializeApp(firebaseConfig);
    }
    
    // Set up authentication state observer
    firebase.auth().onAuthStateChanged(user => {
        if (!user && window.location.pathname !== '/login.html') {
            window.location.href = 'login.html';
        } else if (user && window.location.pathname === '/login.html') {
            window.location.href = 'index.html';
        }
    });
});

​
Creating User Accounts

​
Via Firebase Console

1

Navigate to Authentication

Go to Firebase Console → Authentication → Users
2

Add User

Click “Add user” and enter:
3

Add to User List

Update the agentesA object in scriptLogin.js with the new user:
let agentesA = {
    "username": { nombre: "User_Full_Name" },
    // ... other users
};

​
First Time Setup

​
Personalizing Your Experience

Once logged in, customize your workspace:
1

Access Settings

Click the gear icon (⚙️) in the top navigation bar to open the Configuraciones page
2

Choose Your Theme

Select from preset themes or create your own:
// Theme configuration structure
const theme = {
    primario: '#e69500',      // Primary color
    secundario: '#e69500',    // Secondary color
    colorFondo: '#FFFFFF',    // Background color
    colorTexto: '#000000',    // Text color
    fuente: 'Nunito, sans-serif' // Font family
};
3

Upload Background (Optional)

Add a custom background image (max 5MB):
  • Support for file upload or URL
  • Blur effect controls (0-100%)
  • Parallax effect option
4

Save Your Preferences

Click “Guardar” to persist your settings to localStorage
Your preferences are stored per-user in localStorage using the key pattern: preferencias_[username]

​
Exploring the Modules

The main dashboard displays all available modules:

Calculadora

Grade calculator with percentage-based scoring

Herramientas

Collection of utility tools

Plantillas

Pre-built templates library

Procedimientos

Procedure documentation

Horarios Stop Jeans

Scheduling system

BlackJack

Mini game for breaks
The application follows a consistent navigation pattern: 
<header>
    <nav>
        <div class="titulo">
            <h2>
                <a href="index.html">
                    <img src="Icono.png" width="45" alt="Icono">
                    Playground
                </a>
            </h2>
        </div>
        <div>
            <li><a id="usuario"><i class="far fa-user"></i></a></li>
            <li><a href="Configuraciones.html"><i class="fa fa-gear"></i></a></li>
            <li><a href="Pagos.html"><i class="fa fa-user-secret"></i></a></li>
            <li><a href="Varios.html"><i class="fa fa-list"></i></a></li>
        </div>
    </nav>
</header>

​
Session Management

Automatic Logout: Sessions automatically expire after 8 hours of inactivity. You’ll be redirected to the login page.
The application includes automatic session management:
Autorizacion.js
function scheduleSignOutEveryEightHours() {
    const eightHoursInMs = 8 * 60 * 60 * 1000; // 8 hours in milliseconds
    
    signOutTimer = setTimeout(() => {
        firebase.auth().signOut().then(() => {
            console.log('Usuario desconectado automáticamente después de 8 horas.');
            localStorage.removeItem('lastLoginDate');
            localStorage.removeItem('nombreAsesorActual');
            window.location.href = 'login.html';
        });
    }, eightHoursInMs);
}

​
Troubleshooting

Problem: Cannot log in with valid credentialsSolutions:
  • Verify username format (no special characters except dots)
  • Check that the account exists in Firebase Console
  • Clear browser cache and cookies
  • Ensure JavaScript is enabled
Problem: Automatically logged out before 8 hoursSolutions:
  • Check browser console for errors
  • Verify Firebase connection is stable
  • Ensure browser isn’t blocking cookies
Problem: Module pages show blank or errorSolutions:
  • Check browser console for JavaScript errors
  • Verify all script dependencies are loaded
  • Ensure Firebase is properly initialized
  • Clear localStorage: localStorage.clear()
Problem: Custom theme resets after refreshSolutions:
  • Check if localStorage is enabled in browser
  • Verify browser isn’t in incognito/private mode
  • Ensure you clicked “Guardar” button
  • Check localStorage quota (5MB limit)

​
Loading Screen

During authentication, users see a loading indicator: 
const loadingScreen = document.getElementById('loading-screen');
loadingScreen.style.display = 'flex'; // Show loading

try {
    const user = await authenticateUser(username, password);
    window.location.href = 'index.html';
} catch (error) {
    errorMessage.textContent = getErrorMessage(error);
    loadingScreen.style.display = 'none'; // Hide loading
}

​
Next Steps

Authentication Details

Learn more about the authentication system

User Guides

Detailed guides for common tasks

Customization

Advanced theming and customization options

Technical Documentation

Developer technical documentation

​
Support

For additional help:
Contact: Andrés Felipe Yepes Tascón
Copyright: © 2024
License: MIT License

Build docs developers (and LLMs) love

Get started for freeTalk to us