<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.9/purify.min.js" integrity="sha512-VOTFfd4vxPpuE98m9UQTN7j2N2/Blw44lZMhRTnZQqA2gOHq7Yvn5bdIDjjAZuFqqkDtppcjMW+dN3GYbhM94g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <title>native-phone</title>

    <!-- CSS File's -->
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/tooltip.css">
    <link rel="stylesheet" href="./css/settings.css">
    <link rel="stylesheet" href="./css/phone.css">
    <link rel="stylesheet" href="./css/twitter.css">
    <link rel="stylesheet" href="./css/bank.css">
    <link rel="stylesheet" href="./css/mesajlar.css">
    <link rel="stylesheet" href="./css/vale.css">
    <link rel="stylesheet" href="./css/mail.css">
    <link rel="stylesheet" href="./css/meos.css">
    <link rel="stylesheet" href="./css/crypto.css">
    <link rel="stylesheet" href="./css/racing.css">
    <link rel="stylesheet" href="./css/houses.css">
    <link rel="stylesheet" href="./css/lawyers.css">
    <link rel="stylesheet" href="./css/qstore.css">
    <link rel="stylesheet" href="./css/trucker.css">
    <link rel="stylesheet" href="./css/gallery.css">
    <link rel="stylesheet" href="./css/camera.css">
    <link rel="stylesheet" href="./css/ping.css">
    <link rel="stylesheet" href="./css/calculator.css">
    <link rel="stylesheet" href="./css/lockscreen.css">
    <link rel="fonts" href="./fonts/Fabrica-ZOjx.otf">
    <link rel="stylesheet" href="css/widget.css">
    <link rel="stylesheet" href="css/weather_app.css">
    <link rel="stylesheet" href="css/calendar.css">
    <link rel="stylesheet" href="css/kamera.css">
    <link rel="stylesheet" href="css/reklam.css">
    <link rel="stylesheet" href="css/app-store.css">
    <link rel="stylesheet" href="css/bazugram.css">
    <link rel="stylesheet" href="css/darkchat.css">
    <!-- <link rel="stylesheet" href="./css/wenmo.css"> -->

    <!-- CDN's -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <!-- JQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.js" integrity="sha512-hkvXFLlESjeYENO4CNi69z3A1puvONQV5Uh+G4TUDayZxSLyic5Kba9hhuiNLbHqdnKNMk2PxXKm0v7KDnWkYA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Bootstrap -->
    <script src="https://code.jquery.com/color/jquery.color-2.2.0.min.js" integrity="sha256-aSe2ZC5QeunlL/w/7PsVKmV+fa0eDbmybn/ptsKHR6I=" crossorigin="anonymous"></script> <!-- Color CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.css" integrity="sha512-vEia6TQGr3FqC6h55/NdU3QSM5XR6HSl5fW71QTKrgeER98LIMGwymBVM867C1XHIkYD9nMTfWK2A0xcodKHNA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Bootstrap -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Londrina+Outline&family=PT+Sans+Narrow:wght@400;700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Londrina+Outline&family=PT+Sans+Narrow:wght@400;700&family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Londrina+Outline&family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bungee+Outline&family=Londrina+Outline&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bungee+Outline&family=Kalnia+Glaze:wght@100..700&family=Londrina+Outline&family=Quicksand:wght@300..700&family=Squada+One&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Chivo:ital,wght@0,100..900;1,100..900&family=Matemasie&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Carter+One&family=Chivo:ital,wght@0,100..900;1,100..900&family=Matemasie&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">
    <head>
        <body>
        <div id="instructions" class="hidden">
            <p>Enter ile fotoğraf çek</p>
            <p>Yukarı ok tuşu ile kamera değiştir</p>
            <p>Backspace tuşu ile kameradan çık</p>
        </div>
    </body>
</head>

