static JS instead of insanely unnecessary PHP

2026-01-14 09:12:54 -05:00 · 2018-03-25 11:32:49 -04:00
parent 50f2aad8d1
commit 0e45ed48bb
5 changed files with 237 additions and 90 deletions
--- a/awesome.css
+++ b/awesome.css
@@ -1,17 +1,24 @@
 html, body {
-  margin: 0px;
+  display: table;
  font-size: 4.5em;
  font-family: 'Open Sans', sans-serif;
+  width: 100%;
  height: 100%;
  /*background-color: #414ef8;*/
  background-color: #94d500;
  color: #fff;
-  /* disable text highlight */
-  -moz-user-select: none;
-  -webkit-user-select: none;
  cursor: default;
 }

+div#container {
+  display: table-cell;
+  vertical-align: middle;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
@media (min-width: 0px) {
    html { font-size: 50%; }
 }
@@ -32,18 +39,11 @@ html, body {
    html { font-size: 200%; }
 }

-table, tr, td {
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  vertical-align: middle;
-}
-
 div#footer {
  position: absolute;
  bottom: 0;
  right: 0;
-  font-size: 13px;
+  font-size: 14px;
  margin: 12px;
 }

@@ -52,16 +52,13 @@ div#footer a {
  color: #ffffff;
 }

-/*div#ad {
-  position: absolute;
-  bottom: 0;
-  text-align: center;
-  margin: 0px auto;
-  float: left;
-  border: 4px solid #000;
-  width: 468px;
-  height: 60px;
-  font-size: 10px;
-  left: 0;
-  right: 0;
-}*/
+div#footer span {
+  vertical-align: middle;
+}
+
+div#footer img {
+  height: 20px;
+  width: 20px;
+  vertical-align: middle;
+  margin-right: 6px;
+}
--- a/awesome.js
+++ b/awesome.js
@@ -0,0 +1,7 @@
+jQuery(document).ready(function($) {
+  $.get('synonyms.txt', function(data) {
+    var synonyms = data.split("\n");
+    var line = Math.floor(synonyms.length * Math.random());
+    $('span#synonym').html(synonyms[line]);
+  });
+});
--- a/index.html
+++ b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>synonyms for awesome</title>
+
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:600">
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="awesome.css">
+
+    <link rel="shortcut icon" href="favicon.ico">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+    <script src="awesome.js"></script>
+  </head>
+  <body>
+    <div id="container">
+      <span id="synonym"></span>
+    </div>
+    <div id="footer">
+      <a href="https://scrabble.io" target="_blank" rel="noopener noreferrer nofollow"><img src="s.png"><span>made with &hearts; by scrabble</span></a>
+    </div>
+    <script>
+      window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
+      ga('create','UA-1563964-40','auto');
+      ga('send','pageview')
+    </script>
+    <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+  </body>
+</html>
--- a/index.php
+++ b/index.php
@@ -1,65 +0,0 @@
-<?php
-
-
-?>
-
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>synonyms for awesome</title>
-  
-  <link href="/style.css" rel="stylesheet">
-  
-  <link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
-</head>
-<body>
-
-<?php
-
-  $synonyms = array();
-  
-  $fh = fopen('synonyms.txt','r');
-  while ($line = fgets($fh)) {
-    $synonyms[] = $line;
-  }
-  fclose($fh);
-  
-  $synonym = $synonyms[rand(0, count($synonyms) - 1)];
-
-?>
-
-<table><tr><td><?= $synonym ?></td></tr></table> <!-- don't judge me -->
-
-<div id="footer">
-  <a href="http://scrabble.io" target="_blank">made with &hearts; by scrabble</a>
-</div>
-
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
-  ga('create', 'UA-1563964-40', 'auto');
-  ga('send', 'pageview');
-
-</script>
-
-<script type="text/javascript">
-  var _gauges = _gauges || [];
-  (function() {
-    var t   = document.createElement('script');
-    t.type  = 'text/javascript';
-    t.async = true;
-    t.id    = 'gauges-tracker';
-    t.setAttribute('data-site-id', '53ae2eb3eddd5b026800db71');
-    t.src = '//secure.gaug.es/track.js';
-    var s = document.getElementsByTagName('script')[0];
-    s.parentNode.insertBefore(t, s);
-  })();
-</script>
-
-</body>
-</html>
--- a/normalize.css
+++ b/normalize.css
@@ -0,0 +1,177 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+html {
+line-height: 1.15;
+-webkit-text-size-adjust: 100%;
+}
+
+body {
+margin: 0;
+}
+
+h1 {
+font-size: 2em;
+margin: .67em 0;
+}
+
+hr {
+box-sizing: content-box;
+height: 0;
+overflow: visible;
+}
+
+pre {
+font-family: monospace, monospace;
+font-size: 1em;
+}
+
+a {
+background-color: transparent;
+}
+
+abbr[title] {
+border-bottom: 0;
+text-decoration: underline;
+text-decoration: underline dotted;
+}
+
+b,
+strong {
+font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+font-family: monospace, monospace;
+font-size: 1em;
+}
+
+small {
+font-size: 80%;
+}
+
+sub,
+sup {
+font-size: 75%;
+line-height: 0;
+position: relative;
+vertical-align: baseline;
+}
+
+sub {
+bottom: -0.25em;
+}
+
+sup {
+top: -0.5em;
+}
+
+img {
+border-style: none;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+font-family: inherit;
+font-size: 100%;
+line-height: 1.15;
+margin: 0;
+}
+
+button,
+input {
+overflow: visible;
+}
+
+button,
+select {
+text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+-webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+border-style: none;
+padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+outline: 1px dotted ButtonText;
+}
+
+fieldset {
+padding: .35em .75em .625em;
+}
+
+legend {
+box-sizing: border-box;
+color: inherit;
+display: table;
+max-width: 100%;
+padding: 0;
+white-space: normal;
+}
+
+progress {
+vertical-align: baseline;
+}
+
+textarea {
+overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+box-sizing: border-box;
+padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+height: auto;
+}
+
+[type="search"] {
+-webkit-appearance: textfield;
+outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+-webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+-webkit-appearance: button;
+font: inherit;
+}
+
+details {
+display: block;
+}
+
+summary {
+display: list-item;
+}
+
+template {
+display: none;
+}
+
+[hidden] {
+display: none;
+}