HTML/CSS - [APP] Rockstar Photo Editor Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<!--Made by Rockstar-->
<html>
    <head>
    <meta charset="utf-8">
    <!-- Responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="table-responsive">
            <h3 id="title">Rockstar Photo Editor</h3>
            <center>
            <img id="edit" class="portrait" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRwghVoxgAowLC0-OZf0Y0opoSyKjZcoZ0vb8nSCktXJ38c5XNfnTlcgqDPoQ" />
            </center>
         
         <div id="imgDiv">
         <h5 class="sel">Select Photo</h5>
         <center>
         <img id="img1" class="select" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQXJ6XMmLXz85a63RnBIvTusuQqkNMchgfD00RrEn-VmWsMTvfeDRDs7diAEg" />
         <img id="img2" class="select" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6569Erc5tyzsHXQaDK_f-oM7oydzDwHjv15H3SpzY6TkaJUNyWwmrMgOeqg" />
         <img id="img3" class="select" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRwghVoxgAowLC0-OZf0Y0opoSyKjZcoZ0vb8nSCktXJ38c5XNfnTlcgqDPoQ" />
         <img id="img4" class="select" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHgTjJOphdqoVqPMznXJignneEz-GoBAVUccYqbC_2hZZn77tU3Rp_SmAN" />

css

/***Made by Rockstar***/
body {
    background-color:  #333333;
}
.table-responsive{
    width: 98%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    border-radius: 5px;
    background-color:  white;
}
.portrait{
    width: 96%;
    height: auto;
    margin-bottom: 10px;
    border: 2px solid  black;
}.select{
    height: 50px;
    margin-bottom: 10px;
    cursor: hand;
}input[type=range]{
    width: 98%;
    margin-right: auto;
    margin-bottom: 10px;
}.dropdown{
    width: 30%;
    font-weight: bold;

//Made by Rockstar
alert("I made this app from what I learned of Amethyst Animion's lesson! It's very easy to learn! Thanks to you Amethyst!")
alert("Update: \n\n - [FIXED] Works properly with webkit devices and also with Mozilla browsers.")
alert("My first JQuery program after I reached Gold Status. :) If you encountered any problem from this program, just leave a comment and I'll fix it right away! And also I'm open for suggestions. :)")
alert("Tip: Try the forest image and adjust the Hue range. It's gorgeous to look!")
$(function() {
        //start of filtering function
        $('input[type=range]').on('input', function(){
            //get each filter range value
            var brightness = $('#brange').val();
            var contrast = $('#crange').val();
            var hue = $('#hrange').val();
            var sepia = $('#seprange').val(); 
            var grayscale = $('#grange').val(); 
            var saturation = $('#satrange').val(); 
            var opacity = $('#oprange').val();
            var blur = $('#blrange').val();
            var rotate = $('#rotrange').val();
            //setting filter value
            $('#bval').text(brightness+'%');
            $('#cval').text(contrast+'%');
            $('#hval').text(hue+'°');
            $('#sepval').text(sepia+'%');
            $('#gval').text(grayscale+'%');
            $('#satval').text(saturation+'%');
            $('#opval').text(opacity+'%');
            $('#blval').text(blur+'px');
            $('#rval').text(rotate+'°');

BROWSER

Console