From 915f64ae208bc7dc09710aac9a32dae8961d02a4 Mon Sep 17 00:00:00 2001
From: Chamuth Chamandana
Date: Tue, 27 Jun 2017 18:14:44 +0530
Subject: [PATCH 1/7] CSS3 Design upgrade
---
unzipper.php | 223 +++++++++++++++++++++++++++++++++++++++++----------
1 file changed, 182 insertions(+), 41 deletions(-)
diff --git a/unzipper.php b/unzipper.php
index f7a19b2..8aaf7fd 100644
--- a/unzipper.php
+++ b/unzipper.php
@@ -292,6 +292,23 @@ public static function zipDir($sourcePath, $outZipPath) {
body {
font-family: Arial, sans-serif;
line-height: 150%;
+ width:50%;
+ --main-primary-color:dodgerblue;
+ background-color:#eee;
+ }
+
+ .container
+ {
+ position:absolute;
+ left:50%;
+ top:50%;
+ transform:translateX(-50%) translateY(-50%);
+ }
+
+ .status .small
+ {
+ float:right;
+ margin-right:20px;
}
label {
@@ -301,8 +318,13 @@ public static function zipDir($sourcePath, $outZipPath) {
fieldset {
border: 0;
- background-color: #EEE;
- margin: 10px 0 10px 0;
+ background-color: #FFF;
+ margin: 10px 0 25px 0;
+ border-radius:10px;
+ padding:10px 20px;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+
+ transition:height 1s;
}
.select {
@@ -311,25 +333,45 @@ public static function zipDir($sourcePath, $outZipPath) {
}
.status {
- margin: 0;
- margin-bottom: 20px;
+ margin:0;
+ float:left;
padding: 10px;
font-size: 80%;
- background: #EEE;
- border: 1px dotted #DDD;
+ background: #FFF;
+ box-shadow: 0 -2px 1px var(--main-primary-color);
+
+ position:fixed;
+ z-index:100;
+ bottom:0;
+ left:0;
+
+ width:100%;
+
+ animation: statusAnimation 1s;
+ }
+
+ @keyframes statusAnimation
+ {
+ 0% { opacity: 0; transform:translateY(100%);}
+ 100% {opacity: 1; transform:translateY(0%);}
+ }
+
+ .status-text
+ {
+ font-weight:bold;
}
.status--ERROR {
background-color: red;
color: white;
- font-size: 120%;
+ font-size: 100%;
}
.status--SUCCESS {
- background-color: green;
+ background-color: var(--main-primary-color);
font-weight: bold;
color: white;
- font-size: 120%
+ font-size: 100%;
}
.small {
@@ -339,66 +381,165 @@ public static function zipDir($sourcePath, $outZipPath) {
.version {
font-size: 80%;
+ text-align:center;
+ margin-top:20px;
+ color:gray
}
.form-field {
border: 1px solid #AAA;
padding: 8px;
width: 280px;
- }
+ }
.info {
- margin-top: 0;
+ margin-top: 7px;
font-size: 80%;
color: #777;
}
.submit {
- background-color: #378de5;
+ background-color: var(--main-primary-color);
border: 0;
color: #ffffff;
font-size: 15px;
+ border-radius:5px;
padding: 10px 24px;
margin: 20px 0 20px 0;
text-decoration: none;
+ font-weight:bold;
+ border:solid 2px var(--main-primary-color);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
+ transition: background-color 1s, color 1s, box-shadow 1s;
}
.submit:hover {
- background-color: #2c6db2;
+ color: var(--main-primary-color);
+ background-color: #fff;
cursor: pointer;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+
+ transition: background-color 250ms, color 250ms, box-shadow 500ms
+ }
+
+ h1
+ {
+ margin-bottom:25px;
+ }
+
+ input[type="text"]:focus,
+ select:focus,
+ textarea:focus,
+ button:focus {
+ outline: none;
+ border-color:var(--main-primary-color);
+ border-width:1.5px;
+
+ transition: border 500ms;
+ }
+
+ input[type="text"],
+ select,
+ textarea
+ {
+
+ border-radius:5px;
+ margin-top:5px;
+ border-color:#AAA;
+ border-width:1.5px;
+ width: 100%;
+ box-sizing: border-box;
+ -webkit-box-sizing:border-box;
+ -moz-box-sizing: border-box;
+
+
+ transition: border 500ms;
+ }
+
+ h1
+ {
+ text-transform:uppercase;
+ font-size:15px;
+ color:var(--main-primary-color)
+ }
+
+
+ @media screen and (max-width:1000px)
+ {
+ .container
+ {
+ width:90%;
+ }
+
+ .status .small
+ {
+ display:none;
+ }
+ }
+
+ @media screen and (max-height:768px)
+ {
+ .status
+ {
+ position:fixed;
+ width:auto;
+ bottom:20px;
+ left:20px;
+ height:20px;
+ border-radius:10px;
+
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
+ animation: statusAnimation 1s;
+
+ border:solid 2px var(--main-primary-color);
+
+ transition: width 500ms;
+ }
+
+ .status .small
+ {
+ display:none;
+ }
+
+
}
-->
- Status:
- Processing Time: seconds
-
-
-Unzipper version:
+ Status:
+ Processing Time: = round($time, 5, PHP_ROUND_HALF_EVEN)?> seconds
+
+
+
+
+
Unzipper version:
+