HTML Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Toplu Web/IP Sayfa Aç</title>
<!-- Excel Okuma Kütüphanesi -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
/* --- TEMEL DEĞİŞKENLER VE SIFIRLAMALAR --- */
:root {
--bg: #ffffff;
--shadow: 0 3px 10px rgba(0,0,0,.12);
--radius: 8px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Arial, sans-serif;
}
/* Ekranı taşırmama ve tam sığdırma ayarları */
html, body {
height: 100vh;
overflow: hidden; /* Sayfanın genel kaydırma çubuğunu gizler */
background: var(--bg);
}
body {
display: flex;
flex-direction: column;
padding: 15px;
color: #333;
}
/* --- BAŞLIK ALANI STİLLERİ --- */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #fff;
border: 2px solid #000;
border-radius: var(--radius);
box-shadow: var(--shadow);
flex-shrink: 0;
}
.header .left {
display: flex;
align-items: center;
gap: 12px;
width: 30%;
}
.header .logo img {
height: 46px;
}
.header .title1 {
font-size: 18px;
font-weight: 700;
color: #000;
}
.header .title2 {
font-size: 12px;
color: #555;
font-weight: 600;
}
/* Orta Alan - Butonlar */
.header .center-buttons {
flex-grow: 1;
display: flex;
justify-content: center;
gap: 15px;
}
.header .right {
width: 30%;
font-size: 14px;
font-weight: 700;
text-align: right;
color: #333;
}
/* Buton Tasarımları (Açık Renkler) */
.btn {
padding: 8px 25px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
border: 1px solid;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn:active { transform: translateY(1px); }
/* Açık Mavi - Dosya Seç */
.btn-blue { background-color: #e0f2fe; color: #0284c7; border-color: #bae6fd; }
.btn-blue:hover { background-color: #bae6fd; }
/* Açık Yeşil - Çalıştır */
.btn-green { background-color: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.btn-green:hover { background-color: #bbf7d0; }
/* Açık Kırmızı - Temizle */
.btn-red { background-color: #fee2e2; color: #dc2626; border-color: #fecaca; }
.btn-red:hover { background-color: #fecaca; }
/* Başlık ile Alt Çerçeve Arasındaki 1 Satırlık Boşluk */
.spacer {
height: 25px;
flex-shrink: 0;
}
/* --- İÇERİK VE ÖNİZLEME ALANI --- */
.main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Veri Önizleme Kutusu */
#data-preview {
flex-grow: 1;
border: 1px solid #ccc;
background-color: #fdfdfd;
padding: 20px;
overflow-y: auto; /* Alan dolduğunda aşağı kaydırma çubuğu çıkar */
overflow-x: hidden;
font-size: 14px;
border-radius: 4px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}
/* DİNAMİK ÇOKLU SÜTUN (TABLE) YAPISI */
#data-preview ul {
list-style-type: none;
/* Ekran izin verdikçe maksimum 5 sütun oluşturur. Genişlik yetmezse 4, 3, 2, 1'e düşürür */
column-count: 5;
/* Her sütunun adreslerin okunmasını engellemeyecek minimum genişliği */
column-width: 220px;
column-gap: 25px;
column-rule: 1px dashed #ddd; /* Sütunlar arasına çizgi ekler */
}
#data-preview li {
padding: 6px 0;
border-bottom: 1px solid #eee;
break-inside: avoid; /* Bir adresin yarısının diğer sütuna geçmesini (parçalanmasını) önler */
page-break-inside: avoid;
display: inline-block;
width: 100%;
}
.index-badge {
display: inline-block;
background: #e9ecef;
color: #495057;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
margin-right: 8px;
font-weight: bold;
border: 1px solid #dee2e6;
vertical-align: top;
}
.url-text {
display: inline-block;
width: calc(100% - 40px); /* Rozet sonrası kalan genişlik */
word-break: break-all; /* Çok uzun adreslerin sütunu sağa doğru taşırmasını engeller */
vertical-align: top;
}
/* Durum Çubuğu */
.status-bar {
flex-shrink: 0;
margin-top: 15px;
font-size: 14px;
color: #555;
display: flex;
justify-content: space-between;
border-top: 1px solid #ddd;
padding-top: 10px;
font-weight: 600;
}
</style>
</head>
<body>
<!-- BAŞLIK ALANI BAŞLANGICI -->
<div class="header">
<div class="left">
<div class="logo"><img src="logo.jpg" alt="Logo" onerror="this.style.display='none'"></div>
<div>
<div class="title1">Toplu Web/IP Sayfa Aç</div>
<div class="title2">Kullanıcı Destek</div>
</div>
</div>
<!-- YENİ BUTON ALANI -->
<div class="center-buttons">
<input type="file" id="fileInput" accept=".xlsx, .xls, .txt" style="display: none;" onchange="importData(event)">
<button class="btn btn-blue" onclick="document.getElementById('fileInput').click()">Dosya Seç</button>
<button class="btn btn-green" onclick="runScript()">Çalıştır</button>
<button class="btn btn-red" onclick="clearData()">Temizle</button>
</div>
<div class="right">MYO BAŞKANLIĞI</div>
</div>
<!-- BAŞLIK ALANI BİTİŞİ -->
<!-- BAŞLIK İLE LİSTE ARASINDAKİ 1 SATIR BOŞLUK -->
<div class="spacer"></div>
<!-- ANA İÇERİK (Ekrana tam oturur) -->
<div class="main-content">
<!-- ÖNİZLEME ALANI (Otomatik sütunlanan liste) -->
<div id="data-preview">
<span style="color: #777;">Sistem Hazır. Lütfen web veya IP adreslerini içeren Excel (.xlsx) veya Not Defteri (.txt) dosyasını seçiniz...</span>
</div>
<!-- DURUM ÇUBUĞU -->
<div class="status-bar" id="status-bar">
<span>Durum: Beklemede</span>
<span id="total-count" style="color:#0284c7;">Toplam Adres Satırı: 0</span>
</div>
</div>
<script>
let targetList = [];
// Dosya Okuma ve İşleme
function importData(event) {
const file = event.target.files[0];
if (!file) return;
const ext = file.name.split('.').pop().toLowerCase();
if (ext === 'txt') {
const reader = new FileReader();
reader.onload = function(e) {
const lines = e.target.result.split(/\r?\n/);
processExtractedData(lines);
};
reader.readAsText(file);
}
else if (ext === 'xlsx' || ext === 'xls') {
const reader = new FileReader();
reader.onload = function(e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, {type: 'array'});
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonRows = XLSX.utils.sheet_to_json(firstSheet, {header: 1});
const flatData = jsonRows.flat();
processExtractedData(flatData);
};
reader.readAsArrayBuffer(file);
}
else {
alert('HATA: Yalnızca .txt ve .xlsx/.xls formatları desteklenir.');
}
event.target.value = '';
}
function processExtractedData(lines) {
targetList = lines
.map(line => String(line).trim())
.filter(line => line !== '' && line !== 'undefined' && line !== 'null');
const preview = document.getElementById('data-preview');
if (targetList.length === 0) {
preview.innerHTML = '<span style="color: #dc3545;">HATA: Dosyada geçerli adres/IP bulunamadı.</span>';
document.getElementById('total-count').innerText = "Toplam Adres Satırı: 0";
return;
}
let htmlOutput = '<ul>';
targetList.forEach((item, index) => {
// Varsayılan olarak yazılar siyah
htmlOutput += `<li>
<span class="index-badge">${index + 1}</span>
<span id="text-${index}" class="url-text" style="color: #000; font-weight: 500;">${item}</span>
</li>`;
});
htmlOutput += '</ul>';
preview.innerHTML = htmlOutput;
document.getElementById('status-bar').children[0].innerHTML = `Durum: <span style="color:#16a34a;">Dosya Yüklendi</span>`;
document.getElementById('total-count').innerText = `Toplam Adres Satırı: ${targetList.length}`;
}
function clearData() {
targetList = [];
document.getElementById('data-preview').innerHTML = '<span style="color: #777;">Hafıza temizlendi. Yeni dosya bekleniyor...</span>';
document.getElementById('status-bar').children[0].innerText = 'Durum: Beklemede';
document.getElementById('total-count').innerText = 'Toplam Adres Satırı: 0';
}
// Çalıştır Butonu ve Erişim Kontrolü
function runScript() {
if (targetList.length === 0) {
alert('Çalıştırmadan önce geçerli veriler yüklenmelidir!');
return;
}
const formattedTargets = targetList.map(url => {
if (!url.startsWith('http://') && !url.startsWith('https://')) {
return 'http://' + url;
}
return url;
});
document.getElementById('status-bar').children[0].innerHTML = `Durum: <span style="color: #16a34a;">İşlem devam ediyor... (Pop-up engeline izin verin)</span>`;
formattedTargets.forEach((url, index) => {
setTimeout(() => {
const textElement = document.getElementById(`text-${index}`);
// Tarayıcı üzerinden siteye bağlantı/erişim kontrolü (Ping simülasyonu)
fetch(url, { mode: 'no-cors', cache: 'no-store' })
.then(() => {
// Bağlantı kurulabildi, sayfayı aç ve yeşil yap
textElement.style.color = '#16a34a'; // Yeşil
window.open(url, '_blank');
})
.catch(() => {
// Bağlantı reddedildi / Sunucu yok, sayfayı yine de aç ama kırmızı yap
textElement.style.color = '#dc2626'; // Kırmızı
window.open(url, '_blank');
});
}, index * 500);
});
}
</script>
</body>
</html>