API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 18th, 2018
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
  6.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  7.   <link rel="stylesheet" href="css/froala_editor.css">
  8.   <link rel="stylesheet" href="css/froala_style.css">
  9.   <link rel="stylesheet" href="css/code_view.css">
  10.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
  11.   <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  12.  
  13.  
  14.  
  15.  
  16.   <style>
  17.     body {
  18.         font-family: 'Roboto', sans-serif;
  19.         text-align: center;
  20.     }
  21.  
  22.     hr{
  23.         opacity: 0.4;
  24.         margin-top: 25px;
  25. }
  26.  
  27. #loader {
  28. position: absolute;
  29. left: 50%;
  30. top: 50%;
  31. z-index: 1;
  32. width: 100px;
  33. height: 100px;
  34. margin: -75px 0 0 -75px;
  35. border: 1px solid #f3f3f3;
  36. border-radius: 50%;
  37. border-top: 2px solid #000000;
  38. width: 120px;
  39. height: 120px;
  40. -webkit-animation: spin 2s linear infinite;
  41. animation: spin 2s linear infinite;
  42. }
  43.  
  44. @-webkit-keyframes spin {
  45. 0% { -webkit-transform: rotate(0deg); }
  46. 100% { -webkit-transform: rotate(360deg); }
  47. }
  48.  
  49. @keyframes spin {
  50. 0% { transform: rotate(0deg); }
  51. 100% { transform: rotate(360deg); }
  52. }
  53.  
  54.  
  55.       .sidenav {
  56.         height: 100%;
  57.         width: 200px;
  58.         position: fixed;
  59.         z-index: 1;
  60.         top: 0;
  61.         left: 0;
  62.         color:white;
  63.         background-color: #000000;
  64.         overflow-x: hidden;
  65.         padding-top: 25px;
  66.  
  67.     }
  68.  
  69.     .sidenav a, .dropdown-btn {
  70.         padding: 6px 8px 6px 16px;
  71.         text-decoration: none;
  72.         font-size: 14px;
  73.         color: #ffffff;
  74.         display: block;
  75.         border: none;
  76.         background: #000000;
  77.         width: 100%;
  78.         text-align: left;
  79.         cursor: pointer;
  80.         outline: none;
  81.           line-height: 30px;
  82.         -webkit-transition: 0.4s; /* Safari */
  83.        transition: 0.4s;
  84.     }
  85.  
  86.     .sidenav a:hover, .dropdown-btn:hover {
  87.         color: #000000;
  88.         background: #ffffff;
  89.  
  90.     }
  91.  
  92.     .main {
  93.         margin-left: 200px;
  94.         font-size: 20px;
  95.         padding: 0px 10px;
  96.  
  97.         position: relative;
  98.         -webkit-animation-name: animatebottom;
  99.         -webkit-animation-duration: 1s;
  100.         animation-name: animatebottom;
  101.         animation-duration: 1s
  102.         }
  103.  
  104.         @-webkit-keyframes animatebottom {
  105.         from { bottom:-100px; opacity:0 }
  106.         to { bottom:0px; opacity:1 }
  107.         }
  108.  
  109.         @keyframes animatebottom {
  110.         from{ bottom:-100px; opacity:0 }
  111.         to{ bottom:0; opacity:1 }
  112.         }
  113.  
  114.         #mainID{
  115.     display: none;
  116.  
  117.         }
  118.  
  119.  
  120.     .active {
  121.         background-color: white;
  122.         color: black;
  123.  
  124.     }
  125.  
  126.     .dropdown-container {
  127.         display: none;
  128.         background-color: #000000;
  129.         padding-left: 16px;
  130.  
  131.  
  132.     }
  133.  
  134.     .fa-plus{
  135.  
  136.         float: right;
  137.         padding-right: 8px;
  138.         padding-top: 8px;
  139.     }
  140.  
  141.     /* Some media queries for responsiveness */
  142.     @media screen and (max-height: 450px) {
  143.         .sidenav {padding-top: 15px;}
  144.         .sidenav a {font-size: 18px;}
  145.     }
  146.  
  147.     #buttonSave {
  148.         display: block;
  149.         border: none;
  150.         font-size: 16px;
  151.  
  152.         padding: 10px;
  153.         width: 25%;
  154.         height:auto;
  155.         text-align: center;
  156.         color: white;
  157.         background: linear-gradient(#000000,#2E2E2F);
  158.         border-color: #1482d0;
  159.         cursor: pointer;
  160.         opacity: 1;
  161.         transition: 0.3s;
  162.         margin-left: auto;
  163.         margin-right: auto;
  164.         margin-top: 25px;
  165.         margin-bottom: 50px;
  166.         border-radius: 4px;
  167.         -webkit-transition-duration: 0.4s; /* Safari */
  168.         transition-duration: 0.4s;
  169.         text-decoration: none;
  170.     }
  171.     #buttonSave:hover{
  172.       background: linear-gradient(#51a9ee,#147bcd);
  173.       border-color: #1482d0;
  174.       width:35%;
  175. }
  176.  
  177.  
  178. .buttonAdd{
  179.  
  180.   display: block;
  181.   border: none;
  182.   font-size: 16px;
  183.  
  184.   padding: 10px;
  185.   width: 20%;
  186.   height:auto;
  187.   text-align: center;
  188.   color: white;
  189.   background: linear-gradient(#51a9ee,#147bcd);
  190.   border-color: #1482d0;
  191.   cursor: pointer;
  192.   opacity: 1;
  193.   transition: 0.3s;
  194.   margin-left: auto;
  195.   margin-right: auto;
  196.   margin-top: 25px;
  197.   margin-bottom: 50px;
  198.   border-radius: 4px;
  199.   -webkit-transition-duration: 0.4s; /* Safari */
  200.   transition-duration: 0.4s;
  201.   text-decoration: none;
  202. }
  203.  
  204. .buttonAdd:hover{
  205.  opacity:0.5;
  206.   width:23%;
  207.  
  208. }
  209.  
  210. .buttonReset{
  211.   display: block;
  212.   border: none;
  213.   font-size: 10px;
  214.  
  215.   padding: 5px;
  216.   width: 20%;
  217.   height:auto;
  218.   text-align: center;
  219.   color: white;
  220.   background: linear-gradient(#51a9ee,#147bcd);
  221.   border-color: #1482d0;
  222.   cursor: pointer;
  223.   opacity: 1;
  224.   transition: 0.3s;
  225.   margin-left: auto;
  226.   margin-right: auto;
  227.   margin-top: 25px;
  228.   margin-bottom: 25px;
  229.   border-radius: 4px;
  230.   -webkit-transition-duration: 0.4s; /* Safari */
  231.   transition-duration: 0.4s;
  232.   text-decoration: none;
  233.  
  234. }
  235.  
  236. .buttonReset:hover{
  237.   opacity:0.5;
  238.    width:23%;
  239.  
  240. }
  241.  
  242.  
  243.     #projectTitle {
  244.       width: 80%;
  245.       padding: 12px 20px;
  246.       margin: 8px 0;
  247.       box-sizing: border-box;
  248.  
  249.       font-size:18px;
  250.  
  251.     }
  252.  
  253.     div#editor {
  254.       padding-top: 20px;
  255.       width: 80%;
  256.       margin: auto;
  257.       text-align: left;
  258.       display: block;
  259.  
  260.     }
  261.  
  262.     div#category {
  263.       font-size: 18px;
  264.       line-height: 23px;
  265.       padding-top: 20px;
  266.       padding-bottom: 25px;
  267.       width: 80%;
  268.       margin: auto;
  269.       text-align: left;
  270.       display: block;
  271.  
  272.     }
  273.  
  274. .fr-box.fr-basic .fr-element {
  275.  
  276.     color: #000000;
  277.     padding: 16px;
  278.     -webkit-box-sizing: border-box;
  279.     -moz-box-sizing: border-box;
  280.     box-sizing: border-box;
  281.     overflow-x: scroll;
  282.     height: 500px;
  283.     font-size: 16px;
  284.  
  285. }
  286.  
  287. .fr-sticky-on {
  288.     position: absolute;
  289.  
  290. }
  291.  
  292. .fr-sticky-off {
  293.     position: relative;
  294.  
  295. }
  296.  
  297.  
  298. .deleteAllimg{
  299.  
  300.   display: none;
  301. }
  302.  
  303.  
  304.           .mediaContainer{
  305.           display: block;
  306.  
  307.           font-size: 18px;
  308.           font-weight: bold;
  309.           padding-top: 20px;
  310.           line-height: 2em;
  311.           width: 50%;
  312.           margin: auto;
  313.           text-align: center;
  314.  
  315.           margin-bottom: 100px;
  316.  
  317.           }
  318.  
  319.  
  320.           img{
  321.             display: block;
  322.             max-width: 100%;
  323.             padding-top: 25px;
  324.             margin-left: auto;
  325.             margin-right: auto;
  326.  
  327.  
  328.           }
  329.  
  330.  
  331. .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {
  332.     -moz-box-sizing: content-box;
  333.     box-sizing: content-box;
  334.     height: 500px;
  335. }
  336. .sidenav .active_link {
  337.  
  338.   background-color: white;
  339.   color: black;
  340.  
  341.  
  342. }
  343.  
  344.   </style>
  345.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  346.  
  347.  
  348.   <script>
  349.   $(document).ready(function(){
  350.     $("#deleteImg").click(function(){
  351.       $("img").remove();
  352.       $("hr").remove();
  353.  
  354.  
  355.  
  356.     });
  357.   });
  358.   </script>
  359.  
  360.   <script>
  361.   $(document).ready(function(){
  362.       $("#flip").click(function(){
  363.           $("#panel").slideToggle("slow");
  364.  
  365.       });
  366.   });
  367.   </script>
  368.   <script>
  369.   $(document).ready(function() {
  370.       $("[href]").each(function() {
  371.           if (this.href == window.location.href) {
  372.               $(this).addClass("active_link");
  373.           }
  374.       });
  375.   });
  376.   </script>
  377.   <script>
  378.   var myVar;
  379.  
  380.   function myFunction() {
  381.       myVar = setTimeout(showPage, 2000);
  382.   }
  383.  
  384.   function showPage() {
  385.     document.getElementById("loader").style.display = "none";
  386.     document.getElementById("mainID").style.display = "block";
  387.   }
  388.   </script>
  389.  
  390.  
  391.     <script>
  392.  
  393.     var y=0;
  394.     var img=0;
  395.     var btnID = 0;
  396.     var hr = 0;
  397.  
  398.   function addImage() {
  399.       var n = y.toString();
  400.       var imgNew = img.toString();
  401.       var btn = btnID.toString();
  402.       var hrLine = hr.toString();
  403.  
  404.       var x = document.createElement("INPUT");
  405.           x.setAttribute('type', 'file');
  406.           x.setAttribute('name', 'file');
  407.           x.setAttribute('id',n);
  408.           x.accept = "image/*";
  409.           x.onchange = function onchange (event) {loadFile(event)};
  410.  
  411.       var buttonDelete = document.createElement("button");
  412.           buttonDelete.setAttribute('type', 'reset');
  413.           buttonDelete.setAttribute('name', 'delete');
  414.           buttonDelete.setAttribute('value', 'reset');
  415.           buttonDelete.setAttribute('class', 'buttonReset');
  416.           buttonDelete.setAttribute('id','DeleteID'+btn);
  417.           buttonDelete.innerHTML = "Delete Image";
  418.  
  419.       var imgCreate = document.createElement("IMG");
  420.  
  421.           imgCreate.setAttribute('id','idImage'+imgNew);
  422.           y++;
  423.           img++;
  424.           btnID++;
  425.           hr++;
  426.  
  427.   var hrBorder = document.createElement("hr");
  428.   hrBorder.setAttribute('id','borderLine'+hrLine);
  429.       var parent = document.getElementById("imageUploader");
  430.           parent.appendChild(x);
  431.           parent.appendChild(buttonDelete);
  432.           parent.appendChild(imgCreate);
  433.           parent.appendChild(hrBorder);
  434.  
  435.  
  436.  
  437.       var loadFile = function(event) {
  438.       var yolo = document.getElementById('idImage'+imgNew);
  439.       yolo.src = URL.createObjectURL(event.target.files[0]);
  440.  
  441.           }
  442.  
  443.           $(document).ready(function(){
  444.               $("#"+ "DeleteID"+btn).click(function(){
  445.               $("#"+n).detach();
  446.               $("#"+"idImage"+imgNew).remove();
  447.               $("#"+"DeleteID"+btn).remove();
  448.               $("#"+"borderLine"+hrLine).remove();
  449.             });
  450.           });
  451.  
  452.         }
  453.   </script>
  454.  
  455.  
  456. </head>
  457.  
  458. <body onload="myFunction()">
  459.  
  460. <div id="loader"></div>
  461.  
  462. <div class="sidenav">
  463.  
  464.  
  465.   <a href="home_cms">Home</a>
  466.   <a href="cms_nodes">Nodes</a>
  467.   <a href="cms_create_category">Categories</a>
  468.  
  469.  
  470.   <button id="flip" class="dropdown-btn">Post Project
  471.     <i class="  fa fa-plus"></i>
  472.   </button>
  473.   <div id="panel" class="dropdown-container">
  474.     <a href="cms_single_text">Single Text</a>
  475.     <a href="cms_double_text">Double Text</a>
  476.     <a href="cms_text_media">Text & Media</a>
  477.    <a href="cms_media">Media</a>
  478.  </div>
  479.  
  480.  
  481.    <a href="edit_post">Edit Project</a>
  482.    <a href="addlink">Add a Link</a>
  483.  <a href="#contact">About</a>
  484.  <a href="#contact">Contact</a>
  485. </div>
  486.  
  487.  
  488.  
  489.  <div class="main" id="mainID">
  490.  
  491.    <div id="category">
  492.  
  493.        <h1>Edit Media</h1>
  494.        <p>Edit content in English & Greek </p>
  495.  
  496.        <hr>
  497.  
  498.    </div>
  499.  
  500.  
  501.  
  502.  <form action="multipleFileUpload" th:action="@{/editcmsmedia}" th:object="${p}" method="post" enctype="multipart/form-data">
  503.  
  504.    <input id= 'projectTitle' th:field="*{title}" style="margin-top: 30px;" placeholder="Project Title" required>
  505.     <input id= 'projectTitle' th:field="*{eltitle}" style="margin-top: 30px;" placeholder="Τίτλος του project" required>
  506.  
  507.     <div id="category">
  508.  
  509.       <h1>Upload Images</h1>
  510.       <p>Choose the desired images from your computer to upload</p>
  511.  
  512.       <hr>
  513.  
  514.   </div>
  515.  
  516.     <button class="buttonAdd" type="button" onclick="addImage()">Add Image</button>
  517.  
  518.  
  519.     <div class="mediaContainer" id="imageUploader">
  520.  
  521.  
  522.  
  523.  
  524.  
  525.  
  526.   </div>
  527.   <ul id="sortable" class="sortPhotos" >
  528.  
  529.  <li th:each="ph : ${photos}">  <img    th:src="${'http://localhost:8080/cmsrikou/img/'+ ph}"  />
  530.  
  531. </li></ul>
  532.  
  533.   <div id="category">
  534.  
  535.       <h1>Choose photo(s) to delete</h1>
  536.  
  537.  
  538.       <hr>
  539.  
  540.   <input th:each="c : ${photos}" type="checkbox" name="pphh" th:value="${c}"    th:utext="${c}"><br>
  541.  
  542. <hr>
  543. </div>
  544.  
  545. <input id="buttonSave" type="submit" value="Submit">
  546. </form>
  547.  
  548. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  549. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
  550. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
  551. <script type="text/javascript" src="js/froala_editor.min.js"></script>
  552.  
  553. <script type="text/javascript" src="js/code_beautifier.min.js"></script>
  554. <script type="text/javascript" src="js/code_view.min.js"></script>
  555.  
  556.  
  557.  
  558.  
  559.   <script>
  560.       $(function(){
  561.         $('#edit')
  562.           .on('froalaEditor.initialized', function (e, editor) {
  563.             $('#edit').parents('form')
  564.           })
  565.           .froalaEditor({enter: $.FroalaEditor.ENTER_P, placeholderText: null})
  566.  
  567.  
  568.       });
  569.  
  570.  
  571.   </script>
  572.  
  573.  
  574.  
  575. </div>
  576.  
  577.  
  578. <script type="text/javascript">
  579.  
  580.  
  581. function myAjax(){
  582.  var arr;
  583.  
  584.  $('#sortable li').each(function(index) {
  585.        arr=arr+"," + $(this).text();
  586.      });
  587.  
  588.  
  589. $.ajax({
  590.  type:"POST",
  591.    url : "http://localhost:8080/cmsrikou/sort_projects",
  592.    data : {
  593.        name: arr
  594.    },
  595.    success : function(response) {
  596.  
  597.       alert("Update succesfull!");
  598.    },
  599.    error : function(e) {
  600.       alert('Error: ' + e);
  601.    }
  602. });
  603. }
  604. </script>
  605.  
  606. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  607. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  608. <script>
  609. $( function() {
  610.   $( "#sortable" ).sortable();
  611.   $( "#sortable" ).disableSelection();
  612. });
  613. </script>
  614.  
  615.  
  616.  
  617.  
  618.  
  619.  
  620. </body>
  621. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!