Skip to content

Instantly share code, notes, and snippets.

@Ahmed-Elswerky
Last active June 11, 2017 09:16
Show Gist options
  • Save Ahmed-Elswerky/bfa4d265f186153cdd2ff0f152c952b8 to your computer and use it in GitHub Desktop.
Save Ahmed-Elswerky/bfa4d265f186153cdd2ff0f152c952b8 to your computer and use it in GitHub Desktop.
This gist is my portfolio
<?php
ob_start();
if(session_status() == PHP_SESSION_NONE)
session_start();
include 'mysqli.php';
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
switch($_REQUEST['t']){
case 'sign-in':sign_in();break;
case 'sign-up':sign_up();break;
case 'admin-account':admin_account();break;
defualt:break;
}
function sign_in(){
echo "sign_in";
$email = filter_input(INPUT_POST,'email');
$password = $_POST['password'];
$result = $GLOBALS['conn']->query("SELECT name,id,password FROM users WHERE email='$email'");
$row = $result->fetch_assoc();
if($row){
if(password_verify($password,$row['password']))
{
echo "<br>password is good <br>";
$_SESSION['user_id'] = $row['id'];
$_SESSION['user_name'] = $row['name'];
$_SESSION['user_email'] = $email;
setcookie("user_id",$_SESSION['user_id'],time()+(60*24*60*60));
setcookie("user_name",$_SESSION['user_name'],time()+(60*24*60*60));
setcookie("user_email",$_SESSION['user_email'],time()+(60*24*60*60));
$_SESSION['sign_error'] = "";
header("Location: ./");
}
else {echo $_SESSION['sign_error'] = "Password Wrong";header("Location: ./sign.php");}
}
else {$_SESSION['sign_error'] = "Email is wrong or doesn't exist";header("Location: ./sign.php");}
}
function admin_account(){
$name = test_input($_POST['name']);
$info = test_input($_POST['info']);
$link = test_input($_POST['link']);
$GLOBALS['conn']->query("INSERT INTO projects (name,info,href) VALUES ('$name','$info','$link')");
echo "oka";
if(isset($_FILES['image'])){
echo "<br>upload is set<br>";
$target_dir = "./uploads/";
$ex = explode(".",$_FILES['image']['name']);
$_FILES['image']['name'] = $name.".jpg";
echo $_FILES['image']['name'];
$target_file = $target_dir . basename($_FILES["image"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
$check = getimagesize($_FILES["image"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
// Check if file already exists
if (file_exists($target_file)) {
unlink($target_file);
echo "Sorry, file already exists.";
$target_dir = "./uploads/";
$ex = explode(".",$_FILES['image']['name']);
$_FILES['image']['name'] = $name.".jpg";
echo $_FILES['image']['name'];
$target_file = $target_dir . basename($_FILES["image"]["name"]);
$uploadOk = 1;
}
// Check file size
if ($_FILES["image"]["size"] > 5000000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["image"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
echo "<br>process successfully done";
}
else die( "where file!");
//die("<br>".$_FILES["image"]["size"]);
header('Location: ./');
}
ob_end_flush();
document.getElementsByTagName("body")[0].onkeyup = function(e){
var ctrl_s = false;
if(event.keyCode == 18){
console.log('alt');
if(event.keyCode == 83)
{ctrl_s = true;console.log("true");}
}
console.log(event.keyCode);
if(event.which == 27 || event.keyCode == 27){
document.getElementById("sign_forum").style.display = 'none';
}
if(ctrl_s){
document.getElementById("sign_forum").style.display = 'block';
}
}
//setTimeout(function(){
// document.getElementById("projects").style.height =document.getElementById("projects").clientHeight +
// (document.documentElement.scrollHeight - (document.getElementById("projects").clientHeight + document.getElementById("intro").clientHeight)) + "px";
//},200);
function project_mouse(id,t){
if(t == 'over'){
document.getElementById("project_" + id).style.display = 'table';
}
if(t == 'leave'){
document.getElementById("project_" + id).style.display = 'none';
}
}
*{padding:0;margin:0;transition:0.3s;}
body{
background:linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),url('intro.jpg')fixed;
background-size:cover;
}
#project_form input:focus{
box-shadow:0 0 3px 2px #111;
outline:none;
}
#intro{
padding:15px;
background-posoition:center;
background-size: cover;
}
#intro #navbar #logo img{width:100px;}
#navbar *{
display:inline-block;
}
#navbar #sign,#navbar #user{
float: right;
margin: 1% 5%;
}
#navbar #sign button{
background: transparent;
border: 1px solid white;
color: white;
font-weight: bolder;
padding: 4px;
}
#navbar #sign button:hover{
color:black;
border-color:black;
background:white;
cursor:pointer;
}
#intro #infos{
color:white;
font-family:Broadway;
padding:15px;
margin:25px;
width:30%;
}
.skill{
position:absolute;
top:10px;
left:10px;
background:white;
border-radius:50%;
width:80px;
height:80px;
display:inline-block;
box-shadow: 0 0 2px 1px;
z-index:110;
}
.skilld{
padding:10px;
position:relative;
margin:2%;
border-radius:50%;
width:80px;
height:80px;
display:inline-block;
box-shadow: 0 0 2px 1px;
z-index:110;
overflow: hidden;
}
.skilld img{
position:absolute;
top:0;
left:0;
}
@keyframes slide1{
0%{transform:rotate(19deg);}
100%{transform:rotate(76deg);}
}
@keyframes slide2{
0%{transform:rotate(0deg);}
100%{transform:rotate(79deg);}
}
@keyframes slide3{
0%{transform:rotate(0deg);}
100%{transform:rotate(63deg);}
}
@keyframes slide4{
0%{transform:rotate(0deg);}
100%{transform:rotate(70deg);}
}
@keyframes slide5{
0%{transform:rotate(0deg);}
100%{transform:rotate(60deg);}
}
#html_d img:nth-of-type(1){
transform: rotate(76deg);
animation: slide1 0.5s ease-out 1;
top: 26px;
left: -77px;
}
#html_d img:nth-of-type(2){
clip:rect(0px,100px,100px,50px);
}
#css_d img:nth-of-type(1){
transform: rotate(79deg);
top: 17px;
animation: slide2 0.5s ease-out 1;
left: -81px;
}
#css_d img:nth-of-type(2){
clip:rect(0px,100px,100px,50px);
}
#js_d img:nth-of-type(1){
transform: rotate(63deg);
animation: slide3 0.5s ease-out 1;
top: 26px;
left: -72px;
}
#js_d img:nth-of-type(2){
clip:rect(0px,100px,100px,50px);
}
#php_d img:nth-of-type(1){
transform: rotate(70deg);
top: 26px;
animation: slide4 0.5s ease-out 1;
left: -72px;
}
#php_d img:nth-of-type(2){
clip:rect(0px,100px,100px,50px);
}
#mysql_d img:nth-of-type(1){
animation: slide5 0.5s ease-out 1;
transform: rotate(60deg);
top: 26px;
left: -122px;
width: 200px;
HEIGHT: 200PX;
}
#mysql_d img:nth-of-type(2){
clip:rect(0px,100px,100px,50px);
}
#html{
}
#css{
}
#js{
}
#php{
}
#mysql{
}
#html::after {
content: "HTML";
position: absolute;
top: 38%;
left: 26%;
font-weight: bold;
color: #444;
font-family: sans-serif;
z-index:10;
}
#css::after{
content: "CSS";
position: absolute;
top: 38%;
left: 26%;
font-weight: bold;
color: #444;
font-family: sans-serif;
z-index:10;
}
#js::after{
content: "JS";
position: absolute;
top: 38%;
left: 36%;
font-weight: bold;
color: #444;
font-family: sans-serif;
z-index:10;
}
#php::after{
content: "php";
position: absolute;
top: 38%;
left: 31%;
font-weight: bold;
color: #444;
font-family: sans-serif;
z-index:10;
}
#mysql::after{
content: "MYSQL";
position: absolute;
top: 38%;
left: 20%;
font-weight: bold;
color: #444;
font-family: sans-serif;
z-index:10;
}
.o_s{
display:inline-block;
position:relative;
border-radius:50%;
width:70px;
height:70px;
margin:3%;
box-shadow:0 0 2px 1px black;
padding:10px;
overflow:hidden;
}
.o_s div{
content:"111";
background:rgb(66, 78, 85);
padding:10px;
border-radius:50%;
margin:1%;
width:50px;
height:50px;
z-index: 1;
font-weight:500;
font-family:arial;
color:white;
text-align:center;
}
.o_s:before,.o_s:after{
content:" ";
width:150px;
height:150px;
position:absolute;
z-index: -1;
}
.o_s:before{
top: -50%;
left: -114%;
}
.o_s:after{
top: -50%;
right: -117%;
}
.o_s:nth-of-type(1):before{
background: white;
}
.o_s:nth-of-type(1):after{
background:red;
}
.o_s:nth-of-type(2):before{
background: white;
}
.o_s:nth-of-type(2):after{
background: green;
}
.o_s:nth-of-type(3):before{
background: white;
}
.o_s:nth-of-type(3):after{
background: yellow;
}
.o_s:nth-of-type(4):before{
background: white;
}
.o_s:nth-of-type(4):after{
background: blue;
}
#sign_forum{
display: block;
width: 100%;
position: absolute;
top: 0;
height: 100%;
left: 0;
z-index:1000;
background: rgba(49, 49, 49, 0.71);
}
#sign_i_u{
margin:15% 0 0 15%;
padding:7px;
background:white;
box-shadow:0 0 2px 1px grey;
}
#sign_i_u #x{
float:right;
margin:-3px -1px;
font-size:20px;
font-family:arial;
}
#sign_i_u #x:hover{
cursor:pointer;
}
#sign1{
margin:15px;
padding:5px;
}
#sign_up,#sign_in{
padding:15px;
box-shadow:0 0 2px 1px grey;
display:inline-block;
text-align:center;
text-align:-webkit-center;
margin:5px;
}
#sign_up h5,#sign_in h5{
display:block;
padding:3px 3px 15px 3px;
font-size:17px;
font-family:monospace;
}
#sign_up input,#sign_in input{
padding:3px;
border-radius:2px;
border:1px solid transparent;
box-shadow:0 0 2px 1px grey;
margin:5px;
}
#projects{
padding:3%;
color:blue;
}
#projects #project_form{
padding:5%;
margin:5%;
background:rgba(130, 130, 130, 0.68);
}
#project_form *{
padding:4px;
border:transparent;
border-radius:2px;
background:white;
box-shadow:0 0 2px 1px #383838;
margin:1%;
}
#projects .project{
max-height: 150px;
min-width: 150px;
min-height: 150px;
max-width: 150px;
display: inline-block;
padding: 3px;
background-size:cover !important;
}
@keyframes cover{
0%{opacity:0;}
100%{opacity:1;}
}
.project_cover{
padding: 5%;
margin:1%;
width:88.5%;
height:88.5%;
background: rgba(0, 0, 0, 0.68);
color: white;
font-family: monospace;
font-size: 12px;
animation:cover 0.3s ease-in 1;
}
.project_cover a{
color: white;
font-size: 19px;
margin:5%;
font-family: sans-serif;
letter-spacing: 3px;
}
.project_cover a:hover{
cursor:pointer;
text-decoration:none;
}
.project p{
margin: 7%;
}
<?php
include 'mysqli.php';
$result_p = $GLOBALS['conn']->query("SELECT id,name,href,info FROM projects");
if($result_p) {
$row_p = $result_p->fetch_assoc();
}
$result_m = $GLOBALS['conn']->query("SELECT name,href,info FROM messages");
if($result_m) {
$row_m = $result_m->fetch_assoc();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ahmed Elswerkey | Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="intro">
<div id="navbar">
<div id="logo"><a href="#"><img src="logo.png"></a></div>
<?php
if(isset($_COOKIE['user_name'])){
$_SESSION['user_name'] = $_COOKIE['user_name'];
$_SESSION['user_email'] = $_COOKIE['user_email'];
echo "
<div id='user'>
<a href='user.php?e=$_SESSION[user_email]'>$_SESSION[user_name]</a>
<a href='funcs.php?t=logout'><small>Log out</small></a>
</div>
";
}
else {
echo "
<div id='sign'>
<button title='Show sign screen (press S)' onclick=\"document.getElementById('sign_forum').style.display = 'block';\">Sign in Or Up </button></div>
<div id='sign_forum' style='display:none;' >
<div id='sign_i_u' >
<div id='x' onclick=\"document.getElementById('sign_forum').style.display = 'none';\" title='Hide sign screen (press Esc)'>x</div>
<div id='sign1'>
<div id='sign_in'>
<h5>Sign in</h5>
<form method='post' action='funcs.php?sign-in'>
<input type='email' name='email' required placeholder='*Email'>
<input type='password' name='password' required placeholder='*Password'>
</form>
</div>
<div id='sign_up'>
<h5>Sign up</h5>
<form method='post' action='funcs.php?sign-up'>
<input type='text' name='name' required placeholder='*Name'>
<input type='hidden' name='type' value='consumer'>
<input type='email' name='email' required placeholder='*Email'>
<input type='password' name='password' required placeholder='*Password'>
</form>
</div>
</div>
</div>
</div>
";
}
?>
</div>
<p id='infos'>Hi there, <br>my name is Ahmed Elswerkey, <br>I'm a junior full stack web developer</p>
<div id="skills">
<div id='html_d' class="skilld"><img src='white.png'><img src='white.png'><div id="html" class="skill"></div></div>
<div id='css_d' class="skilld"><img src='white.png'><img src='white.png'><div id="css" class="skill"></div></div>
<div id='js_d' class="skilld"><img src='white.png'><img src='white.png'><div id="js" class="skill"></div></div>
<div id='php_d' class="skilld"><img src='white.png'><img src='white.png'><div id="php" class="skill"></div></div>
<div id='mysql_d' class="skilld"><img src='white.png'><img src='white.png'><div id="mysql" class="skill"></div></div>
</div>
<div id="other_skills">
<div class="o_s" title='Perfect-final result'><div>Prefect result</div></div>
<div class="o_s" title='Fast learner'><div></div></div>
<div class="o_s" title='Goal is for the greater good'><div></div></div>
<div class="o_s" title='Flixbility'><div></div></div>
</div>
<div id="projects">
<?php
if(isset($_REQUEST['t']))
if($_REQUEST['t'] == 'admin-account-24682468'){
echo "
<form id='project_form' method='post' action='funcs.php?t=admin-account' enctype='multipart/form-data'>
<input type='file' name='image' placeholder='Image' required>
<input type='text' name='name' placeholder='Name' required>
<input type='text' name='info' placeholder='Info' required>
<input type='text' name='link' placeholder='Link' required>
<input type='submit' name='submit' value='Add'>
</form>
";
}
if($row_p){
$image = './uploads/'.$row_p['name'].'.jpg';
echo "
<div id='projects_con'>
<div class='project' onmouseover='project_mouse(\"".$row_p['id']."\",\"over\")' onmouseleave='project_mouse(\"".$row_p['id']."\",\"leave\")' style='background:url(\"".$image."\") center;'>
<div class='project_cover' id='project_".$row_p['id']."' style='display:none;'>
<a target='_blank' href='$row_p[href]'>$row_p[name]</a>
<p id='info'>$row_p[info]</p>
</div>
</div>
";
while($row_p = $result_p->fetch_assoc()){
$image = './uploads/'.$row_p['name'].'.jpg';
echo "
<div class='project' onmouseover='project_mouse(\"".$row_p['id']."\",\"over\")' onmouseleave='project_mouse(\"".$row_p['id']."\",\"leave\")' style='background:url(\"".$image."\") center;'>
<div class='project_cover' id='project_".$row_p['id']."' style='display:none;'>
<a target='_blank' href='$row_p[href]'>$row_p[name]</a>
<p id='info'>$row_p[info]</p>
</div>
</div>
";
}
echo "</div>";
}
?>
</div>
</div>
<div id="messages">
<?php
if($result_m)
{
echo "
<div id='projects_con'>
<div class='project' style='background:url(\"".$row_m['img']."\")center;background-size:cover;'>
<a href='$row_m[href]'>$row_m[name]</a>
<p id='info'>$row_m[info]</p>
</div>
";
while($row_m){
echo "
<div class='project' style='background:url(\"".$row_m['img']."\")center;background-size:cover;'>
<a href='$row_m[href]'>$row_m[name]</a>
<p id='info'>$row_m[info]</p>
</div>
";
}
echo "</div>";
}
?>
</div>
<div id="footer">
</div>
<script src="index.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment