JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aura Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container">

        <!-- Section 1: Choose the Aura -->
        <div class="box aura">
            <h2>Choose the Aura</h2>
            <div class="aura-display">
                <img src="path/to/aura-image.png" alt="Aura" class="aura-image">
            </div>
            <div class="aura-buttons">
                <button class="color-btn red"></button>
                <button class="color-btn blue"></button>
                <button class="color-btn green"></button>
                <button class="color-btn orange"></button>
            </div>
            <div class="coins">
                <p>COINS: <span>100</span></p>
            </div>
        </div>

        <!-- Section 2: Level -->
        <div class="box level">
            <h2>Level</h2>
            <div class="level-bar">
                <div class="filled-bar" style="width: 85%;"></div> <!-- Example 85% filled -->
            </div>
        </div>

        <!-- Section 3: Planning (Calendar View) -->
<div class="box planning">
    <h2>Planning</h2>
    <div class="calendar">
        <div class="day">Monday 17</div>
        <div class="day">Tuesday 18</div>
        <div class="day">Wednesday 19</div>
        <div class="day">Thursday 20</div>
        <div class="day">Friday 21</div>
        <div class="day">Saturday 22</div>
        <div class="day">Sunday 23</div>

        <div class="task" style="grid-column: 1; grid-row: 2;">Oatmeal with raisins</div>
        <div class="task" style="grid-column: 2; grid-row: 2;">Egg wrap</div>
        <div class="task" style="grid-column: 3; grid-row: 2;">Sandwich</div>
        <div class="task" style="grid-column: 4; grid-row: 2;">Oatmeal with honey, cinnamon, and bananas</div>
        <div class="task"...

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1a1a1a;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Arial, sans-serif;
}

.container {
    display: grid;
    grid-template-areas:
        "aura planning kpi"
        "level planning buttons"
        "level planning buttons";
    gap: 10px;
    width: 90vw;
    max-width: 1200px;
}

.box {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.aura {
    grid-area: aura;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.level {
    grid-area: level;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.planning {
    grid-area: planning;
}

.kpi {
    grid-area: kpi;
}

.button-row {
    display: flex;
    gap: 10px;
    justify-content: space-around;
}

.button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.red { background-color: #ff4444; }
.blue { background-color: #4444ff; }
.green { background-color: #44ff44; }
.orange { background-color: #ffaa44; }
.pink { background-color: #ff77a9; }

/* Level Indicator */
.level-bar {
    width: 100%;
    height: 20px;
    background-color: #555;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}

.filled-bar {
    height: 100%;
    background-color: #ff77a9;
}

/* Arrow Button */
.arrow-button {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
}

.up, .down, .left, .right, .center {
    background-color: #888;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.up { grid-column: 2; }
.left { grid-row: 2; grid-column: 1; }
.center { grid-row: 2;...

JavaScript

// Function to show the popup
function showPopup() {
    document.getElementById("popup").style.display = "flex";
}

// Function to close the popup
function closePopup() {
    document.getElementById("popup").style.display = "none";
}

// Function to handle submit action
function submitPopup() {
    const input = document.getElementById("emergency-input").value;
    if (input) {
        // Replace the KPI text with the input from the pop-up
        document.getElementById("kpi-text").textContent = input;
        closePopup();
    } else {
        alert("Please enter details before submitting.");
    }
}