phi-kit.github.io/test.html at main · phi-kit/phi-kit.github.io · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Content from JSON</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        /* Simple loading spinner */
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #44D62C; /* Razer Green */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-gray-900 text-white">

    <div class="container mx-auto px-4 py-8">

        <header class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold mb-2">My Content Hub</h1>
            <p class="text-lg text-gray-400">Loading data from a local JSON file.</p>
        </header>

        <!-- Section for Games -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-6 border-l-4 border-green-400 pl-4">Favorite Games</h2>
            <!-- This is where the game cards will be injected by JavaScript -->
            <div id="games-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Loading spinners will be placed here initially -->
            </div>
        </section>

        <!-- Section for Actors -->
        <section>
            <h2 class="text-3xl font-bold mb-6 border-l-4 border-green-400 pl-4">Favorite Actors</h2>
            <!-- This is where the actor cards will be injected by JavaScript -->
            <div id="actors-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Loading spinners will be placed here initially -->
            </div>
        </section>

    </div>

    <script>
        // --- Main function to fetch and display data ---
        async function loadContent() {
            // Target containers
            const gamesContainer = document.getElementById('games-container');
            const actorsContainer = document.getElementById('actors-container');

            // Show loading indicators
            showLoadingState(gamesContainer, 4);
            showLoadingState(actorsContainer, 3);

            try {
                // Use the Fetch API to get the JSON file
                // It returns a "Promise" which is a placeholder for a future value
                const response = await fetch('https://cdn.jsdelivr.net/gh/phi-kit/CDN@main/content/game-actor.json');

                // Check if the request was successful
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                // Parse the JSON data from the response
                const data = await response.json();

                // Short delay to simulate network latency and see the loader
                await new Promise(resolve => setTimeout(resolve, 500));

                // Clear loading states
                gamesContainer.innerHTML = '';
                actorsContainer.innerHTML = '';

                // Populate the containers with the fetched data
                populateGames(data.games);
                populateActors(data.actors);

            } catch (error) {
                // If something goes wrong, log it and show an error message
                console.error("Could not fetch the data:", error);
                gamesContainer.innerHTML = `<p class="text-red-400 col-span-full">Failed to load game data. Please check the console for errors.</p>`;
                actorsContainer.innerHTML = `<p class="text-red-400 col-span-full">Failed to load actor data. Please check the console for errors.</p>`;
            }
        }

        // --- Helper function to create game cards ---
        function populateGames(games) {
            const container = document.getElementById('games-container');
            if (!games || games.length === 0) {
                container.innerHTML = '<p>No games found in the data file.</p>';
                return;
            }

            games.forEach(game => {
                const card = `
                    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-green-400/30 transform hover:-translate-y-1 transition-all duration-300">
                        <img class="w-full h-48 object-cover" src="${game.imageUrl}" alt="Image for ${game.title}">
                        <div class="p-4">
                            <h3 class="font-bold text-xl mb-1 text-green-400">${game.title}</h3>
                            <p class="text-gray-400 text-sm mb-2"><strong>Genre:</strong> ${game.genre}</p>
                            <p class="text-gray-400 text-sm"><strong>Platform:</strong> ${game.platform}</p>
                        </div>
                    </div>
                `;
                // Append the new card to the container
                container.innerHTML += card;
            });
        }

        // --- Helper function to create actor cards ---
        function populateActors(actors) {
            const container = document.getElementById('actors-container');
            if (!actors || actors.length === 0) {
                container.innerHTML = '<p>No actors found in the data file.</p>';
                return;
            }

            actors.forEach(actor => {
                const card = `
                    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-green-400/30 transform hover:-translate-y-1 transition-all duration-300">
                        <img class="w-full h-56 object-cover" src="${actor.imageUrl}" alt="Photo of ${actor.name}">
                        <div class="p-4">
                            <h3 class="font-bold text-xl mb-1">${actor.name}</h3>
                            <p class="text-gray-400 text-sm"><strong>Known For:</strong> ${actor.knownFor}</p>
                        </div>
                    </div>
                `;
                 // Append the new card to the container
                container.innerHTML += card;
            });
        }

        // --- Helper function to show a loading state ---
        function showLoadingState(container, count) {
            container.innerHTML = ''; // Clear previous content
            for (let i = 0; i < count; i++) {
                const loaderCard = `
                    <div class="bg-gray-800 rounded-lg p-4 animate-pulse">
                        <div class="bg-gray-700 h-48 rounded-md mb-4"></div>
                        <div class="h-6 bg-gray-700 rounded w-3/4 mb-2"></div>
                        <div class="h-4 bg-gray-700 rounded w-1/2"></div>
                    </div>
                `;
                container.innerHTML += loaderCard;
            }
        }


        // --- Event Listener ---
        // Run the loadContent function once the webpage's DOM is fully loaded
        document.addEventListener('DOMContentLoaded', loadContent);
    </script>
</body>
</html>