Untitled

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/froala_editor.css">
  <link rel="stylesheet" href="css/froala_style.css">
  <link rel="stylesheet" href="css/code_view.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">


  <style>
    body {
        font-family: 'Roboto', sans-serif;
        text-align: center;
    }

    hr{
        opacity: 0.4;
        margin-top: 25px;
}

#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 100px;
height: 100px;
margin: -75px 0 0 -75px;
border: 1px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #000000;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


      .sidenav {
        height: 100%;
        width: 200px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        color:white;
        background-color: #000000;
        overflow-x: hidden;
        padding-top: 25px;

    }

    .sidenav a, .dropdown-btn {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 14px;
        color: #ffffff;
        display: block;
        border: none;
        background: #000000;
        width: 100%;
        text-align: left;
        cursor: pointer;
        outline: none;
          line-height: 30px;
        -webkit-transition: 0.4s; /* Safari */
       transition: 0.4s;
    }

    .sidenav a:hover, .dropdown-btn:hover {
        color: #000000;
        background: #ffffff;

    }

    .main {
        margin-left: 200px;
        font-size: 20px;
        padding: 0px 10px;

        position: relative;
        -webkit-animation-name: animatebottom;
        -webkit-animation-duration: 1s;
        animation-name: animatebottom;
        animation-duration: 1s
        }

        @-webkit-keyframes animatebottom {
        from { bottom:-100px; opacity:0 }
        to { bottom:0px; opacity:1 }
        }

        @keyframes animatebottom {
        from{ bottom:-100px; opacity:0 }
        to{ bottom:0; opacity:1 }
        }

        #mainID{
    display: none;

        }


    .active {
        background-color: white;
        color: black;

    }

    .dropdown-container {
        display: none;
        background-color: #000000;
        padding-left: 16px;


    }

    .fa-plus{

        float: right;
        padding-right: 8px;
        padding-top: 8px;
    }

    /* Some media queries for responsiveness */
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }

    #buttonSave {
        display: block;
        border: none;
        font-size: 16px;

        padding: 10px;
        width: 25%;
        height:auto;
        text-align: center;
        color: white;
        background: linear-gradient(#000000,#2E2E2F);
        border-color: #1482d0;
        cursor: pointer;
        opacity: 1;
        transition: 0.3s;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
        margin-bottom: 50px;
        border-radius: 4px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        text-decoration: none;
    }
    #buttonSave:hover{
      background: linear-gradient(#51a9ee,#147bcd);
      border-color: #1482d0;
      width:35%;
}


.buttonAdd{

  display: block;
  border: none;
  font-size: 16px;

  padding: 10px;
  width: 20%;
  height:auto;
  text-align: center;
  color: white;
  background: linear-gradient(#51a9ee,#147bcd);
  border-color: #1482d0;
  cursor: pointer;
  opacity: 1;
  transition: 0.3s;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 50px;
  border-radius: 4px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
}

.buttonAdd:hover{
 opacity:0.5;
  width:23%;

}

.buttonReset{
  display: block;
  border: none;
  font-size: 10px;

  padding: 5px;
  width: 20%;
  height:auto;
  text-align: center;
  color: white;
  background: linear-gradient(#51a9ee,#147bcd);
  border-color: #1482d0;
  cursor: pointer;
  opacity: 1;
  transition: 0.3s;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  border-radius: 4px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;

}

.buttonReset:hover{
  opacity:0.5;
   width:23%;

}


    #projectTitle {
      width: 80%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;

      font-size:18px;

    }

    div#editor {
      padding-top: 20px;
      width: 80%;
      margin: auto;
      text-align: left;
      display: block;

    }

    div#category {
      font-size: 18px;
      line-height: 23px;
      padding-top: 20px;
      padding-bottom: 25px;
      width: 80%;
      margin: auto;
      text-align: left;
      display: block;

    }

.fr-box.fr-basic .fr-element {

    color: #000000;
    padding: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: scroll;
    height: 500px;
    font-size: 16px;

}

.fr-sticky-on {
    position: absolute;

}

.fr-sticky-off {
    position: relative;

}


.deleteAllimg{

  display: none;
}


          .mediaContainer{
          display: block;

          font-size: 18px;
          font-weight: bold;
          padding-top: 20px;
          line-height: 2em;
          width: 50%;
          margin: auto;
          text-align: center;

          margin-bottom: 100px;

          }


          img{
            display: block;
            max-width: 100%;
            padding-top: 25px;
            margin-left: auto;
            margin-right: auto;


          }


.CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber, .CodeMirror-scroll, .CodeMirror-sizer {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 500px;
}
.sidenav .active_link {

  background-color: white;
  color: black;


}

