Bu proje, tasarımı ve tüm yazılım altyapısı tarafımdan geliştirilen gelişmiş bir Link Ağacı Web Uygulamasıdır. Klasik bağlantı listesi uygulamalarının ötesine geçerek, her ziyaretçinin davranışını takip eden, çok dilli içerik sunan, etkileşimleri analiz eden ve anlık bildirimlerle bilgi sağlayan benzersiz bir sistem barındırmaktadır.
⸻
🧠 Proje Amacı:
Bu uygulama sadece bağlantılarımı listelemekle kalmaz, aynı zamanda her ziyaretçiyi tanır, dil tercihini anlar, anlık olarak analiz eder ve tüm bu süreci gerçek zamanlı olarak bana raporlar.
Bu sayede kişisel bir portfolyo aracı olmanın ötesine geçerek, pazarlama, kullanıcı davranış analizi ve veri güvenliği açısından da profesyonel bir çözüm sunar. İstenilen bağlantı devre dışı bırakılarak, kullanıcıya belirlenen uyarı mesajı gösterilir.
⸻
🔧 Teknik Özellikler:
✅ 1. Token Sistemi (Ziyaretçi Tanımlama & Takip)
• Siteyi ziyaret eden her kullanıcıya random_bytes() ile oluşturulan 32 karakterlik benzersiz bir token atanır.
• Bu token hem ziyaretçinin çerezlerine (setcookie()) yazılır hem de URL’ye eklenir.
• Token sayesinde bir linkin kim tarafından, nerede ve ne zaman paylaşıldığı izlenebilir.
• Token eksikse ya da hatalıysa, sistem kullanıcıyı otomatik olarak doğru token ile yönlendirir.
✅ 2. Gelişmiş Çerez ve IP Takibi
• Her kullanıcıya ek olarak visitor_id adlı uzun ömürlü bir çerez atanır.
• Böylece ziyaretçinin daha önce gelip gelmediği tespit edilir.
• IP, proxy, tarayıcı bilgisi, port, dil, karakter seti, sıkıştırma gibi tüm teknik bilgiler alınır ve kayıt altına alınır.
✅ 3. Anlık Telegram Bildirim Sistemi
• Tüm ziyaretçi bilgileri ve etkileşim verileri Telegram üzerinden anlık olarak bana iletilir.
• Sayfanın hangi dilde gösterildiği, hangi bağlantıdan gelindiği, mesaj veya puanlama bırakılıp bırakılmadığı gibi detaylar da bu bildirime dahildir.
• Böylece kullanıcı etkileşimleri gerçek zamanlı olarak izlenebilir.
✅ 4. Akıllı Paylaşım İzleme Sistemi
• Tüm bağlantıların sonuna token otomatik olarak eklenir.
• Bu sayede bağlantı bir başkasıyla paylaşıldığında, kimin paylaştığı ve hangi platformda paylaşıldığı tespit edilebilir.
• l.php?l=[ID] formatındaki bağlantılarla Instagram, Twitter, Threads, GitHub gibi platformlardan gelen ziyaretçiler ayrıştırılır.
✅ 5. Çoklu Dil Desteği (Otomatik & Manuel)
• Tüm metinler sabit HTML yerine değişkenlerle yönetilir.
• Sistem ziyaretçinin tarayıcı dilini (HTTP_ACCEPT_LANGUAGE) algılayarak sayfayı otomatik olarak o dilde gösterir.
• Ziyaretçi isterse, sağ alt köşedeki butonla dilini manuel olarak seçebilir.
• Seçilen dil bilgisi çerezde saklanır ve sayfa bu dile göre yeniden yapılandırılır.
• Ayrıca bu dil bilgisi de Telegram üzerinden bana iletilir.
✅ 6. Etkileşimli Geri Bildirim Sistemi (Puanlama & Mesaj)
• Ziyaretçiler yıldız oylaması yapabilir ve özel mesajlar bırakabilir.
• Mesaj içeriği, puan ve sayfanın gösterildiği dil ile birlikte anlık olarak tarafıma ulaşır.
• Kullanıcı deneyimini değerlendirmek ve içerik iyileştirmeleri yapmak için güçlü bir sistem sunar.
⸻
🎨 Arayüz & Kullanıcı Deneyimi:
• Minimal, karanlık temalı, mobil uyumlu ve responsive bir tasarım.
• Siyah-beyaz efektli profil resmi, geçişli arka planlar ve pürüzsüz geçiş animasyonları.
• Mood, sosyal pil durumu gibi kullanıcıyı yansıtan paneller.
• Alıntı sistemi, yıldızlı oylama, yorum slaytları ve RSS feed entegrasyonu.
• Dinamik butonlar: paylaş, dil seç, iletişim gibi sabit butonlar ekranın sağ altına konumlandırılmıştır.
• CSS grid/flexbox ile desteklenmiş modern UI öğeleri ve gelişmiş hover/modal efektleri.
⸻
📁 Kullanılan Teknolojiler:
• PHP (Yönlendirme, çerez, dil algılama, Telegram API, token sistemi)
• HTML/CSS (tüm arayüz özgün yazılmıştır, hazır tema kullanılmamıştır)
• JavaScript (açılır menüler, animasyonlar, dil değiştirme, alert sistemleri)
• Telegram Bot API
• Cookie yönetimi ve çoklu dil çerez sistemi
• Responsive design (mobile-first)
Smart Link Tree Web App
This is a fully self-designed and self-developed Smart Link Tree Web Application. It extends beyond basic link sharing with real-time visitor tracking, multilingual support, and Telegram-based live interaction reporting.
⸻
🧠 Purpose of the Project:
This project allows me to share my links through a visually elegant and interactive page while tracking user behavior in real-time.
Thanks to its multilingual structure and detailed notification system, it becomes a robust personal analytics and marketing tool — not just a simple link list. The specified link is disabled, and the user is shown a predefined warning message.
⸻
🔧 Technical Features:
✅ 1. Unique Token Assignment & Cookie System
• Each visitor is assigned a unique 32-character token via random_bytes().
• This token is stored in a cookie and appended to all URLs.
• It enables tracking of who shared the link, where it was shared, and when it was clicked.
• If the token is missing or mismatched, the system redirects the user with the correct one.
✅ 2. Visitor Identification via Cookies & IP Logs
• Each visitor also gets a visitor_id cookie for long-term recognition.
• The system checks whether the user is a returning visitor and logs it accordingly.
• It collects full technical info: IP, proxy, browser, user agent, language, compression, port, and charset.
✅ 3. Real-Time Telegram Notifications
• On every visit, a detailed Telegram message is sent containing user data and visit metadata.
• This includes: IP address, referrer, browser info, current language, and whether they left a rating or message.
• It provides full visibility into live activity and user behavior.
✅ 4. Share Source & Platform Detection
• Each link automatically includes the visitor’s token.
• When a link is reshared, the system identifies which platform it was shared from using GET parameters.
• It detects sources like Instagram, Twitter, Threads, GitHub, etc. and logs them separately.
✅ 5. Multilingual Support (Automatic & Manual)
• All on-page texts are dynamically controlled via PHP variables – no hardcoded HTML.
• The system automatically detects the user’s device language using HTTP_ACCEPT_LANGUAGE.
• Visitors can also manually select their preferred language via a floating button.
• The selected language is stored in cookies for persistent experience.
• This language info is also included in the real-time Telegram report.
✅ 6. Interactive Feedback System (Rating & Message)
• Visitors can rate the page with stars and leave feedback messages.
• The message, rating, and active language are sent to me instantly.
• Perfect for collecting live feedback and analyzing user satisfaction.
⸻
🎨 UI & UX Highlights:
• Dark-themed, responsive and mobile-friendly design.
• Grayscale profile image hover, animated backgrounds, and transitions.
• Mood and battery indicators, daily quotes, RSS feed and testimonial sliders.
• Sticky buttons for share, language switch, and contact forms.
• CSS Grid/Flex layout with modern hover effects and modals.
⸻
📁 Stack & Technologies:
• PHP (routing, cookies, token and language logic, Telegram Bot API)
• HTML/CSS (handcrafted frontend with custom styling)
• JavaScript (alerts, dynamic language, animations)
• Telegram Bot API integration
• Multilingual & cookie-based personalization system
• Responsive design (mobile-first, cross-platform)
Bir yanıt yazın