Webleb - UI Elements - Hadamard Matrix CSS Grid Display

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hadamard & Netmask CSS</title>
    <style>
        /*
         ============================================
         CSS Stylesheet using Hadamard & Netmask
         ============================================
        */

:root {
            /* 
             *  Color Palette inspired by the Netmask: 255.255.240.0
             *  We are using the numbers to define an RGB color for the light tones.
             *  The dark tone is a simple contrasting color.
            */
            --color-light: rgb(255, 255, 240);
            --color-dark: rgb(40, 40, 40);

/*
             * The size of our Hadamard Matrix (e.g., 4 for a 4x4 matrix)
            */
            --matrix-size: 4;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: sans-serif;
            text-align: center;
        }

.container {
            padding: 2rem;
        }

h1 {
            color: var(--color-dark);
            margin-bottom: 2rem;
        }

/*
         *  The main grid container for the Hadamard pattern.
         *  We use CSS Grid to create a layout that matches the matrix dimensions.
        */
        .hadamard-grid {
            display: grid;
            grid-template-columns: repeat(var(--matrix-size), 1fr);
            width: 300px;
            height: 300px;
            border: 3px solid var(--color-dark);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

/*
         *  The individual cells of the grid.
        */
        .cell {
            width: 100%;
            height: 100%;
        }

/*
         *  Hadamard Matrix Pattern:
         *  A 4x4 Hadamard matrix looks like this:
         *  [+1, +1, +1, +1]
         *  [+1, -1, +1, -1]
         *  [+1, +1, -1, -1]
         *  [+1, -1, -1, +1]
         *
         *  We map '+1' to one color and '-1' to the other.
        */

.hadamard-plus {
            background-color: var(--color-light);
        }

.hadamard-minus {
            background-color: var(--color-dark);
        }

/* Responsive adjustments for smaller screens */
        @media (max-width: 600px) {
            .hadamard-grid {
                width: 80vw;
                height: 80vw;
            }
            h1 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>

<div class="container">
        <h1>Hadamard Matrix Pattern</h1>
        <div class="hadamard-grid">
            
            <div class="cell hadamard-plus"></div>
            <div class="cell hadamard-plus"></div>
            <div class="cell hadamard-plus"></div>
            <div class="cell hadamard-plus"></div>

<div class="cell hadamard-plus"></div>
            <div class="cell hadamard-minus"></div>
            <div class="cell hadamard-plus"></div>
            <div class="cell hadamard-minus"></div>

<div class="cell hadamard-plus"></div>
            <div class="cell hadamard-plus"></div>
            <div class="cell hadamard-minus"></div>
            <div class="cell hadamard-minus"></div>

<div class="cell hadamard-plus"></div>
            <div class="cell hadamard-minus"></div>
            <div class="cell hadamard-minus"></div>
            <div class="cell hadamard-plus"></div>
        </div>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hadamard Matrix Display</title>
    <style>
        /* 
         * Using CSS variables to define the color palette for easy customization.
         * The light color is derived from the netmask (255.255.240.0).
        */
        :root {
            --bg-color: #111827; /* Dark background for the page */
            --card-color: #1F2937; /* Background of the card */
            --primary-text-color: #F9FAFB; /* White for the main title */
            --secondary-text-color: #9CA3AF; /* Muted gray for subtitles/labels */
            --hadamard-light: rgb(255, 255, 240); /* Light color from netmask */
            --hadamard-dark: #1F2937; /* Dark color, matching the card */
        }

/* Basic setup for the page to center the content */
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--primary-text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 1rem;
            box-sizing: border-box;
        }

/* The main card container */
        .card {
            background-color: var(--card-color);
            border-radius: 1rem; /* 16px */
            padding: 2rem; /* 32px */
            width: 100%;
            max-width: 380px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* 24px space between header, grid, and footer */
        }

/* Header section with title and subtitle */
        .card-header {
            text-align: center;
        }

.title {
            font-size: 2.25rem; /* 36px */
            font-weight: 700;
            margin: 0;
        }

.subtitle {
            font-size: 1.125rem; /* 18px */
            color: var(--secondary-text-color);
            margin: 0.25rem 0 0 0;
            font-weight: 400;
        }

/* The 4x4 grid container */
        .hadamard-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            aspect-ratio: 1 / 1; /* Ensures the grid is always a perfect square */
            width: 100%;
        }

/* Individual cells in the grid */
        .cell-light {
            background-color: var(--hadamard-light);
        }

.cell-dark {
            background-color: var(--hadamard-dark);
        }

/* Footer section with netmask info and color swatch */
        .card-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.75rem; /* 12px */
        }

.netmask-label {
            font-size: 0.875rem; /* 14px */
            color: var(--secondary-text-color);
        }

.color-swatch {
            width: 1rem; /* 16px */
            height: 1rem; /* 16px */
            background-color: var(--hadamard-light);
            border-radius: 50%; /* Makes it a circle */
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>

<div class="card">
        <header class="card-header">
            <h1 class="title">Hadamard Matrix</h1>
            <p class="subtitle">4x4</p>
        </header>

<footer class="card-footer">
            <span class="netmask-label">Netmask: 255.255.240.0</span>
            <div class="color-swatch"></div>
        </footer>
    </div>

</body>
</html>

CSS

JS

class TodosScreen extends StatelessWidget {
  // Requiring the list of todos.
  const TodosScreen({super.key, required this.todos});

final List<Todo> todos;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Todos')),
      //passing in the ListView.builder
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(todos[index].title));
        },
      ),
    );
  }
}
class DetailScreen extends StatelessWidget {
  // In the constructor, require a Todo.
  const DetailScreen({super.key, required this.todo});

// Declare a field that holds the Todo.
  final Todo todo;

@override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(title: Text(todo.title)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(todo.description),
      ),
    );
  }
}
/body: ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(todos[index].title),
      // When a user taps the ListTile, navigate to the DetailScreen.
      // Notice that you're not only creating a DetailScreen, you're
      // also passing the current todo through to it.
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute<void>(
            builder: (context) => DetailScreen(todo: todos[index]),
          ),
        );
      },
    );
  },
),
import 'package:flutter/material.dart';

class Todo {
  final String title;
  final String description;

const Todo(this.title, this.description);
}

void main() {
  runApp(
    MaterialApp(
      title: 'Passing Data',
      home: TodosScreen(
        todos: List.generate(
          20,
          (i) => Todo(
            'Todo $i',
            'A description of what needs to be done for Todo $i',
          ),
        ),
      ),
    ),
  );
}

class TodosScreen extends StatelessWidget {
  const TodosScreen({super.key, required this.todos});

final List<Todo> todos;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Todos')),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todos[index].title),
            // When a user taps the ListTile, navigate to the DetailScreen.
            // Notice that you're not only creating a DetailScreen, you're
            // also passing the current todo through to it.
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute<void>(
                  builder: (context) => DetailScreen(todo: todos[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  // In the constructor, require a Todo.
  const DetailScreen({super.key, required this.todo});

// Declare a field that holds the Todo.
  final Todo todo;

@override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(title: Text(todo.title)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(todo.description),
      ),
    );
  }
}
* Replace with your JS Code 
  (Leave empty if not needed) */

Hadamard Matrix CSS Grid Display

Recommended

CSS Ghost Animation

CSS Animated Button

CSS Loading Animation Snippet

HTML

CSS

JS

Recommended

CSS Ghost Animation

CSS Animated Button

CSS Loading Animation Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS