neocities/views/dashboard.erb

<style>
  .dz-default {
    display: none;
  }
  .dz-preview {
    display: none;
  }
  .dz-processing {
    display: none;
  }
  .dz-error {
    display: none;
  }
  .dz-image-preview {
    display: none;
  }
</style>
<!--
<form action="/site_files/upload" class="dropzone" id="uploads">
  <input name="csrf_token" type="hidden" value="#{csrf_token}">
</form>


<div id="upload_status" style="font-size: 16pt"></div>
-->

<div class="header-Outro with-site-image">
  <div class="row content wide">

    <div class="col col-50 signup-Area" style="width: 289px;">
      <div class="signup-Form">
  	  <fieldset class="content">
        <img class="screenshot" src="<%= current_site.screenshot_url('index.html', '270x162') %>">
	    </fieldset>
      </div>
    </div>

	<div class="col col-50">
    <h2 class="eps"><%= current_site.title %></h2>
    <p class="site-url" style="margin-top: -9px;"><a href="//<%= current_site.host %>" target="_blank"><%= current_site.host %></a></p>
	<ul>
<% if current_site.updated_at %>
	<li>Last updated <%= current_site.updated_at.ago.downcase %></li>
<% end %>
	<li>Using <strong><%= current_site.space_percentage_used %>% (<%= current_site.used_space_in_megabytes %>MB) of your <%= current_site.maximum_space_in_megabytes %> MB</strong>. 
  <br>
  <% if !current_site.supporter? %>Need more space? <a href="/plan">Become a Supporter!</a><% end %></li>
	<li><strong><%= current_site.hits.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %></strong> hits</li>
	</ul>
	</div>

  </div> <!-- end .row -->
</div> <!-- end .header-Outro -->

<main class="content-Base">

<div class="content wide">

<% unless current_site.changed_count > 5 %>
<div class="welcome">
  <!-- <div class="close-button"></div> -->
  <h4>Hello! Welcome to your new site.</h4>
  To get started, click on the <strong>index.html</strong> file below to edit it. It's your home page! You can add more files (such as images) from your computer by dragging them into the box below. Need help building web sites? Check out these <a href="/tutorials">tutorials</a>!
</div>
<% end %>

  <% if @error %>
    <div class="alert alert-block alert-error">
      <p><%= @error %></p>
    </div>
  <% end %>

  <% if flash.keys.length > 0 %>
    <div class="alert alert-block">
      <p>
        <% flash.keys.each do |key| %>
          <%== flash[key] %>
        <% end %>
      </p>
    </div>
  <% end %>

<div class="files">
  <div id="uploadingOverlay" class="uploading-overlay" style="display: none">
    <div class="uploading">
        <p>Uploading, please wait...</p>
      <div id="progressBar" class="progress-bar" style="display: none"><div id="uploadingProgress" class="progress" style="width: 0%"></div></div>
    </div>
  </div>
  <div class="header">
    <div class="breadcrumbs">Home</div>
    <div class="actions">
      <a href="/site_files/new_page" class="btn-Action new-Page"><span>New Page</span></a>
      <a href="" class="btn-Action new-Folder"><span>New Folder</span></a>
      <a href="#" class="btn-Action upload" onclick="clickUploadFiles(); return false"><span>Upload</span></a>
    </div>
  </div>
  <div class="list">
    <form action="/site_files/upload" class="dropzone" id="uploads">
      <div class="dz-message" style="display: none"></div>
      <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
      <div class="upload-Boundary <%= current_site.file_list.length <= 5 ? 'with-instruction' : '' %>">
        <% current_site.file_list.each do |file| %>
          <div class="file filehover">
            <% if file.ext.match(Site::HTML_REGEX) && current_site.screenshot_exists?(file.filename, '105x63') %>
              <div class="html-thumbnail html fileimagehover">
                <img src="<%= current_site.screenshot_url(file.filename, '105x63') %>">
                <div class="overlay"></div>
              </div>
            <% elsif file.ext.match(Site::IMAGE_REGEX) && current_site.thumbnail_exists?(file.filename, '105x63') %>
              <div class="html-thumbnail image fileimagehover">
                <img src="<%= current_site.thumbnail_url(file.filename, '105x63') %>" style="">
                <div class="overlay"></div>
              </div>
            <!-- if folder
              <div class="html-thumbnail folder fileimagehover">
                <div class="folder-icon"></div>
                <div class="overlay"></div>
              </div> 
            -->
            <% else %>
              <div class="html-thumbnail misc fileimagehover">
                <div class="misc-icon"><%= file.ext %></div>
                <div class="overlay"></div>
              </div>
            <% end %>

            <a class="title">
              <% if file.filename.length > 14 %>
                <%= file.filename.slice(0..14) %>&hellip;
              <% else %>
                <%= file.filename %>
              <% end %>
            </a>
            <div class="overlay">
              <% if file.ext.match(/html|htm|txt|js|css|md/) %>
                <a href="/site_files/text_editor/<%= file.filename %>"><i class="icon-edit" title="Edit"> Edit</i></a>
              <% end %>
              <% if file.filename != 'index.html' %>
                <a href="#" onclick="confirmFileDelete('<%= file.filename %>')"><i class="icon-trash" title="Delete"> Delete</i></a>
              <% end %>
              <a class="link-overlay" href="http://<%= current_site.username %>.neocities.org/<%= file.filename %>" title="View <%= file.filename %>" target="_blank"></a>
            </div>
          </div>
        <% end %>
      </div>
    </form>
  </div>
