<!--
Bu program Zoda tarafından yazılmıştır.

Bütün hakları Zoda © 2024 aittir.
Hak sahibinden izinsiz kopyalama,ücretli-ücretsiz dağıtımına izin yoktur.

Yazılım sadece Zoda tarafından ücretli/veya ücretsiz olarak tek bir şahıs olmak kaydı
ile dağıtılır. Elinizdeki kopyanın orjinal dağıtımcı olan Zoda'dan gelip gelmediğini
kontrol etmek için lütfen discord zoda.dev üzerinden iletişime geçin.

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoda Fiş Aracı</title>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style id="css">
        #capture {
            position: relative;
            width: fit-content;
            height: fit-content;
            overflow: hidden;
            border: 0.5px solid;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        #backgroundCanvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        label {
            font-family: 'Lucida Sans';
        }
        .hr {
            height: 12px;
            background-color: black;
            color: black;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .input {
            border: 5px solid;
            background-color: rgba(200, 200, 200, 255);
            padding: 20px;
            margin-bottom: 20px;
        }
        input {
            border: 1.5px solid;
            padding: 5px;
            margin-bottom: 10px;
        }
        button {
            font-family: Roboto;
            background-color: rgb(160, 239, 239);
            padding: 10px 20px;
            cursor: pointer;
        }
        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            font-size: 40px;
            color: rgba(255, 0, 0, 0.2);
            z-index: 10;
            pointer-events: none;
            display: none;
            font-size: 150px;
        }
        .watermark.show {
            display: block;
        }
    </style>
</head>
<body>
    <div id="capture">
        <h2><span id="company"></span> Müşteri Bilgilendirme Fişi</h2>
        <p>Tarih: <span id="date"></span></p>
        <p>Kime: <span id="to"></span></p>
        <p><span id="author"></span> tarafından düzenlendi.</p>
        <hr>
        <p>Alınan Hizmet/Ürün: <span id="type"></span></p>
        <p>Ekstralar:</p>
        <ul id="extras"></ul>
        <p>Vergiler:</p>
        <ul id="taxes"></ul>
        <p>Hizmet/Ürün Ücreti: <span id="type_price"></span></p>
        <p>Ekstralar Toplam Ücreti: <span id="extra_price"></span></p>
        <p>Vergiler Dahil <b>Toplam</b>: <b><span id="with_tax_price"></span></b></p>
        <div id="watermark" class="watermark">Örnek</div>
    </div>
    <hr class="hr">
    <div class="input">
        <label>Şirket/İşletme:</label>
        <input type="text" id="company_data"><br>
        <label>Kime:</label>
        <input type="text" id="to_data"><br>
        <label>Yazar:</label>
        <input type="text" id="author_data"><br>
        <label>Hizmet/Ürün:</label>
        <input type="text" id="type_data"><br>
        <label>Ekstra İstekler <b>',' ile ayırın.</b>:</label>
        <input type="text" id="extras_data"><br>
        <label>Vergiler:</label>
        <input type="text" id="taxes_data"><br>
        <label>Hizmet/Ürün Ücreti:</label>
        <input type="text" id="type_price_data"><br>
        <label>Ekstralar Toplam Ücreti:</label>
        <input type="text" id="extra_price_data"><br>
        <label>Vergiler Dahil Toplam:</label>
        <input type="text" id="with_tax_price_data"><br>
        <label>Tarih:</label>
        <input type="text" id="date_data">
        <button id="auto_date_btn">Şimdiki Tarih Ekle</button><br>
        <input type="checkbox" id="watermark_checkbox">
        <label for="watermark_checkbox">Filigran Ekle</label><br>
		<input type="checkbox" id="use_custom_css">Özel Css<br>
		<!--<label for="use_custom_css">Özel Tanımlanmış CSS kullan</label>-->
		<textarea id="custom-css">
		</textarea>
		<pre><i>* Bu program Zoda tarafından yazılmıştır.

Bütün hakları Zoda © 2024 aittir.
Hak sahibinden izinsiz kopyalama,ücretli-ücretsiz dağıtımına izin yoktur.

Yazılım sadece Zoda tarafından ücretli/veya ücretsiz olarak tek bir şahıs olmak kaydı
ile dağıtılır. Elinizdeki kopyanın orjinal dağıtımcı olan Zoda'dan gelip gelmediğini
kontrol etmek için lütfen discord zoda.dev üzerinden iletişime geçin.</i></pre>
    </div>
    <br>
    <button id="btn">Görüntüyü Al</button>
    <hr class="hr">
    <div id="output"></div>
    
    <script>
		document.getElementById("custom-css").value=document.getElementById("css").innerText
        function capture() {
			if (document.getElementById("use_custom_css").checked){
				document.getElementById("css").innerText=document.getElementById("custom-css").value;
				console.log("Özel Css Kullanıldı");
			}
            document.getElementById("company").innerText = document.getElementById("company_data").value;
            document.getElementById("date").innerText = document.getElementById("date_data").value; // Manuel tarih
            document.getElementById("to").innerText = document.getElementById("to_data").value;
            document.getElementById("author").innerText = document.getElementById("author_data").value;
            document.getElementById("type").innerText = document.getElementById("type_data").value;

            var extrasData = document.getElementById("extras_data").value.split(',');
            var extrasList = document.getElementById("extras");
            extrasList.innerHTML = "";
            extrasData.forEach(function(item) {
                var li = document.createElement("li");
                li.innerText = item.trim();
                extrasList.appendChild(li);
            });

            var taxesData = document.getElementById("taxes_data").value.split(',');
            var taxesList = document.getElementById("taxes");
            taxesList.innerHTML = "";
            taxesData.forEach(function(item) {
                var li = document.createElement("li");
                li.innerText = item.trim();
                taxesList.appendChild(li);
            });

            document.getElementById("type_price").innerText = document.getElementById("type_price_data").value;
            document.getElementById("extra_price").innerText = document.getElementById("extra_price_data").value;
            document.getElementById("with_tax_price").innerText = document.getElementById("with_tax_price_data").value;

            const watermark = document.getElementById("watermark");
            const isWatermarkChecked = document.getElementById("watermark_checkbox").checked;
            watermark.classList.toggle("show", isWatermarkChecked);

            const captureElement = document.querySelector('#capture');
            html2canvas(captureElement)
                .then(canvas => {
                    /*if (isWatermarkChecked) {
                        const ctx = canvas.getContext('2d');
                        ctx.font = '40px Arial';
                        ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
                        ctx.fillText('Geçersizdir', canvas.width / 2, canvas.height / 2);
                    }*/
                    const image = canvas.toDataURL('image/png');
                    const imgElement = document.createElement('img');
                    imgElement.src = image;
                    document.querySelector('#output').appendChild(imgElement);
                });
        }

        const btn = document.querySelector('#btn');
        btn.addEventListener('click', capture);

        // Tarih butonuna tıklandığında şimdiki tarihi ekle
        const autoDateBtn = document.querySelector('#auto_date_btn');
        autoDateBtn.addEventListener('click', function() {
            document.getElementById("date_data").value = new Date().toLocaleString('tr-TR');
        });

        // Sayfa yüklendiğinde tarih alanını otomatik doldur
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById("date_data").value = new Date().toLocaleString('tr-TR');
        });
    </script>
</body>
</html>
