wallrust.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wallrust Color Palette</title>
    <style>
        :root {
            /* font-family intentionally omitted as per user instruction */
            line-height: 1.6;
            color: #e1e1e1;
            --primary-bg: #121212;
            --card-bg: #1e1e1e;
            --hover-bg: #2a2a2a;
            --border-color: #333;
            --accent-color: #6c5ce7;
            --text-primary: #e1e1e1;
            --text-secondary: #b0b0b0;
        }
        body {
            background-color: var(--primary-bg);
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        h1, h2, h3 {
            margin-top: 1.5em;
            margin-bottom: 0.5em;
            color: #fff;
        }
        h1 {
            font-size: 2.2rem;
            letter-spacing: -0.5px;
            background: linear-gradient(90deg, var(--accent-color), #a29bfe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            margin-bottom: 1.5rem;
        }
        h2 {
            font-size: 1.6rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-color), transparent);
            border-radius: 3px;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .info {
            background-color: var(--card-bg);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
        }
        .info p {
            margin: 0.5em 0;
        }
        .info strong {
            color: #fff;
        }
        .palette-section {
            background-color: var(--card-bg);
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
        }
        .palette {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;
        }
        .color-block {
            width: 110px;
            height: 110px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Fira Code', monospace;
            font-size: 0.8em;
            transition: all 0.3s ease;
            word-break: break-all;
            padding: 5px;
            text-align: center;
            position: relative;
            backdrop-filter: blur(5px);
        }
        .color-block span {
            display: block;
            line-height: 1.3;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .color-block:hover {
            transform: translateY(-5px) scale(1.05);
            z-index: 1;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        .primary-block {
            border-radius: 8px;
            width: 160px;
            height: 160px;
            font-size: 1em;
            padding: 15px;
            display: flex ;
            flex-direction: column;
            align-items: center;
        }
        .accent-group {
            margin-bottom: 2em;
        }
        .accent-group-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 0.5em;
            color: #fff;
        }
        .accent-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        .accent-item {
            width: 100%;
            height: 90px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Fira Code', monospace;
            font-size: 0.75em;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            word-break: break-all;
            padding: 5px;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
        }
        .accent-item span {
            display: block;
            line-height: 1.3;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .accent-item:hover {
            transform: translateY(-5px) scale(1.05);
            z-index: 1;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        .color-text {
            text-shadow: 0 0 5px rgba(255,255,255,0.7);
        }
        .light-text {
            color: rgba(255,255,255,0.9);
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
        }
        .color-name {
            font-weight: bold;
            margin-bottom: 4px;
        }
        .color-value {
            font-size: 0.9em;
            opacity: 0.9;
            padding: 4px 8px;
            background: rgba(0,0,0,0.2);
            border-radius: 4px;
            margin-top: 5px;
        }
        
        /* Dark mode header */
        header {
            text-align: center;
            margin-bottom: 2rem;
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .section-title::before {
            content: "";
            width: 15px;
            height: 15px;
            background-color: var(--accent-color);
            border-radius: 50%;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .palette {
                justify-content: center;
            }
            
            h1 {
                font-size: 1.8rem;
            }
        }
        
        /* Add cool animation effects */
        .color-block, .accent-item {
            animation: fadeIn 0.6s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Add subtle gradient overlays */
        .color-block::after, .accent-item::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
            pointer-events: none;
        }
    </style>
    <script>
        function getTextColor(hexcolor) {
            const cleanHex = hexcolor.startsWith('#') ? hexcolor.slice(1) : hexcolor;
            const fullHex = cleanHex.length === 3 ? cleanHex.split('').map(char => char + char).join('') : cleanHex;

            const r = parseInt(fullHex.substr(0, 2), 16);
            const g = parseInt(fullHex.substr(2, 2), 16);
            const b = parseInt(fullHex.substr(4, 2), 16);
            const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
            return (yiq >= 128) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)';
        }

        document.addEventListener('DOMContentLoaded', () => {
            // Add staggered animation delay to color blocks
            document.querySelectorAll('.color-block, .accent-item').forEach((block, index) => {
                block.style.animationDelay = `${index * 0.05}s`;
                
                const bgColor = block.style.backgroundColor;
                let hexColor = '#000000';
                if (bgColor.startsWith('rgb')) {
                    const rgbaMatch = bgColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d*\.?\d+))?\)$/);
                    if (rgbaMatch) {
                        const r = parseInt(rgbaMatch[1]);
                        const g = parseInt(rgbaMatch[2]);
                        const b = parseInt(rgbaMatch[3]);
                        hexColor = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
                    }
                } else if (bgColor.startsWith('#')) {
                    hexColor = bgColor;
                }
                const textColor = getTextColor(hexColor);
                block.style.color = textColor;
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Wallrust theme engine </h1>
            <h5> written in rust </h5>
        </header>

        <div class="info">
            <p><strong>Image:</strong> ./test.png </p>
            <p><strong>Mode:</strong> Dark </p>
            <p><strong>Number of Primary Colors:</strong> 4 </p>
            <p>Color values are generated from the Image using <a href="https://github.com/prime-run/wallrust">Wallrust.</a></p>
        </div>

        <div class="palette-section">
            <div class="section-title">
                <h2>Primary Colors</h2>
            </div>
            <div class="palette" id="primary-palette">
                <div class="primary-block" style="background-color: #050910" title="#050910 - Primary 1">
                    <span class="color-name ">Primary 1</span>
                    <span class="color-value ">#050910</span>
                </div>
<div class="primary-block" style="background-color: #1E3251" title="#1E3251 - Primary 2">
                    <span class="color-name ">Primary 2</span>
                    <span class="color-value ">#1E3251</span>
                </div>
<div class="primary-block" style="background-color: #305B89" title="#305B89 - Primary 3">
                    <span class="color-name ">Primary 3</span>
                    <span class="color-value ">#305B89</span>
                </div>
<div class="primary-block" style="background-color: #3ACDF1" title="#3ACDF1 - Primary 4">
                    <span class="color-name ">Primary 4</span>
                    <span class="color-value ">#3ACDF1</span>
                </div>
            </div>

            <div class="section-title">
                <h2>Text Colors</h2>
            </div>
            <div class="palette" id="text-palette">
                <div class="color-block" style="background-color: #FFFFFF" title="#FFFFFF - Text 1">
                    <span class="color-name ">Text 1</span>
                    <span class="color-value ">#FFFFFF</span>
                </div>
<div class="color-block" style="background-color: #FFFFFF" title="#FFFFFF - Text 2">
                    <span class="color-name ">Text 2</span>
                    <span class="color-value ">#FFFFFF</span>
                </div>
<div class="color-block" style="background-color: #FFFFFF" title="#FFFFFF - Text 3">
                    <span class="color-name ">Text 3</span>
                    <span class="color-value ">#FFFFFF</span>
                </div>
<div class="color-block" style="background-color: #12100F" title="#12100F - Text 4">
                    <span class="color-name ">Text 4</span>
                    <span class="color-value ">#12100F</span>
                </div>
            </div>
        </div>

        <div class="palette-section">
            <div class="section-title">
                <h2>Accent Colors</h2>
            </div>
            <div class="accent-group"><div class="accent-group-title">Accents for Primary 1</div><div class="accent-grid"><div class="accent-item" style="background-color: #293852" title="#293852 - Accent 1-1"><span class="color-name">Accent 1-1</span><span class="color-value">#293852</span></div>
<div class="accent-item" style="background-color: #3A4C6B" title="#3A4C6B - Accent 1-2"><span class="color-name">Accent 1-2</span><span class="color-value">#3A4C6B</span></div>
<div class="accent-item" style="background-color: #4B5D7D" title="#4B5D7D - Accent 1-3"><span class="color-name">Accent 1-3</span><span class="color-value">#4B5D7D</span></div>
<div class="accent-item" style="background-color: #576B8F" title="#576B8F - Accent 1-4"><span class="color-name">Accent 1-4</span><span class="color-value">#576B8F</span></div>
<div class="accent-item" style="background-color: #657CA3" title="#657CA3 - Accent 1-5"><span class="color-name">Accent 1-5</span><span class="color-value">#657CA3</span></div>
<div class="accent-item" style="background-color: #7A94C2" title="#7A94C2 - Accent 1-6"><span class="color-name">Accent 1-6</span><span class="color-value">#7A94C2</span></div>
<div class="accent-item" style="background-color: #9AB5E6" title="#9AB5E6 - Accent 1-7"><span class="color-name">Accent 1-7</span><span class="color-value">#9AB5E6</span></div>
<div class="accent-item" style="background-color: #AAC3F0" title="#AAC3F0 - Accent 1-8"><span class="color-name">Accent 1-8</span><span class="color-value">#AAC3F0</span></div>
<div class="accent-item" style="background-color: #CCDFFF" title="#CCDFFF - Accent 1-9"><span class="color-name">Accent 1-9</span><span class="color-value">#CCDFFF</span></div></div></div>
<div class="accent-group"><div class="accent-group-title">Accents for Primary 2</div><div class="accent-grid"><div class="accent-item" style="background-color: #293952" title="#293952 - Accent 2-1"><span class="color-name">Accent 2-1</span><span class="color-value">#293952</span></div>
<div class="accent-item" style="background-color: #3A4D6B" title="#3A4D6B - Accent 2-2"><span class="color-name">Accent 2-2</span><span class="color-value">#3A4D6B</span></div>
<div class="accent-item" style="background-color: #4B5F7D" title="#4B5F7D - Accent 2-3"><span class="color-name">Accent 2-3</span><span class="color-value">#4B5F7D</span></div>
<div class="accent-item" style="background-color: #576D8F" title="#576D8F - Accent 2-4"><span class="color-name">Accent 2-4</span><span class="color-value">#576D8F</span></div>
<div class="accent-item" style="background-color: #657EA3" title="#657EA3 - Accent 2-5"><span class="color-name">Accent 2-5</span><span class="color-value">#657EA3</span></div>
<div class="accent-item" style="background-color: #7A96C2" title="#7A96C2 - Accent 2-6"><span class="color-name">Accent 2-6</span><span class="color-value">#7A96C2</span></div>
<div class="accent-item" style="background-color: #9AB7E6" title="#9AB7E6 - Accent 2-7"><span class="color-name">Accent 2-7</span><span class="color-value">#9AB7E6</span></div>
<div class="accent-item" style="background-color: #AAC5F0" title="#AAC5F0 - Accent 2-8"><span class="color-name">Accent 2-8</span><span class="color-value">#AAC5F0</span></div>
<div class="accent-item" style="background-color: #CCE0FF" title="#CCE0FF - Accent 2-9"><span class="color-name">Accent 2-9</span><span class="color-value">#CCE0FF</span></div></div></div>
<div class="accent-group"><div class="accent-group-title">Accents for Primary 3</div><div class="accent-grid"><div class="accent-item" style="background-color: #293D52" title="#293D52 - Accent 3-1"><span class="color-name">Accent 3-1</span><span class="color-value">#293D52</span></div>
<div class="accent-item" style="background-color: #3A526B" title="#3A526B - Accent 3-2"><span class="color-name">Accent 3-2</span><span class="color-value">#3A526B</span></div>
<div class="accent-item" style="background-color: #4B637D" title="#4B637D - Accent 3-3"><span class="color-name">Accent 3-3</span><span class="color-value">#4B637D</span></div>
<div class="accent-item" style="background-color: #57728F" title="#57728F - Accent 3-4"><span class="color-name">Accent 3-4</span><span class="color-value">#57728F</span></div>
<div class="accent-item" style="background-color: #6583A3" title="#6583A3 - Accent 3-5"><span class="color-name">Accent 3-5</span><span class="color-value">#6583A3</span></div>
<div class="accent-item" style="background-color: #7A9DC2" title="#7A9DC2 - Accent 3-6"><span class="color-name">Accent 3-6</span><span class="color-value">#7A9DC2</span></div>
<div class="accent-item" style="background-color: #9ABEE6" title="#9ABEE6 - Accent 3-7"><span class="color-name">Accent 3-7</span><span class="color-value">#9ABEE6</span></div>
<div class="accent-item" style="background-color: #AACCF0" title="#AACCF0 - Accent 3-8"><span class="color-name">Accent 3-8</span><span class="color-value">#AACCF0</span></div>
<div class="accent-item" style="background-color: #CCE5FF" title="#CCE5FF - Accent 3-9"><span class="color-name">Accent 3-9</span><span class="color-value">#CCE5FF</span></div></div></div>
<div class="accent-group"><div class="accent-group-title">Accents for Primary 4</div><div class="accent-grid"><div class="accent-item" style="background-color: #294A52" title="#294A52 - Accent 4-1"><span class="color-name">Accent 4-1</span><span class="color-value">#294A52</span></div>
<div class="accent-item" style="background-color: #3A616B" title="#3A616B - Accent 4-2"><span class="color-name">Accent 4-2</span><span class="color-value">#3A616B</span></div>
<div class="accent-item" style="background-color: #4B737D" title="#4B737D - Accent 4-3"><span class="color-name">Accent 4-3</span><span class="color-value">#4B737D</span></div>
<div class="accent-item" style="background-color: #57848F" title="#57848F - Accent 4-4"><span class="color-name">Accent 4-4</span><span class="color-value">#57848F</span></div>
<div class="accent-item" style="background-color: #6597A3" title="#6597A3 - Accent 4-5"><span class="color-name">Accent 4-5</span><span class="color-value">#6597A3</span></div>
<div class="accent-item" style="background-color: #7AB4C2" title="#7AB4C2 - Accent 4-6"><span class="color-name">Accent 4-6</span><span class="color-value">#7AB4C2</span></div>
<div class="accent-item" style="background-color: #9AD7E6" title="#9AD7E6 - Accent 4-7"><span class="color-name">Accent 4-7</span><span class="color-value">#9AD7E6</span></div>
<div class="accent-item" style="background-color: #AAE2F0" title="#AAE2F0 - Accent 4-8"><span class="color-name">Accent 4-8</span><span class="color-value">#AAE2F0</span></div>
<div class="accent-item" style="background-color: #CCF5FF" title="#CCF5FF - Accent 4-9"><span class="color-name">Accent 4-9</span><span class="color-value">#CCF5FF</span></div></div></div>
        </div>
    </div>
</body>
</html>