API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 18th, 2018
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.63 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.  
  323.  
  324.             width: 100%;
  325.             padding-bottom: 5px;
  326.             padding-top:5px;
  327.           }
  328.  
  329.           .sortPhotos{
  330.             font-size: 18px;
  331.             line-height: 23px;
  332.             padding-top: 20px;
  333.             padding-bottom: 20px;
  334.             padding-left: 0px;
  335.  
  336.             width: 20%;
  337.             margin: auto;
  338.             margin-left: auto;
  339.             margin-right: auto;
  340.             text-align: left;
  341.             display: block;
  342.  
  343.           }
  344.  
  345.           ul {
  346.             margin-left: auto;
  347.               list-style-type: none;
  348.           }
  349.  
  350.  
  351. .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {
  352.     -moz-box-sizing: content-box;
  353.     box-sizing: content-box;
  354.     height: 500px;
  355. }
  356. .sidenav .active_link {
  357.  
  358.   background-color: white;
  359.   color: black;
  360.  
  361.  
  362. }
  363.  
  364.   </style>
  365.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  366.  
  367.  
  368.   <script>
  369.   $(document).ready(function(){
  370.     $("#deleteImg").click(function(){
  371.       $("img").remove();
  372.       $("hr").remove();
  373.  
  374.  
  375.  
  376.     });
  377.   });
  378.   </script>
  379.  
  380.   <script>
  381.   $(document).ready(function(){
  382.       $("#flip").click(function(){
  383.           $("#panel").slideToggle("slow");
  384.  
  385.       });
  386.   });
  387.   </script>
  388.   <script>
  389.   $(document).ready(function() {
  390.       $("[href]").each(function() {
  391.           if (this.href == window.location.href) {
  392.               $(this).addClass("active_link");
  393.           }
  394.       });
  395.   });
  396.   </script>
  397.   <script>
  398.   var myVar;
  399.  
  400.   function myFunction() {
  401.       myVar = setTimeout(showPage, 2000);
  402.   }
  403.  
  404.   function showPage() {
  405.     document.getElementById("loader").style.display = "none";
  406.     document.getElementById("mainID").style.display = "block";
  407.   }
  408.   </script>
  409.  
  410.  
  411.     <script>
  412.  
  413.     var y=0;
  414.     var img=0;
  415.     var btnID = 0;
  416.     var hr = 0;
  417.  
  418.   function addImage() {
  419.       var n = y.toString();
  420.       var imgNew = img.toString();
  421.       var btn = btnID.toString();
  422.       var hrLine = hr.toString();
  423.  
  424.       var x = document.createElement("INPUT");
  425.           x.setAttribute('type', 'file');
  426.           x.setAttribute('name', 'file');
  427.           x.setAttribute('id',n);
  428.           x.accept = "image/*";
  429.           x.onchange = function onchange (event) {loadFile(event)};
  430.  
  431.       var buttonDelete = document.createElement("button");
  432.           buttonDelete.setAttribute('type', 'reset');
  433.           buttonDelete.setAttribute('name', 'delete');
  434.           buttonDelete.setAttribute('value', 'reset');
  435.           buttonDelete.setAttribute('class', 'buttonReset');
  436.           buttonDelete.setAttribute('id','DeleteID'+btn);
  437.           buttonDelete.innerHTML = "Delete Image";
  438.  
  439.       var imgCreate = document.createElement("IMG");
  440.  
  441.           imgCreate.setAttribute('id','idImage'+imgNew);
  442.           y++;
  443.           img++;
  444.           btnID++;
  445.           hr++;
  446.  
  447.   var hrBorder = document.createElement("hr");
  448.   hrBorder.setAttribute('id','borderLine'+hrLine);
  449.       var parent = document.getElementById("imageUploader");
  450.           parent.appendChild(x);
  451.           parent.appendChild(buttonDelete);
  452.           parent.appendChild(imgCreate);
  453.           parent.appendChild(hrBorder);
  454.  
  455.  
  456.  
  457.       var loadFile = function(event) {
  458.       var yolo = document.getElementById('idImage'+imgNew);
  459.       yolo.src = URL.createObjectURL(event.target.files[0]);
  460.  
  461.           }
  462.  
  463.           $(document).ready(function(){
  464.               $("#"+ "DeleteID"+btn).click(function(){
  465.               $("#"+n).detach();
  466.               $("#"+"idImage"+imgNew).remove();
  467.               $("#"+"DeleteID"+btn).remove();
  468.               $("#"+"borderLine"+hrLine).remove();
  469.             });
  470.           });
  471.  
  472.         }
  473.   </script>
  474.  
  475.  
  476. </head>
  477.  
  478. <body onload="myFunction()">
  479.  
  480. <div id="loader"></div>
  481.  
  482. <div class="sidenav">
  483.  
  484.  
  485.   <a href="home_cms">Home</a>
  486.   <a href="cms_nodes">Nodes</a>
  487.   <a href="cms_create_category">Categories</a>
  488.  
  489.  
  490.   <button id="flip" class="dropdown-btn">Post Project
  491.     <i class="  fa fa-plus"></i>
  492.   </button>
  493.   <div id="panel" class="dropdown-container">
  494.     <a href="cms_single_text">Single Text</a>
  495.     <a href="cms_double_text">Double Text</a>
  496.     <a href="cms_text_media">Text & Media</a>
  497.    <a href="cms_media">Media</a>
  498.  </div>
  499.  
  500.  
  501.    <a href="edit_post">Edit Project</a>
  502.    <a href="addlink">Add a Link</a>
  503.  <a href="#contact">About</a>
  504.  <a href="#contact">Contact</a>
  505. </div>
  506.  
  507.  
  508.  
  509.  <div class="main" id="mainID">
  510.  
  511.    <div id="category">
  512.  
  513.        <h1>Edit Media</h1>
  514.        <p>Edit content in English & Greek </p>
  515.  
  516.        <hr>
  517.  
  518.    </div>
  519.  
  520.  
  521.  
  522.  <form action="multipleFileUpload" th:action="@{/editcmsmedia}" th:object="${p}" method="post" enctype="multipart/form-data">
  523.  
  524.    <input id= 'projectTitle' th:field="*{title}" style="margin-top: 30px;" placeholder="Project Title" required>
  525.     <input id= 'projectTitle' th:field="*{eltitle}" style="margin-top: 30px;" placeholder="Τίτλος του project" required>
  526.  
  527.     <div id="category">
  528.  
  529.       <h1>Upload Images</h1>
  530.       <p>Choose the desired images from your computer to upload</p>
  531.  
  532.       <hr>
  533.  
  534.   </div>
  535.  
  536.     <button class="buttonAdd" type="button" onclick="addImage()">Add Image</button>
  537.  
  538.  
  539.     <div class="mediaContainer" id="imageUploader">
  540.  
  541.  
  542.  
  543.  
  544.  
  545.  
  546.   </div>
  547.   <ul id="sortable" class="sortPhotos" >
  548.  
  549.  <li th:each="ph : ${photos}">  <img    th:src="${'http://localhost:8080/cmsrikou/img/'+ ph}"  />
  550.  
  551. </li></ul>
  552.  
  553.   <div id="category">
  554.  
  555.       <h1>Choose photo(s) to delete</h1>
  556.  
  557.  
  558.       <hr>
  559.  
  560.   <input th:each="c : ${photos}" type="checkbox" name="pphh" th:value="${c}"    th:utext="${c}"><br>
  561.  
  562. <hr>
  563. </div>
  564.  
  565. <input id="buttonSave" type="submit" value="Submit">
  566. </form>
  567.  
  568. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  569. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
  570. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
  571. <script type="text/javascript" src="js/froala_editor.min.js"></script>
  572.  
  573. <script type="text/javascript" src="js/code_beautifier.min.js"></script>
  574. <script type="text/javascript" src="js/code_view.min.js"></script>
  575.  
  576.  
  577.  
  578.  
  579.   <script>
  580.       $(function(){
  581.         $('#edit')
  582.           .on('froalaEditor.initialized', function (e, editor) {
  583.             $('#edit').parents('form')
  584.           })
  585.           .froalaEditor({enter: $.FroalaEditor.ENTER_P, placeholderText: null})
  586.  
  587.  
  588.       });
  589.  
  590.  
  591.   </script>
  592.  
  593.  
  594.  
  595. </div>
  596.  
  597.  
  598. <script type="text/javascript">
  599.  
  600.  
  601. function myAjax(){
  602.  var arr;
  603.  
  604.  $('#sortable li').each(function(index) {
  605.        arr=arr+"," + $(this).text();
  606.      });
  607.  
  608.  
  609. $.ajax({
  610.  type:"POST",
  611.    url : "http://localhost:8080/cmsrikou/sort_projects",
  612.    data : {
  613.        name: arr
  614.    },
  615.    success : function(response) {
  616.  
  617.       alert("Update succesfull!");
  618.    },
  619.    error : function(e) {
  620.       alert('Error: ' + e);
  621.    }
  622. });
  623. }
  624. </script>
  625.  
  626. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  627. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  628. <script>
  629. $( function() {
  630.   $( "#sortable" ).sortable();
  631.   $( "#sortable" ).disableSelection();
  632. });
  633. </script>
  634.  
  635.  
  636.  
  637.  
  638.  
  639.  
  640. </body>
  641. </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!