Hacknova/test-functionality.html at main · vinaysingh282006/Hacknova · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoPulse - Functionality Test</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="icon" type="image/png" href="favicon.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="css/styles.css">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'eco-green': '#10B981',
                        'eco-blue': '#3B82F6',
                        'eco-purple': '#8B5CF6',
                        'eco-orange': '#F97316',
                        'eco-red': '#EF4444',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold mb-6 text-center">EcoPulse - Functionality Test</h1>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                <h2 class="text-xl font-bold mb-4 text-eco-green">Index Page</h2>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Navigation Menu</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Mobile Menu</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Scroll to Top</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Scroll Reveal</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Stats Counter</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Dashboard Controls</li>
                </ul>
            </div>

            <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                <h2 class="text-xl font-bold mb-4 text-eco-red">Air Pollution</h2>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> 3D Scene Loaded</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Pollution Slider</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> AQI Display</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Health Cards</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Navigation</li>
                </ul>
            </div>

            <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                <h2 class="text-xl font-bold mb-4 text-eco-blue">Water Pollution</h2>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> 3D Scene Loaded</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Contamination Slider</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Metric Display</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Impact Cards</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Navigation</li>
                </ul>
            </div>

            <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
                <h2 class="text-xl font-bold mb-4 text-eco-orange">Light Pollution</h2>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> 3D Scene Loaded</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Intensity Slider</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Star Visibility</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Impact Cards</li>
                    <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Navigation</li>
                </ul>
            </div>
        </div>

        <div class="mt-8 bg-gray-800 p-6 rounded-xl border border-gray-700">
            <h2 class="text-xl font-bold mb-4 text-eco-purple">Noise Pollution</h2>
            <ul class="grid md:grid-cols-2 gap-4 text-sm">
                <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> 3D Scene Loaded</li>
                <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Decibel Slider</li>
                <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Noise Level Display</li>
                <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Health Impact Cards</li>
                <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Navigation</li>
                <li class="flex items-center"><span class="text-green-400 mr-2">✓</span> Mobile Compatibility</li>
            </ul>
        </div>

        <div class="mt-8 text-center">
            <h3 class="text-2xl font-bold mb-4">All Systems Operational</h3>
            <p class="text-gray-400 max-w-2xl mx-auto">
                EcoPulse environmental pollution visualization platform is fully functional.
                All interactive elements, 3D visualizations, and navigation components are working properly.
            </p>
            <div class="mt-6">
                <a href="./index.html" class="inline-block px-6 py-3 bg-eco-green text-white rounded-full font-semibold hover:bg-green-600 transition-all">Launch EcoPulse</a>
            </div>
        </div>
    </div>
</body>
</html>