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>

<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', '540x405') %>">
	    </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">
      <% if params[:dir].nil? || params[:dir].empty? || params[:dir] == '/' %>
        Home
      <% else %>
        <% puts params[:dir].inspect %>
        <a href="/dashboard">Home</a>
      <% end %>

      <% if @dir %>
        <% dir_array = @dir.split '/' %>
        <% dir_array.each_with_index do |dir,i| %>
          <% if i+1 < dir_array.length %>
            <a href="/dashboard?dir=<%= Rack::Utils.escape dir %>"><%= dir %></a> / 
          <% else %>
            <%= dir %>
          <% end %>
        <% end %>
      <% end %>
    </div>
    <div class="actions">
      <a href="/site_files/new_page" class="btn-Action"><i class="fa fa-file"></i>  New Page</a>
      <a href="#createDir" class="btn-Action" data-toggle="modal"><i class="fa fa-folder"></i> New Folder</a>
      <a href="#" class="btn-Action" onclick="clickUploadFiles(); return false"><i class="fa fa-upload"></i> Upload</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 <%= @file_list.length <= 5 ? 'with-instruction' : '' %>">
        <% @file_list.each do |file| %>
          <div class="file filehover">
            <% if file[:is_html] && current_site.screenshot_exists?(file[:path], '210x158') %>
              <div class="html-thumbnail html fileimagehover">
                <img src="<%= current_site.screenshot_url(file[:path], '210x158') %>">
                <div class="overlay"></div>
              </div>
            <% elsif file[:is_image] && current_site.thumbnail_exists?(file[:path], '210x158') %>
              <div class="html-thumbnail image fileimagehover">
                <img src="<%= current_site.thumbnail_url(file[:path], '210x158') %>">
                <div class="overlay"></div>
              </div>
            <% elsif file[:is_directory] %>
              <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[:name].length > 19 %>
                <%= file[:name].slice(0..18) %>&hellip;
              <% else %>
                <%= file[:name] %>
              <% end %>
            </a>
            <div class="overlay">
              <% if file[:is_editable] %>
                <a href="/site_files/text_editor<%= file[:path] %>"><i class="fa fa-edit" title="Edit"> Edit</i></a>
              <% end %>
              <% if file[:is_directory] %>
                <a href="?dir=<%= Rack::Utils.escape file[:path] %>"><i class="fa fa-edit" title="Manage"> Manage</i></a>
              <% end %>
              <% if !file[:is_root_index] %>
                <a href="#" onclick="confirmFileDelete('<%= file[:path] %>')"><i class="fa fa-trash" title="Delete"> Delete</i></a>
              <% end %>
              <a class="link-overlay" href="http://<%= current_site.username %>.neocities.org<%= file[:path] %>" title="View <%= file[:path] %>" 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 "<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> |
  <a href="/site_files/mount_info">Mount your site as a drive on your computer!</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 name="dir" type="hidden" value="<%= @dir %>">
  <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>

<div class="modal hide fade" id="createDir" tabindex="-1" role="dialog" aria-labelledby="createDirLabel" aria-hidden="true">
  <form method="POST" action="/site/create_directory">
    <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
    <input type="hidden" value="<%= @dir %>" name="dir">
    <div class="modal-header">
      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
      <h3 id="createDirLabel">Create Folder</h3>
    </div>
    <div class="modal-body">
      <p>
        Folder name:
      </p>
      <input name="name" type="text" placeholder="images">
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-Action">Create</button>
      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    </div>
  </form>
</div>