<!DOCTYPE html>

<head>

<title>SEO Backlink Checker</title>

{

"imports": {

"react": "https://aistudiocdn.com/react@^19.1.1",

"react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",

"react/": "https://aistudiocdn.com/react@^19.1.1/"

}

</script>

</head>

// --- Начало кода приложения ---

// =================================================================

// !!! ВАЖНОЕ ПРЕДУПРЕЖДЕНИЕ О БЕЗОПАСНОСТИ !!!

// =================================================================

// API-ключ и ID поисковой системы указаны здесь для демонстрации,

// так как вы просили простое решение.

// В настоящем публичном приложении НИКОГДА не размещайте API-ключ

// в коде, который виден пользователям в браузере. Его могут украсть.

// Для личного инструмента, которым пользуетесь только вы, это допустимый компромисс.

// =================================================================

const API_KEY = 'AIzaSyBBrVJvUWviD-eD3wy0E2Htd5uM8Ze3HFU';

const SEARCH_ENGINE_ID = '338eeb9b4e5d140c4';

// --- Сервис для проверки ссылок ---

const checkerService = {

async checkGoogleIndex(url) {

const query = `site:${url}`;

const endpoint = `https://www.googleapis.com/customsearch/v1?key=${API_KEY}&cx=${SEARCH_ENGINE_ID}&q=${encodeURIComponent(query)}`;

try {

const response = await fetch(endpoint);

if (!response.ok) {

console.error(`Ошибка Google Search API для ${url}:`, response.status, await response.text());

return 'Error';

}

const data = await response.json();

if (data.searchInformation && data.searchInformation.totalResults && parseInt(data.searchInformation.totalResults, 10) > 0) {

return 'Indexed';

} else {

return 'Not Indexed';

}

} catch (error) {

console.error(`Не удалось проверить статус индексации для ${url}:`, error);

return 'Error';

}

// Эта функция имитирует проверку, так как из браузера нельзя напрямую проверить чужой сайт из-за ограничений безопасности (CORS).

// Для полноценной проверки статуса страницы и наличия на ней ссылки нужен серверный компонент (например, Cloudflare Worker).

// Но для вашей задачи главная функция - проверка индекса, и она будет работать.

async checkPageAndLink(url, anchor) {

return new Promise(resolve => {

setTimeout(() => {

// Имитация ответа: 90% страниц доступны, на 70% из них ссылка найдена.

if (Math.random() > 0.1) {

resolve({ pageStatus: 200, linkStatus: 'N/A' });

} else {

resolve({ pageStatus: 404, linkStatus: 'N/A' });

}

}, 500 + Math.random() * 1000);

});

async processBacklinks(initialResults, onResultUpdate) {

const promises = initialResults.map(async (result) => {

let currentResult = { ...result, pageStatus: 'Checking...', linkStatus: 'Checking...', indexStatus: 'Checking...' };

onResultUpdate(currentResult);

const [pageAndLinkResult, indexResult] = await Promise.all([

this.checkPageAndLink(result.url, result.anchor),

this.checkGoogleIndex(result.url)

]);

currentResult = {

...currentResult,

pageStatus: pageAndLinkResult.pageStatus,

linkStatus: pageAndLinkResult.linkStatus,

indexStatus: indexResult,

};

onResultUpdate(currentResult);

});

await Promise.allSettled(promises);

}

};

// --- Иконки (SVG) ---

const InfoIcon = (props) => (

</svg>

);

const ChevronDownIcon = (props) => (

</svg>

);

const CogIcon = (props) => (

</svg>

);

const FilterIcon = (props) => (

</svg>

);

const SearchIcon = (props) => (

</svg>

);

const PlusIcon = (props) => (

</svg>

);

const CloudIcon = (props) => (

</svg>

);

// --- Компоненты React ---

const Header = ({ domain }) => {

return (

<div>

DNS management for <span className="font-extrabold">{domain}</span>

</h1>

Review, add, and edit DNS records. Edits will go into effect once saved.

</p>

</div>

<span>DNS Setup:Full</span>

</a>

<span>Import and Export</span>

</a>

<span>Dashboard Display Settings</span>

</a>

</div>

</header>

);

};

const BacklinkInput = ({ onCheck, isChecking }) => {

const [inputText, setInputText] = React.useState('');

const placeholderText = `Вставьте ссылки, по одной на строку. Формат: URL,Анкор\n\nПример:\nhttps://example-blog.com/great-post,отличный пост\nhttps://another-site.net/article`;

const handleCheck = () => {

if (!isChecking) {

onCheck(inputText);

}

};

return (

Ссылки для проверки

</label>

<textarea

id="backlinks"

rows={8}

className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out text-sm shadow-sm"

placeholder={placeholderText}

value={inputText}

onChange={(e) => setInputText(e.target.value)}

disabled={isChecking}

Формат: `URL` или `URL,Анкор`. Если анкор не указан, он будет `N/A`.

</p>

</div>

<FilterIcon className="w-4 h-4"/> Add filter

</button>

</div>

</div>

</button>

</div>

<button

onClick={handleCheck}

disabled={isChecking}

className="flex items-center justify-center gap-2 px-6 py-2 text-sm font-semibold text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-blue-300 disabled:cursor-not-allowed transition"

{isChecking ? (

</svg>

Проверка...

</>

) : (

Проверить ссылки

</>

)}

</button>

</div>

);

};

const StatusBadge = ({ status }) => {

let colorClasses = 'bg-gray-100 text-gray-600';

const s = String(status);

if (s === 'Indexed' || s === 'Found' || s.startsWith('2')) {

colorClasses = 'bg-green-100 text-green-800';

} else if (s === 'Not Indexed' || s === 'Not Found' || s.startsWith('4') || s.startsWith('5') || s === 'Error' || s === 'CORS Error') {

colorClasses = 'bg-red-100 text-red-700';

} else if (s === 'Checking...') {

colorClasses = 'bg-blue-100 text-blue-800 animate-pulse';

} else if (s === 'Queued') {

colorClasses = 'bg-yellow-100 text-yellow-800';

} else if (s === 'N/A') {

colorClasses = 'bg-gray-100 text-gray-500';

}

return (

{status}

</span>

);

};

const ResultsTable = ({ results, isChecking }) => {

if (results.length === 0 && !isChecking) {

return (

<h3 className="text-lg font-medium text-gray-900">Нет результатов для отображения</h3>

<p className="mt-1 text-sm text-gray-500">Вставьте ссылки в поле выше и нажмите "Проверить ссылки", чтобы начать.</p>

</div>

);

}

return (

<tr>

<th scope="col" className="px-4 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider flex items-center gap-1">Анкор <InfoIcon className="w-3.5 h-3.5 text-gray-400" /></th>

<th scope="col" className="px-4 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider flex items-center gap-1">Статус индекса <InfoIcon className="w-3.5 h-3.5 text-gray-400" /></th>

<th scope="col" className="px-4 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider flex items-center gap-1">Статус страницы <InfoIcon className="w-3.5 h-3.5 text-gray-400" /></th>

<th scope="col" className="px-4 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Действия</th>

</tr>

</thead>

{results.map((result) => (

<a href={result.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">{result.url}</a>

</td>

<td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500 truncate max-w-xs" title={result.anchor}>{result.anchor}</td>

</div>

</td>

</td>

</tr>

))}

</tbody>

</table>

</div>

);

};

const App = () => {

const [results, setResults] = React.useState([]);

const [isChecking, setIsChecking] = React.useState(false);

const [error, setError] = React.useState(null);

const handleCheckLinks = React.useCallback(async (inputText) => {

setIsChecking(true);

setError(null);

const lines = inputText.trim().split('\n');

if (lines.length === 0 || (lines.length === 1 && lines[0].trim() === '')) {

setError("Пожалуйста, введите хотя бы один URL для проверки.");

setIsChecking(false);

return;

}

const initialResults = lines

.map(line => line.trim())

.filter(line => line)

.map((line, index) => {

const parts = line.split(',');

const url = (parts.shift() || '').trim();

const anchor = parts.join(',').trim() || 'N/A';

return {

id: `${new Date().getTime()}-${index}`,

url,

anchor,

pageStatus: 'Queued',

linkStatus: 'Queued',

indexStatus: 'Queued',

};

});

setResults(initialResults);

const updateCallback = (updatedResult) => {

setResults(prevResults =>

prevResults.map(r => (r.id === updatedResult.id ? updatedResult : r))

);

};

try {

await checkerService.processBacklinks(initialResults, updateCallback);

} catch (e) {

console.error("Произошла непредвиденная ошибка:", e);

setError("Произошла ошибка во время процесса. Проверьте консоль для деталей.");

} finally {

setIsChecking(false);

}

}, []);

return (

{error && <div className="mt-4 p-4 bg-red-100 text-red-700 border border-red-200 rounded-md">{error}</div>}

</div>

</main>

</div>

);

};

const rootElement = document.getElementById('root');

const root = ReactDOM.createRoot(rootElement);

root.render(<App />);

// --- Конец кода приложения ---

</script>

</body>

</html>