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 dashboard">
  <div class="row content wide">
    <div class="col col-50 signup-Area">
      <div class="signup-Form">
  	  <fieldset class="content">
        <a href="<%= current_site.uri %>" class="screenshot dashboard" style="background-image:url(<%= current_site.screenshot_url('index.html', '540x405') %>);"></a>
	    </fieldset>
      </div>
    </div>

	<div class="col col-50">
    <h2 class="eps"><%= current_site.title %></h2>
    <p class="site-url">
      <a href="<%= current_site.uri %>" target="_blank"><%= current_site.host %></a>
      <a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site} %>'><i class="fa fa-share-alt"></i> <span>Share</span></a>
    </p>
	<ul>
<% if current_site.site_updated_at %>
	<li>Last updated <%= current_site.site_updated_at.ago.downcase %></li>
<% end %>
	<li>Using <strong><%= current_site.space_percentage_used %>% (<%= current_site.total_space_used.to_space_pretty %>) of your <%= current_site.maximum_space.to_space_pretty %></strong>.
  <br>
  <% unless current_site.is_education || current_site.supporter? %>Need more space? <a href="/supporter">Become a Supporter!</a><% end %></li>
	<li><strong><%= current_site.views.format_large_number %></strong> views</li>
	</ul>
	</div>

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

<main class="content-Base" role="main">

<div class="content wide">

<% unless current_site.changed_count >= 1 %>
<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 your home page. Once you make changes your website will begin appearing in our <a href="/browse">website gallery</a>. You can add more files (such as images) by dragging them from your computer into the box below. Need help building web sites? Try our <a href="/tutorial/html/">HTML tutorial</a>!
</div>
<% end %>

<%== flash_display %>

<div id="filesDisplay" class="files">
  <script>
    if(localStorage && localStorage.getItem('viewType') == 'list')
      $('#filesDisplay').addClass('list-view')
  </script>
  <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="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default iconview-button" title="Icon View" onclick="iconView()"><i class="fa fa-th"></i></button>
      <button type="button" class="btn btn-default listview-button" title="List View" onclick="listView()"><i class="fa fa-list"></i></button>
    </div>
    <div class="breadcrumbs">
      <% if params[:dir].nil? || params[:dir].empty? || params[:dir] == '/' %>
        Home
      <% else %>
        <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> <i class="fa fa-angle-right"></i>
          <% else %>
            <%= dir %>
          <% end %>
        <% end %>
      <% end %>
    </div>
    <div class="actions">
      <a href="#createFile" class="btn-Action" data-toggle="modal"><i class="fa fa-file"></i> New File</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-arrow-circle-up"></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 %>">
      <input name="dir" type="hidden" value="<%= @dir %>">
      <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') %>" alt="">
                <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') %>" alt="">
                <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">
              <%= file[:name] %>
            </a>
            <div class="column size">
              <% if file[:size] %>
                <%= file[:size].to_bytes_pretty %>
              <% end %>
            </div>
            <div class="column updated">
              <% if file[:updated_at] %>
                <%= file[:updated_at].ago %>
              <% end %>
            </div>

            <div class="overlay">
              <div id="<%= Digest::SHA256.hexdigest file[:path] %>" style="display: none"><%= file[:path] %></div>
              <% if file[:is_editable] %>
                <a href="/site_files/text_editor<%= file[:path] %>"><i class="fa fa-edit" title="Edit"></i> Edit</a>
              <% end %>
              <% if file[:is_directory] %>
                <a href="?dir=<%= Rack::Utils.escape file[:path] %>"><i class="fa fa-edit" title="Manage"></i> Manage</a>
              <% end %>
              <% if !file[:is_root_index] %>
                <a href="#" onclick="confirmFileDelete($('#<%= Digest::SHA256.hexdigest file[:path] %>').text())"><i class="fa fa-trash" title="Delete"></i> Delete</a>
              <% end %>
              <% if file[:is_directory] %>
              <a class="link-overlay" href="?dir=<%= Rack::Utils.escape file[:path] %>" title="View <%= file[:path] %>"></a>
              <% else %>
              <a class="link-overlay" href="https://<%= current_site.username %>.neocities.org<%= file[:path] == '/index.html' ? '/' : file[:path] %>" title="View <%= file[:path] == '/index.html' ? 'your site' : file[:path] %>" target="_blank"></a>
              <% end %>
            </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"><i class="fa fa-times"></i></button>
          <h3 id="deleteConfirmModalLabel">Confirm deletion</h3>
        </div>
        <div class="modal-body">
          <p>You are about to delete <strong><span id="deleteFileName"></span></strong>. Are you sure?</p>
        </div>
        <div class="modal-footer">
          <button class="btn cancel" data-dismiss="modal" aria-hidden="true" type="button">Cancel</button>
          <button class="btn-Action btn-danger" type="button" onclick="fileDelete()"><i class="fa fa-trash" title="Delete"></i>Delete</button>
        </div>
      </div>

