HTML/CSS - Image Editor Online Editor and JavaScript Compiler

html

<!--
Hey, this is my mini image editor😋 
You can upload/edit pics.
To make easier the  editing of the images 👉you can DRAG THE IMAGES and the 👉DESIGN PANEL too.
I hope you'll like it😊
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
        <link href="https://fonts.googleapis.com/css?family=Lacquer|Indie+Flower|Allura|Butcherman|Courgette" rel="stylesheet">
    </head>
    <body>
    
    <div id="contents">

css

body {
  background:  rgb(242,246,248);
    margin: 0;
  padding: 0;
  border: 0
}
/*----------------------------------*/
/*----------------------------------*/
#menu2{
    margin:0;
    width:99%;  
   /* border-bottom: 2px solid black;
      border-top: 2px solid black;*/
    border:2px dotted  purple;
    height:auto;
    background-color:  white;
    top:0;
    box-shadow:20px 15px 22px  black; 
    color: black;
    font-size:12px;
    text-align:justify;
    border-radius:10%;
}
/*----------------------------*/
/*-----------------------------*/
/*TEXTBOX*/
#textbox{
    margin:20px;

alert("Hey, this is my mini image editor😋. You can upload/edit pics.\n\nYou can DRAG THE IMAGE and the DESIGN PANEL to make easier the editing.\n\nI hope you'll like it😊");
//------------------------------------
$(document).ready(function(){
$("#menu2 button").click(function(){
        $("#menu2 button").removeClass("active active2");
        $(this).addClass("active");
     });
$("#menu2 .box3 button").click(function(){
        $("#menu2 button").removeClass("active2 active");
        $(this).addClass("active2");
     });
//------------------------------------
//--------------------------------------
   $("img, #subdesign, #uplplace").draggable();
 //------------------------
//------------------------
//BORDEREK
$("#brd").click(function(){
    $("#img1, #uplplace").toggleClass("brd");
});
//--
var $brdGr = $("#uplplace, #img1");
 var selectedBorder;
 $(".box3 button").click(function(){
     $brdGr.removeClass(selectedBorder);
     selectedBorder=$(this).attr('id');
     $brdGr.addClass(selectedBorder);
 });

BROWSER

Console