mirror of
https://github.com/bdrtr/FINGER_DETECT.git
synced 2025-11-08 18:52:47 +00:00
Add files via upload
0.1
This commit is contained in:
bedirkaraabali
GitHub
parent
d1bea7b04c
commit
eba0cbf15c
368
add.php
Normal file
368
add.php
Normal file
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
|
||||
8
bedir.php
Normal file
8
bedir.php
Normal file
@ -0,0 +1,8 @@
|
||||
<?php
|
||||
|
||||
echo '
|
||||
{
|
||||
"message": "login success",
|
||||
"message_code": "1",
|
||||
"user_id": "2"
|
||||
}';
|
||||
312
detail.php
Normal file
312
detail.php
Normal file
@ -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>
|
||||
BIN
images/fingerprint.gif
Normal file
BIN
images/fingerprint.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 MiB |
306
index.php
Normal file
306
index.php
Normal file
@ -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>
|
||||
276
panel.php
Normal file
276
panel.php
Normal file
@ -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
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user