<div class="site-actions" style="margin-bottom:25px">
  <% if !current_site.plan_feature(:no_file_restrictions) %>
    <a href="/site_files/allowed_types">Allowed file types</a> |
  <% end %>
    <% unless current_site.too_big_to_download? %>
      <a href="/site_files/<%= current_site.username %>.zip">Download entire site</a> |
    <% end %>
  <% unless is_education? %>
    <a href="/site_files/mount_info">Mount your site as a drive on your computer</a>
  <% end %>
</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>


<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"><i class="fa fa-times"></i></button>
      <h3 id="createDirLabel">Create Folder</h3>
    </div>
    <div class="modal-body">
      <input id="newDirInput" name="name" type="text" placeholder="folder_name">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
      <button type="submit" class="btn-Action">Create</button>
    </div>
  </form>
</div>

<div class="modal hide fade" id="createFile" tabindex="-1" role="dialog" aria-labelledby="createFileLabel" aria-hidden="true">
  <form method="post" action="/site_files/create">
    <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"><i class="fa fa-times"></i></button>
      <h3 id="createFileLabel">Create New File</h3>
    </div>
    <div class="modal-body">
      <input id="newFileInput" name="filename" type="text" placeholder="newfile.html">
      <p>Note: We will automatically scrub any characters not matching: a-z A-Z 0-9 _ - .</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn cancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
      <button type="submit" class="btn-Action">Create</button>
    </div>
  </form>
</div>

<script src="/js/dropzone.min.js"></script>
<script>

  function confirmFileDelete(name) {
    $('#deleteFileName').text(name.replace('/',''));
    $('#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')
  }

  allUploadsComplete = false

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

      this.on("error", function(file, errorMessage) {
        hideUploadProgress()
        // Guess a directory upload error
        if(file.status == 'error' && file.name.match(/.+\..+/) == null && errorMessage == 'Server responded with 0 code.') {
          alert('Recursive directory upload is only supported by the Chrome web browser.')
        } else {
          location.href = '/dashboard<%= @dir ? "?dir=#{Rack::Utils.escape @dir}" : "" %>'
        }
      })

      this.on("totaluploadprogress", function(progress, totalBytes, totalBytesSent) {
        if(progress == 100)
          allUploadsComplete = true

        showUploadProgress()
        $('#progressBar').css('display', 'block')
        $('#uploadingProgress').css('width', progress+'%')
      })

      this.on("sending", function(file) {
        $('#uploads').append('<input type="hidden" name="file_paths[]" value="'+file.fullPath+'">')
      })
    }
  }

  $('#createDir').on('shown', function () {
    $('#newDirInput').focus();
  })

  $('#createFile').on('shown', function () {
    $('#newFileInput').focus();
  })

  function listView() {
    if(localStorage)
      localStorage.setItem('viewType', 'list')

    $('#filesDisplay').addClass('list-view')
  }

  function iconView() {
    if(localStorage)
      localStorage.removeItem('viewType')

    $('#filesDisplay').removeClass('list-view')
  }
</script>