Neumorphic UI Dashboard AI Prompt Result

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphic Dashboard Widget</title>
    <style>
        /* --- CORE STYLES & VARIABLES --- */
        :root {
            /* 
              Accessibility Note: 
              The text colors are chosen to meet a minimum AA contrast ratio of 4.5:1 
              against the background color.
            */
            --bg-color: #e0e0e0;
            --light-shadow: #ffffff;
            --dark-shadow: #bebebe;
            --text-color-primary: #3d3d3d; /* Contrast Ratio: 7.27:1 */
            --text-color-secondary: #666666; /* Contrast Ratio: 4.65:1 */
            --accent-color-positive: #1e8449; /* Contrast Ratio: 4.54:1 */
        }

/* --- BASIC SETUP --- */
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color-primary);

/* Center the widget for demonstration */
            display: grid;
            place-items: center;
            min-height: 100vh;
            padding: 2rem;
            box-sizing: border-box;
        }

/* --- THE WIDGET CARD --- */
        .neumorphic-widget {
            background-color: var(--bg-color);
            width: 100%;
            max-width: 380px;
            padding: 2rem;
            border-radius: 30px;
            box-sizing: border-box;
            
            /* The core Neumorphic "extruded" effect */
            box-shadow: 12px 12px 24px var(--dark-shadow),
                        -12px -12px 24px var(--light-shadow);

/* Layout for internal elements */
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

/* --- WIDGET CONTENT --- */
        .widget-header {
            text-align: left;
        }
        
        .widget-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-color-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0;
        }

.revenue-display {
            text-align: left;
        }

.revenue-amount {
            font-size: 3rem;
            font-weight: 700;
            color: var(--text-color-primary);
            margin: 0;
        }

.revenue-change {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1rem;
            font-weight: 600;
            color: var(--accent-color-positive);
            margin-top: 0.5rem;
        }
        
        .revenue-change .icon {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

/* --- WIDGET ACTIONS & BUTTONS --- */
        .widget-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .btn {
            flex-grow: 1; /* Make buttons share space */
            border: none;
            background-color: var(--bg-color);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-color-secondary);
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            outline: none; /* We'll use a custom focus state */
        }

/* Style for the "pushed out" (convex) button */
        .btn-convex {
            box-shadow: 5px 5px 10px var(--dark-shadow),
                        -5px -5px 10px var(--light-shadow);
        }

/* Style for the "pushed in" (concave) button */
        .btn-concave {
            box-shadow: inset 5px 5px 10px var(--dark-shadow),
                        inset -5px -5px 10px var(--light-shadow);
        }

/* --- INTERACTIVE STATES --- */

/* Pushed-out button becomes pushed-in on click/press */
        .btn-convex:hover, .btn-convex:active {
             box-shadow: inset 5px 5px 10px var(--dark-shadow),
                        inset -5px -5px 10px var(--light-shadow);
             color: var(--text-color-primary);
        }

/* Pushed-in button becomes pushed-out on click/press */
        .btn-concave:hover, .btn-concave:active {
            box-shadow: 5px 5px 10px var(--dark-shadow),
                        -5px -5px 10px var(--light-shadow);
            color: var(--text-color-primary);
        }
        
        /* 
          Accessibility Focus State:
          Provides a clear outline for keyboard navigation without relying solely on shadow changes.
        */
        .btn:focus-visible {
            box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--accent-color-positive);
        }

</style>
</head>
<body>

<div class="neumorphic-widget">
    
        <div class="widget-header">
            <h2 class="widget-title">Monthly Revenue</h2>
        </div>

<div class="widget-actions">
            
            <button class="btn btn-concave">View Report</button>
            
            
            <button class="btn btn-convex">Details</button>
        </div>

</div>

</body>
</html>