summarizewith/test-widget.html at main · raztronaut/summarizewith · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget Verification</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 2rem;
            background: #888;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1rem;
        }

        .section {
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .light {
            background: #f0f0f0;
            color: #333;
        }

        .dark {
            background: #1a1a1a;
            color: #f0f0f0;
        }

        h2 {
            margin-top: 0;
        }
    </style>
    <script src="./dist/summarize-widget.iife.js"></script>
</head>

<body>
    <h1>Widget Verification</h1>


    <div style="margin-bottom: 2rem;">
        <h2>Standard Themes</h2>
        <div class="grid-container">
            <div class="section" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <h3>Default (Glass)</h3>
                <summarize-with-ai></summarize-with-ai>
            </div>
            <div class="section light">
                <h3>Light Theme</h3>
                <summarize-with-ai theme="light"></summarize-with-ai>
            </div>
            <div class="section dark">
                <h3>Dark Theme</h3>
                <summarize-with-ai theme="dark"></summarize-with-ai>
            </div>
        </div>
    </div>

    <h2>Glass Theme Grid (Liquid)</h2>
    <div id="grid-glass" class="grid-container"></div>

    <h2>Minimal Theme Grid</h2>
    <div id="grid" class="grid-container"></div>

    <script>
        const colors = [
            // Standard Grays
            '#ffffff', '#f8f9fa', '#e9ecef', '#dee2e6', '#ced4da', '#adb5bd', '#6c757d', '#495057', '#343a40', '#212529', '#000000',
            // Vibrant Colors
            '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50',
            // Pastels
            '#ffcdd2', '#f8bbd0', '#e1bee7', '#d1c4e9', '#c5cae9', '#bbdefb', '#b3e5fc', '#b2ebf2', '#b2dfdb', '#c8e6c9',
            // Darker Shades
            '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#1a237e', '#0d47a1', '#01579b', '#006064', '#004d40', '#1b5e20',
            // Earth Tones
            '#795548', '#8d6e63', '#a1887f', '#d7ccc8', '#ffcc80', '#ffe0b2', '#fff3e0', '#3e2723', '#5d4037', '#795548'
        ];

        const gridMinimal = document.getElementById('grid');
        const gridGlass = document.getElementById('grid-glass');

        function createCard(color, theme) {
            const wrapper = document.createElement('div');
            wrapper.className = 'section';
            wrapper.style.backgroundColor = color;

            // Simple logic to decide text color for contrast
            const r = parseInt(color.slice(1, 3), 16);
            const g = parseInt(color.slice(3, 5), 16);
            const b = parseInt(color.slice(5, 7), 16);
            const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
            const textColor = (yiq >= 128) ? 'black' : 'white';

            wrapper.style.color = textColor;
            wrapper.innerHTML = `
                <h3 style="margin:0 0 10px 0; font-size: 14px; opacity: 0.7;">${color}</h3>
                <summarize-with-ai theme="${theme}"></summarize-with-ai>
            `;
            return wrapper;
        }

        colors.forEach(color => {
            gridMinimal.appendChild(createCard(color, 'minimal'));
            gridGlass.appendChild(createCard(color, 'glass'));
        });
    </script>

    <script>
        // Mount widgets
        document.addEventListener('DOMContentLoaded', () => {
            // The widget auto-mounts if the script is included and the element is present
        });
    </script>

</body>

</html>