JS_based_CSS/test_skeuomorphic.html at main · mytech-today-now/JS_based_CSS · 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
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Skeuomorphic Theme</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f0f0f0;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-button {
            background: #007acc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #005a9e;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>Skeuomorphic Theme Test</h1>
        <p>This page tests if the skeuomorphic theme style cards are visible.</p>

        <div class="test-controls">
            <button class="test-button" onclick="openMainPage()">Open Main Page</button>
            <button class="test-button" onclick="testSkeuomorphicTheme()">Test Skeuomorphic Theme</button>
            <button class="test-button" onclick="checkStyleCards()">Check Style Cards Visibility</button>
        </div>

        <div id="test-results"></div>

        <h2>Instructions:</h2>
        <ol>
            <li>Click "Open Main Page" to open the main index.html page</li>
            <li>On the main page, enable Dark Mode using the toggle in the top right</li>
            <li>Click on the "Skeuomorphic" style card or title to apply the theme</li>
            <li>Verify that the style cards are visible and properly rendered</li>
            <li>The style cards should appear as dark post-it note style cards with different colors</li>
        </ol>

        <h2>Expected Results:</h2>
        <ul>
            <li>Style cards should be visible in a grid layout</li>
            <li>Each card should have a dark background with paper texture</li>
            <li>Cards should have different colors (dark yellow, salmon, blue, green, lavender)</li>
            <li>Text should be readable in light colors</li>
            <li>Cards should have subtle shadows and hover effects</li>
        </ul>

        <h2>Troubleshooting:</h2>
        <p>If style cards are not visible:</p>
        <ul>
            <li>Check browser console for JavaScript errors</li>
            <li>Verify that the main element has display: flex and is visible</li>
            <li>Check that style-card elements have display: block and are visible</li>
            <li>Try switching to a different theme and back to skeuomorphic</li>
        </ul>
    </div>

    <script>
        function openMainPage() {
            window.open('index.html', '_blank');
            addResult('info', 'Main page opened in new tab');
        }

        function testSkeuomorphicTheme() {
            addResult('info', 'Testing skeuomorphic theme...');

            // This would need to be run in the context of the main page
            addResult('info', 'Please manually test on the main page:');
            addResult('info', '1. Enable Dark Mode');
            addResult('info', '2. Click on "Skeuomorphic" theme');
            addResult('info', '3. Verify style cards are visible');
        }

        function checkStyleCards() {
            addResult('info', 'To check style cards visibility:');
            addResult('info', '1. Open browser developer tools (F12)');
            addResult('info', '2. In console, run: $(".style-card").length');
            addResult('info', '3. In console, run: $(".style-card:visible").length');
            addResult('info', '4. Both should return the same number (26 cards)');
        }

        function addResult(type, message) {
            const resultsDiv = document.getElementById('test-results');
            const resultDiv = document.createElement('div');
            resultDiv.className = `status ${type}`;
            resultDiv.textContent = message;
            resultsDiv.appendChild(resultDiv);
        }
    </script>
</body>
</html>