</head>
    <body style="background-color: transparent !important";>
        <div id="popup">
            <div class="popupclass">
                <div id="close"></div>
            </div>
        </div>
        <div class="container disableSelection">
            <div class="kilit-ekran">
                <div id="native-phone-operator">BazuCell</div>
                <div id="native-phone-time2"
                    onmousedown="startPressTimer(event)"
                    onmouseup="endPressTimer(event)"
                    ontouchstart="startPressTimer(event)"
                    ontouchend="endPressTimer(event)"
                >08:05</div>
                <div id="native-phone-date"
                    onmousedown="startPressTimer(event)"
                    onmouseup="endPressTimer(event)"
                    ontouchstart="startPressTimer(event)"
                    ontouchend="endPressTimer(event)"
                >25 Temmuz, 2024</div>
            <!--    <div class="native-kilit">
                    <span class="native-kilitekran" onclick="handleClick(this);">Click to unlock</span>
                </div>-->
                <button class="flashlight-button" onclick="toggleFlashlight()">
                    <img src="./img/flash.png" alt="Flashlight" class="icon-img">
                </button>
                <button class="camera-button" onclick="toggleCamera()">
                    <img src="./img/kamera.png" alt="Camera" class="icon-img">
                </button>
                <div class="home-button"></div>
                <div class="settings-panel" id="settings-panel">
                    <div class="font-selection">
                        <h3>Font & Renkler</h3>
                        <div class="font-buttons">
                            <button class="font-button" style="font-family: 'Poppins';" onclick="changeFontFamily('Poppins')">12</button>
                            <button class="font-button" style="font-family: 'Quicksand';" onclick="changeFontFamily('Quicksand')">12</button>
                            <button class="font-button" style="font-family: 'Alfa Slab One';" onclick="changeFontFamily('Alfa Slab One')">12</button>
                            <button class="font-button" style="font-family: 'Squada One';" onclick="changeFontFamily('Squada One')">12</button>
                            <button class="font-button" style="font-family: 'Bodoni Moda SC';" onclick="changeFontFamily('Bodoni Moda SC')">12</button>
                            <button class="font-button" style="font-family: 'Chivo';" onclick="changeFontFamily('Chivo')">12</button>
                            <button class="font-button" style="font-family: 'Comic Sans MS';" onclick="changeFontFamily('Comic Sans MS')">12</button>
                            <button class="font-button" style="font-family: 'Carter One';" onclick="changeFontFamily('Carter One')">12</button>
                        </div>
                    </div>
                    <div class="color-selection">
                        <h3></h3>
                        <div class="color-buttons">
                            <button class="color-button" style="background-color: #000000;" onclick="changeFontColor('#000000')"></button>
                            <button class="color-button" style="background-color: #FF5733;" onclick="changeFontColor('#FF5733')"></button>
                            <button class="color-button" style="background-color: #33FF57;" onclick="changeFontColor('#33FF57')"></button>
                            <button class="color-button" style="background-color: #3357FF;" onclick="changeFontColor('#3357FF')"></button>
                            <button class="color-button" style="background-color: #F0F0F0;" onclick="changeFontColor('#F0F0F0')"></button>
                            <button class="color-button" style="background-color: #f53fd7;" onclick="changeFontColor('#f53fd7')"></button>
                            <button class="color-button" style="background-color: #f8fc0c;" onclick="changeFontColor('#f8fc0c')"></button>
                            <div class="color-picker-wrapper">
                                <input type="color" id="color-picker" onchange="changeFontColor(this.value)">
                                <div class="color-picker-icon" onclick="document.getElementById('color-picker').click()">
                                    <i class="fa fa-pencil"></i> <!-- Kalem ikonu -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="confirm-button" onclick="confirmSettings()">X</button>
                    <!---<button class="reset-button" onclick="resetSettings()">Sıfırla</button> -->
                </div>
                <div class="widget-container">
                    <div class="widget" id="widget1">
                        <img id="widget-icon1" src="./img/sinyal.png" alt="Moon">
                    </div>
                    <div class="widget" id="widget2">
                        <img id="widget-icon2" src="./img/wifi.png" alt="Sun">
                    </div>
                    <div class="widget" id="widget3">
                        <span id="weather-temp3">16°</span>
                    </div>
                    <div class="widget" id="widget4">
                        <span id="battery-percentage2"></span>
                    </div>
                </div>              
            </div>                        
            <script>
                function handleClick(element) {
                    element.style.animation = 'disappear 1s forwards';
                    setTimeout(() => {
                        element.classList.add('hidden');
                        setTimeout(() => {
                            element.classList.remove('hidden');
                            element.style.animation = '';
                        }, 1000);
                    }, 1000);
                }
            
                function toggleFlashlight() {
                    console.log("Fener aç/kapa");
                    fetch('https://native-phone/ToggleFlashlight', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({})
                    }).then(response => {
                        if (response.ok) {
                            console.log("Fener aç/kapa işlemi başarıyla başlatıldı.");
                        } else {
                            console.error("Fener aç/kapa işlemi başarısız oldu.");
                        }
                    }).catch(error => {
                        console.error("Hata:", error);
                    });
                }
            
                function toggleCamera() {
                    console.log("Kamera aç/kapa");
                    fetch('https://native-phone/TakePhoto', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({})
                    });
                    native.Phone.Functions.Close();
                }
                function updateDateTime() {
        const date = new Date();
        const dateElement = document.getElementById('native-phone-date');
        const day = date.getDate();
        const monthNames = [
            "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran",
            "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"
        ];
        const month = monthNames[date.getMonth()];
        const year = date.getFullYear();
        const dateString = `${day} ${month}, ${year}`;
        dateElement.textContent = dateString;
    }

    setInterval(updateDateTime, 1000);
    document.addEventListener('DOMContentLoaded', updateDateTime);
            </script>            
            <img src="./img/15pro.png" class="phone-frame">
            <div class="phone-container phone-background">
                <!-- Phone Header -->
                <div class="phone-header">
                    <div id="phone-server"></div>
                    <div id="phone-time">08:05</div>
                    <!-- <div id="player-id">1</div> -->                    
                    <div id="phone-icons">
                        <div id="phone-signal">
                            <div class="signal-bar"></div>
                            <div class="signal-bar"></div>
                            <div class="signal-bar"></div>
                            <div class="signal-bar"></div>
                        </div>
                        <div id="phone-battery" class="seviye">
                            <span id="battery-percentage">100</span>
                        </div>
                    </div>
                </div>

                <!-- Phone Notification -->
                <div class="phone-notification-container">
                    <div class="notification-icon"></div>
                    <div class="notification-title"></div>
                    <div class="notification-text"></div>
                </div>

                <!-- Home Applications -->
                <!-- <div class="kilit-ekran">
                </div> -->
                <div class="phone-applications">
                    <div id="takvim-widget" class="takvim-widget">
                        <div id="takvim-header">
                            <span id="takvim-month"></span>
                            <span id="takvim-year"></span>
                        </div>
                        <div id="takvim-body">
                            <div id="takvim-day-big"></div>
                            <div id="takvim-day-name"></div>
                        </div>
                    </div>
                    <div id="weather-widget" class="weather-widget">
                        <div id="weather-icon"></div>
                        <div id="weather-info">
                            <span id="weather-city">Los Santos</span> <!-- Şehir ismi manuel olarak eklenmiştir -->
                            <span id="weather-temp">16°</span>
                            <span id="weather-desc">Normal</span>
                        </div>
                    </div>
                    
                    <!-- <canvas id="clock" width="5" height="5" /> -->
                    <div class="phone-footer-applications">
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="1"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="2"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="3"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="4"></div>
                    </div>

                    <div class="phone-home-applications">
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="5"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="6"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="7"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="8"></div>

                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="9"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="10"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="11"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="12"></div>

                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="13"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="14"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="15"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="16"></div>

                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="17"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="18"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="19"></div>
                        <div class="phone-application" data-toggle="tooltip" data-placement="bottom" title="" data-appslot="20"></div>
                    </div>
                </div>




                <!-- Unread Alerts -->
                <!-- <div class="app-unread-alerts">1</div> -->

                <!-- Container for all application's -->
                <div class="phone-application-container">
                    <div class="settings-app">
                        <div class="settings-app-header"><i class="">Ayarlar</i></div>

                        <div class="ayarlar-bilgiler">
                            <div class="settings-search">
                                <input type="text" id="searchInput" placeholder="Ara...">
                                <i class="fas fa-search search-icon"></i>
                            </div>
                            <!-- <div class="settings-app-tab-header"><p>Appearance</p></div> -->
                            <div class="ayarlar-avatar" data-settingstab="profilepicture">
                                <div class="ayarlar-icon"></div>
                                <div class="ayarlar-yazi"><p id="character-name">Avatar</p></div>
                                <div class="ayarlar-aciklama"><p>Varsayılan</p></div>
                            </div>
                        </div>
                        <div class="settings-app-tab-information">
                            <!-- <div class="settings-app-tab-header"><p>Infomation</p></div> -->
                            <div class="settings-app-tab" data-settingstab="background">
                                <div class="settings-tab-icon"><i class="fa-solid fa-mountain" style="color: #3d8bf1;"></i></div>
                                <div class="settings-tab-title"><p>Arkaplan</p></div>
                                <div class="settings-tab-description"><p>Varsayılan</p></div>
                            </div>
                            <div class="settings-app-tab secondTab" data-settingstab="numberrecognition">
                                <!-- Rounded switch -->
                                <label class="switch">
                                    <input class="numberrec-box" type="checkbox">
                                    <span class="slider round"></span>
                                </label>

                                <div class="settings-tab-icon"><i class="fas fa-user-secret" style="color: #3a3a3a;"></i></div>
                                <div class="settings-tab-title"><p>Gizli Aramalar</p></div>
                                <div class="settings-tab-description" id="numberrecognition"><p>Off</p></div>
                            </div>
                            <div class="settings-app-tab secondTab" data-settingstab="myPhone">
                                <div class="settings-tab-icon"><i class="fas fa-id-badge" style="color: #8d0e0e;"></i></div>
                                <div class="settings-tab-title"><p>Numaram</p></div>
                                <div class="settings-tab-description" id="myPhoneNumber"><p>0612345678</p></div>
                            </div>
                            <div class="settings-app-tab secondTab" data-settingstab="serialNumber">
                                <div class="settings-tab-icon"><i class="fas fa-barcode" style="color: #3a3a3a;"></i></div>
                                <div class="settings-tab-title"><p>Seri Numaram</p></div>
                                <div class="settings-tab-description" id="mySerialNumber"><p>0612345678</p></div>
                            </div>
                            <div class="settings-app-tab secondTab" data-settingstab="shareNumber">
                                <div class="settings-tab-icon"><i class="fas fa-share-square" style="color: #0c9e07;"></i></div>
                                <div class="settings-tab-title"><p>Numara Paylaş</p></div>
                                <div class="settings-tab-description"><p>En yakındaki kişi ile numaranızı paylaşın</p></div>
                            </div>
                        </div>

                        <div class="settings-background-tab">
                            <div class="settings-app-header"><p>Arkaplan</p></div>
                            
                            <div class="background-options">
                                <!-- Arkaplan Seçenekleri -->
                                <div class="background-option" data-background="background-1">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/background-1.png');"></div>
                                </div>
                                <div class="background-option" data-background="blueboku">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/blueboku.png');"></div>
                                </div>
                                <div class="background-option" data-background="bluegary">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/bluegary.png');"></div>
                                </div>
                                <div class="background-option" data-background="gidecm">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/gidecm.png');"></div>
                                </div>
                                <div class="background-option" data-background="iphones">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/iphones.png');"></div>
                                </div>
                                <div class="background-option" data-background="lockscreen">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/lockscreen.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper8">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper8.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper9">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper9.png');"></div>
                                </div>
                                <div class="background-option" data-background="siyah">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/siyah.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper10">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper10.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper3">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper3.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper2">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper2.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper5">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper5.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper6">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper6.png');"></div>
                                </div>
                                <div class="background-option" data-background="native-wallpaper7">
                                    <div class="background-image" style="background-image: url('/html/img/backgrounds/native-wallpaper7.png');"></div>
                                </div>
                                <!-- Daha fazla arkaplan ekleyebilirsiniz -->
                            </div>
                            
                            <div class="background-buttons">
                                <div class="background-button" id="accept-background">
                                    <p>Onayla</p>
                                </div>
                                <div class="background-button" id="cancel-background">
                                    <p>İptal</p>
                                </div>
                            </div>
                        </div>
                                                

                        <div class="settings-profilepicture-tab">
                            <div class="settings-app-header"><p>Avatar</p></div>
                            <div class="profilepicture-options">
                                <div class="profilepicture-option" data-profilepicture="default">
                                    <div class="profilepicture-option-icon"> <i class="fas fa-paint-brush"></i> </div>
                                    <div class="profilepicture-option-title"> Varsayılan </div>
                                    <div class="profilepicture-option-description">Varsayılan avatar</div>
                                    <div class="profilepicture-option-current"><i class="fas fa-check-circle"></i></div>
                                </div>
                                <div class="profilepicture-option" data-profilepicture="custom-profilepicture">
                                    <div class="profilepicture-option-icon"><i class="fas fa-paint-brush"></i></div>
                                    <div class="profilepicture-option-title">Özelleştir</div>
                                    <div class="profilepicture-option-description">Avatarınızı özelleştirin</div>
                                </div>
                                <div class="profilepicture-option" data-profilepicture="camera-profilepicture">
                                    <div class="profilepicture-option-icon"><i class="fas fa fa-camera"></i></div>
                                    <div class="profilepicture-option-title">Fotoğraf Yakında!</div>
                                    <div class="profilepicture-option-description">Profil fotoğrafınızı ekleyin</div>
                                </div>
                            </div>

                            <div class="profilepicture-buttons">
                                <div class="profilepicture-button" id="accept-profilepicture">
                                    <p>Onayla</p>
                                </div>
                                <div class="profilepicture-button" id="cancel-profilepicture">
                                    <p>İptal</p>
                                </div>
                            </div>

                            <div class="profilepicture-custom">
                                <div class="profilepicture-custom-title">Kişiselleştirilmiş Avatar</div>
                                <input type="text" class="custom-profilepicture-input" placeholder="URL (.jpg/.png)" spellcheck="false">

                                <div class="profilepicture-custom-buttons">
                                    <div class="custom-profilepicture-button" id="accept-custom-profilepicture"><p>Onayla</p></div>
                                    <div class="custom-profilepicture-button" id="cancel-custom-profilepicture"><p>İptal</p></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="phone-call-app">
                        <div class="phone-call-incoming">
                            <div class="phone-call-incoming-title">Gelen çağrı</div>
                            <div class="phone-call-incoming-caller">Bilinmeyen Numara</div>
                            <div class="phone-call-incoming-picture"></div>

                            <i class="fas fa-phone" id="incoming-answer"></i>
                            <i class="fas fa-phone" id="incoming-deny"></i>
                        </div>

                        <div class="phone-call-outgoing">
                            <div class="phone-call-outgoing-title">Aranıyor...</div>
                            <div class="phone-call-outgoing-caller">Bilinmeyen Numara</div>
                            <div class="phone-call-outgoing-picture"></div>

                            <i class="fas fa-phone" id="outgoing-cancel"></i>
                        </div>

                        <div class="phone-call-ongoing">
                            <div class="phone-call-ongoing-title">Devam Ediyor</div>
                            <div class="phone-call-ongoing-caller">Bilinmeyen Numara</div>
                            <div class="phone-call-ongoing-picture"></div>
                            <div class="phone-call-ongoing-time">05:05</div>
                            <div class="phone-call-ongoing-buttons">
                                <div class="button">
                                    <i class="fas fa-volume-up"></i>
                                    <span>Hoparlör</span>
                                </div>
                                <div class="button">
                                    <i class="fas fa-microphone-slash"></i>
                                    <span>Sessiz</span>
                                </div>
                                <div class="button">
                                    <i class="fas fa-keyboard"></i>
                                    <span>Tuşlar</span>
                                </div>
                            </div>
                            <i class="fas fa-phone" id="ongoing-cancel"></i>
                        </div>
                    </div>

                    <div class="phone-app">
                        <div class="phone-app-header">
                            <p>Kişiler</p>
                            <!--<span id="total-contacts">0 contacts</span> -->
                        </div>

                        <div class="phone-contacts">
                            <div class="phone-contacts-header">
                                <input type="text" id="contact-search2" placeholder="🔎Kişi İsimi" spellcheck="false">
                                <i id="phone-plus-icon" class="fas fa-plus"></i>
                            </div>

                            <div class="phone-contact-list">
                            </div>
                        </div>

                        <div class="phone-recent">
                            <div class="phone-recent-header"><p>Arama Geçmişi</p></div>

                            <div class="phone-recent-calls">
                                <!-- <div class="phone-recent-call"> <div class="phone-recent-call-image">P</div> <div class="phone-recent-call-name">Pieter Post</div> <div class="phone-recent-call-type"><i class="fas fa-phone-slash"></i></div> <div class="phone-recent-call-time">12:05</div> </div> -->
                            </div>
                        </div>

                        <div class="phone-suggestedcontacts">
                            <div class="phone-suggestedcontacts-header">
                                Paylaşılan Numaralar
                                <p class="amount-of-suggested-contacts">0 contacts</p>
                            </div>

                            <div class="suggested-contacts">
                            </div>
                        </div>

                        <div class="phone-keypad noselect">
                            <!-- phone-keypad-input div'i yerine bir input elemanı -->
                            <input type="text" id="phone-keypad-input" class="phone-keypad-input" />
                        
                            <div class="phone-keypad-keys">
                                <div class="phone-keypad-key" data-keypadvalue="1">1</div>
                                <div class="phone-keypad-key" data-keypadvalue="2">2</div>
                                <div class="phone-keypad-key" data-keypadvalue="3">3</div>
                                <div class="phone-keypad-key" data-keypadvalue="4">4</div>
                                <div class="phone-keypad-key" data-keypadvalue="5">5</div>
                                <div class="phone-keypad-key" data-keypadvalue="6">6</div>
                                <div class="phone-keypad-key" data-keypadvalue="7">7</div>
                                <div class="phone-keypad-key" data-keypadvalue="8">8</div>
                                <div class="phone-keypad-key" data-keypadvalue="9">9</div>
                                <div class="phone-keypad-key" data-keypadvalue="*">*</div>
                                <div class="phone-keypad-key" data-keypadvalue="0">0</div>
                                <div class="phone-keypad-key" data-keypadvalue="#">#</div>
                            </div>
                            <div class="phone-keypad-key-call"><i class="fas fa-phone-alt"></i></div>
                        </div>

                        <div class="phone-add-contact">
                            <div class="phone-add-contact-header"><p>Kişi ekle</p></div>

                            <i id="phone-add-contact-name-icon" class="fas fa-user"></i>
                            <input type="text" class="phone-add-contact-name" placeholder="Contact Name" required spellcheck="false">

                            <i id="phone-add-contact-number-icon" class="fas fa-phone-alt"></i>
                            <input type="number" class="phone-add-contact-number" placeholder="Phone number" required spellcheck="false">

                            <i id="phone-add-contact-iban-icon" class="fas fa-money-check"></i>
                            <input type="text" class="phone-add-contact-iban" placeholder="Bank nr. (Not required)" required spellcheck="false">

                            <div class="phone-add-contact-buttons">
                                <div class="phone-add-contact-button" id="add-contact-save"><p>Kaydet</p></div>
                                <div class="phone-add-contact-button" id="add-contact-cancel"><p>İptal</p></div>
                            </div>
                        </div>

                        <div class="phone-edit-contact">
                            <div class="phone-edit-contact-header"><p>Kişi Ekle</p></div>

                            <i id="phone-edit-contact-name-icon" class="fas fa-user"></i>
                            <input type="text" class="phone-edit-contact-name" placeholder="Contact Name" required spellcheck="false">

                            <i id="phone-edit-contact-number-icon" class="fas fa-phone-alt"></i>
                            <input type="number" class="phone-edit-contact-number" placeholder="Phone number" required spellcheck="false">

                            <i id="phone-edit-contact-iban-icon" class="fas fa-money-check"></i>
                            <input type="text" class="phone-edit-contact-iban" placeholder="Bank nr. (Not required)" required spellcheck="false">

                            <div class="phone-edit-contact-buttons">
                                <div class="phone-edit-contact-button" id="edit-contact-save"><p>Kaydet</p></div>
                                <div class="phone-edit-contact-button" id="edit-contact-delete"><p>Sil</p></div>
                                <div class="phone-edit-contact-button" id="edit-contact-cancel"><p>İptal</p></div>
                            </div>
                        </div>

                        <div class="phone-app-footer">
                            <div class="phone-app-footer-button" data-phonefootertab="suggestedcontacts">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="phone-app-footer-button" data-phonefootertab="recent">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="phone-app-footer-button phone-selected-footer-tab" data-phonefootertab="contacts">
                                <i class="fas fa-address-book"></i>
                            </div>
                            <div class="phone-app-footer-button" data-phonefootertab="keypad">
                                <i class="fas fa-list-ol"></i>
                            </div>
                        </div>
                    </div>


                    <div class="garage-app">
                        <div class="garage-app-header">
                            Arabalarım
                        </div>
                        <div class="garage-homescreen">
                            <div class="garage-vehicles">
                            </div>
                        </div>

                         <div class="garage-detailscreen">
                            <div class="garage-cardetails">
                                <div class="vehicle-brand"><span class="vehicle-detail">Marka</span><span class="vehicle-answer">BMW M5</span></div>
                                <div class="vehicle-model"><span class="vehicle-detail">Model</span><span class="vehicle-answer">BMW M5</span></div>
                                <div class="vehicle-plate"><span class="vehicle-detail">Plaka</span><span class="vehicle-answer">BMW M5</span></div>
                                &nbsp;
                                <div class="return-track">
                                    <div id="return-button">
                                        Geri
                                    </div>
                                    <div id="track-vehicle">
                                        Vale
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="gallery-app">
                        <div class="gallery-app-header">
                            Galeri
                        </div>
                        <div class="gallery-homescreen">
                            <div class="gallery-images">
                            </div>
                        </div>

                        <div class="gallery-detailscreen">
                            <div class="gallery-details">
                                <div class="imagedata"><img class="image" id="imagedata" style="width: 100%;" src="" alt=""></div>
                                <div class="make-post-button">
                                    <div id="make-post-button">
                                        PAYLAŞ
                                    </div>
                                    <div id="delete-button">
                                        <i class="fas fa-trash-alt"></i>
                                    </div>
                                </div>
                                <div class="return-button">
                                    <div id="return-button">
                                        GERİ DÖN
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="gallery-postscreen">
                            <div class="gallery-details">
                                <div class="imageTweetData"><textarea id="new-textarea" spellcheck="false" required></textarea></div>
                                <div class="posts-button">
                                    <div id="tweet-button">
                                        <i class="fab fa-burayaiconkoytwitteriçin"></i>
                                    </div>
                                    <div id="reklam-button">
                                        <i class="fas fa-ad fa-lg"></i>
                                    </div>
                                </div>
                                <div class="return-button">
                                    <div id="returndetail-button">
                                        GERİ DÖN
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="camera-app">
                        <div class="camera-homescreen">
                            <div class="camera-image">
                                <video id="video" autoplay></video>
                            </div>
                            <div class="mode-selector">
                                <span id="video-mode" class="mode selected">Yakında</span>
                                <span id="photo-mode" class="mode">Fotoğraf</span>
                                <span id="portrait-mode" class="mode">Yakında</span>
                            </div>
                            <div class="controls">
                                <button id="take-photo" class="control-button">Çek</button>
                                <button id="start-recording" class="control-button hidden">Başlat</button>
                                <button id="stop-recording" class="control-button hidden">Durdur</button>
                                <img id="switch-camera" class="switch-camera" src="img/switchbutonu.png" alt="">
                            </div>
                            <div class="last-photo">
                                <img id="last-photo-img" src="" alt="Son Fotoğraf" class="hidden">
                            </div>
                        </div>
                    </div>

                    <div class="trucker-app">
                        <div class="trucker-header">
                            <span class="trucker-header-name"><span style="font-size: 1vh; color: rgba(255, 255, 255, 0.6);">Hoşgeldin</span><br><span id="trucker-name">Jay Yay</span></span>
                            <div class="trucker-header-progress">
                                <div class="trucker-header-progress-fill"></div>
                                <span class="trucker-header-progress-text" id="trucker-header-progress-current" style="float: left;">Şuan: 100 REP</span>
                                <span class="trucker-header-progress-text" id="trucker-header-progress-next" style="float: right;">Sonra: 200 REP</span>
                            </div>
                            <!-- <div class="trucker-header-currentlevel">1</div> -->
                            <span class="trucker-header-description">Mevcut ilerlemeniz<br><span id="trucker-header-tier">Tier 1</span></span>
                        </div>

                        <div class="trucker-jobinfo">
                            <div class="trucker-jobinfo-nojob">
                                <i class="fas fa-ban"></i>
                                <span id="trucker-jobinfo-nojob-text">Şu anda çalışmıyorsun</span>
                            </div>
                        </div>
                    </div>

                    <div class="lawyers-app">
                        <div class="lawyers-header">
                            <p>Servisler</p>
                            <span>Kullanılabilir servisler</span>
                        </div>

                        <div class="lawyers-list">
                        </div>
                    </div>


                    <div class="crypto-app">
                        <div class="crypto-header">

                            <img src="./img/qbit.png" class="crypto-header-picture">

                            <div class="crypto-header-values">
                                <div class="crypto-header-value crypto-portofolio">
                                    <span>Cüzdan</span>
                                    <p>0.2555</p>
                                </div>
                                <div class="crypto-header-value crypto-course">
                                    <span>Değer</span>
                                    <p>$9000</p>
                                </div>
                                <div class="crypto-header-value crypto-volume">
                                    <span>Yükseliş</span>
                                    <p>$2299.5‬</p>
                                </div>
                            </div>

                            <div class="crypto-header-footer">
                                <div class="crypto-header-footer-item" data-cryptotab="general">
                                    Genel
                                </div>
                                <div class="crypto-header-footer-item" data-cryptotab="transactions">
                                    İşlemler
                                </div>
                                <div class="crypto-header-footer-item" data-cryptotab="course">
                                    Değer
                                </div>
                            </div>
                        </div>

                        <div class="crypto-action-page">
                            <div class="crypto-action-page-buy-crypto">

                                <div class="crypto-action-page-header">Al Qbit</div>

                                <div class="crypto-action-page-wallet">Cüzdan: 1.000500 Qbit('s)</div>

                                <i class="crypto-action-page-buy-crypto-input-coins-icon fas fa-coins"></i>
                                <input type="number" oninput="this.value = Math.abs(this.value)" class="crypto-action-page-buy-crypto-input-coins" required spellcheck="false" placeholder="1.000000" step="0.000001" min="0">

                                <i class="crypto-action-page-buy-crypto-input-money-icon fas fa-dollar-sign"></i>
                                <!-- <input type="number" oninput="this.value = Math.abs(this.value)" class="crypto-action-page-buy-crypto-input-money" required spellcheck="false" placeholder="1000" step="1.0" min="0"> -->
                                <div class="crypto-action-page-buy-crypto-input-money">0 Dollars</div>

                                <div class="crypto-action-page-buy-crypto-footer">
                                    <div class="crypto-action-page-buy-crypto-footer-button" id="buy-crypto">
                                        <i class="fas fa-check-circle"></i>
                                    </div>
                                    <div class="crypto-action-page-buy-crypto-footer-button" id="cancel-crypto">
                                        <i class="fas fa-times-circle"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="crypto-action-page-sell-crypto">

                                <div class="crypto-action-page-header">Sat Qbit</div>

                                <div class="crypto-action-page-wallet">Cüzdan: 1.000500 Qbit('s)</div>

                                <i class="crypto-action-page-sell-crypto-input-coins-icon fas fa-coins"></i>
                                <input type="number" oninput="this.value = Math.abs(this.value)" class="crypto-action-page-sell-crypto-input-coins" required spellcheck="false" placeholder="1.000000" step="0.000001" min="0">

                                <i class="crypto-action-page-sell-crypto-input-money-icon fas fa-dollar-sign"></i>
                                <!-- <input type="number" onchange="this.value = Math.abs(this.value)" class="crypto-action-page-sell-crypto-input-money" required spellcheck="false" placeholder="1000" step="1.0" min="0"> -->
                                <div class="crypto-action-page-sell-crypto-input-money">0 Dollars</div>

                                <div class="crypto-action-page-buy-crypto-footer">
                                    <div class="crypto-action-page-buy-crypto-footer-button" id="sell-crypto">
                                        <i class="fas fa-check-circle"></i>
                                    </div>
                                    <div class="crypto-action-page-buy-crypto-footer-button" id="cancel-crypto">
                                        <i class="fas fa-times-circle"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="crypto-action-page-transfer-crypto">

                                <div class="crypto-action-page-header">Transfer Qbit</div>

                                <div class="crypto-action-page-wallet">Cüzdan: 0 Qbit('s)</div>

                                <i class="crypto-action-page-transfer-crypto-input-coins-icon fas fa-coins"></i>
                                <input type="number" onchange="this.value = Math.abs(this.value)" class="crypto-action-page-transfer-crypto-input-coins" required spellcheck="false" placeholder="1.000000" step="0.000001" min="0">

                                <i class="crypto-action-page-transfer-crypto-input-money-icon fas fa-address-book"></i>
                                <input type="texts" class="crypto-action-page-transfer-crypto-input-walletid" required spellcheck="false" placeholder="QB-12345678">

                                <div class="crypto-action-page-buy-crypto-footer">
                                    <div class="crypto-action-page-buy-crypto-footer-button" id="transfer-crypto">
                                        <i class="fas fa-check-circle"></i>
                                    </div>
                                    <div class="crypto-action-page-buy-crypto-footer-button" id="cancel-crypto">
                                        <i class="fas fa-times-circle"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="crypto-page">
                            <div class="cryptotab-general">
                                <div class="cryptotab-general-actions">
                                    <div class="cryptotab-general-action" data-action="buy-crypto">
                                        <i class="fas fa-shopping-basket" style="color:green"></i>
                                        <span class="cryptotab-general-action-title">AL</span>
                                        <span class="cryptotab-general-action-description">Kripto para satın al.</span>
                                    </div>
                                    <div class="cryptotab-general-action" data-action="sell-crypto">
                                        <i class="fas fa-hand-holding-usd" style="color:red"></i>
                                        <span class="cryptotab-general-action-title">SAT</span>
                                        <span class="cryptotab-general-action-description">Kripto para sat.</span>
                                    </div>
                                    <div class="cryptotab-general-action" data-action="transfer-crypto">
                                        <i class="fas fa-share" style="color:orange"></i>
                                        <span class="cryptotab-general-action-title">TRANSFER</span>
                                        <span class="cryptotab-general-action-description">Kripto parayı transfer et.</span>
                                    </div>
                                </div>
                                <span class="crypto-walletid">Cüzdan ID: QB-12345678</span>
                            </div>

                            <div class="cryptotab-transactions">
                                <div class="cryptotab-transactions-list">
                                </div>
                            </div>

                            <div class="cryptotab-course">
                                <div class="cryptotab-course-list">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="meos-app">
                        <input type="text" id="testerino">
                        <div class="meos-app-header">
                            <span id="meos-app-title">MDT</span>
                            <span id="meos-app-name">Hoşgeldiniz Jay Nandes</span>
                        </div>

                        <div class="meos-homescreen">
                            <div class="meos-blocks">
                                <div class="meos-block" data-meosblock="person">
                                    <i class="fas fa-user"></i>
                                    <p>Vatandaşlar</p>
                                </div>
                                <div class="meos-block" data-meosblock="vehicle">
                                    <i class="fas fa-car"></i>
                                    <p>Arabalar</p>
                                </div>
                                <div class="meos-block" data-meosblock="houses">
                                    <i class="fas fa-house-user"></i>
                                    <p>Ev</p>
                                </div>
                                <div class="meos-block" data-meosblock="alerts">
                                    <i class="fas fa-bell"></i>
                                    <p>Alarmlar</p>
                                </div>
                            </div>

                            <span class="meos-recent-header">En son uyarı</span>
                            <div class="meos-recent-alerts">
                                <div class="meos-recent-alert"> <span class="meos-recent-alert-title">Hiçbir uyarınız yok!</span></div>
                            </div>
                        </div>

                        <div class="meos-tabs">
                            <div class="meos-person-page">
                                <input class="person-search-input" type="text" spellcheck="false" required>
                                <div class="confirm-search-person-test" id="search-pers">
                                    <i class="fas fa-search"></i>
                                </div>

                                <div class="person-search-results">
                                </div>
                            </div>

                            <div class="meos-houses-page">
                                <input class="person-search-input-house" type="text" spellcheck="false" required>
                                <div class="confirm-search-person-house">
                                    <i class="fas fa-search"></i>
                                </div>

                                <div class="person-search-results">

                                </div>
                            </div>

                            <div class="meos-vehicle-page">
                                <input class="vehicle-search-input" type="text" spellcheck="false" required>
                                <div class="confirm-search-vehicle">
                                    <i class="fas fa-search"></i>
                                </div>
                                <div class="scan-search-vehicle">
                                    <i class="fas fa-barcode"></i>
                                </div>

                                <div class="vehicle-search-results">
                                    <!-- <div class="vehicle-search-result"> <div class="vehicle-search-result-name">T20</div> <div class="vehicle-search-result-plate">Kenteken: NL123456</div> <div class="vehicle-opensplit"></div> &nbsp; <div class="vehicle-search-result-owner">Eigenaar: Jay Nandes</div> &nbsp; <div class="vehicle-search-result-apk">APK: Ja</div> <div class="vehicle-search-result-warrant">Gesignaleerd: Ja</div> </div> -->
                                </div>
                            </div>

                            <div class="meos-alerts-page">
                                <div class="meos-clear-alerts">TEMİZLE</div>
                                <div class="meos-alerts">
                                </div>
                            </div>

                            <div class="meos-tabs-footer">
                                <i class="fas fa-undo-alt" id="back-meos"></i>
                            </div>
                        </div>
                    </div>

                    <div class="reklam-app">
                        <div class="reklam-home">
                            <div class="reklam-header">
                                <span id="reklam-header-text">REKLAMLAR</span>
                                <span id="reklam-header-name"></span>
                            </div>
                            <!-- Arama kutucuğu -->
                            <div class="reklam-search">
                                <input type="text" id="reklam-search-input" placeholder="Reklamları Ara..."/>
                            </div>
                            <div class="reklam-list">
                                <!-- Burada paylaşılan reklamlar listelenecek -->
                            </div>
                            <div class="test-slet">
                                <i class="fas fa-plus test-icon"></i>
                            </div>
                        </div>
                    
                        <div class="new-reklam">
                            <div class="new-reklam-header">
                                <span id="new-reklam-header-text">Yeni Reklam</span>
                            </div>
                            <textarea class="new-reklam-textarea" placeholder="Reklam yazın" spellcheck="false" required></textarea>
                            <span>
                                <textarea id="reklam-new-url" style="text-align:left; padding-left:15px;" placeholder="Fotoğraf Ekleyin" cols="30" rows="10" spellcheck="false"></textarea>
                            </span>
                            <div class="new-reklam-category">
                                <label for="reklam-category">Etiket Seçin:</label>
                                <select id="reklam-category" class="reklam-category-select">
                                    <option value="other">Other</option>
                                    <option value="police">Police</option>
                                    <option value="taxi">Taxi</option>
                                    <option value="gunshop">Gunshop</option>
                                    <option value="mechanic">Mechanic</option>
                                </select>
                            </div>
                            <div class="new-reklam-footer">
                                <div class="new-reklam-footer-item" id="new-reklam-submit">
                                    <i class="fas fa-paper-plane new-reklam-icon"></i> <!-- Yenisini kullanın -->
                                </div>
                                <div class="new-reklam-footer-item" id="new-reklam-photo">
                                    <i class="fas fa-image new-reklam-icon"></i> <!-- Yeni simge -->
                                </div>
                                <div class="new-reklam-footer-item" id="new-reklam-back">
                                    <i class="fas fa-chevron-left new-reklam-icon"></i> <!-- Yeni simge -->
                                </div>
                            </div>                            
                        </div>
                    </div>
                    

                    <div class="weather-app">
                        <div class="cloud"></div>
                        <div class="weather-app-header">
                            <span id="weather-city2">Config.Cityname</span>
                            <span id="weather-temp2">16°C</span>
                            <span id="weather-desc2">Normal</span>
                        </div>
                        <div class="weather-app-forecast">
                            <div class="forecast-day" id="day1"></div>
                            <div class="forecast-day" id="day2"></div>
                            <div class="forecast-day" id="day3"></div>
                            <div class="forecast-day" id="day4"></div>
                            <div class="forecast-day" id="day5"></div>
                            <div class="forecast-day" id="day6"></div>
                            <div class="forecast-day" id="day7"></div>
                        </div>
                    </div>
                    <div class="calendar-app">
                        <div class="calendar-app-header">
                            <span class="calendar-title">July 2024</span>
                        </div>
                        <div class="calendar-navigation">
                            <button class="nav-button prev">&lt; Geri</button>
                            <button class="nav-button next">İleri &gt;</button>
                        </div>
                        <div class="calendar-month">
                            <div class="calendar-weekdays">
                                <div class="weekday">Sun</div>
                                <div class="weekday">Mon</div>
                                <div class="weekday">Tue</div>
                                <div class="weekday">Wed</div>
                                <div class="weekday">Thu</div>
                                <div class="weekday">Fri</div>
                                <div class="weekday">Sat</div>
                            </div>
                            <div class="calendar-days"></div>
                        </div>
                    </div>                    

                    
                    <div class="mail-app">
                        <div class="mail-home">
                            <div class="mail-header">
                                <span id="mail-header-text">Gelen Kutusu</span>
                                <span id="mail-header-mail">jay.nandes@gmail.com</span>
                                <span id="mail-header-lastsync">Son Senkronizasyon 18:31</span>
                            </div>

                            <div class="mail-list">
                            </div>
                        </div>

                        <div class="opened-mail">
                            <div class="opened-mail-header">
                                <div class="mail-back"><i class="fas fa-chevron-left" id="mail-back"></i></div>
                                <div class="mail-subject"><p>Konu</p></div>
                                <div class="mail-date"><p>19 February 2019 &nbsp; 08:19</p></div>
                                <div class="mail-spacing"></div>
                                <div class="mail-content"><p>
                                    This is a test mail and will not be fully shown because thats what I'm testing.
                                </p></div>
                            </div>
                            <div class="opened-mail-footer">
                                <div class="opened-mail-footer-item">
                                    <i class="fas fa-check-circle" id="accept-mail"></i>
                                </div>
                                <div class="opened-mail-footer-item">
                                    <i class="fas fa-trash-alt" id="remove-mail"></i>
                                </div>
                            </div>
                        </div>
                    </div>
        <!-- ping -->

        <div class="ping-app">
        <div class="ping-header">
        <div class="channel">
        <input id="channel" type="number" min="1" name="channel" placeholder="Player ID">
        <div style="display: block;" id="ping-send" class="ping-sender-piinger"><i class="fas fa-map-pin"></i> Request Location</div>
        <div style="display: none;" id="ping-accept" class="ping-sender-piinger"><i class="far fa-check-circle"></i></div>
        <div style="display: none;" id="ping-reject" class="ping-sender-piinger"><i class="far fa-times-circle"></i></div>
        </div>
        </div>

        <div class="ping-list">
        <img class="imagepingapp" src="img/lsgoogle.png">
        </div>
        </div>

        <!-- ping -->
        <!-- calculator -->
        <div class="calculator-app">
            <div class="calculator-cover">
                <!-- Calculator display -->
                <form class="calculator-input" name="form" action="">
                    <input class="calculator-text" name="text" type="text" onkeypress="CalculatorCorrect(event)" value="0" readonly/>
                </form>
        
                <!-- Calculator buttons -->
                <div class="calculator-buttons">
                    <div class="calculator-button calculator-operator-others" onclick="CalculatorClearAll()"><span>AC</span></div>
                    <div class="calculator-button calculator-operator-others" onclick="CalculatorAddKey('±')"><span>±</span></div>
                    <div class="calculator-button calculator-operator-others" onclick="CalculatorAddKey('%')"><span>%</span></div>
                    <div class="calculator-button calculator-operator" onclick="CalculatorAddKey('/')"><span>÷</span></div>
        
                    <div class="calculator-button" onclick="CalculatorAddKey('7')"><span>7</span></div>
                    <div class="calculator-button" onclick="CalculatorAddKey('8')"><span>8</span></div>
                    <div class="calculator-button" onclick="CalculatorAddKey('9')"><span>9</span></div>
                    <div class="calculator-button calculator-operator" onclick="CalculatorAddKey('*')"><span>X</span></div>
                    
                    <div class="calculator-button" onclick="CalculatorAddKey('4')"><span>4</span></div>
                    <div class="calculator-button" onclick="CalculatorAddKey('5')"><span>5</span></div>
                    <div class="calculator-button" onclick="CalculatorAddKey('6')"><span>6</span></div>
                    <div class="calculator-button calculator-operator" onclick="CalculatorAddKey('-')"><span>-</span></div>
                    
                    <div class="calculator-button" onclick="CalculatorAddKey('1')"><span>1</span></div>
                    <div class="calculator-button" onclick="CalculatorAddKey('2')"><span>2</span></div>
                    <div class="calculator-button" onclick="CalculatorAddKey('3')"><span>3</span></div>
                    <div class="calculator-button calculator-operator" onclick="CalculatorAddKey('+')"><span>+</span></div>
        
                    <div class="calculator-button calculator-double-button" onclick="CalculatorAddKey('0')"><span>0</span></div>
                    <div class="calculator-button" onclick="CalculatorAddKey('.')"><span>.</span></div>
                    <div class="calculator-button calculator-operator" onclick="CalculatorCalculate()"><span>=</span></div>
                </div>
            </div>
        </div>        <!-- calculator -->
        <!-- paytm -->
        <!-- <div class="paytm-app">
            <div class="phone-new-box-body" id="paytm-box-new-for-give">
                <div class="phone-new-box-main">
                    <input class="phone-new-input-class paytm-input-one" type="number" min="1" placeholder="Player ID">
                    <input class="phone-new-input-class paytm-input-two" type="number" min="1" placeholder="Amount">
                    <input class="phone-new-input-class paytm-input-three" type="text" maxlength="50" placeholder="Reason">
                    <p> </p>
                    <div class="phone-new-box-btn box-new-red" id="box-new-cancel">Cancel</div>
                    <div class="phone-new-box-btn box-new-green" id="paytm-send-money-ended" data-toggle="tooltip" title="Send Money">Submit</div>
                </div>
            </div>
            <div class="paytm-header">
                <div class="paytm-send-money-btn" data-toggle="tooltip" title="Send Money"><i class="fas fa-hand-holding-usd"></i></div>
            </div>
            <div class="paytm-list">
            </div>
        </div> -->
<!-- paytm -->

                    <div class="store-app">
                        <div class="store-header">
                            <p>App Store</p>
                        </div>
                        <div class="store-apps">
                            <div class="storeapp" data-app="territory">
                                <div class="storeapp-icons">
                                    <i class="fas fa-globe-europe"></i>
                                </div>
                                <div class="storeapp-images">
                                    <!-- Buraya uygulama görselleri eklenebilir -->
                                </div>
                                <div class="storeapp-title">
                                    Territory
                                </div>
                                <div class="storeapp-creator">
                                    Qbus
                                </div>
                                <div class="storeapp-download">
                                    <i class="fas fa-download"></i>
                                </div>
                            </div>
                        </div>
                        <div class="download-password-container">
                            <div class="download-password">
                                <span id="download-password-title">Güvenlik</span>
                                <span id="download-password-disclaimer">Bu uygulamayı indirmek için bir şifre girmelisin.</span>
                                <input type="text" class="download-password-input" spellcheck="false" required>

                                <div class="download-password-buttons">
                                    <div class="download-password-accept"><i class="fas fa-check"></i></div>
                                    <div class="download-password-deny"><i class="fas fa-times"></i></div>
                                </div>

                                <div class="download-progressbar">
                                    <div class="download-progressbar-fill"></div>
                                </div>
                            </div>
                        </div>
                    </div>
            
                    <div class="tweit-app">
                        <!-- Giriş Yapma ve Kayıt Olma Sekmesi -->
                        <div class="auth-section">
                            <div class="hosgeldin-form">
                                <div class="tweitterisim">Tweitter</div>
                                <div class="forumisim">Şu anda dünyada olup bitenleri gör</div>
                                <button id="basla-button">Devam et</button>
                            </div>
                        </div>
                        
                        <!-- Tweit Home -->
                        <div class="tweit-home">
                            <div class="tweit-header">
                                <span id="tweit-header-text">Tweitter</span>
                                <span id="tweit-header-name"></span>
                            </div>
                            <!-- Arama kutucuğu -->
                            <div class="tweit-search">
                                <input type="text" id="tweit-search-input" placeholder="tweitlerrı Ara..."/>
                            </div>
                            <div class="tweit-list">
                                <!-- Burada paylaşılan tweitlerr listelenecek -->
                            </div>
                            <div class="test-slet2">
                                <i class="fas fa-plus test-icon"></i>
                            </div>
                        </div>
                    
                        <!-- Kullanıcı Profili -->
                    <!--    <div class="user-profile">
                            <div class="profile-banner">
                                <img id="profile-banner-image" src="banner_default.jpg" alt="Profil Banner">
                            </div>
                            <div class="profile-info">
                                <img id="profile-photo" src="profile_default.jpg" alt="Profil Fotoğrafı">
                                <h3 id="profile-username">Kullanıcı Adı</h3>
                                <h4 id="profile-accountname">@Hesap Adı</h4>
                                <button id="follow-button">Takip Et</button>
                            </div>
                            <div class="profile-tweets">
                                 Burada kullanıcının paylaştığı tweitler listelenecek 
                            </div>
                        </div>-->
                    
                        <!-- Yeni Tweit -->
                        <div class="new-tweit">
                            <div class="new-tweit-header">
                                <span id="new-tweit-header-text">Yeni tweit</span>
                            </div>
                            <textarea class="new-tweit-textarea" placeholder="tweit yazın" spellcheck="false" required></textarea>
                            <span>
                                <textarea id="tweit-new-url" style="text-align:left; padding-left:15px;" placeholder="Fotoğraf Ekleyin" cols="30" rows="10" spellcheck="false"></textarea>
                            </span>
                            <div class="new-tweit-footer">
                                <div class="new-tweit-footer-item" id="new-tweit-submit">
                                    <i class="fas fa-paper-plane new-tweit-icon"></i> <!-- Yenisini kullanın -->
                                </div>
                                <div class="new-tweit-footer-item" id="new-tweit-photo">
                                    <i class="fas fa-image new-tweit-icon"></i> <!-- Yeni simge -->
                                </div>
                                <div class="new-tweit-footer-item" id="new-tweit-back">
                                    <i class="fas fa-chevron-left new-tweit-icon"></i> <!-- Yeni simge -->
                                </div>
                            </div>
                        </div>
                    
                        <!-- Profiller Sekmesi 
                        <div class="profiles-section">
                            <h2>Profiller</h2>
                            <div class="profiles-list">
                                 Burada tüm kullanıcıların profilleri listelenecek 
                            </div>
                        </div>--> 
                    </div>                   
                    


                    <div class="bank-app">
                        <div class="bank-app-loading">
                            <img src="../html/img/apps/native-BANK.png" class="qbank-logo">
                            <span id="qbank-text">Banka</span>
                        </div>
                        <div class="bank-app-loaded">
                            <div class="bank-app-header">
                                <div class="banka-isim">native-Bank</div>
                                <div data-headertype="accounts" class="bank-app-header-button bank-app-header-button-selected"> <i class="fas fa-align-left"></i> <p>Hesap</p> </div>
                               <!-- <div data-headertype="invoices" class="bank-app-header-button"> <i class="fas fa-file-invoice"></i> <p>Faturalar</p> </div> -->
                            </div>

                            <div class="bank-app-accounts">
                                <div class="bank-app-account">
                                    <img src="../html/img/apps/troykart.png" class="troy-logo">
                                    <div class="bank-app-account-title">Hesap</div>
                                    <!-- <div class="bank-app-account-number" id="iban-account">NL01QBBA012341234123</div> -->
                                    <input type="text" class="bank-app-account-number" id="iban-account" readonly spellcheck="false">
                                    <div class="bank-app-account-balance">&#36; 5000,00</div>
                                </div>

                                <div class="bank-app-account-actions">
                                    <i id="transfer-money" class="fas fa-exchange-alt bank-app-account-action-transfer"></i>
                                    <h3>Para Transferi</h3>
                                </div>
                            </div>

                            <div class="bank-app-transfer">
                                <div class="bank-app-transfer-header">Para Transferi</div>

                                <i class="bank-transfer-iban-icon">ID</i>
                                <input type="text" id="bank-transfer-iban" class="bank-transfer-input" required spellcheck="false">
                                <i class="bank-transfer-mycontacts-icon fas fa-address-book"></i>

                                <i class="bank-transfer-amount-icon fas fa-dollar-sign"></i>
                                <input type="number" min="0" oninput="this.value = Math.abs(this.value)" id="bank-transfer-amount" class="bank-transfer-input" required spellcheck="false">

                                <div class="bank-app-transfer-buttons">
                                    <div class="bank-app-transfer-button" id="accept-transfer">Transfer Et</div>
                                    <div class="bank-app-transfer-button" id="cancel-transfer">İptal Et</div>
                                </div>
                            </div>

                            <div class="bank-app-invoices">
                                <div class="bank-app-invoices-list">
                                    <!-- <div class="bank-app-invoice"> <div class="bank-app-invoice-title">Betaalverzoek <span style="font-size: 1vh; color: gray;">(Afzender: 0612345678)</span></div> <div class="bank-app-invoice-amount">&#36; 5000,-</div> <div class="bank-app-invoice-buttons"> <i class="fas fa-check-circle pay-invoice"></i> <i class="fas fa-times-circle decline-invoice"></i> </div> </div> -->
                                </div>
                            </div>
                        </div>

                        <div class="bank-app-my-contacts">
                            <div class="bank-app-my-contacts-header">Rehber</div>
                            <div class="bank-app-my-contacts-list-header">
                                <input type="text" id="bank-app-my-contact-search" placeholder="Kişi ismi" spellcheck="false">
                            </div>
                            <div class="bank-app-my-contacts-list">
                                <!-- <div class="bank-app-my-contact"> <div class="bank-app-my-contact-firstletter">P</div> <div class="bank-app-my-contact-name">Pieter Post</div> </div> -->
                            </div>
                            <div class="bank-app-my-contacts-list-back">Geri Dön</div>
                        </div>
                    </div>


                    <div class="bazugram-app">
                        <!-- Header -->
                        <div class="bazugram-header">
                            <div class="logo">Bazugram</div>
                            <div class="header-icons">
                                <i class="fas fa-home" id="home-icon"></i>
                                <i class="fas fa-search" id="search-icon"></i>
                                <i class="fas fa-heart" id="notification-icon"></i>
                                <i class="fas fa-user" id="profile-icon"></i>
                            </div>
                        </div>
                    
                        <!-- Ana Sayfa (Feed) -->
                        <div class="bazugram-feed">
                            <div class="stories">
                                <!-- Hikaye Kartları -->
                                <div class="story-card">
                                    <div class="story-picture">
                                        <img src="./img/bazugram3.png" alt="Story Picture" style="width: 100%; height: auto;">
                                      </div>                                      
                                    <p>Hikayeler</p>
                                </div>
                                <!-- Diğer hikaye kartları eklenebilir -->
                            </div>
                    
                            <div class="posts">
                                <!-- Post Kartı -->
                                <div class="post-card">
                                    <div class="post-header">
                                        <div class="post-profile-picture">
                                            <img src="./img/bazugram3.png" alt="">
                                        </div>
                                        <div class="post-username">BazuFix</div>
                                    </div>
                                    <div class="post-image">
                                        <img src="./img/bazugram.png" alt="Post Resmi">
                                                                        
                                        <!-- Post resimi buraya gelecek -->
                                    </div>
                                    <div class="post-footer">
                                        <i class="fas fa-heart" id="like-post"></i>
                                        <i class="fas fa-comment" id="comment-post"></i>
                                        <i class="fas fa-paper-plane" id="share-post"></i>
                                    </div>
                                    <div class="post-likes">100 beğenme</div>
                                    <div class="post-caption">Teşekkürler...</div>
                                </div>
                                <!-- Diğer post kartları eklenebilir -->
                            </div>
                        </div>
                    
                        <!-- Profil Sayfası -->
                        <div class="bazugram-profile">
                            <div class="profile-header">
                                <div class="profile-picture">
                                    <img src="profil-resmi.jpg" alt="Profil Resmi">
                                </div>
                                <div class="profile-info">
                                    <p class="username">native-phone</p>
                                    <p class="bio">Bazugram tam sürümde native-phone'da...</p>
                                </div>
                                <button id="edit-profile-button">Profili Düzenle</button>
                            </div>
                            <div class="profile-posts">
                                <!-- Kullanıcının postları buraya gelecek -->
                            </div>
                        </div>
                    
                        <!-- DM (Mesajlar) -->
                        <div class="bazugram-dm">
                            <div class="dm-header">
                                <p>Mesajlar</p>
                                <i id="dm-new-message" class="fas fa-edit"></i>
                            </div>
                            <div class="dm-conversations">
                                <!-- Mesajlaşmalar listesi -->
                                <div class="conversation">
                                    <div class="conversation-profile-picture"></div>
                                    <div class="conversation-details">
                                        <p class="conversation-name">Kullanıcı Adı</p>
                                        <p class="conversation-last-message">Son mesaj...</p>
                                    </div>
                                </div>
                                <!-- Diğer mesajlaşmalar eklenebilir -->
                            </div>
                            <div class="dm-opened-conversation">
                                <!-- Seçilen mesajlaşma -->
                                <div class="dm-messages">
                                    <!-- Mesajlar buraya gelecek -->
                                </div>
                                <div class="dm-input">
                                    <input type="text" placeholder="Mesaj yaz...">
                                    <i class="fas fa-paper-plane" id="send-message"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    

                    <div class="mesajlar-app">
                        <div class="mesajlar-header">
                            <div class="mesajlar-header-top"></div>
                            <div class="mesajlar-header-footer">
                                <p>Mesajlar</p>
                                <i id="mesajlar-search-chats" class="fas fa-search"></i>
                                <input type="text" id="mesajlar-search-input" placeholder="Contactname" spellcheck="false">
                            </div>
                        </div>
                        <div class="mesajlar-chats">
                        </div>
                        <div class="mesajlar-openedchat">
                            <div class="mesajlar-header-openedchat">
                                <div class="mesajlar-header-top-openedchat"></div>
                                <div class="mesajlar-header-footer-openedchat">
                                    <div class="mesajlar-openedchat-picture"></div>
                                    <div class="mesajlar-openedchat-name"><p></p></div>
                                    <i id="mesajlar-openedchat-back" class="fas fa-arrow-left"></i>
                                </div>
                            </div>
                            <div class="mesajlar-openedchat-messages">
                            </div>
                            <div class="mesajlar-openedchat-input">
                                <div class="mesajlar-extra-buttons">
                                    <div class="mesajlar-extra-button" id="send-location"><i class="fas fa-map-marker-alt"></i></div>
                                    <div class="mesajlar-extra-button" id="send-image"><i class="fas fa-camera"></i></div>
                                    <!-- <div class="mesajlar-extra-button" id="send-money"><i class="fas fa-money-bill"></i></div> -->
                                </div>
                                <input type="text" id="mesajlar-openedchat-message" placeholder="Message" spellcheck="false">
                                <i class="fas fa-paper-plane" id="mesajlar-openedchat-send"></i>
                                <i class="fas fa-ellipsis-v" id="mesajlar-openedchat-message-extras"></i>
                            </div>
                        </div>
                    </div>
         
                <div class="phone-currentcall-container">
                    <div class="phone-currentcall-icon"><i class="fas fa-phone"></i></div>
                    <div class="phone-currentcall-title">Giden Arama</div>
                    <div class="phone-currentcall-contact">with 0612345678</div>
                </div>

                <!-- Phone Home Button -->
                <div class="phone-footer">
                    <div class="phone-home-container">
                        <div class="phone-home-button"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="screen-notifications-container">
            <div class="screen-notification-icon"><i class="fab fa-tweeter"></i></div>
            <div class="screen-notification-title"><p>Yeni tweeter!</p></div>
            <div class="screen-notification-content"><p>This is a test notification </p></div>
        </div>

        <div class="call-notifications">
            <div class="call-notifications-icon"><i class="fas fa-phone"></i></div>
            <div class="call-notifications-title"><p>Gelen Arama</p></div>
            <div class="call-notifications-content"><p>You have an incoming call from Test</p></div>
        </div>

        <!-- JavaScript File's -->
        <script src="./js/config.js"></script>
        <script src="./js/app.js"></script>
        <script src="./js/settings.js"></script>
        <script src="./js/phone.js"></script>
        <script src="./js/twitter.js"></script>
        <script src="./js/bank.js"></script>
        <script src="./js/mesajlar.js"></script>
        <script src="./js/vale.js"></script>
        <script src="./js/mail.js"></script>
        <script src="./js/meos.js"></script>
        <script src="./js/crypto.js"></script>
        <script src="./js/racing.js"></script>
        <script src="./js/houses.js"></script>
        <script src="./js/lawyers.js"></script>
        <script src="./js/qstore.js"></script>
        <script src="./js/trucker.js"></script>
        <script src="./js/gallery.js"></script>
        <script src="./js/camera.js"></script>
        <script src="./js/ping.js"></script>
        <script src="./js/calculator.js"></script>
        <script src="./js/widget.js" ></script>
        <script src="./js/weather.js"></script>
        <script src="./js/calendar.js"></script>
        <script src="./js/numara.js"></script>
        <script src="./js/reklam.js"></script>
        <script src="./js/digerleri.js"></script>
        <script src="./js/bazugram.js"></script>
        <script src="./js/darkchat.js"></script>
        <!-- <script src="./js/wenmo.js"></script> -->
        <script type="text/javascript">$('#mesajlar-openedchat-message').emojioneArea({inline: true, searchPosition: "bottom", shortnames: true})</script>
        <!-- <script type="text/javascript">$('#tweet-new-message').emojioneArea({pickerPostion: 'bottom' ,inline: true, shortnames: true})</script> -->
    </body>
</html>