</div>
      <form method="POST" action="/site_files/delete" id="deleteFilenameForm">
        <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
        <input type="hidden" id="deleteFilenameInput" name="filename">
      </form>

      <div class="modal hide fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
        <div class="modal-header">
          <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
          <h3 id="deleteConfirmModalLabel">Confirm deletion</h3>
        </div>
        <div class="modal-body">
          <p>You are about to delete the file <span id="deleteFileName"></span>. Are you sure?</p>
        </div>
        <div class="modal-footer">
          <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
          <button class="btn btn-danger" onclick="fileDelete()">Delete</button>
        </div>
      </div>

<div class="site-actions" style="margin-bottom:25px">
  <a href="/site_files/allowed_types">Allowed file types</a> |
  <a href="/site_files/<%= current_site.username %>.zip">Download entire site</a>
</div>

</div>
</main>

<form id="uploadFilesButtonForm" method="POST" action="/site_files/upload" enctype=multipart/form-data style="display: none" onsubmit="showUploadProgress()">
  <input name="csrf_token" type="hidden" value="<%= csrf_token %>">
  <input name="from_button" type="hidden" value="true">
  <input id="uploadFiles" type="file" name="files[]" multiple onchange="$('#uploadFilesButtonForm').submit()">
</form>

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

  function confirmFileDelete(name) {
    $('#deleteFileName').html(name);
    $('#deleteConfirmModal').modal();
  }

  function fileDelete() {
    $('#deleteFilenameInput').val($('#deleteFileName').html());
    $('#deleteFilenameForm').submit();
  }

  function clickUploadFiles() {
    $("input[id='uploadFiles']").click()
  }

  function showUploadProgress() {
    $('#uploadingOverlay').css('display', 'block')
  }

  function hideUploadProgress() {
    $('#progressBar').css('display', 'none')
    $('#uploadingOverlay').css('display', 'none')
  }

  Dropzone.options.uploads = {
    paramName: 'files',
    maxFilesize: <%= current_site.available_space_in_megabytes %>,
    clickable: false,
    addRemoveLinks: false,
    dictDefaultMessage: '',
    uploadMultiple: true,
    init: function() {
      this.on("successmultiple", function(file) {
        location.reload()
      })

      this.on("error", function(file, errorMessage) {
        hideUploadProgress()
        alert('Failed: '+errorMessage)
      })

      this.on("totaluploadprogress", function(progress, totalBytes, totalBytesSent) {
        showUploadProgress()
        $('#progressBar').css('display', 'block')
        $('#uploadingProgress').css('width', progress+'%')
      })
    }
  }
</script>