<html>
<head>
    <!-- Metadane -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="theme-color" content="#F5F6FB">

    <!-- Nazwa strony -->
    <title>mObywatel 2.0</title>

    <!-- Ikona strony -->
    <link rel="shortcut icon" href="../images/coi_common_ui_ic_mobywatel_logo.svg" type="image/x-icon">

    <!-- Wyświetlanie strony w IOS -->
    <meta name="next-head-count" content="5">
    <!-- idk ale wypierdala blad jak tego nie ma -->
    <meta name="mobile-web-app-capable" content="yes"> 
    <!-- Wyświetlanie strony w IOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <!-- Manifest i Service Worker -->
    <link rel="manifest" href="../manifest.json">
    <script src="../js/sw.js"></script>

    <!-- PLIKI CSS -->
    <link rel="stylesheet" href="../css/dowod.css">
    <link rel="stylesheet" href="../css/dowod2.css">
    <link rel="stylesheet" href="../css/main.css" as="style">
    <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>

    <!-- PLIK JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="./dowod_files/fetchdane.js" defer></script>
    <noscript data-n-css=""></noscript>
    
    <script>
        window.addEventListener("load", function() {
    if ("standalone" in window.navigator && window.navigator.standalone) {
        var a = document.getElementsByTagName("a");
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener("click", function(event) {
                var newLocation = this.href;
                event.preventDefault();
                window.location = newLocation;
            }, false);
        }
    }

    setTimeout(function() {
        window.scrollTo(0, 1);
    }, 0);
    });
    </script>
</head>

<!-- i luv patryk -->

<body>   
    <header>
        <a href="home.html">
            <img src="../images/pozdro.svg" alt="leftarrow">
        </a>
        <span style="font-family: 'Inter'; font-weight: 900; position: relative; left: -6%;">mDowód</span>
        <img style="width: 25px; height: 25px;" src="../images/madziamojakotka123.svg" alt="">
    </header>

    <p class="czas">Czas</p>

    <script src="../js/timenew.js"></script>

    <main>
        <section id="lew">
            <img src="./data/zdjecietwarzy.jpg" class="object-contain w-full rounded-lg photo" style="margin: 0;">  
            <img class="photo-border" src="../imagesdowod/border.png" alt="">
            <div id="gradient"></div>
            <img src="../imagesdowod/polish_flag.gif" alt="flaga" id="flaga" style="margin: 0; margin-top: 13px;">
            <div id="rzecz" style="margin: 0; margin-top: 10px;">
                <script src="../js/godlo.js" defer></script>
                <img src="../imagesdowod/godlo.gif" alt="godlo" id="godlo">
                <p style="margin-left: 7px;">Rzeczpospolita<br>Polska</p>
            </div>
        </section>
        <section id="praw">
            <div class="daneosobowe">
                <span data-query="imie_gen" class="title"></span>
                <span class="description">Imię (imiona)</span>
            </div>
            <div class="daneosobowe">
                <span data-query="nazwisko_gen" class="title"></span>
                <span class="description">Nazwisko</span>
            </div>
            <div class="daneosobowe">
                <span data-query="obywatelstwo_gen" class="title"></span>
                <span class="description">Obywatelstwo</span>
            </div>
            <div class="daneosobowe">
                <span data-query="data_urodzenia_gen" class="title"></span>
                <span class="description">Data urodzenia</span>
            </div>
            <div class="daneosobowe">
                <span data-query="pesel_gen" class="title"></span>
                <span class="description">Numer PESEL</span>
            </div>
        </section>
    </main>

    <section id="bottom">
        <img src="../imagesdowod/checkmark.svg" alt="checkmark">
        <p>Dokument ważny</p>
    </section>

    <a class="buto" style="cursor: pointer; display: flex; align-items: center; padding: 40px 20px ; border-radius: 10px; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
        <img style="width: 25px;" src="../imagesdowod/checkbo.png" alt="checkbox">
        <p style="margin-left: 10px; font-weight: bold;">Potwierdź swoje dane</p>
        <img style="width: 25px;" src="../imagesdowod/arrow.svg" alt="arrow" id="arrow">
    </a>

    <script src="../js/wybor.js" defer></script>
    
    <div class="buto" onclick="wybordokumentumenu()" style="cursor: pointer; display: flex; align-items: center; padding: 40px 20px ; border-radius: 10px; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);"> 
        <img style="width: 25px;" src="../imagesdowod/card.png" alt="card">
        <p style="margin-left: 10px; font-weight: bold;">Dane dokumentu</p>
        <img style="width: 25px;" src="../imagesdowod/arrow.svg" alt="arrow" id="arrow">
    </div>

    <section class="collapsible buto" id="lo" style="cursor: pointer; display: flex; align-items: center; padding: 40px 20px ; border-radius: 10px; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
        
        <p style="margin-left: 10px; font-weight: bold;">Twoje dodatkowe dane</p>

        <img style="width: 25px;" src="../imagesdowod/arrow.svg" alt="arrow" id="rotation" id="arrow">
    </section>
    
    <div id="rogo">
        <div class="content">
            <p class="krecha"></p>
            <section class="dana">
                <p class="info">Nazwisko rodowe</p>
                <p data-query="nazwisko_rodowe_gen" class="main">test</p>
            </section>
            <p class="krecha"></p>
            <section class="dana">
                <p class="info">Płeć</p>
                <p data-query="plec_gen" class="main"></p>
            </section>
            <p class="krecha"></p>
            <section class="dana">
                <p class="info">Nazwisko rodowe ojca</p>
                <p data-query="nazwisko_rodowe_ojca_gen" class="main"></p>
            </section>
            <p class="krecha"></p>
            <section class="dana">
                <p class="info">Nazwisko rodowe matki</p>
                <p data-query="nazwisko_rodowe_matki_gen" class="main"></p>
            </section>
            <p class="krecha"></p>
            <section class="dana">
                <p class="info">Miejsce urodzenia</p>
                <p data-query="miejsce_urodzenia_gen" class="main"></p>
            </section>
            <p class="krecha"></p>
            <p class="krecha"></p>
            <section class="dana">
                <p class="info">Adres zameldowania na pobyt stały</p>
                <p data-query="adres_zameldowania_na_pobyt_staly_ulica_gen" class="main"></p>
                <p data-query="adres_zameldowania_na_pobyt_staly_kod_pocztowy_i_miasto_gen" class="main"></p>
            </section>
            <p class="krecha"></p>
            <section class="dana">
                <p class="info">Data zameldowania na pobyt stały</p>
                <p data-query="data_zameldowania_na_pobyt_staly_gen" class="main"></p>
            </section>
        </div>
    </div>

    <a class="buto" style="cursor: pointer; display: flex; align-items: center; padding: 40px 20px ; border-radius: 10px; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
        <div>
            <p class="info">Ostatnia aktualizacja</p>
            <p data-query="ostatnia_aktualizacja_gen" class="main">ostatnia_aktualizacja_gen</p>
        </div>
        <button id="aktualizuj">Aktualizuj</button> 
    </a>

    <section id="menu">
        <section id="wybordokumentu">
            <div id="szaro"></div>
            <section id="wybierzdokument">
                <section id="wyborbottom"></section>
                <!-- <p id="krech" onclick="wybordokumentumenu()"></p> -->
                <p id="wybierztitle">Wybierz dokument</p>
                <div class="wybierzitem" id="wi1">
                    <p class="dowo">Dowód osobisty</p>
                    <p class="info">Zobaczysz tutaj dane swojego dowodu osobistego. Ale jeśli chcesz potwierdzić tożsamość, potrzebujesz fizycznego dokumentu.</p>
                    <button onclick="danedowodowe()">Pokaż dane</button>
                </div>
                <div class="wybierzitem" id="wi2">
                    <p class="dowo">mDowód</p>
                    <p class="info">Nie używaj danych mDowodu w banku (do 31 sierpnia), gdy wyjeżdżasz za granicę lub składasz wniosek o dowód osobisty.</p>
                    <button onclick="danemdowodowe()">Pokaż dane</button>
                </div>
                <button class="zamknijprzycisk" onclick="wybordokumentumenu()">Zamknij</button>
            </section>
        </section>
        <script src="../js/wybor.js"></script>
        <section id="danedowodu" style="display: none;">
            <div id="szaro"></div>
            <section id="danedowodowe">
                <section>
                    <p id="danetitle">Dane dowodu osobistego</p>
                    <section id="danebox">
                        <section class="dana">
                            <p class="info">Seria i numer</p>
                            <p data-query="seria_i_numer_gen1" class="main seria">seria_i_numer_gen <button id="kopiuj">Kopiuj</button></p>
                        </section>
                        <p class="krecha2"></p>
                        <section class="dana">
                            <p class="info">Organ wydający</p>
                            <p data-query="organ_wydajacy_gen" class="main">organ_wydajacy_gen</p>
                        </section>
                        <p class="krecha2"></p>
                        <section class="dana">
                            <p class="info">Termin ważności</p>
                            <p data-query="termin_waznosci_gen" class="main">termin_waznosci_gen</p>
                        </section>
                        <p class="krecha2"></p>
                        <section class="dana">
                            <p class="info">Data wydania</p>
                            <p data-query="data_wydania_gen" class="main">data_wydania_gen</p>
                        </section>
                    </section>
                </section>
                <section id="bottooom">
                    <button class="zamknijprzycisk" onclick="zamknij2()">Zamknij</button>
                    <button class="wrocprzycisk" onclick="wroc()">Wróć</button>
                </section>
            </section>
        </section>
        <section id="danemdowodu" style="display: none;">
            <div id="szaro"></div>
            <section id="danedowodowe">
                <section>
                    <p id="danetitle">Dane mDowodu</p>
                    <section id="danebox">
                        <section class="dana">
                            <p class="info">Seria i numer</p>
                            <p data-query="seria_i_numer_gen2" class="main seria">seria_i_numer_gen <button id="kopiuj">Kopiuj</button></p>
                        </section>
                        <p class="krecha2"></p>
                        <section class="dana">
                            <p class="info">Termin ważności</p>
                            <p data-query="termin_waznosci_gen" class="main">termin_waznosci_gen</p>
                        </section>
                        <p class="krecha2"></p>
                        <section class="dana">
                            <p class="info">Data wydania</p>
                            <p data-query="data_wydania_gen" class="main">data_wydania_gen</p>
                        </section>
                        <p class="krecha2"></p>
                        <section class="dana">
                            <p class="info">Imię ojca</p>
                            <p data-query="imie_ojca_gen" class="main">imie_ojca_gen</p>
                        </section>
                        <p class="krecha2"></p>
                        <section class="dana">
                            <p class="info">Imię matki</p>
                            <p data-query="imie_matki_gen" class="main">imie_matki_gen</p>
                        </section>
                    </section>
                </section>
                <section id="bottooom">
                    <button class="zamknijprzycisk" onclick="zamknij2()">Zamknij</button>
                    <button class="wrocprzycisk" onclick="wroc()">Wróć</button>
                </section>
            </section>
        </section>
    </section>

    <link rel="stylesheet" href="../css/all.min.css">
    <a class="buto" style="cursor: pointer; display: flex; align-items: center; padding: 40px 20px; border-radius: 10px; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-decoration: none; font-family: Arial, sans-serif;" onclick="confirmDelete()">
        <svg xmlns="http://www.w3.org/2000/svg" style="color: red; margin-right: 10px;" height="22" viewBox="0 0 448 512"><path fill="#ff0000" d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0L284.2 0c12.1 0 23.2 6.8 28.6 17.7L320 32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 7.2-14.3zM32 128l384 0 0 320c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-320zm96 64c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16z"/></svg>
        <span style="color: red; font-size: 16px; font-weight: 550;">Usuń dokument</span>
    </a>
   </div>
</body>
<body>
    <div class="BottomNav_bottomNav__JQdpA"> 
        <div class="BottomNav_bnTab__WzkWH"> 
            <img src="../images/b001_home.svg" alt="home.html">
            <span class="BottomNav_activeText__6iAIF">Pulpit</span>
        </div>

        <div class="BottomNav_bnTab__WzkWH" onclick="window.location.href='documents.html'">
            <img src="../images/ad005_framed_person.svg" alt="documents.html">
            <span>Dokumenty</span>
        </div>

        <div class="BottomNav_bnTab__WzkWH" onclick="window.location.href='services.html'">
            <img src="../images/ac001_services.svg" alt="services.html">
            <span>Usługi</span>
        </div>

        <div class="BottomNav_bnTab__WzkWH" onclick="window.location.href='qr.html'">
            <img src="../images/ai001_scanner_qr.svg" alt="qr.html">
            <span>Kod QR</span>
        </div>

        <div class="BottomNav_bnTab__WzkWH" onclick="window.location.href='more.html'">
            <img src="../images/ab010_more.svg" alt="more.html">
            <span>Więcej</span>
        </div>
    </div>
</body>
<body>
    <section class="witam">
        <button class="wybor">
            <div id="kod">
            </div>
        </button>
    </section>

    <section class="witam">
        <button class="wybor">
            <div id="more">
            </div>
        </button>
    </section>

    <script src="../js/wybor.js"></script>

    <script src="../js/scale.js"></script>
</body>
</html>