Wilfred · January 21, 2025 07:49
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Issues Fetcher</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
            background-size: 400% 400%;
            animation: gradientBG 10s ease infinite;
        }
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        form {
            margin-bottom: 20px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
            border: 2px dashed #ff6f61;
        }
        input {
            margin: 5px 0;
            padding: 10px;
            width: 300px;
            border: 2px solid #ff6f61;
            border-radius: 4px;
            background: #fff5f5;
        }
        button {
            padding: 10px 20px;
            color: #fff;
            background: linear-gradient(135deg, #ff6f61, #d74177);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
        button:hover {
            background: linear-gradient(135deg, #d74177, #ff6f61);
        }
        .card {
            margin: 10px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            width: 80%;
            border: 2px solid #ff6f61;
            transform: rotate(calc(var(--random-angle, 0deg)));
        }
        .card h3 {
            margin: 0;
            margin-bottom: 10px;
        }
        .card p {
            margin: 0;
        }
        .card .date {
            font-size: 0.9em;
            color: #666;
            margin-top: 10px;
        }
        .card:nth-child(odd) {
            background: #fffae3;
        }
        .card:nth-child(even) {
            background: #e3faff;
        }
    </style>
 </head>
 <body>

    <h1 style="color: #ffffff; text-shadow: 2px 2px #d74177;">GitHub Issues Fetcher</h1>

    <form id="fetch-form">
        <input type="text" id="repo" placeholder="Enter GitHub Repository (e.g., owner/repo)" required><br>
        <input type="text" id="token" placeholder="Enter GitHub Personal Access Token" required><br>
        <button type="submit">Fetch Issues</button>
    </form>

    <div id="issues-container"></div>

    <script>
        const form = document.getElementById('fetch-form');
        const issuesContainer = document.getElementById('issues-container');

        form.addEventListener('submit', async (event) => {
            event.preventDefault();

            const repo = document.getElementById('repo').value;
            const token = document.getElementById('token').value;
            issuesContainer.innerHTML = '<p>Loading issues...</p>';

            try {
                const response = await fetch(`https://api.github.com/repos/${repo}/issues`, {
                    headers: {
                        'Authorization': `token ${token}`,
                        'Accept': 'application/vnd.github.v3+json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`Error: ${response.status} ${response.statusText}`);
                }

                const issues = await response.json();
                const randomIssues = issues
                    .filter(issue => !issue.pull_request) // Exclude pull requests
                    .sort(() => 0.5 - Math.random()) // Shuffle array
                    .slice(0, 3); // Take 3 random items

                issuesContainer.innerHTML = '';

                if (randomIssues.length === 0) {
                    issuesContainer.innerHTML = '<p>No open issues found.</p>';
                    return;
                }

                randomIssues.forEach(issue => {
                    const card = document.createElement('div');
                    card.className = 'card';
                    card.style.setProperty('--random-angle', `${Math.random() * 4 - 2}deg`);
                    const creationDate = new Date(issue.created_at).toLocaleDateString();
                    card.innerHTML = `
                        <h3><a href="${issue.html_url}" target="_blank">${issue.title}</a></h3>
                        <p>${issue.body ? issue.body.substring(0, 200) + '...' : 'No description provided.'}</p>
                        <p class="date">Created on: ${creationDate}</p>
                    `;
                    issuesContainer.appendChild(card);
                });
            } catch (error) {
                issuesContainer.innerHTML = `<p>${error.message}</p>`;
            }
        });
    </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GitHub Issues Fetcher</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
	background-size: 400% 400%;
	animation: gradientBG 10s ease infinite;
	}
	@keyframes gradientBG {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
	}
	form {
	margin-bottom: 20px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 2px dashed #ff6f61;
	}
	input {
	margin: 5px 0;
	padding: 10px;
	width: 300px;
	border: 2px solid #ff6f61;
	border-radius: 4px;
	background: #fff5f5;
	}
	button {
	padding: 10px 20px;
	color: #fff;
	background: linear-gradient(135deg, #ff6f61, #d74177);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
	}
	button:hover {
	background: linear-gradient(135deg, #d74177, #ff6f61);
	}
	.card {
	margin: 10px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	width: 80%;
	border: 2px solid #ff6f61;
	transform: rotate(calc(var(--random-angle, 0deg)));
	}
	.card h3 {
	margin: 0;
	margin-bottom: 10px;
	}
	.card p {
	margin: 0;
	}
	.card .date {
	font-size: 0.9em;
	color: #666;
	margin-top: 10px;
	}
	.card:nth-child(odd) {
	background: #fffae3;
	}
	.card:nth-child(even) {
	background: #e3faff;
	}
	</style>
	</head>
	<body>

	<h1 style="color: #ffffff; text-shadow: 2px 2px #d74177;">GitHub Issues Fetcher</h1>

	<form id="fetch-form">
	<input type="text" id="repo" placeholder="Enter GitHub Repository (e.g., owner/repo)" required><br>
	<input type="text" id="token" placeholder="Enter GitHub Personal Access Token" required><br>
	<button type="submit">Fetch Issues</button>
	</form>

	<div id="issues-container"></div>

	<script>
	const form = document.getElementById('fetch-form');
	const issuesContainer = document.getElementById('issues-container');

	form.addEventListener('submit', async (event) => {
	event.preventDefault();

	const repo = document.getElementById('repo').value;
	const token = document.getElementById('token').value;
	issuesContainer.innerHTML = '<p>Loading issues...</p>';

	try {
	const response = await fetch(`https://api.github.com/repos/${repo}/issues`, {
	headers: {
	'Authorization': `token ${token}`,
	'Accept': 'application/vnd.github.v3+json'
	}
	});

	if (!response.ok) {
	throw new Error(`Error: ${response.status} ${response.statusText}`);
	}

	const issues = await response.json();
	const randomIssues = issues
	.filter(issue => !issue.pull_request) // Exclude pull requests
	.sort(() => 0.5 - Math.random()) // Shuffle array
	.slice(0, 3); // Take 3 random items

	issuesContainer.innerHTML = '';

	if (randomIssues.length === 0) {
	issuesContainer.innerHTML = '<p>No open issues found.</p>';
	return;
	}

	randomIssues.forEach(issue => {
	const card = document.createElement('div');
	card.className = 'card';
	card.style.setProperty('--random-angle', `${Math.random() * 4 - 2}deg`);
	const creationDate = new Date(issue.created_at).toLocaleDateString();
	card.innerHTML = `
	<h3><a href="${issue.html_url}" target="_blank">${issue.title}</a></h3>
	<p>${issue.body ? issue.body.substring(0, 200) + '...' : 'No description provided.'}</p>
	<p class="date">Created on: ${creationDate}</p>
	`;
	issuesContainer.appendChild(card);
	});
	} catch (error) {
	issuesContainer.innerHTML = `<p>${error.message}</p>`;
	}
	});
	</script>

	</body>
	</html>