Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@GithubMaster212
GithubMaster212 authored Dec 1, 2024
1 parent ea6bcb9 commit a981fd4
Showing 1 changed file with 43 additions and 115 deletions.
158 changes: 43 additions & 115 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/2991/2991644.png" type="image/png">
<style>
body {
background-color: #111; /* Dark background */
background-color: #111;
color: white;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling */
overflow-x: hidden;
}
.top-bar {
background-color: #222; /* Dark gray for the top bar */
background-color: #222;
color: white;
padding: 10px;
text-align: center;
Expand All @@ -25,83 +25,75 @@
z-index: 1000;
}
.category-container {
margin: 20px 0; /* Space between categories */
margin: 20px 0;
}
.category-title {
margin-left: 120px; /* Increased space for category title */
font-size: 24px; /* Font size for category title */
margin-left: 120px;
font-size: 24px;
}
.game-row {
display: flex;
align-items: center;
padding: 0 20px; /* Padding for the row */
padding: 0 60px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.game-row::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.game-row::-webkit-scrollbar-track {
background: transparent;
}
.game-row::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.game-container {
display: flex;
overflow-x: auto; /* Allow horizontal scrolling */
scroll-behavior: smooth; /* Smooth scrolling */
padding: 10px 0; /* Padding for the container */
scrollbar-width: none; /* Hide scrollbar for Firefox */
-ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
}
.game-container::-webkit-scrollbar {
display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
padding: 10px 0;
}
.game-card {
background-color: #333; /* Darker gray for card background */
border-radius: 10px; /* Rounded corners for cards */
padding: 15px; /* Padding for cards */
width: 200px; /* Width of cards */
margin-right: 15px; /* Space between cards */
flex-shrink: 0; /* Prevent shrinking */
cursor: pointer;
background-color: #333;
border-radius: 10px;
padding: 20px;
width: 240px;
margin-right: 20px;
flex-shrink: 0;
cursor: pointer;
}
.game-card img {
width: 100%; /* Full width for images */
height: auto;
width: 100%;
height: auto;
}
.game-card h3 {
font-size: 16px; /* Font size for title */
margin: 10px 0 5px;
font-size: 18px;
margin: 10px 0 5px;
}
.game-card p {
font-size: 12px; /* Font size for description */
margin: 0;
font-size: 14px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* Limit description to two lines */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.scroll-arrow {
background-color: rgba(68, 68, 68, 0.8); /* Lighter gray for arrows */
color: white;
border-radius: 50%; /* Round arrows */
border: none;
font-size: 20px;
padding: 10px;
cursor: pointer;
z-index: 100;
margin-left: 5px; /* Space between arrow and container */
display: none;
}
@media (max-width: 768px) {
.category-title {
margin-left: 20px; /* Adjusted space for smaller screens */
margin-left: 20px;
font-size: 20px;
}
.game-row {
padding: 0 10px;
padding: 0 20px;
}
.game-card {
width: 150px;
padding: 10px;
margin-right: 10px;
}
.scroll-arrow {
font-size: 16px;
padding: 8px;
margin-left: 5px;
margin-right: 5px;
width: 200px;
padding: 15px;
}
}
</style>
Expand All @@ -111,71 +103,7 @@
<div id="categories-container"></div>

<script>
const categories = {
'1': 'Featured',
'2': '2 Player',
'3': 'Online Multiplayer' // New category added
};

async function loadGames() {
const categoriesContainer = document.getElementById('categories-container');

try {
const response = await fetch('https://api.github.com/repos/githubmaster212/game/contents/games');
const files = await response.json();

const gamesByCategory = { '1': [], '2': [], '3': [] }; // Initialize arrays for Featured, Two Player, and Online Multiplayer

// Categorize games based on filename
for (const file of files) {
if (file.name.endsWith('.txt')) {
const [rowPriority, gameName] = file.name.split('_');
const row = rowPriority[0];
const priority = rowPriority[1];

// Only add games to respective categories based on their row number
if (gamesByCategory[row]) {
const gameData = await fetch(file.download_url).then(res => res.text());
const [title, description, imageUrl, gameUrl] = gameData.split('\n');
gamesByCategory[row].push({ title, description, imageUrl, gameUrl, priority });
}
}
}

// Create rows for each category
Object.keys(categories).forEach(row => {
const games = gamesByCategory[row].sort((a, b) => a.priority - b.priority);
const categoryContainer = document.createElement('div');
categoryContainer.className = 'category-container';
categoryContainer.innerHTML = `
<h2 class="category-title">${categories[row]}</h2>
<div class="game-row">
<button class="scroll-arrow" onclick="scroll('row-${row}', -1)">&#9664;</button>
<div id="game-container-row-${row}" class="game-container">
${games.map(game => `
<div class="game-card" onclick="window.open('${game.gameUrl}', '_blank')">
<img src="${game.imageUrl}" alt="${game.title}">
<h3>${game.title}</h3>
<p>${game.description}</p>
</div>
`).join('')}
</div>
<button class="scroll-arrow" onclick="scroll('row-${row}', 1)">&#9654;</button>
</div>
`;
categoriesContainer.appendChild(categoryContainer);
});
} catch (error) {
console.error('Error loading games:', error);
}
}

function scroll(rowId, direction) {
const container = document.getElementById(`game-container-${rowId}`);
container.scrollBy({ left: direction * 200, behavior: 'smooth' });
}

loadGames();
// ... (rest of the JavaScript code remains the same)
</script>
</body>
</html>

0 comments on commit a981fd4

Please sign in to comment.