Utility reviews wanted

I have knocked up the following online utility that accepts URLs to a zip file, unzips and renders the content.

I would be grateful if users would:

  1. test by trying the URLs
  2. suggest a front-end skin
  3. report on any URLs that do not work

https://johns-jokes.com/downloads/sp-j/sp-unzip/

Try this URL to a zip file:

https://www.sitepoint.com/community/uploads/short-url/zKec4vpkZPljkx6lgkg0Fgflt0A.zip

1 Like

Added a modicum of styling…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html {
    height:100%;
    margin: 0;
    box-shadow: inset 0 0 2em rgba( 32, 32, 0, 0.4 )
 }

body {
    background-color: #ffc;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

h1, h2 {
    margin: 2em;
    font-size: 1.25em;
    color: #555;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
 }

form {
    max-width: 62.5em;
    padding: 2em;
    margin: auto;
    border: 1px solid #999;
    border-radius: 0.75em;
    box-sizing: border-box;
    background-color: #fffafa;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ), 
         0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
 }

form label, form input {
    display: block;
    font-size: 1em;
 }

form input[type="text"] {
    width: 100%;
    margin: 1em 0;
    border: 1px solid #999;
 }

form input[type="submit"] {
    padding:0.5em 1em;
 }
</style>

</head>
<body> 

 <h1>unzip zip file and display content</h1>

 <form action="?" method="post">
  <label for="w88">Please enter URL to Zip file</label>
  <input type="text" name="urlZipFile" id="w88">
  <input type="submit">
 </form>

 <h2>result:</h2>

</body>
</html>

coothead

2 Likes

@coothead
Many thanks for the new skin, it is far better than my klunky attempt :slight_smile:

I have replaced the Form’s Post with Gets in order to make it easier to post code example scripts into posts.

There are also numerous examples including audio and videos that amazingly all work on my iPad so should e OK on all mobiles… if not post links to the Zip file.

Edit:
One of eleven examples

Hi there John,

this…

html {
    height: 100%;
    margin: 0;
    box-shadow: inset 0 0 2em rgba( 32, 32, 0, 0.4 )
 }

…should really be…

html {
    min-height: 100%;
    margin: 0;
    box-shadow: inset 0 0 2em rgba( 32, 32, 0, 0.4 )
 }

coothead

1 Like

After considerable testing the basic utility has now been completely revised. As well as posting a zip file, links to the online unzipper can also be used when posting:

Examples:

Link to Zip file - will download zip to your computer

On line Download Zip to Unzip above content

  1. Use this online form and complete the details
  2. enter a name for the zip
  3. paste the link from the above zip into the form
  4. enter Submit Query

Results:

The zip file will e unzipped and the contents shown:

Unzipped content

Full Page

Necessity is the mother of invention and I can now view the Zipped contents using my tablet computer instead of having to wait until I am using a desktop :slight_smile:

1 Like