Skip to content

Commit

Permalink
finish the project
Browse files Browse the repository at this point in the history
  • Loading branch information
@abdulbasit-dev
abdulbasit-dev committed May 19, 2020
1 parent 3c54f58 commit 2be2ac8
Show file tree
Hide file tree
Showing 14 changed files with 2,323 additions and 163 deletions.
68 changes: 68 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Filter</title>
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- min.css bootstrap -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- my style -->
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header class="shadow-lg mb-5">
<nav class="navbar navbar-expand-md navbar-dark p-3">
<div class="container">
<a href="index.html" class="navbar-brand"><i class="far fa-images fa-3x p-0"></i></a>
<ul class="navbar-nav h5 nav ">
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="image-filter.html" class="nav-link ">Image Filter</a>
</li>
<li class="nav-item">
<a href="steganography.html" class="nav-link">Steganography</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link active">About</a>
</li>
</ul>
</div>
</nav>
</header>

<main>
<div class="container">

</div>
</main>

<footer class="p-4 fixed-bottom">
<div class="row text-center">
<div class="col-md-6 mx-auto">
<h4>Website Made With love <i class="fas fa-heart text-danger"></i></h4>
<p>copyright &copy; <span id="year"></span></p>
</div>
</div>
</footer>


<!-- min jquery -->
<script src="jquery-3.4.1.min.js"></script>
<!-- min.js bootstraop (min.js + propper.js)-->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Own Script -->
<script src="script.js"></script>
<script>
// Get the current year for the copyright
$('#year').text(new Date().getFullYear());
</script>
</body>

</html>
239 changes: 239 additions & 0 deletions caman.full.min.js
View file

Large diffs are not rendered by default.

32 changes: 32 additions & 0 deletions css/particles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
body{
padding: 0;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}




#particles-js{
background:firebrick;
height:100%;
}

#login{
background:#fff;
opacity:0.9;
padding:2em;
border:#ccc 2px solid;
position:absolute;
top: 50%;
left: 50%;
}

#login input[type="text"], #login input[type="password"]{
padding:7px;
margin-bottom:10px;
border:1px #ccc solid;
}
5 changes: 5 additions & 0 deletions css/steganography.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@

.opa {
opacity: 1;
width: 10px;
}
8 changes: 6 additions & 2 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
body{
background: #F9F9F9 !important;
background: #F7F5FB !important;
}

header , footer{
background: #062A4E !important;
color: #F2FFFF !important;
font-weight: bold;

}
canvas {
Expand All @@ -29,4 +28,9 @@ canvas {
color: red;

}






183 changes: 183 additions & 0 deletions image-filter.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Filter</title>
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- min.css bootstrap -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- my style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="shadow-lg mb-5">
<nav class="navbar navbar-expand-md navbar-dark p-3">
<div class="container">
<a href="index.html" class="navbar-brand"><i class="far fa-images fa-3x p-0"></i></a>
<ul class="navbar-nav h5 nav ">
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="image-filter.html" class="nav-link active">Image Filter</a>
</li>
<li class="nav-item">
<a href="image-filter.html" class="nav-link">Image Filter</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link ">About</a>
</li>
</ul>
</div>
</nav>
</header>

<main>
<div class="container">
<section id="addFile">
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="upload-file">
<label for="upload-file" class="custom-file-label">Choose Image</label>
</div>

<div class="row">
<div class="col-md-6">
<canvas id="canvas1" class="rounded shadow mb-md-0 mb-4"></canvas>
</div>
<div class="col-md-6">
<canvas id="canvas2" class="rounded shadow "></canvas>
</div>
</div>
</section>

<section id="filter" class="text-center py-5">
<h2 class=" my-3">Filters</h2>
<div class="row my-4 ">
<div class="col-md-3 col-sm-6 mb-4">
<div class="btn-group ">
<button class="filter-btn brightness-remove btn btn-in">-</button>
<button class="btn btn-secondary btn-disabled" disabled>Brightness</button>
<button class="filter-btn brightness-add btn btn-in">+</button>

</div>
</div>

<div class="col-md-3 col-sm-6 mb-4">
<div class="btn-group ">
<button class="filter-btn contrast-remove btn btn-in">-</button>
<button class="btn btn-secondary btn-disabled" disabled>Contrast</button>
<button class="filter-btn contrast-add btn btn-in">+</button>
</div>
</div>

<div class="col-md-3 col-sm-6 mb-4">
<div class="btn-group ">
<button class="filter-btn saturation-remove btn btn-in">-</button>
<button class="btn btn-secondary btn-disabled" disabled>Saturation</button>
<button class="filter-btn saturation-add btn btn-in">+</button>
</div>
</div>

<div class="col-md-3 col-sm-6 ">
<div class="btn-group ">
<button class="filter-btn vibrance-remove btn btn-in">-</button>
<button class="btn btn-secondary btn-disabled" disabled>Vibrance</button>
<button class="filter-btn vibrance-add btn btn-in">+</button>
</div>
</div>
</div>
<!-- ./row -->
</section>

<section id="effects">
<h2 class="text-center my-3">Effects</h2>
<div class="row mb-3">
<div class="col-md-3 col-sm-6 mb-3">
<button class="filter-btn vintage-add btn btn-dark btn-block">
Vintage
</button>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<button class="filter-btn lomo-add btn btn-dark btn-block">
Lomo
</button>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<button class="filter-btn clarity-add btn btn-dark btn-block">
Clarity
</button>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<button class="filter-btn sincity-add btn btn-dark btn-block">
Sin City
</button>
</div>
</div>

<div class="row">
<div class="col-md-3 col-sm-6 mb-3">
<button class="filter-btn crossprocess-add btn btn-dark btn-block">
Cross Process
</button>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<button class="filter-btn pinhole-add btn btn-dark btn-block">
Pinhole
</button>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<button class="filter-btn nostalgia-add btn btn-dark btn-block">
Nostalgia
</button>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<button class="filter-btn hermajesty-add btn btn-dark btn-block">
Her Majesty
</button>
</div>
</div>
</section>

<section id="action" class="my-5 ">
<div class="row">
<div class="col-sm-6 mb-3">
<button id="download-btn" class="btn btn-outline-primary btn-block">Download Image</button>
</div>
<div class="col-sm-6">
<button id="revert-btn" class="btn btn-outline-danger btn-block">Remove Filters</button>
</div>
</div>
</section>
</div>
</main>

<footer class="p-4">
<div class="row text-center">
<div class="col-md-6 mx-auto">
<h4>Website Made With love <i class="fas fa-heart text-danger"></i></h4>
<p>copyright &copy; <span id="year"></span></p>
</div>
</div>
</footer>


<!-- min jquery -->
<script src="jquery-3.4.1.min.js"></script>
<!-- min.js bootstraop (min.js + propper.js)-->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Canman script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"
integrity="sha256-Ttj6Ke2Nzuxi5upPlHetkZxBtdTq0LV1Z6BEUUsKPfs=" crossorigin="anonymous"></script>
<!-- Own Script -->
<script src="script.js"></script>
<script>
// Get the current year for the copyright
$('#year').text(new Date().getFullYear());
</script>
</body>

</html>
Binary file added image1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 2be2ac8

Please sign in to comment.