Add files via upload

0.1

add.php

@@ -0,0 +1,368 @@
+<style>
+
+    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
+
+    * {
+        box-sizing: border-box;
+    }
+
+    body {
+        background: #f6f5f7;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        font-family: 'Montserrat', sans-serif;
+        height: 100vh;
+        margin: -20px 0 50px;
+    }
+
+    h1 {
+        font-weight: bold;
+        margin: 0;
+    }
+
+    h2 {
+        text-align: center;
+    }
+
+    p {
+        font-size: 14px;
+        font-weight: 100;
+        line-height: 20px;
+        letter-spacing: 0.5px;
+        margin: 20px 0 30px;
+    }
+
+    span {
+        font-size: 12px;
+    }
+
+    a {
+        color: #333;
+        font-size: 14px;
+        text-decoration: none;
+        margin: 15px 0;
+    }
+
+    button, a {
+        border-radius: 20px;
+        border: 1px solid #FF4B2B;
+        background-color: #FF4B2B;
+        color: #FFFFFF;
+        font-size: 12px;
+        font-weight: bold;
+        padding: 12px 45px;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        transition: transform 80ms ease-in;
+    }
+
+    button:active, a:active {
+        transform: scale(0.95);
+    }
+
+    a:hover {
+        transform: scale(0.95);
+    }
+
+    button:focus, a:focus {
+        outline: none;
+    }
+
+    button.ghost, a.ghost {
+        background-color: transparent;
+        border-color: #FFFFFF;
+    }
+
+    form {
+        background-color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0 50px;
+        height: 100%;
+        text-align: center;
+    }
+
+    input {
+        background-color: #eee;
+        border: none;
+        padding: 12px 15px;
+        margin: 8px 0;
+        width: 100%;
+    }
+
+    .container {
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 14px 28px rgba(0,0,0,0.25),
+        0 10px 10px rgba(0,0,0,0.22);
+        position: relative;
+        overflow: hidden;
+        width: 768px;
+        max-width: 100%;
+        min-height: 480px;
+    }
+
+    .form-container {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        transition: all 0.6s ease-in-out;
+    }
+
+    .sign-in-container {
+        left: 0;
+        width: 50%;
+        z-index: 2;
+    }
+
+    .container.right-panel-active .sign-in-container {
+        transform: translateX(100%);
+    }
+
+    .sign-up-container {
+        left: 0;
+        width: 50%;
+        opacity: 0;
+        z-index: 1;
+    }
+
+    .container.right-panel-active .sign-up-container {
+        transform: translateX(100%);
+        opacity: 1;
+        z-index: 5;
+        animation: show 0.6s;
+    }
+
+    @keyframes show {
+        0%, 49.99% {
+            opacity: 0;
+            z-index: 1;
+        }
+
+        50%, 100% {
+            opacity: 1;
+            z-index: 5;
+        }
+    }
+
+    .overlay-container {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+        transition: transform 0.6s ease-in-out;
+        z-index: 100;
+    }
+
+    .container.right-panel-active .overlay-container{
+        transform: translateX(-100%);
+    }
+
+    .overlay {
+        background: #FF416C;
+        background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
+        background: linear-gradient(to right, #FF4B2B, #FF416C);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: 0 0;
+        color: #FFFFFF;
+        position: relative;
+        left: -100%;
+        height: 100%;
+        width: 200%;
+        transform: translateX(0);
+        transition: transform 0.6s ease-in-out;
+    }
+
+    .container.right-panel-active .overlay {
+        transform: translateX(50%);
+    }
+
+    .overlay-panel {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0 40px;
+        text-align: center;
+        top: 0;
+        height: 100%;
+        width: 50%;
+        transform: translateX(0);
+        transition: transform 0.6s ease-in-out;
+    }
+
+    .overlay-left {
+        transform: translateX(-20%);
+    }
+
+    .container.right-panel-active .overlay-left {
+        transform: translateX(0);
+    }
+
+    .overlay-right {
+        right: 0;
+        transform: translateX(0);
+    }
+
+    .container.right-panel-active .overlay-right {
+        transform: translateX(20%);
+    }
+
+    .social-container {
+        margin: 20px 0;
+    }
+
+    .social-container a {
+        border: 1px solid #DDDDDD;
+        border-radius: 50%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 5px;
+        height: 40px;
+        width: 40px;
+    }
+
+    footer {
+        background-color: #222;
+        color: #fff;
+        font-size: 14px;
+        bottom: 0;
+        position: fixed;
+        left: 0;
+        right: 0;
+        text-align: center;
+        z-index: 999;
+    }
+
+    footer p {
+        margin: 10px 0;
+    }
+
+    footer i {
+        color: red;
+    }
+
+    footer a {
+        color: #3c97bf;
+        text-decoration: none;
+    }
+
+    .info-box {
+        border-radius: 24px;
+        color: white;
+        padding: 10px 30px;
+        margin-bottom: 20px;
+    }
+    .info-box.green {
+        background: #0f5132;
+    }
+    .info-box.red {
+        background: #d90f0f;
+    }
+</style>
+<div class="container" id="container">
+    <div class="form-container sign-in-container" style="display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;">
+        <h1 style="text-align: center">Kayıt olmak için son adım!</h1>
+        <p style="text-align: center">Parmak izinizi okutunuz ve kaydınızı oluşturalım</p>
+        <img src="images/fingerprint.gif" style="height: 200px; width: auto" >
+    </div>
+    <div class="overlay-container">
+        <div class="overlay">
+            <div class="overlay-panel overlay-right">
+                <h1>Merhaba!</h1>
+                <p>Kişisel bilgilerinizi girin ve bizimle yolculuğa başlayın</p>
+                <a href="http://localhost/gomulu/detail.php" class="ghost" >Giriş Yap</a>
+            </div>
+        </div>
+    </div>
+</div>
+<?php
+try {
+    $db = new PDO("mysql:host=localhost;dbname=gomulu", "root", "");
+} catch ( PDOException $e ){
+    print $e->getMessage();
+}
+$db->query("SET CHARACTER SET utf8");
+$query1 = $db->query("SELECT * FROM users ORDER BY id asc", PDO::FETCH_ASSOC);
+if ( $query1->rowCount() ){
+    foreach( $query1 as $row1 ){
+        $last_id1 = $row1['id']."<br>";
+    }
+}
+
+$curl = curl_init();
+curl_setopt_array($curl, array(
+    CURLOPT_URL => 'http://192.168.1.103/post',
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_ENCODING => '',
+    CURLOPT_MAXREDIRS => 10,
+    CURLOPT_TIMEOUT => 0,
+    CURLOPT_FOLLOWLOCATION => true,
+    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+    CURLOPT_CUSTOMREQUEST => 'POST',
+    CURLOPT_POSTFIELDS =>'{
+  "message": "register",
+  "function_code": "2",
+  "last_id": '.$last_id1.'
+}',
+    CURLOPT_HTTPHEADER => array(
+        'Content-Type: application/json'
+    ),
+));
+$response = curl_exec($curl);
+curl_close($curl);
+
+if($response) {
+    $image_url = 0;
+
+    if($_FILES['dosya']){
+
+        if($_FILES['dosya']['error'] == 0){
+
+            $yukle = 'images/' . $_FILES['dosya']['name'];
+
+            if( move_uploaded_file($_FILES["dosya"]["tmp_name"], $yukle ) ){
+                echo "dosya başarıyla yüklendi";
+                $image_url = "http://localhost/gomulu/" . $yukle;
+            }else{
+                echo "Dosya yüklenirken bir hata ile karşılaşıldı...";
+            }
+
+        }else{
+            echo "Dosya yüklenirken bir hata ile karşılaşıldı.";
+        }
+    }
+
+    if($image_url != 0) {
+        $query = $db->prepare('INSERT INTO users SET name = ?, surname = ?, image = ?, status = 1');
+        $insert = $query->execute(array(
+            $_POST["name"], $_POST["surname"], $image_url
+        ));
+        if ( $insert ){
+            $last_id = $db->lastInsertId();
+            ?>
+            <div class="info-box green">
+                Kayıt Başarılı
+            </div>
+            <?php
+        }
+
+    }
+
+}
+
+?>
+
+

bedir.php

@@ -0,0 +1,8 @@
+<?php
+
+echo '
+{
+  "message": "login success",
+  "message_code": "1",
+  "user_id": "2"
+}';

detail.php

@@ -0,0 +1,312 @@
+<style>
+
+    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
+
+    * {
+        box-sizing: border-box;
+    }
+
+    body {
+        background: #f6f5f7;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        font-family: 'Montserrat', sans-serif;
+        height: 100vh;
+        margin: -20px 0 50px;
+    }
+
+    h1 {
+        font-weight: bold;
+        margin: 0;
+    }
+
+    h2 {
+        text-align: center;
+    }
+
+    p {
+        font-size: 14px;
+        font-weight: 100;
+        line-height: 20px;
+        letter-spacing: 0.5px;
+        margin: 20px 0 30px;
+    }
+
+    span {
+        font-size: 12px;
+    }
+
+    a {
+        color: #333;
+        font-size: 14px;
+        text-decoration: none;
+        margin: 15px 0;
+    }
+
+    button, a {
+        border-radius: 20px;
+        border: 1px solid #FF4B2B;
+        background-color: #FF4B2B;
+        color: #FFFFFF;
+        font-size: 12px;
+        font-weight: bold;
+        padding: 12px 45px;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        transition: transform 80ms ease-in;
+    }
+
+    button:active, a:active {
+        transform: scale(0.95);
+    }
+
+    a:hover {
+        transform: scale(0.95);
+    }
+
+    button:focus, a:focus {
+        outline: none;
+    }
+
+    button.ghost, a.ghost {
+        background-color: transparent;
+        border-color: #FFFFFF;
+    }
+
+    form {
+        background-color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0 50px;
+        height: 100%;
+        text-align: center;
+    }
+
+    input {
+        background-color: #eee;
+        border: none;
+        padding: 12px 15px;
+        margin: 8px 0;
+        width: 100%;
+    }
+
+    .container {
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 14px 28px rgba(0,0,0,0.25),
+        0 10px 10px rgba(0,0,0,0.22);
+        position: relative;
+        overflow: hidden;
+        width: 768px;
+        max-width: 100%;
+        min-height: 480px;
+    }
+
+    .form-container {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        transition: all 0.6s ease-in-out;
+    }
+
+    .sign-in-container {
+        left: 0;
+        width: 50%;
+        z-index: 2;
+    }
+
+    .container.right-panel-active .sign-in-container {
+        transform: translateX(100%);
+    }
+
+    .sign-up-container {
+        left: 0;
+        width: 50%;
+        opacity: 0;
+        z-index: 1;
+    }
+
+    .container.right-panel-active .sign-up-container {
+        transform: translateX(100%);
+        opacity: 1;
+        z-index: 5;
+        animation: show 0.6s;
+    }
+
+    @keyframes show {
+        0%, 49.99% {
+            opacity: 0;
+            z-index: 1;
+        }
+
+        50%, 100% {
+            opacity: 1;
+            z-index: 5;
+        }
+    }
+
+    .overlay-container {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+        transition: transform 0.6s ease-in-out;
+        z-index: 100;
+    }
+
+    .container.right-panel-active .overlay-container{
+        transform: translateX(-100%);
+    }
+
+    .overlay {
+        background: #FF416C;
+        background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
+        background: linear-gradient(to right, #FF4B2B, #FF416C);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: 0 0;
+        color: #FFFFFF;
+        position: relative;
+        left: -100%;
+        height: 100%;
+        width: 200%;
+        transform: translateX(0);
+        transition: transform 0.6s ease-in-out;
+    }
+
+    .container.right-panel-active .overlay {
+        transform: translateX(50%);
+    }
+
+    .overlay-panel {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0 40px;
+        text-align: center;
+        top: 0;
+        height: 100%;
+        width: 50%;
+        transform: translateX(0);
+        transition: transform 0.6s ease-in-out;
+    }
+
+    .overlay-left {
+        transform: translateX(-20%);
+    }
+
+    .container.right-panel-active .overlay-left {
+        transform: translateX(0);
+    }
+
+    .overlay-right {
+        right: 0;
+        transform: translateX(0);
+    }
+
+    .container.right-panel-active .overlay-right {
+        transform: translateX(20%);
+    }
+
+    .social-container {
+        margin: 20px 0;
+    }
+
+    .social-container a {
+        border: 1px solid #DDDDDD;
+        border-radius: 50%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 5px;
+        height: 40px;
+        width: 40px;
+    }
+
+    footer {
+        background-color: #222;
+        color: #fff;
+        font-size: 14px;
+        bottom: 0;
+        position: fixed;
+        left: 0;
+        right: 0;
+        text-align: center;
+        z-index: 999;
+    }
+
+    footer p {
+        margin: 10px 0;
+    }
+
+    footer i {
+        color: red;
+    }
+
+    footer a {
+        color: #3c97bf;
+        text-decoration: none;
+    }
+</style>
+
+
+<div class="container" id="container">
+    <div class="form-container sign-in-container" style="display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;">
+        <h1>Hoşgeldiniz!</h1>
+        <p style="text-align: center">Parmak izinizi okutunuz</p>
+        <img src="images/fingerprint.gif" style="height: 200px; width: auto" >
+        <button onclick="button()" style="margin-top: 10px">Yönlendir</button>
+    </div>
+    <div class="overlay-container">
+        <div class="overlay">
+            <div class="overlay-panel overlay-right">
+                <h1>Merhaba!</h1>
+                <p>Kişisel bilgilerinizi girin ve bizimle yolculuğa başlayın</p>
+                <a href="http://localhost/gomulu/index.php" class="ghost" >Kayıt Ol</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+
+    function button() {
+        const myHeaders = new Headers();
+        myHeaders.append("Content-Type", "*");
+
+        const raw = JSON.stringify({
+            "message": "login",
+            "function_code": "1"
+        });
+
+        const requestOptions = {
+            method: "post",
+            headers: myHeaders,
+            body: raw,
+            redirect: "follow"
+        };
+
+        fetch("http://192.168.1.103/post", requestOptions)
+            .then((response) => response.text())
+            .then((result) => {
+
+                console.log(result)
+
+
+            });
+    }
+
+
+</script>

index.php

@@ -0,0 +1,306 @@
+<style>
+
+    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
+
+    * {
+        box-sizing: border-box;
+    }
+
+    body {
+        background: #f6f5f7;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        font-family: 'Montserrat', sans-serif;
+        height: 100vh;
+        margin: -20px 0 50px;
+    }
+
+    h1 {
+        font-weight: bold;
+        margin: 0;
+    }
+
+    h2 {
+        text-align: center;
+    }
+
+    p {
+        font-size: 14px;
+        font-weight: 100;
+        line-height: 20px;
+        letter-spacing: 0.5px;
+        margin: 20px 0 30px;
+    }
+
+    span {
+        font-size: 12px;
+    }
+
+    a {
+        color: #333;
+        font-size: 14px;
+        text-decoration: none;
+        margin: 15px 0;
+    }
+
+    button, a {
+        border-radius: 20px;
+        border: 1px solid #FF4B2B;
+        background-color: #FF4B2B;
+        color: #FFFFFF;
+        font-size: 12px;
+        font-weight: bold;
+        padding: 12px 45px;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        transition: transform 80ms ease-in;
+    }
+
+    button:active, a:active {
+        transform: scale(0.95);
+    }
+
+    a:hover {
+        transform: scale(0.95);
+    }
+
+    button:focus, a:focus {
+        outline: none;
+    }
+
+    button.ghost {
+        background-color: transparent;
+        border-color: #FFFFFF;
+    }
+
+    form {
+        background-color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0 50px;
+        height: 100%;
+        text-align: center;
+    }
+
+    input {
+        background-color: #eee;
+        border: none;
+        padding: 12px 15px;
+        margin: 8px 0;
+        width: 100%;
+    }
+
+    .container {
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 14px 28px rgba(0,0,0,0.25),
+        0 10px 10px rgba(0,0,0,0.22);
+        position: relative;
+        overflow: hidden;
+        width: 768px;
+        max-width: 100%;
+        min-height: 480px;
+    }
+
+    .form-container {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        transition: all 0.6s ease-in-out;
+    }
+
+    .sign-in-container {
+        left: 0;
+        width: 50%;
+        z-index: 2;
+    }
+
+    .container.right-panel-active .sign-in-container {
+        transform: translateX(100%);
+    }
+
+    .sign-up-container {
+        left: 0;
+        width: 50%;
+        opacity: 0;
+        z-index: 1;
+    }
+
+    .container.right-panel-active .sign-up-container {
+        transform: translateX(100%);
+        opacity: 1;
+        z-index: 5;
+        animation: show 0.6s;
+    }
+
+    @keyframes show {
+        0%, 49.99% {
+            opacity: 0;
+            z-index: 1;
+        }
+
+        50%, 100% {
+            opacity: 1;
+            z-index: 5;
+        }
+    }
+
+    .overlay-container {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+        transition: transform 0.6s ease-in-out;
+        z-index: 100;
+    }
+
+    .container.right-panel-active .overlay-container{
+        transform: translateX(-100%);
+    }
+
+    .overlay {
+        background: #FF416C;
+        background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
+        background: linear-gradient(to right, #FF4B2B, #FF416C);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: 0 0;
+        color: #FFFFFF;
+        position: relative;
+        left: -100%;
+        height: 100%;
+        width: 200%;
+        transform: translateX(0);
+        transition: transform 0.6s ease-in-out;
+    }
+
+    .container.right-panel-active .overlay {
+        transform: translateX(50%);
+    }
+
+    .overlay-panel {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0 40px;
+        text-align: center;
+        top: 0;
+        height: 100%;
+        width: 50%;
+        transform: translateX(0);
+        transition: transform 0.6s ease-in-out;
+    }
+
+    .overlay-left {
+        transform: translateX(-20%);
+    }
+
+    .container.right-panel-active .overlay-left {
+        transform: translateX(0);
+    }
+
+    .overlay-right {
+        right: 0;
+        transform: translateX(0);
+    }
+
+    .container.right-panel-active .overlay-right {
+        transform: translateX(20%);
+    }
+
+    .social-container {
+        margin: 20px 0;
+    }
+
+    .social-container a {
+        border: 1px solid #DDDDDD;
+        border-radius: 50%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 5px;
+        height: 40px;
+        width: 40px;
+    }
+
+    footer {
+        background-color: #222;
+        color: #fff;
+        font-size: 14px;
+        bottom: 0;
+        position: fixed;
+        left: 0;
+        right: 0;
+        text-align: center;
+        z-index: 999;
+    }
+
+    footer p {
+        margin: 10px 0;
+    }
+
+    footer i {
+        color: red;
+    }
+
+    footer a {
+        color: #3c97bf;
+        text-decoration: none;
+    }
+</style>
+<div class="container" id="container">
+    <div class="form-container sign-up-container">
+        <form action="add.php" method="post" enctype="multipart/form-data">
+            <h1>Hesap Oluştur</h1>
+            <span>Kayıt olmak için bilgilerinizi giriniz.</span>
+            <input type="text" name="name" placeholder="İsim"/>
+            <input type="text" name="surname" placeholder="Soyisim"/>
+            <input type="file" name="dosya" id="dosya"/>
+            <input type="submit" value="Yükle" />
+
+        </form>
+    </div>
+    <div class="form-container sign-in-container" style="display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;">
+        <h1>Giriş Yap</h1>
+        <span style="margin: 20px 0; text-align: center;">Girş Yapmak için alttaki linke tıklayarak parmak izi tanımlama ekranına geçebilirsiniz.</span>
+        <a href="http://localhost/gomulu/detail.php">Giriş Yap</a>
+    </div>
+    <div class="overlay-container">
+        <div class="overlay">
+            <div class="overlay-panel overlay-left">
+                <h1>Hoşgeldiniz!</h1>
+                <p>Bizimle bağlantıda kalmak için lütfen kişisel bilgilerinizle giriş yapın</p>
+                <button class="ghost" id="signIn">Giriş Yap</button>
+            </div>
+            <div class="overlay-panel overlay-right">
+                <h1>Merhaba!</h1>
+                <p>Kişisel bilgilerinizi girin ve bizimle yolculuğa başlayın</p>
+                <button class="ghost" id="signUp">Kayıt Ol</button>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    const signUpButton = document.getElementById('signUp');
+    const signInButton = document.getElementById('signIn');
+    const container = document.getElementById('container');
+
+    signUpButton.addEventListener('click', () => {
+        container.classList.add("right-panel-active");
+    });
+
+    signInButton.addEventListener('click', () => {
+        container.classList.remove("right-panel-active");
+    });
+</script>

panel.php

@@ -0,0 +1,276 @@
+<?php
+try {
+    $db = new PDO("mysql:host=localhost;dbname=gomulu", "root", "");
+} catch ( PDOException $e ){
+    print $e->getMessage();
+}
+
+$id = $_GET['id'];
+$user = $db->query("SELECT * FROM users WHERE id = '{$id}'")->fetch(PDO::FETCH_ASSOC);
+
+if ( $_POST['message'] == "login" && $user ) {
+    ?>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <style>
+        * {
+            font-family: 'Open Sans', sans-serif;
+            font-size: 1.1em;
+            text-decoration: none;
+            outline: none;
+            border: none;
+            box-sizing: border-box;
+            list-style: none;
+            text-align: center;
+            padding: 0;
+            margin: 0;
+        }
+
+        ::selection {
+            background-color: #242424;
+        }
+
+        body {
+            height: 100%;
+            background-color: #BFFBFF;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+
+        img {
+            height: auto;
+            width: 100%;
+            user-select: none;
+        }
+
+        #busicard {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            background: linear-gradient(to left, #00D2C8, #1A8A9D);
+            border-radius: 35px;
+            min-height: 580px;
+            max-width: 440px;
+            margin: 40px auto;
+            justify-content: space-between;
+        }
+
+        #busicard h1 {
+            color: #FAEAFF;
+        }
+
+        .movembar {
+            display: flex;
+            flex-direction: row;
+            justify-content: baseline;
+            align-items: flex-start;
+        }
+
+        .movegear {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: flex-start;
+            align-items: flex-start;
+            margin-top: -2px;
+        }
+
+        .mbar {
+            width: 18px;
+            height: 3px;
+            background: #FAEAFF;
+            position: absolute;
+            margin: 35px;
+        }
+
+        .mbar:before {
+            content: '';
+            width: 12px;
+            height: 3px;
+            background: #FAEAFF;
+            position: absolute;
+            top: 6px;
+            left: 0;
+        }
+
+        .mbar:after {
+            content: '';
+            width: 18px;
+            height: 3px;
+            background: #FAEAFF;
+            position: absolute;
+            top: 12px;
+            left: 0;
+        }
+
+        .mbut:hover .mbar, .mbut:hover .mbar:before, .mbut:hover .mbar:after {
+            background: #2F4858;
+        }
+
+        .user {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            user-select: none;
+        }
+
+        .user img {
+            border-radius: 100px;
+            width: 160px;
+            border: 4px solid #FAEAFF;
+            margin-top: 30px;
+        }
+
+        .gear {
+            background-image:
+                    radial-gradient(at center center, #00D2C8 23%, #eee 25%, #FAEAFF 57%, transparent 53%),
+                    linear-gradient(0deg, transparent 43%, #eee 40%, #FAEAFF 60%, transparent 60%),
+                    linear-gradient(45deg, transparent 43%, #eee 43%, #FAEAFF 57%, transparent 57%),
+                    linear-gradient(90deg, transparent 40%, #eee 40%, #FAEAFF 60%, transparent 60%),
+                    linear-gradient(135deg, transparent 43%, #eee 43%, #FAEAFF 57%, transparent 57%);
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            margin: 35px;
+        }
+
+        .gear:hover {
+            background-image:
+                    radial-gradient(at center center, #00D2C8 23%, #242424 25%, #2F4858 57%, transparent 53%),
+                    linear-gradient(0deg, transparent 43%, #242424 40%, #2F4858 60%, transparent 60%),
+                    linear-gradient(45deg, transparent 43%, #242424 43%, #2F4858 57%, transparent 57%),
+                    linear-gradient(90deg, transparent 40%, #242424 40%, #2F4858 60%, transparent 60%),
+                    linear-gradient(135deg, transparent 43%, #242424 43%, #2F4858 57%, transparent 57%);
+        }
+
+        .info li {
+            color: #eee;
+            font-size: 0.8em;
+            display: inline-block;
+            margin: 0 6px;
+        }
+
+        .hrtop {
+            display: inline-block;
+            background-color: #FAEAFF;
+            width: 2px;
+            height: 22px;
+            margin: -2px auto;
+        }
+
+        .contacts {
+            min-height: 100px;
+        }
+
+        .contacts i {
+            display: inline-block;
+            margin: 20px 0;
+        }
+
+        .contacts a {
+            margin: 0 6px;
+        }
+
+        .bfollow {
+            display: flex;
+            flex-direction: column-reverse;
+            justify-content: center;
+            align-items: center;
+            margin: 25px 0 0 0;
+        }
+
+        .bfollow a {
+            position: absolute;
+            box-shadow: 0 0 15px 1px #000;
+            color: #FAEAFF;
+            background-color: #2F4858;
+            border-radius: 30px;
+            padding: 7px 49px;
+            transition: 350ms;
+            -webkit-transition: all .3s;
+        }
+
+        .bfollow a:hover {
+            font-weight: bold;
+            color: #2F4858;
+            background-color: #FAEAFF;
+            padding: 8px 56px;
+            transition: 350ms;
+            -webkit-transition: all .3s;
+        }
+
+        .content {
+            color: #FAEAFF;
+            background: linear-gradient(to bottom, #2F4858, #2C687C);
+            border-radius: 0 0 30px 30px;
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .content p {
+            margin: 30px 0 25px 0;
+        }
+
+        .lock {
+            width: 26px;
+            height: 16px;
+            background: #FAEAFF;
+            position: relative;
+            border-radius: 4px;
+            top: 30px;
+        }
+
+        .lock:before {
+            content: '';
+            width: 6px;
+            height: 6px;
+            background: transparent;
+            border: 6px solid #FAEAFF;
+            border-bottom: 0;
+            border-radius: 6px 6px 0 0;
+            position: absolute;
+            bottom: 16px;
+            right: 4px;
+        }
+
+        a .fa {
+            font-size: 36px;
+            transition: 500ms;
+        }
+
+        a:hover .fa {
+            color: #2F4858;
+            transition: 500ms;
+        }
+
+        a .fa-twitter-square, a .fa-instagram, a .fa-facebook-square {
+            color: #FAEAFF;
+        }
+    </style>
+    <div id="busicard">
+        <div class="user">
+            <img src="<?php echo $user["image"] ?>">
+        </div>
+        <h1><?php echo $user["name"] ?> <?php echo $user["surname"] ?></h1>
+        <div class="content">
+            <div class="lock"></div>
+            <p>Giriş Başarılı</p>
+        </div>
+    </div>
+    <?php
+}else {
+    ?>
+    <script>
+        setTimeout(function(){
+            window.location.assign("http://localhost/gomulu/index.php");
+        }, 500);
+    </script>
+    <?php
+}
+?>
+
+