🦷 Diş Haritası - Dental Charting System

Modern, İnteraktif ve Kullanıcı Dostu Diş Hekimliği Uygulaması

Özellikler • Teknolojiler • Kurulum • Ekran Görüntüleri • Teknik Detaylar

📋 Proje Tanımı

Diş Haritası, diş hekimlerinin hasta tedavi kayıtlarını interaktif bir şekilde tutabilecekleri modern ve kullanıcı dostu bir web uygulamasıdır. SVG tabanlı diş haritası üzerinden tedavi edilen dişlerin işaretlenmesini, detaylı notların kaydedilmesini ve hastaların geçmiş tedavi kayıtlarının yönetilmesini sağlar.

✨ Demo & Proje Kodları Anlatımı

🎬 Basit ve kısa tanıtım videosunu izlemek için tıklayın

🎬 Proje Kodlarının anlatıldığı videoya ulaşmak için lütfen Tıklayınız

🚀 Özellikler

İnteraktif SVG Diş Haritası Dişlere tıklayarak not ekleyebilme	Tedavi Notları Her diş için özel tedavi notları	Hasta Geçmişi Kronolojik işlem kaydı
Görsel Efektler Seçilen dişler için animasyonlar	Responsive Tasarım Mobil ve masaüstü uyumlu	Detaylı Raporlama Kapsamlı tedavi raporları

🛠️ Teknolojiler

Proje aşağıdaki web teknolojilerini kullanmaktadır:

HTML5

CSS3

JavaScript

SVG

📂 Proje Yapısı

dental-chart/
│
├── index.html                # Ana diş haritası sayfası
├── detay.html                # Tedavi detay sayfası
├── detay2.html - detay6.html # Diğer tedavi detay sayfaları
│
├── css/
│   └── style.css             # Ana stil dosyası
│
├── images/
│   ├── dental-select.png     # Ekran görüntüleri
│   └── ...                   # Diğer görseller
│
└── README.md                 # Proje dokümantasyonu

💻 Kurulum

1. Bu depoyu klonlayın:

   git clone https://github.com/mehmetdogandev/dental-map-template.git

2. Proje klasörüne gidin:

   cd dental-map-template

3. index.html dosyasını favori tarayıcınızda açın:

   # macOS için
   open index.html
   
   # Windows için
   start index.html

📱 Kullanım Kılavuzu

1️⃣ Diş Haritası Diş haritası üzerinden işlem yapılacak dişi seçin

2️⃣ Not Ekleme Seçilen diş için tanı/tedavi notunu yazıp kaydedin

3️⃣ Hasta Geçmişi Tedavi listesinden geçmiş işlemleri görüntüleyin

4️⃣ Detay Sayfası "Detay" butonuyla ayrıntılı bilgilere erişin

🖼️ Ekran Görüntüleri

Ana Ekran - Diş Seçimi	Seçili Diş İçin İşlem Kaydetme
Tedavi Detay Sayfası	Hasta Geçmişi

🌟 Teknik Detaylar

SVG Diş Haritası

Proje, SVG formatında oluşturulan interaktif bir diş haritası kullanmaktadır. Her diş, benzersiz bir ID ve path elementi ile temsil edilir.

// Diş seçim örneği
svg.addEventListener("click", function (e) {
  let targetElement = e.target;
  while (targetElement && targetElement !== svg) {
    if (targetElement.tagName.toLowerCase() === "path") {
      const id = targetElement.getAttribute("id");
      // Diş işlemleri...
    }
    targetElement = targetElement.parentElement;
  }
});

Diş Notları Sistemi

Dişlere ait tanı ve tedavi notları JavaScript objeleri içinde tutulur:

// Tedavi görmüş dişlerin ID'leri ve notları
const savedTeeth = {
  12: "Dişte derin çürük tespit edildi. Pulpaya ulaşan çürük nedeniyle kanal tedavisi uygulandı...",
  15: "Mine-dentin sınırında tespit edilen orta dereceli çürük temizlendi..."
};

Görsel Efektler

Diş seçiminde kullanıcı deneyimini zenginleştirmek için CSS animasyonları kullanılmıştır:

@keyframes toothPop {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.2); }
  100% { transform: translateY(-20px) scale(1.12); }
}

👥 Ekip

Mehmet DOĞAN JavaScript ve Detay Sayfaları

Enes BEKİK SVG Diş Haritası Geliştirme

📈 Gelecek Özellikler

• Hasta veritabanı entegrasyonu
• Çoklu kullanıcı desteği (hekimler için)
• 3D diş modelleri
• Tedavi plan çizelgesi
• Hasta randevu sistemi
• Mobil uygulama versiyonu

📄 Lisans

Bu proje MIT Lisansı altında lisanslanmıştır.

🙏 Teşekkürler

• SVG teknolojileri ve web arayüz tasarımı topluluklarına
• Tasarım ilhamı için modern diş hekimliği uygulamalarına
• Geri bildirim sağlayan tüm diş hekimleri ve test kullanıcılarına

---

Developed with ❤️ by Mehmet DOĞAN