Rıza #190760

rifat-max · 2026-03-27T03:07:39Z

rifat-max
Mar 27, 2026

Introduce yourself

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Müşteri & Randevu Takip</title>
  <!-- Google Picker API için -->
  <script src="https://apis.google.com/js/api.js"></script>
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      color: #333;
      min-height: 100vh;
      position: relative;
    }
    #bg {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: -1;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      opacity: 0.15;
    }
    .screen {
      display: none;
      height: 100vh;
      flex-direction: column;
      overflow-y: auto;
      background: rgba(244, 244, 249, 0.85);
    }
    .screen.active {
      display: flex;
    }
    header {
      background: #2c3e50;
      color: #fff;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    header h1 {
      margin: 0;
      font-size: 1.2rem;
    }
    button {
      padding: 10px 15px;
      background: #3498db;
      color: #fff;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
    }
    .btn-fab {
      background: #27ae60;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 1.5rem;
    }
    .form {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding-bottom: 80px;
    }
    input, select {
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1rem;
      box-sizing: border-box;
      width: 100%;
    }
    .nav-bottom {
      display: flex;
      background: #fff;
      border-top: 1px solid #ddd;
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 0;
      z-index: 10;
    }
    .nav-bottom button {
      flex: 1;
      background: 0 0;
      color: #555;
      border-radius: 0;
      border-right: 1px solid #ddd;
      padding: 15px;
    }
    .nav-bottom button:last-child {
      border-right: none;
    }
    #table-wrap {
      overflow-x: auto;
      padding: 10px;
      padding-bottom: 80px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
      white-space: nowrap;
    }
    th {
      background: #3498db;
      color: #fff;
    }
    .thumb {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    .row-debt {
      color: #e74c3c;
      font-weight: 700;
    }
    .row-credit {
      color: #27ae60;
      font-weight: 700;
    }
    .btn-sm {
      padding: 5px 10px;
      font-size: 0.8rem;
      background: #e74c3c;
    }
  </style>
</head>
<body>
  <div id='bg'></div>

  <!-- ANA EKRAN: TABLO -->
  <div class='screen active' id='main'>
    <header>
      <h1>Randevu & Müşteri Listesi</h1>
      <div style='display:flex;gap:10px'>
        <button onclick='exportExcel()' style='background:#f1c40f;color:#000'>CSV İndir</button>
        <button onclick='uploadToDrive()' style='background:#4285F4'>Drive'a Yükle</button>
        <button class='btn-fab' onclick='showScreen("profile")'>+</button>
      </div>
    </header>
    <div id='table-wrap'></div>
    <div class='nav-bottom'>
      <button onclick='showScreen("main")'>Tablo</button>
      <button onclick='showScreen("settings")'>Ayarlar</button>
    </div>
  </div>

  <!-- YENİ MÜŞTERİ EKLEME -->
  <div class='screen' id='profile'>
    <header>
      <h1>Yeni Randevu Ekle</h1>
      <button onclick='showScreen("main")'>İptal</button>
    </header>
    <div class='form'>
      <label>Fotoğraf (İsteğe Bağlı): <input type='file' accept='image/*' id='photoIn'></label>
      <input type='text' id='n' placeholder='Müşteri Adı'>
      <input type='text' id='s' placeholder='Müşteri Soyadı'>
      <input type='text' id='j' placeholder='Yapılacak İş'>
      <input type='tel' id='p' placeholder='Telefon'>
      <input type='email' id='e' placeholder='E-posta'>
      <input type='text' id='a' placeholder='Adres'>
      <input type='datetime-local' id='d' placeholder='Randevu Tarihi'>
      <input type='number' id='pr' placeholder='Ücret (TL)'>
      <button onclick='saveData()' style='background:#27ae60'>Kaydet</button>
    </div>
  </div>

  <!-- AYARLAR -->
  <div class='screen' id='settings'>
    <header>
      <h1>Ayarlar</h1>
      <button onclick='showScreen("main")'>Geri</button>
    </header>
    <div class='form'>
      <div style='background:#fff;padding:15px;border-radius:5px'>
        <p style='margin-top:0'>Arkaplan Logosu:</p>
        <input type='file' accept='image/*' id='bgIn'>
      </div>
      <div style='background:#fff;padding:15px;border-radius:5px'>
        <p style='margin-top:0'>Google Entegrasyonu:</p>
        <button onclick='initGapi()' style='background:#4285F4'>Google ile Bağlan</button>
      </div>
      <button style='background:#e74c3c;margin-top:20px' onclick='clearData()'>Tüm Verileri Sil</button>
    </div>
  </div>

  <script>
    var state = {
      r: JSON.parse(localStorage.getItem('pro_data')) || [],
      bg: localStorage.getItem('pro_bg') || '',
      tempImg: ''
    };

    // Google API Client ID (kendi proje ID'nizi buraya koyun)
    const CLIENT_ID = 'YOUR_GOOGLE_CLIENT_ID'; // Google Cloud Console'dan al
    const API_KEY = 'YOUR_GOOGLE_API_KEY';
    const DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
    const SCOPES = 'https://www.googleapis.com/auth/drive.file';

    function applyBg() {
      if (state.bg) {
        document.getElementById('bg').style.backgroundImage = "url('" + state.bg + "')";
      } else {
        document.getElementById('bg').style.backgroundImage = "none";
      }
    }

    function saveStorage() {
      try {
        localStorage.setItem('pro_data', JSON.stringify(state.r));
        localStorage.setItem('pro_bg', state.bg);
      } catch (e) {
        alert("Hafıza dolu! Fotoğraflar çok büyük olabilir, lütfen boyutlarını küçültün.");
      }
    }

    function showScreen(id) {
      document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
      document.getElementById(id).classList.add('active');
      if (id === 'main') renderTable();
    }

    function renderTable() {
      let h = "<table><tr><th>Foto</th><th>Ad Soyad</th><th>İş</th><th>Tel</th><th>E-posta</th><th>Adres</th><th>Randevu</th><th>Ücret</th><th>İşlem</th></tr>";
      if (state.r.length === 0) {
        h = "<div style='padding:20px;text-align:center'>Kayıt yok. Eklemek için + butonuna basın.</div>";
      } else {
        state.r.forEach((i, idx) => {
          const imgHtml = i.img ? `<img src='${i.img}' class='thumb'>` : "-";
          const fullName = (i.n || '') + " " + (i.s || '');
          h += `<tr>
            <td>${imgHtml}</td>
            <td>${fullName}</td>
            <td>${i.j}</td>
            <td>${i.p}</td>
            <td>${i.e}</td>
            <td>${i.a}</td>
            <td>${i.d || '-'}</td>
            <td>${i.pr} ₺</td>
            <td><button class='btn-sm' onclick='delItem(${idx})'>Sil</button></td>
          </tr>`;
        });
        h += "</table>";
      }
      document.getElementById('table-wrap').innerHTML = h;
    }

    document.getElementById('photoIn').addEventListener('change', function(e) {
      const f = e.target.files[0];
      if (!f) return;
      const r = new FileReader();
      r.onload = function(ev) {
        state.tempImg = ev.target.result;
      };
      r.readAsDataURL(f);
    });

    document.getElementById('bgIn').addEventListener('change', function(e) {
      const f = e.target.files[0];
      if (!f) return;
      const r = new FileReader();
      r.onload = function(ev) {
        state.bg = ev.target.result;
        saveStorage();
        applyBg();
        alert("Logo ayarlandı!");
      };
      r.readAsDataURL(f);
    });

    function saveData() {
      const n = document.getElementById('n').value;
      const s = document.getElementById('s').value;
      if (!n) return alert("İsim zorunludur!");
      state.r.push({
        n: n,
        s: s,
        j: document.getElementById('j').value || '-',
        p: document.getElementById('p').value || '-',
        e: document.getElementById('e').value || '-',
        a: document.getElementById('a').value || '-',
        d: document.getElementById('d').value || '-',
        pr: document.getElementById('pr').value || '0',
        img: state.tempImg
      });
      saveStorage();
      state.tempImg = '';
      document.getElementById('n').value = '';
      document.getElementById('s').value = '';
      document.getElementById('j').value = '';
      document.getElementById('p').value = '';
      document.getElementById('e').value = '';
      document.getElementById('a').value = '';
      document.getElementById('d').value = '';
      document.getElementById('pr').value = '';
      document.getElementById('photoIn').value = '';
      showScreen('main');
    }

    function delItem(idx) {
      if (confirm("Silmek istediğinize emin misiniz?")) {
        state.r.splice(idx, 1);
        saveStorage();
        renderTable();
      }
    }

    function clearData() {
      if (confirm("Tüm veriler silinecek! Emin misiniz?")) {
        state.r = [];
        state.bg = '';
        saveStorage();
        applyBg();
        renderTable();
        alert("Temizlendi!");
      }
    }

    function exportExcel() {
      let csv = "\uFEFFAd,Soyad,İş,Telefon,E-posta,Adres,Randevu,Ücret (TL)\n";
      state.r.forEach(i => {
        csv += `${i.n},${i.s},${i.j},${i.p},${i.e},${i.a},${i.d},${i.pr}\n`;
      });
      const b = new Blob([csv], { type: "text/csv;charset=utf-8;" });
      const u = URL.createObjectURL(b);
      const a = document.createElement("a");
      a.href = u;
      a.download = "randevu_listesi.csv";
      a.click();
    }

    // GOOGLE DRIVE YÜKLEME
    function initGapi() {
      gapi.load('client:picker', () => {
        gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          scope: SCOPES
        }).then(() => {
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        });
      });
    }

    function updateSigninStatus(isSignedIn) {
      if (isSignedIn) {
        alert("Google'a giriş yapıldı. Artık Drive'a yükleme yapabilirsiniz.");
      } else {
        gapi.auth2.getAuthInstance().signIn();
      }
    }

    function uploadToDrive() {
      const csv = generateCsv();
      const file = new Blob([csv], { type: 'text/csv' });
      const metadata = {
        'name': 'randevu_listesi.csv',
        'mimeType': 'text/csv'
      };

      const accessToken = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token;
      const form = new FormData();
      form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
      form.append('file', file);

      fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id', {
        method: 'POST',
        headers: new Headers({ 'Authorization': 'Bearer ' + accessToken }),
        body: form
      })
      .then(res => res.json())
      .then(data => {
        alert(`Dosya Drive'a yüklendi! ID: ${data.id}`);
      })
      .catch(err => {
        console.error(err);
        alert("Yükleme hatası: " + err.message);
      });
    }

    function generateCsv() {
      let csv = "Ad,Soyad,İş,Telefon,E-posta,Adres,Randevu,Ücret (TL)\n";
      state.r.forEach(i => {
        csv += `${i.n},${i.s},${i.j},${i.p},${i.e},${i.a},${i.d},${i.pr}\n`;
      });
      return csv;
    }

    // İlk başta çalıştır
    applyBg();
    renderTable();
  </script>

  <!-- Google API betiği -->
  <script async defer src="https://apis.google.com/js/api.js"
    onload="this.onload=function(){};initGapi()"
    onreadystatechange="if (this.readyState === 'complete') this.onload()">
  </script>
</body>
</html>


### Links (optional)

https://github.com/ccetinkayarifat

### Where are you in your GitHub journey?

Brand new to GitHub

### And where are you going next on GitHub?

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

### What technical skills or projects are you working on?

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

### Got a question for us? (optional)

"data": [
  {
    "event_name": "Purchase",
    "event_time": 1712248396,
    "action_source": "website",
    "user_data": {
      "fbc": "fb.1.1554763741205.IwAR2F4-dbP0l7Mn1IawQQGCINEz7PYXQvwjNwB_qa2ofrHyiLjcbCRxTDMgk",
      "fbp": "fb.1.1558571054389.1098115397",
      "em": ["7b17fb0bd173f625b58636fb796407c22b3d16fc78302d79f0fd30c2fc2fc068"],
      "ph": ["6069d14bf122fdfd931dc7beb58e5dfbba395b1faf05bdcd42d12358d63d8599"]
    },
    "custom_data": {
      "currency": "USD",
      "value": "142.52"
    }
  }
]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Rıza #190760

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

GitHub Community

Rıza #190760

Uh oh!

rifat-max Mar 27, 2026

Introduce yourself

Replies: 0 comments

rifat-max
Mar 27, 2026