ul {
  margin-left: auto;
    list-style-type: none;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <script>
  $(document).ready(function(){
    $("#deleteImg").click(function(){
      $("img").remove();
      $("hr").remove();


    });
  });
  </script>

  <script>
  $(document).ready(function(){
      $("#flip").click(function(){
          $("#panel").slideToggle("slow");

      });
  });
  </script>
  <script>
  $(document).ready(function() {
      $("[href]").each(function() {
          if (this.href == window.location.href) {
              $(this).addClass("active_link");
          }
      });
  });
  </script>
  <script>
  var myVar;

  function myFunction() {
      myVar = setTimeout(showPage, 2000);
  }

  function showPage() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("mainID").style.display = "block";
  }
  </script>


    <script>

    var y=0;
    var img=0;
    var btnID = 0;
    var hr = 0;

  function addImage() {
      var n = y.toString();
      var imgNew = img.toString();
      var btn = btnID.toString();
      var hrLine = hr.toString();

      var x = document.createElement("INPUT");
          x.setAttribute('type', 'file');
          x.setAttribute('name', 'file');
          x.setAttribute('id',n);
          x.accept = "image/*";
          x.onchange = function onchange (event) {loadFile(event)};

      var buttonDelete = document.createElement("button");
          buttonDelete.setAttribute('type', 'reset');
          buttonDelete.setAttribute('name', 'delete');
          buttonDelete.setAttribute('value', 'reset');
          buttonDelete.setAttribute('class', 'buttonReset');
          buttonDelete.setAttribute('id','DeleteID'+btn);
          buttonDelete.innerHTML = "Delete Image";

      var imgCreate = document.createElement("IMG");

          imgCreate.setAttribute('id','idImage'+imgNew);
          y++;
          img++;
          btnID++;
          hr++;

  var hrBorder = document.createElement("hr");
  hrBorder.setAttribute('id','borderLine'+hrLine);
      var parent = document.getElementById("imageUploader");
          parent.appendChild(x);
          parent.appendChild(buttonDelete);
          parent.appendChild(imgCreate);
          parent.appendChild(hrBorder);


      var loadFile = function(event) {
      var yolo = document.getElementById('idImage'+imgNew);
      yolo.src = URL.createObjectURL(event.target.files[0]);

          }

          $(document).ready(function(){
              $("#"+ "DeleteID"+btn).click(function(){
              $("#"+n).detach();
              $("#"+"idImage"+imgNew).remove();
              $("#"+"DeleteID"+btn).remove();
              $("#"+"borderLine"+hrLine).remove();
            });
          });

        }
  </script>


</head>

<body onload="myFunction()">

<div id="loader"></div>

<div class="sidenav">


  <a href="home_cms">Home</a>
  <a href="cms_nodes">Nodes</a>
  <a href="cms_create_category">Categories</a>


  <button id="flip" class="dropdown-btn">Post Project
    <i class="	fa fa-plus"></i>
  </button>
  <div id="panel" class="dropdown-container">
    <a href="cms_single_text">Single Text</a>
    <a href="cms_double_text">Double Text</a>
    <a href="cms_text_media">Text & Media</a>
    <a href="cms_media">Media</a>
  </div>


    <a href="edit_post">Edit Project</a>
    <a href="addlink">Add a Link</a>
  <a href="#contact">About</a>
  <a href="#contact">Contact</a>
</div>


  <div class="main" id="mainID">

    <div id="category">

        <h1>Edit Text & Media</h1>
        <p>Edit content in English</p>

        <hr>

    </div>

    <div id="category">

         <h1>Sort Photos</h1>

    <hr>
    <a id="buttonSave"  href="http://localhost:8080/cmsrikou/sortphotos">Sort Photos</a>
    </div>


    <form action="multipleFileUpload" th:action="@{/edittextmedia}" th:object="${p}" method="post" enctype="multipart/form-data">

    <div id="category">

      <h1>Upload Images</h1>
      <p>Choose the desired images from your computer to upload</p>

      <hr>

  </div>

    <button class="buttonAdd" type="button" onclick="addImage()">Add Image</button>


    <div class="mediaContainer" id="imageUploader">


  </div>
   <div id="category">

      <h1>Choose photo(s) to delete</h1>


      <hr>


  <ul  class="sortPhotos" >

 <li th:each="ph : ${photos}"  name="name" th:value="${c}" >  <img    th:src="${'http://localhost:8080/cmsrikou/img/'+ ph}"  />
 <input type="checkbox" name="pphh" th:value="${ph}"    th:utext="${ph}"><br>
</li></ul>

<hr>

</div>

 <div id="category">

    <h1>Edit Text English</h1>
    <p>Edit content in English</p>


    <hr>
</div>


      <input id= 'projectTitle'  th:field="*{title}" style="margin-top: 30px;" placeholder="project Title" required>


  <div id="editor">


      <textarea id='edit'  th:field="*{text}" placeholder="Type some text">


      </textarea>

</div>


<div id="category">

  <h1>Edit Text Greek</h1>

    <p>Συμπληρώστε το περιεχόμενο στα ελληνικά</p>

    <hr>

</div>

<input id= 'projectTitle'  th:field="*{eltitle}" style="margin-top: 30px;" placeholder="Τίτλος" required>


  <div id="editor">


      <textarea id='edit2'  th:field="*{eltext}" placeholder="Κείμενο">

      </textarea>

    </div>


<input id="buttonSave" type="submit" value="Submit">
</form>


</div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="js/froala_editor.min.js"></script>

<script type="text/javascript" src="js/code_beautifier.min.js"></script>
<script type="text/javascript" src="js/code_view.min.js"></script>


  <script>
  $(function(){
    $('#edit')
      .on('froalaEditor.initialized', function (e, editor) {
        $('#edit').parents('form')
      })
      .froalaEditor({enter: $.FroalaEditor.ENTER_P, placeholderText: null})
  });

  $(function(){
    $('#edit2')
      .on('froalaEditor.initialized', function (e, editor) {
        $('#edit2').parents('form')
      })
      .froalaEditor({enter: $.FroalaEditor.ENTER_P, placeholderText: null})
  });


  </script>


</div>


</body>
</html>