|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WRAITHPATH • Ideological Fingerprinting</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: -20px; |
|
|
top: 0; |
|
|
width: 2px; |
|
|
height: 100%; |
|
|
background: #4b5563; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 0.6; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.6; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-200 min-h-screen font-sans"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
|
|
<header class="mb-12"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h1 class="text-4xl font-bold"> |
|
|
<span class="gradient-text">WRAITHPATH</span> |
|
|
</h1> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-user-secret mr-2"></i> |
|
|
<span>Login</span> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xl text-gray-400 mb-6">"Their posts were a breadcrumb trail to who they really are."</p> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8"> |
|
|
<div class="flex flex-col md:flex-row gap-4"> |
|
|
<div class="flex-1 relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-search text-gray-500"></i> |
|
|
</div> |
|
|
<input |
|
|
type="text" |
|
|
id="profileUrl" |
|
|
class="w-full bg-gray-700 border border-gray-600 rounded-lg pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" |
|
|
placeholder="Enter Reddit, Tumblr, or blog URL..." |
|
|
> |
|
|
</div> |
|
|
<button |
|
|
id="analyzeBtn" |
|
|
class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-medium rounded-lg px-6 py-3 transition-all duration-300 flex items-center justify-center" |
|
|
> |
|
|
<i class="fas fa-fingerprint mr-2"></i> |
|
|
Analyze Ideology |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-4 flex flex-wrap gap-2"> |
|
|
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Reddit: u/username</span> |
|
|
<span class="text-xs bg-gray-700 px-2 py-1 rounded">Tumblr: blogname.tumblr.com</span> |
|
|
<span class="text-xs bg-gray-700 px-2 py-1 rounded">WordPress: example.wordpress.com</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<h2 class="text-2xl font-semibold mb-6 flex items-center"> |
|
|
<i class="fas fa-ghost mr-3 text-purple-500"></i> |
|
|
How It Works |
|
|
</h2> |
|
|
<div class="grid md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-all"> |
|
|
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-link text-purple-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium mb-2">1. Input Profile</h3> |
|
|
<p class="text-gray-400">Provide any public social media or blog URL. We'll scrape years of posting history.</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-all"> |
|
|
<div class="w-12 h-12 bg-pink-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-brain text-pink-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium mb-2">2. Cognitive Analysis</h3> |
|
|
<p class="text-gray-400">Our models detect linguistic patterns, sentiment shifts, and ideological markers.</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-all"> |
|
|
<div class="w-12 h-12 bg-indigo-900 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-chart-line text-indigo-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium mb-2">3. Get The Report</h3> |
|
|
<p class="text-gray-400">Receive a detailed timeline of mental state evolution and belief system changes.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="resultsSection" class="hidden mb-16"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-semibold flex items-center"> |
|
|
<i class="fas fa-chart-bar mr-3 text-pink-500"></i> |
|
|
Ideological Fingerprint |
|
|
</h2> |
|
|
<button id="downloadReport" class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-file-pdf mr-2 text-red-400"></i> |
|
|
<span>Download PDF</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 mb-8"> |
|
|
<div class="flex flex-col md:flex-row gap-6"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-600 to-pink-500 flex items-center justify-center text-4xl font-bold"> |
|
|
<span id="avatarInitial">?</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> |
|
|
<div> |
|
|
<h3 id="profileName" class="text-xl font-bold">Unknown Profile</h3> |
|
|
<p id="profileHandle" class="text-gray-400">@unknown</p> |
|
|
</div> |
|
|
<div class="mt-2 md:mt-0"> |
|
|
<span id="profilePlatform" class="bg-gray-700 px-3 py-1 rounded-full text-sm">Unknown Platform</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Posts Analyzed</p> |
|
|
<p id="postCount" class="text-lg font-medium">0</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Time Span</p> |
|
|
<p id="timeSpan" class="text-lg font-medium">0 years</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Ideology Score</p> |
|
|
<p id="ideologyScore" class="text-lg font-medium">0/100</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Volatility</p> |
|
|
<p id="volatility" class="text-lg font-medium">Low</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 mb-8"> |
|
|
<h3 class="text-lg font-medium mb-4 flex items-center"> |
|
|
<i class="fas fa-history mr-2 text-purple-400"></i> |
|
|
Ideological Timeline |
|
|
</h3> |
|
|
<div class="relative pl-8"> |
|
|
<div id="timelineContainer"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 mb-8"> |
|
|
<h3 class="text-lg font-medium mb-4 flex items-center"> |
|
|
<i class="fas fa-brain mr-2 text-pink-400"></i> |
|
|
Sentiment Evolution |
|
|
</h3> |
|
|
<div class="h-64 bg-gray-700 rounded-lg flex items-center justify-center"> |
|
|
<p class="text-gray-500">Sentiment chart will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h3 class="text-lg font-medium mb-4 flex items-center"> |
|
|
<i class="fas fa-cloud mr-2 text-indigo-400"></i> |
|
|
Topic Cloud |
|
|
</h3> |
|
|
<div class="flex flex-wrap gap-3" id="topicCloud"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="loadingState" class="hidden fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50"> |
|
|
<div class="text-center"> |
|
|
<div class="w-24 h-24 border-4 border-purple-500 border-t-pink-500 rounded-full animate-spin mb-6 mx-auto"></div> |
|
|
<h3 class="text-2xl font-medium mb-2">Building Cognitive Profile</h3> |
|
|
<p class="text-gray-400 max-w-md mx-auto">Analyzing linguistic patterns, sentiment shifts, and ideological markers across <span id="loadingPostCount">0</span> posts...</p> |
|
|
<div class="mt-6 bg-gray-800 rounded-full h-2 w-64 mx-auto overflow-hidden"> |
|
|
<div id="progressBar" class="bg-gradient-to-r from-purple-500 to-pink-500 h-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-16 pt-8 border-t border-gray-800 text-gray-500"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<p>© 2023 WRAITHPATH • Ideological Fingerprinting</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="hover:text-gray-300">Privacy</a> |
|
|
<a href="#" class="hover:text-gray-300">Terms</a> |
|
|
<a href="#" class="hover:text-gray-300">API</a> |
|
|
<a href="#" class="hover:text-gray-300">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const analyzeBtn = document.getElementById('analyzeBtn'); |
|
|
const profileUrl = document.getElementById('profileUrl'); |
|
|
const resultsSection = document.getElementById('resultsSection'); |
|
|
const loadingState = document.getElementById('loadingState'); |
|
|
const downloadReport = document.getElementById('downloadReport'); |
|
|
|
|
|
|
|
|
const sampleTopics = [ |
|
|
{text: "politics", weight: 0.9}, |
|
|
{text: "technology", weight: 0.7}, |
|
|
{text: "philosophy", weight: 0.6}, |
|
|
{text: "economics", weight: 0.5}, |
|
|
{text: "culture", weight: 0.4}, |
|
|
{text: "science", weight: 0.4}, |
|
|
{text: "religion", weight: 0.3}, |
|
|
{text: "psychology", weight: 0.3} |
|
|
]; |
|
|
|
|
|
const sampleTimeline = [ |
|
|
{ |
|
|
year: "2015-2017", |
|
|
title: "Libertarian Phase", |
|
|
description: "Strong emphasis on individual freedom, skepticism of government. Frequent mentions of Austrian economics.", |
|
|
sentiment: "neutral", |
|
|
tags: ["libertarian", "economics", "skepticism"] |
|
|
}, |
|
|
{ |
|
|
year: "2018-2019", |
|
|
title: "Political Awakening", |
|
|
description: "Began engaging with more radical political content. Shift toward populist rhetoric and anti-establishment views.", |
|
|
sentiment: "negative", |
|
|
tags: ["populism", "anti-establishment", "anger"] |
|
|
}, |
|
|
{ |
|
|
year: "2020-2021", |
|
|
title: "Ideological Crisis", |
|
|
description: "Evident cognitive dissonance in posts. Frequent deletions and contradictions. Increased conspiracy language.", |
|
|
sentiment: "negative", |
|
|
tags: ["conspiracy", "confusion", "isolation"] |
|
|
}, |
|
|
{ |
|
|
year: "2022-Present", |
|
|
title: "Radicalization", |
|
|
description: "Clear ideological framework emerges. Dogmatic language, in-group signaling, and dehumanizing rhetoric toward out-groups.", |
|
|
sentiment: "negative", |
|
|
tags: ["radical", "tribalism", "authoritarian"] |
|
|
} |
|
|
]; |
|
|
|
|
|
analyzeBtn.addEventListener('click', function() { |
|
|
const url = profileUrl.value.trim(); |
|
|
|
|
|
if (!url) { |
|
|
alert('Please enter a valid URL'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
loadingState.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
const progressInterval = setInterval(() => { |
|
|
progress += Math.random() * 10; |
|
|
if (progress > 100) progress = 100; |
|
|
document.getElementById('progressBar').style.width = `${progress}%`; |
|
|
|
|
|
|
|
|
const postCount = Math.floor(Math.random() * 5000) + 1000; |
|
|
document.getElementById('loadingPostCount').textContent = postCount.toLocaleString(); |
|
|
|
|
|
if (progress >= 100) { |
|
|
clearInterval(progressInterval); |
|
|
setTimeout(showResults, 500); |
|
|
} |
|
|
}, 300); |
|
|
|
|
|
function showResults() { |
|
|
loadingState.classList.add('hidden'); |
|
|
resultsSection.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
|
|
|
|
|
|
populateSampleData(url); |
|
|
} |
|
|
}); |
|
|
|
|
|
downloadReport.addEventListener('click', function() { |
|
|
alert('PDF report generation would be implemented here. This is a demo.'); |
|
|
}); |
|
|
|
|
|
function populateSampleData(url) { |
|
|
|
|
|
let username = "Unknown"; |
|
|
let platform = "Unknown"; |
|
|
let avatarInitial = "?"; |
|
|
|
|
|
try { |
|
|
const urlObj = new URL(url); |
|
|
const host = urlObj.hostname; |
|
|
|
|
|
if (host.includes('reddit.com')) { |
|
|
platform = "Reddit"; |
|
|
const pathParts = urlObj.pathname.split('/'); |
|
|
if (pathParts.length >= 3 && pathParts[1] === 'user') { |
|
|
username = pathParts[2]; |
|
|
avatarInitial = username.charAt(0).toUpperCase(); |
|
|
} |
|
|
} else if (host.includes('tumblr.com')) { |
|
|
platform = "Tumblr"; |
|
|
username = host.split('.')[0]; |
|
|
avatarInitial = username.charAt(0).toUpperCase(); |
|
|
} else { |
|
|
platform = "Blog"; |
|
|
username = host; |
|
|
avatarInitial = username.charAt(0).toUpperCase(); |
|
|
} |
|
|
} catch (e) { |
|
|
console.error("Error parsing URL", e); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('profileName').textContent = username; |
|
|
document.getElementById('profileHandle').textContent = `@${username.toLowerCase()}`; |
|
|
document.getElementById('profilePlatform').textContent = platform; |
|
|
document.getElementById('avatarInitial').textContent = avatarInitial; |
|
|
document.getElementById('postCount').textContent = (Math.random() * 5000 + 1000).toLocaleString(); |
|
|
document.getElementById('timeSpan').textContent = `${Math.floor(Math.random() * 10) + 3} years`; |
|
|
document.getElementById('ideologyScore').textContent = `${Math.floor(Math.random() * 40) + 30}/100`; |
|
|
document.getElementById('volatility').textContent = ["Low", "Medium", "High"][Math.floor(Math.random() * 3)]; |
|
|
|
|
|
|
|
|
const timelineContainer = document.getElementById('timelineContainer'); |
|
|
timelineContainer.innerHTML = ''; |
|
|
|
|
|
sampleTimeline.forEach((item, index) => { |
|
|
const timelineItem = document.createElement('div'); |
|
|
timelineItem.className = `timeline-item relative pb-8 fade-in ${index !== sampleTimeline.length - 1 ? 'border-b border-gray-700' : ''}`; |
|
|
|
|
|
let sentimentIcon = "😐"; |
|
|
if (item.sentiment === "positive") sentimentIcon = "😊"; |
|
|
else if (item.sentiment === "negative") sentimentIcon = "😠"; |
|
|
|
|
|
timelineItem.innerHTML = ` |
|
|
<div class="absolute -left-8 top-0 w-6 h-6 rounded-full flex items-center justify-center ${item.sentiment === 'negative' ? 'bg-pink-900' : item.sentiment === 'positive' ? 'bg-blue-900' : 'bg-gray-700'}"> |
|
|
<span class="text-xs">${sentimentIcon}</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="text-sm font-medium bg-gray-700 px-2 py-1 rounded">${item.year}</span> |
|
|
<h4 class="text-lg font-semibold mt-1">${item.title}</h4> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-3">${item.description}</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
${item.tags.map(tag => `<span class="text-xs bg-gray-700 px-2 py-1 rounded">${tag}</span>`).join('')} |
|
|
</div> |
|
|
`; |
|
|
|
|
|
timelineContainer.appendChild(timelineItem); |
|
|
}); |
|
|
|
|
|
|
|
|
const topicCloud = document.getElementById('topicCloud'); |
|
|
topicCloud.innerHTML = ''; |
|
|
|
|
|
sampleTopics.forEach(topic => { |
|
|
const size = Math.floor(topic.weight * 20) + 12; |
|
|
const opacity = topic.weight * 0.7 + 0.3; |
|
|
const color = `rgba(168, 85, 247, ${opacity})`; |
|
|
|
|
|
const topicElement = document.createElement('span'); |
|
|
topicElement.className = 'fade-in'; |
|
|
topicElement.style.fontSize = `${size}px`; |
|
|
topicElement.style.color = color; |
|
|
topicElement.textContent = topic.text; |
|
|
|
|
|
topicCloud.appendChild(topicElement); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=numbpilled/wraithpath-input-profile-username-for-idealogical-overview" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
