<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif">
<div class="jumbotron text-center">
<h2>RSS Etiketlerini Keşfedin</h2>
<p>Aşağıdaki alana bir RSS URL'si girerek API'den dönen tüm etiketleri görüntüleyin.</p>
<div class="input-group">
<input type="text" id="rssUrl" class="form-control" placeholder="Örn: https://www.sozcu.com.tr/feeds-rss-category-ekonomi">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="fetchButton">Etiketleri Getir</button>
</span>
</div>
<div class="alert alert-danger" id="error-message" style="margin-top: 15px;">
<strong id="error-text"></strong>
</div>
</div>
<div id="loading" class="text-center" style="display: none;">
<img src="https://i.stack.imgur.com/kS9T4.gif" alt="Yükleniyor..." style="width: 50px;">
<p>Veriler yükleniyor...</p>
</div>
<div id="results">
<!-- Dinamik olarak doldurulacak -->
</div>
</div>
body {
background-color: #f8f9fa;
}
.container {
padding-top: 30px;
}
.jumbotron {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#rssUrl {
height: 46px;
}
.btn-primary {
height: 46px;
}
.tag-item {
background-color: #fff;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.tag-key {
font-weight: 600;
color: #337ab7;
}
pre {
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
white-space: pre-wrap;
}
.alert {
display: none;
}
$(document).ready(function() {
const fetchButton = $('#fetchButton');
const rssUrlInput = $('#rssUrl');
const loadingDiv = $('#loading');
const errorDiv = $('#error-message');
const errorText = $('#error-text');
const resultsDiv = $('#results');
fetchButton.on('click', fetchRssFeed);
rssUrlInput.on('keypress', function(e) {
if (e.which === 13) {
fetchRssFeed();
}
});
function showLoading(show) {
loadingDiv.toggle(show);
fetchButton.prop('disabled', show);
resultsDiv.empty();
errorDiv.hide();
}
function showError(message) {
errorText.text(message);
errorDiv.show();
}
function fetchRssFeed() {
const rssUrl = rssUrlInput.val().trim();
if (rssUrl === '') {
showError("Lütfen bir RSS URL'si girin.");
return;
}
showLoading(true);
const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`;
$.getJSON(apiUrl)
.done(function(data) {
showLoading(false);
if (data.status === 'ok' && data.items && data.items.length > 0) {
displayAllTags(data);
} else {
showError('Gelen verilerde bir problem var veya haber bulunamadı.');
}
})
.fail(function() {
showLoading(false);
showError('API çağrısı başarısız oldu. Lütfen URL\'yi kontrol edin veya farklı bir RSS adresi deneyin.');
});
}
function displayAllTags(data) {
const feedTitle = data.feed.title || 'Feed Başlığı Bulunamadı';
resultsDiv.append(`<h3>Feed Bilgileri: "${feedTitle}"</h3><hr>`);
const itemsToShow = data.items.slice(0, 5); // ilk 5 haber
itemsToShow.forEach((item, index) => {
resultsDiv.append(`
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Haber #${index + 1}</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled"></ul>
</div>
</div>
`);
const tagList = resultsDiv.find('.list-unstyled').last();
renderTags(item, tagList);
});
}
// Recursive obje gezici
function renderTags(obj, container) {
Object.keys(obj).forEach(key => {
let value = obj[key];
if (typeof value === 'object' && value !== null) {
const subList = $('<ul class="list-unstyled" style="margin-left:15px;"></ul>');
container.append(`
<li class="tag-item">
<span class="tag-key">${key}:</span>
</li>
`);
container.find('li').last().append(subList);
renderTags(value, subList);
} else {
let valueHtml = formatValue(value);
container.append(`
<li class="tag-item">
<span class="tag-key">${key}:</span> ${valueHtml}
</li>
`);
}
});
}
// Resim uzantılarını img tagına çevir
function formatValue(value) {
if (!value) return '';
if (typeof value === 'string' && value.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
return `<br><img src="${value}" alt="resim" style="max-width:200px;border:1px solid #ddd;border-radius:4px;margin-top:5px;">`;
}
return value;
}
});
