[WIP] Add new feature and styling to the plugin

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

---

This section details on the original issue you should resolve

<issue_title>New feature and styling the plugin</issue_title>
<issue_description>Hello
First of all, I'm not a developer. So, sorry if this is not the right way to make a proposal. Moreover, it's in all humility that I propose this code which must be pretty dirty, I know. If it can help, I would be happy.

I had created a while ago a piece of script that I put in src/static/skins/colibris/index.js because this file is dedicated to custom script.

The idea was to have the list of my organization's pads with a button to remove the pad on the fly. I don't have any security concerns with the API key visible because the instance is under authentication but I already know it's not a good practice (and that's why the adminpads plugin exists I guess).

$( document ).ready(function() {
        var homepage = window.location.href;
        $.getJSON( homepage + "api/1.2.1/listAllPads?apikey=my-api-key-here", function( donnees ) {
            var items = [];
            $.each( donnees.data.padIDs, function( key, val ) {
            items.push( "<li><a href='" + homepage + "p/"+ val +"'>"+val+"</a><a href='#' data-link='" + homepage + "/api/1/deletePad?apikey=my-api-key-here&padID=" + val +"' class='confirmation'><i class='fa fa-trash remove'></i></a></li>" );
            });
            $('#list').append( items );
        }).done(function(){
            $('.confirmation').on('click', function () {
                if (confirm('Are you sure you want to remove this pad ?')){
                    var pad = $(this);
                    var padli = pad.parent("li");
                        console.log(padli);
                    $.ajax({
                        url: pad.data("link"),
                        dataType : 'json',
                        success: function() {
                            padli.fadeOut(600, function(){
                                padli.remove();
                            })
                        }
                    })
                }
            });
        });
    });

I added this in src/templates/index.html, just after the #inner div, to make it display on the home page:

<div class="pads">
    <div class="buttonlist">All pads</div>
    <div id="list"></div>
</div>

And the css is in src/static/skins/colibris/index.css:

#list {
  list-style-type: none;
  margin-top: 5px;
  -webkit-column-count: 4; -webkit-column-gap:20px;
  -moz-column-count:4; -moz-column-gap:20px;
  -o-column-count:4; -o-column-gap:20px;
  column-count:4; column-gap:20px;
}
.buttonlist {
  color:#64d29b;
  font-size: 23px;
  line-height: 1.8;
  text-align: center;
  vertical-align: middle;
  margin-top:-10px;
}
.pads{
  width:90%;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-right:auto;
  margin-left:auto;
  padding: 15px;
  border-radius: 3px;
  background: #586a69 !important;
  background: -webkit-linear-gradient(#fff,#ccc);
  background: -moz-linear-gradient(#fff,#ccc);
  background: -ms-linear-gradient(#fff,#ccc);
  background: -o-linear-gradient(#fff,#ccc);
  box-shadow: 0px 1px 8px rgba(0,0,0,0.3);
}
.pads a {
  text-decoration:none;
  color: white; 
  opacity: 0.8;
}
.fa {
  margin-left: 10px;
  color: #64d29b;
  opacity: 0.9;
}
li {
  min-width:100px;
  width: 300px;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

Anyway, I have no idea if it's clean or not. The idea was simply to share it to make this plugin more integrated with the new Etherpad style.
I don't have the skills to make a pull request and modify this plugin.

</issue_description>

Comments on the Issue (you are @copilot in this section)

@JohnMcLear I think you do have the skills! The pull request is much easier than writing the code you have written. Well done for trying , it's a good start.