jhargis · June 18, 2025 03:40
diff --git a/CSS Status Dots Demo.html b/CSS Status Dots Demo.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Status Dots Demo</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            background-color: #f8f9fa;
        }

        .demo-section {
            background: white;
            padding: 20px;
            margin-bottom: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        h1, h2 {
            color: #333;
        }

        /* Option 1: Unicode Bullet with CSS Colors */
        .status-dot {
            font-size: 16px;
            margin-right: 8px;
        }

        .status-dot.error {
            color: #dc3545; /* Red */
        }

        .status-dot.warning {
            color: #ffc107; /* Yellow */
        }

        .status-dot.success {
            color: #28a745; /* Green */
        }

        .status-dot.info {
            color: #17a2b8; /* Blue */
        }

        /* Option 2: CSS-Created Circular Dots */
        .status-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 12px;
            display: inline-block;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
        }

        .dot.error {
            background-color: #dc3545;
        }

        .dot.warning {
            background-color: #ffc107;
        }

        .dot.success {
            background-color: #28a745;
        }

        .dot.info {
            background-color: #17a2b8;
        }

        /* Option 3: Using CSS Pseudo-elements */
        .alert {
            position: relative;
            padding: 12px 16px 12px 32px;
            margin-bottom: 8px;
            border-radius: 4px;
            background-color: #f8f9fa;
            border-left: 4px solid transparent;
        }

        .alert::before {
            content: '';
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .alert.error {
            border-left-color: #dc3545;
            background-color: #f8d7da;
        }

        .alert.error::before {
            background-color: #dc3545;
        }

        .alert.warning {
            border-left-color: #ffc107;
            background-color: #fff3cd;
        }

        .alert.warning::before {
            background-color: #ffc107;
        }

        .alert.success {
            border-left-color: #28a745;
            background-color: #d4edda;
        }

        .alert.success::before {
            background-color: #28a745;
        }

        .alert.info {
            border-left-color: #17a2b8;
            background-color: #d1ecf1;
        }

        .alert.info::before {
            background-color: #17a2b8;
        }

        /* Animated Pulsing Dots */
        .dot.pulsing {
            animation: pulse 2s infinite;
        }

        .dot.pulsing.error {
            animation: pulse-red 2s infinite;
        }

        .dot.pulsing.warning {
            animation: pulse-yellow 2s infinite;
        }

        .dot.pulsing.success {
            animation: pulse-green 2s infinite;
        }

        @keyframes pulse-red {
            0% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
            }
        }

        @keyframes pulse-yellow {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
            }
        }

        @keyframes pulse-green {
            0% {
                box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
            }
        }

        /* Size Variants */
        .dot.small {
            width: 8px;
            height: 8px;
        }

        .dot.large {
            width: 16px;
            height: 16px;
        }

        .dot.extra-large {
            width: 20px;
            height: 20px;
        }

        /* Inline status indicators */
        .inline-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-right: 20px;
        }
    </style>
 </head>
 <body>
    <h1>CSS Status Dots Demo</h1>

    <div class="demo-section">
        <h2>Option 1: Unicode Bullet Characters</h2>
        <p>Simple and lightweight using the bullet character (●) with CSS colors:</p>
        <div>
            <span class="status-dot error">●</span> Critical Error<br>
            <span class="status-dot warning">●</span> Warning Message<br>
            <span class="status-dot success">●</span> Success Message<br>
            <span class="status-dot info">●</span> Info Message
        </div>
    </div>

    <div class="demo-section">
        <h2>Option 2: CSS-Created Circular Dots</h2>
        <p>Pure CSS circles with more styling control:</p>
        <div>
            <div class="status-item">
                <span class="dot error"></span>
                Database connection failed
            </div>
            <div class="status-item">
                <span class="dot warning"></span>
                High memory usage detected
            </div>
            <div class="status-item">
                <span class="dot success"></span>
                All systems operational
            </div>
            <div class="status-item">
                <span class="dot info"></span>
                Maintenance scheduled for tonight
            </div>
        </div>
    </div>

    <div class="demo-section">
        <h2>Option 3: Alert Messages with Pseudo-element Dots</h2>
        <p>Full alert cards with integrated status dots:</p>
        <div>
            <div class="alert error">
                Critical system failure detected. Please contact support immediately.
            </div>
            <div class="alert warning">
                Warning: SSL certificate expires in 7 days.
            </div>
            <div class="alert success">
                Backup completed successfully at 2:30 AM.
            </div>
            <div class="alert info">
                System maintenance will begin at midnight tonight.
            </div>
        </div>
    </div>

    <div class="demo-section">
        <h2>Animated Pulsing Dots</h2>
        <p>Add attention-grabbing animations for critical statuses:</p>
        <div>
            <div class="status-item">
                <span class="dot error pulsing"></span>
                Critical server outage (pulsing)
            </div>
            <div class="status-item">
                <span class="dot warning pulsing"></span>
                High CPU usage (pulsing)
            </div>
            <div class="status-item">
                <span class="dot success pulsing"></span>
                Deployment in progress (pulsing)
            </div>
        </div>
    </div>

    <div class="demo-section">
        <h2>Different Sizes</h2>
        <p>Various dot sizes for different contexts:</p>
        <div style="margin-bottom: 15px;">
            <span class="inline-status">
                <span class="dot error small"></span>
                Small
            </span>
            <span class="inline-status">
                <span class="dot warning"></span>
                Default
            </span>
            <span class="inline-status">
                <span class="dot success large"></span>
                Large
            </span>
            <span class="inline-status">
                <span class="dot info extra-large"></span>
                Extra Large
            </span>
        </div>
    </div>

    <div class="demo-section">
        <h2>Inline Usage Examples</h2>
        <p>Perfect for status indicators in tables, lists, or inline text:</p>
        <ul>
            <li><span class="dot error small"></span> Server 1: Offline</li>
            <li><span class="dot success small"></span> Server 2: Online</li>
            <li><span class="dot warning small"></span> Server 3: Maintenance</li>
            <li><span class="dot info small"></span> Server 4: Standby</li>
        </ul>

        <p>You can also use them inline within sentences: The API status is currently
        <span class="dot success small" style="margin: 0 4px;"></span>operational,
        but the database shows <span class="dot warning small" style="margin: 0 4px;"></span>warnings.</p>
    </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>CSS Status Dots Demo</title>
	<style>
	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	line-height: 1.6;
	background-color: #f8f9fa;
	}

	.demo-section {
	background: white;
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	h1, h2 {
	color: #333;
	}

	/* Option 1: Unicode Bullet with CSS Colors */
	.status-dot {
	font-size: 16px;
	margin-right: 8px;
	}

	.status-dot.error {
	color: #dc3545; /* Red */
	}

	.status-dot.warning {
	color: #ffc107; /* Yellow */
	}

	.status-dot.success {
	color: #28a745; /* Green */
	}

	.status-dot.info {
	color: #17a2b8; /* Blue */
	}

	/* Option 2: CSS-Created Circular Dots */
	.status-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	}

	.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 12px;
	display: inline-block;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
	}

	.dot.error {
	background-color: #dc3545;
	}

	.dot.warning {
	background-color: #ffc107;
	}

	.dot.success {
	background-color: #28a745;
	}

	.dot.info {
	background-color: #17a2b8;
	}

	/* Option 3: Using CSS Pseudo-elements */
	.alert {
	position: relative;
	padding: 12px 16px 12px 32px;
	margin-bottom: 8px;
	border-radius: 4px;
	background-color: #f8f9fa;
	border-left: 4px solid transparent;
	}

	.alert::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	}

	.alert.error {
	border-left-color: #dc3545;
	background-color: #f8d7da;
	}

	.alert.error::before {
	background-color: #dc3545;
	}

	.alert.warning {
	border-left-color: #ffc107;
	background-color: #fff3cd;
	}

	.alert.warning::before {
	background-color: #ffc107;
	}

	.alert.success {
	border-left-color: #28a745;
	background-color: #d4edda;
	}

	.alert.success::before {
	background-color: #28a745;
	}

	.alert.info {
	border-left-color: #17a2b8;
	background-color: #d1ecf1;
	}

	.alert.info::before {
	background-color: #17a2b8;
	}

	/* Animated Pulsing Dots */
	.dot.pulsing {
	animation: pulse 2s infinite;
	}

	.dot.pulsing.error {
	animation: pulse-red 2s infinite;
	}

	.dot.pulsing.warning {
	animation: pulse-yellow 2s infinite;
	}

	.dot.pulsing.success {
	animation: pulse-green 2s infinite;
	}

	@keyframes pulse-red {
	0% {
	box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
	}
	70% {
	box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
	}
	}

	@keyframes pulse-yellow {
	0% {
	box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
	}
	70% {
	box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
	}
	}

	@keyframes pulse-green {
	0% {
	box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
	}
	70% {
	box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
	}
	}

	/* Size Variants */
	.dot.small {
	width: 8px;
	height: 8px;
	}

	.dot.large {
	width: 16px;
	height: 16px;
	}

	.dot.extra-large {
	width: 20px;
	height: 20px;
	}

	/* Inline status indicators */
	.inline-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 20px;
	}
	</style>
	</head>
	<body>
	<h1>CSS Status Dots Demo</h1>

	<div class="demo-section">
	<h2>Option 1: Unicode Bullet Characters</h2>
	<p>Simple and lightweight using the bullet character (●) with CSS colors:</p>
	<div>
	<span class="status-dot error">●</span> Critical Error<br>
	<span class="status-dot warning">●</span> Warning Message<br>
	<span class="status-dot success">●</span> Success Message<br>
	<span class="status-dot info">●</span> Info Message
	</div>
	</div>

	<div class="demo-section">
	<h2>Option 2: CSS-Created Circular Dots</h2>
	<p>Pure CSS circles with more styling control:</p>
	<div>
	<div class="status-item">
	<span class="dot error"></span>
	Database connection failed
	</div>
	<div class="status-item">
	<span class="dot warning"></span>
	High memory usage detected
	</div>
	<div class="status-item">
	<span class="dot success"></span>
	All systems operational
	</div>
	<div class="status-item">
	<span class="dot info"></span>
	Maintenance scheduled for tonight
	</div>
	</div>
	</div>

	<div class="demo-section">
	<h2>Option 3: Alert Messages with Pseudo-element Dots</h2>
	<p>Full alert cards with integrated status dots:</p>
	<div>
	<div class="alert error">
	Critical system failure detected. Please contact support immediately.
	</div>
	<div class="alert warning">
	Warning: SSL certificate expires in 7 days.
	</div>
	<div class="alert success">
	Backup completed successfully at 2:30 AM.
	</div>
	<div class="alert info">
	System maintenance will begin at midnight tonight.
	</div>
	</div>
	</div>

	<div class="demo-section">
	<h2>Animated Pulsing Dots</h2>
	<p>Add attention-grabbing animations for critical statuses:</p>
	<div>
	<div class="status-item">
	<span class="dot error pulsing"></span>
	Critical server outage (pulsing)
	</div>
	<div class="status-item">
	<span class="dot warning pulsing"></span>
	High CPU usage (pulsing)
	</div>
	<div class="status-item">
	<span class="dot success pulsing"></span>
	Deployment in progress (pulsing)
	</div>
	</div>
	</div>

	<div class="demo-section">
	<h2>Different Sizes</h2>
	<p>Various dot sizes for different contexts:</p>
	<div style="margin-bottom: 15px;">
	<span class="inline-status">
	<span class="dot error small"></span>
	Small
	</span>
	<span class="inline-status">
	<span class="dot warning"></span>
	Default
	</span>
	<span class="inline-status">
	<span class="dot success large"></span>
	Large
	</span>
	<span class="inline-status">
	<span class="dot info extra-large"></span>
	Extra Large
	</span>
	</div>
	</div>

	<div class="demo-section">
	<h2>Inline Usage Examples</h2>
	<p>Perfect for status indicators in tables, lists, or inline text:</p>
	<ul>
	<li><span class="dot error small"></span> Server 1: Offline</li>
	<li><span class="dot success small"></span> Server 2: Online</li>
	<li><span class="dot warning small"></span> Server 3: Maintenance</li>
	<li><span class="dot info small"></span> Server 4: Standby</li>
	</ul>

	<p>You can also use them inline within sentences: The API status is currently
	<span class="dot success small" style="margin: 0 4px;"></span>operational,
	but the database shows <span class="dot warning small" style="margin: 0 4px;"></span>warnings.</p>
	</div>

	</body>
	</html>