Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

[feature] better looking test result

  • Loading branch information...
commit df0f0951e9ddead02e2992ed0f1016565fc8d48d 1 parent 52104db
authored May 20, 2012

Showing 2 changed files with 370 additions and 6 deletions. Show diff stats Hide diff stats

  1. 360  style.css
  2. 16  test.php
360  style.css
... ...
@@ -0,0 +1,360 @@
  1
+
  2
+html {
  3
+  background: #6C7989;
  4
+  background: #6c7989 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6c7989), color-stop(100%, #434b55)) fixed;
  5
+  background: #6c7989 -webkit-linear-gradient(#6c7989, #434b55) fixed;
  6
+  background: #6c7989 -moz-linear-gradient(#6c7989, #434b55) fixed;
  7
+  background: #6c7989 -o-linear-gradient(#6c7989, #434b55) fixed;
  8
+  background: #6c7989 -ms-linear-gradient(#6c7989, #434b55) fixed;
  9
+  background: #6c7989 linear-gradient(#6c7989, #434b55) fixed;
  10
+}
  11
+
  12
+body {
  13
+  padding: 50px 0;
  14
+  margin: 0;
  15
+  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  16
+  color: #555;
  17
+  font-weight: 300;
  18
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy82LzEygrTcTAAAAFRJREFUSIljfPDggZRf5RIGGNjUHsNATz6jXmSL1Kb2GLiAX+USBnrymRgGGDCORgFmoNAXjEbBaBSMRsFoFIxGwWgUjEbBaBSMRsFoFIxGwWgUAABYNujumib3wAAAAABJRU5ErkJggg==") repeat fixed 0 0 transparent;
  19
+ }
  20
+  
  21
+.wrapper {
  22
+  width: 640px;
  23
+  margin: 0 auto;
  24
+  background: #DEDEDE;
  25
+  -webkit-border-radius: 8px;
  26
+  -moz-border-radius: 8px;
  27
+  -ms-border-radius: 8px;
  28
+  -o-border-radius: 8px;
  29
+  border-radius: 8px;
  30
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
  31
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
  32
+  box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
  33
+}
  34
+
  35
+header, section, footer {
  36
+  display: block;
  37
+}
  38
+
  39
+header {
  40
+  -webkit-border-radius: 8px 8px 0 0;
  41
+  -moz-border-radius: 8px 8px 0 0;
  42
+  -ms-border-radius: 8px 8px 0 0;
  43
+  -o-border-radius: 8px 8px 0 0;
  44
+  border-radius: 8px 8px 0 0;
  45
+  background: #C6EAFA;
  46
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ddfbfc), color-stop(100%, #c6eafa));
  47
+  background: -webkit-linear-gradient(#ddfbfc, #c6eafa);
  48
+  background: -moz-linear-gradient(#ddfbfc, #c6eafa);
  49
+  background: -o-linear-gradient(#ddfbfc, #c6eafa);
  50
+  background: -ms-linear-gradient(#ddfbfc, #c6eafa);
  51
+  background: linear-gradient(#ddfbfc, #c6eafa);
  52
+  position: relative;
  53
+  padding: 15px 20px;
  54
+  border-bottom: 1px solid #B2D2E1;
  55
+}
  56
+
  57
+
  58
+a {
  59
+  color: #069;
  60
+  text-decoration: none;
  61
+}
  62
+
  63
+p {
  64
+  margin: 0 0 20px;
  65
+  padding: 0;
  66
+}
  67
+
  68
+strong {
  69
+  color: #222;
  70
+  font-weight: 700;
  71
+}
  72
+
  73
+header h1 {
  74
+  margin: 0;
  75
+  padding: 0;
  76
+  font-size: 24px;
  77
+  line-height: 1.2;
  78
+  color: #069;
  79
+  text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
  80
+}
  81
+header.without-description h1 {
  82
+  margin: 10px 0;
  83
+}
  84
+header p {
  85
+  margin: 0;
  86
+  color: #61778B;
  87
+  width: 300px;
  88
+  font-size: 13px;
  89
+}
  90
+header p.view {
  91
+  display: none;
  92
+  font-weight: 700;
  93
+  text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
  94
+  -webkit-font-smoothing: antialiased;
  95
+}
  96
+header p.view a {
  97
+  color: #06c;
  98
+}
  99
+header p.view small {
  100
+  font-weight: 400;
  101
+}
  102
+header ul {
  103
+  margin: 0;
  104
+  padding: 0;
  105
+  list-style: none;
  106
+  position: absolute;
  107
+  z-index: 1;
  108
+  right: 20px;
  109
+  top: 20px;
  110
+  height: 38px;
  111
+  padding: 1px 0;
  112
+  background: #5198DF;
  113
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #77b9fb), color-stop(100%, #3782cd));
  114
+  background: -webkit-linear-gradient(#77b9fb, #3782cd);
  115
+  background: -moz-linear-gradient(#77b9fb, #3782cd);
  116
+  background: -o-linear-gradient(#77b9fb, #3782cd);
  117
+  background: -ms-linear-gradient(#77b9fb, #3782cd);
  118
+  background: linear-gradient(#77b9fb, #3782cd);
  119
+  border-radius: 5px;
  120
+  -webkit-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
  121
+  -moz-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
  122
+  box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
  123
+  width: auto;
  124
+}
  125
+header ul:before {
  126
+  content: '';
  127
+  position: absolute;
  128
+  z-index: -1;
  129
+  left: -5px;
  130
+  top: -4px;
  131
+  right: -5px;
  132
+  bottom: -6px;
  133
+  background: rgba(0, 0, 0, 0.1);
  134
+  -webkit-border-radius: 8px;
  135
+  -moz-border-radius: 8px;
  136
+  -ms-border-radius: 8px;
  137
+  -o-border-radius: 8px;
  138
+  border-radius: 8px;
  139
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
  140
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
  141
+  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
  142
+}
  143
+header ul li {
  144
+  width: 79px;
  145
+  float: left;
  146
+  border-right: 1px solid #3A7CBE;
  147
+  height: 38px;
  148
+}
  149
+header ul li.single {
  150
+  border: none;
  151
+}
  152
+header ul li + li {
  153
+  width: 78px;
  154
+  border-left: 1px solid #8BBEF3;
  155
+}
  156
+header ul li + li + li {
  157
+  border-right: none;
  158
+  width: 79px;
  159
+}
  160
+header ul a {
  161
+  line-height: 1;
  162
+  font-size: 11px;
  163
+  color: #fff;
  164
+  color: rgba(255, 255, 255, 0.8);
  165
+  display: block;
  166
+  text-align: center;
  167
+  font-weight: 400;
  168
+  padding-top: 6px;
  169
+  height: 40px;
  170
+  text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0;
  171
+}
  172
+header ul a strong {
  173
+  font-size: 14px;
  174
+  display: block;
  175
+  color: #fff;
  176
+  -webkit-font-smoothing: antialiased;
  177
+}
  178
+
  179
+section {
  180
+  padding: 15px 20px;
  181
+  font-size: 15px;
  182
+  border-top: 1px solid #fff;
  183
+  background: -webkit-gradient(linear, 50% 0%, 50% 700, color-stop(0%, #fafafa), color-stop(100%, #dedede));
  184
+  background: -webkit-linear-gradient(#fafafa, #dedede 700px);
  185
+  background: -moz-linear-gradient(#fafafa, #dedede 700px);
  186
+  background: -o-linear-gradient(#fafafa, #dedede 700px);
  187
+  background: -ms-linear-gradient(#fafafa, #dedede 700px);
  188
+  background: linear-gradient(#fafafa, #dedede 700px);
  189
+  -webkit-border-radius: 0 0 8px 8px;
  190
+  -moz-border-radius: 0 0 8px 8px;
  191
+  -ms-border-radius: 0 0 8px 8px;
  192
+  -o-border-radius: 0 0 8px 8px;
  193
+  border-radius: 0 0 8px 8px;
  194
+  position: relative;
  195
+}
  196
+
  197
+h1, h2, h3, h4, h5, h6 {
  198
+  color: #222;
  199
+  padding: 0;
  200
+  margin: 0 0 20px;
  201
+  line-height: 1.2;
  202
+}
  203
+
  204
+p, ul, ol, table, pre, dl {
  205
+  margin: 0 0 20px;
  206
+}
  207
+
  208
+h1, h2, h3 {
  209
+  line-height: 1.1;
  210
+}
  211
+
  212
+h1 {
  213
+  font-size: 28px;
  214
+}
  215
+
  216
+h2 {
  217
+  color: #393939;
  218
+}
  219
+
  220
+h3, h4, h5, h6 {
  221
+  color: #494949;
  222
+}
  223
+
  224
+blockquote {
  225
+  margin: 0 -20px 20px;
  226
+  padding: 15px 20px 1px 40px;
  227
+  font-style: italic;
  228
+  background: #ccc;
  229
+  background: rgba(0, 0, 0, 0.06);
  230
+  color: #222;
  231
+}
  232
+
  233
+img {
  234
+  max-width: 100%;
  235
+}
  236
+
  237
+code, pre {
  238
+  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
  239
+  color: #333;
  240
+  font-size: 12px;
  241
+  overflow-x: auto;
  242
+}
  243
+
  244
+pre {
  245
+  padding: 20px;
  246
+  background: #6C7989;
  247
+  color: #f8f8f2;
  248
+  margin: 0 -20px 20px;
  249
+}
  250
+pre code {
  251
+  color: #6C7989;
  252
+}
  253
+li pre {
  254
+  margin-left: -60px;
  255
+  padding-left: 60px;
  256
+}
  257
+
  258
+table {
  259
+  width: 100%;
  260
+  border-collapse: collapse;
  261
+}
  262
+
  263
+th, td {
  264
+  text-align: left;
  265
+  padding: 5px 10px;
  266
+  border-bottom: 1px solid #aaa;
  267
+}
  268
+
  269
+dt {
  270
+  color: #222;
  271
+  font-weight: 700;
  272
+}
  273
+
  274
+th {
  275
+  color: #222;
  276
+}
  277
+
  278
+small {
  279
+  font-size: 11px;
  280
+}
  281
+
  282
+hr {
  283
+  border: 0;
  284
+  background: #aaa;
  285
+  height: 1px;
  286
+  margin: 0 0 20px;
  287
+}
  288
+
  289
+footer {
  290
+  width: 640px;
  291
+  margin: 0 auto;
  292
+  padding: 20px 0 0;
  293
+  color: #ccc;
  294
+  overflow: hidden;
  295
+}
  296
+footer a {
  297
+  color: #fff;
  298
+  font-weight: bold;
  299
+}
  300
+footer p {
  301
+  float: left;
  302
+}
  303
+footer p + p {
  304
+  float: right;
  305
+}
  306
+
  307
+@media print, screen and (max-width: 740px) {
  308
+  body {
  309
+    padding: 0;
  310
+  }
  311
+
  312
+  .wrapper {
  313
+    -webkit-border-radius: 0;
  314
+    -moz-border-radius: 0;
  315
+    -ms-border-radius: 0;
  316
+    -o-border-radius: 0;
  317
+    border-radius: 0;
  318
+    -webkit-box-shadow: none;
  319
+    -moz-box-shadow: none;
  320
+    box-shadow: none;
  321
+    width: 100%;
  322
+  }
  323
+
  324
+  footer {
  325
+    -webkit-border-radius: 0;
  326
+    -moz-border-radius: 0;
  327
+    -ms-border-radius: 0;
  328
+    -o-border-radius: 0;
  329
+    border-radius: 0;
  330
+    padding: 20px;
  331
+    width: auto;
  332
+  }
  333
+  footer p {
  334
+    float: none;
  335
+    margin: 0;
  336
+  }
  337
+  footer p + p {
  338
+    float: none;
  339
+  }
  340
+}
  341
+@media print, screen and (max-width:580px) {
  342
+  header ul {
  343
+    display: none;
  344
+  }
  345
+
  346
+  header p.view {
  347
+    display: block;
  348
+  }
  349
+
  350
+  header p {
  351
+    width: 100%;
  352
+  }
  353
+}
  354
+
  355
+@media print {
  356
+  header p.view a small:before {
  357
+    content: 'at http://github.com/';
  358
+  }
  359
+}
  360
+
16  test.php 100644 → 100755
@@ -34,16 +34,20 @@
34 34
 mpv::$exec_php = mpv::EXEC_PHP;
35 35
 $mpv->validate('./test-file.zip');
36 36
 
37  
-if (HTML_HEADERS)
38  
-{
39  
-	print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
40  
-	<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
  37
+	print '<!DOCTYPE html>
41 38
 	<head>
42 39
 	<title>' . $lang['TITLE'] . '</title>
  40
+    <link rel="stylesheet" href="style.css">
43 41
 	</head>
44 42
 	<body>';
45  
-}
  43
+	print '<div class="wrapper">';	
  44
+	print '<header>';
  45
+	print '<h2>' . $lang['VALIDATION_RESULTS'] . "</h2></br></header>";
  46
+	print '<section>';
  47
+	print ((HTML_FORMAT) ? nl2br($mpv) : $mpv);
  48
+	print '</section>';
  49
+	print '</div>';	
  50
+	print '</body></html> ';
46 51
 
47  
-print $lang['VALIDATION_RESULTS'] . "\n\n" . ((HTML_FORMAT) ? nl2br($mpv) : $mpv);
48 52
 
49 53
 ?>

0 notes on commit df0f095

Please sign in to comment.
Something went wrong with that request. Please try again.