Added links to DigitalOcean.

README.md

@@ -6,3 +6,9 @@ Speed Test for DigitalOcean
 Run speed tests for all DigitalOcean datacenters faster than ever.
 
 [http://speedtest-do.marcomontalbano.com](http://speedtest-do.marcomontalbano.com)
+
+![Speedtest for DigitalOcean - Screenshot](public/images/speedtest-for-digitalocean-screenshot-without-header.jpg)
+
+## Need an account for DigitalOcean?
+
+Click [here](https://m.do.co/c/45b8cffe90f8) to register a new one!

public/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#438eff">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%//apple-touch-icon.png">
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
     <title>Speed Test for DigitalOcean</title>
     <meta name="description" content="Run speed tests for all DigitalOcean datacenters faster than ever.">
@@ -34,7 +34,7 @@
 
     <header class="dbr-hero-header uk-block uk-block-large uk-cover-background uk-flex uk-flex-middle uk-contrast">
       <a class="github-link" rel="noopener noreferrer" target="_blank" href="https://github.com/marcomontalbano/speedtest-for-digitalocean">
-        <img src="%PUBLIC_URL%/github-logo.svg" alt="GitHub logo" />
+        <img src="%PUBLIC_URL%/images/github-logo.svg" alt="GitHub logo" />
       </a>
       <div class="uk-container uk-container-center">
         <section class="uk-grid uk-grid-match">
@@ -53,6 +53,10 @@ <h3>Run speed tests for all DigitalOcean datacenters faster than ever.</h3>
                   </i>
                 </small>
               </p>
+              <p class="do-account">
+                <span>need an account?</span>
+                <a href="https://m.do.co/c/45b8cffe90f8" target="_blank"><img src="%PUBLIC_URL%/images/DO_Logo_Horizontal_White.png"></a>
+              </p>
             </div>
           </div>
         </section>

src/app/components/Spinner.css

@@ -15,7 +15,7 @@
 .sk-three-bounce .sk-child {
   width: 6px;
   height: 6px;
-  background-color: #1e87f1;
+  background-color: #0080FF;
   margin-right: 3px;
   border-radius: 100%;
   display: inline-block;

src/index.css

@@ -1,9 +1,30 @@
+/*** GLOBAL ***/
+
+body {
+  font-weight: 300;
+  font-size: 16px;
+}
+
 #speedcheckerdiv {
-  /*display: none;*/
   visibility: hidden;
   height: 0;
   overflow: hidden;
 }
+
+.uk-button-primary {
+  background-color: #0080FF;
+}
+.uk-radio:checked, .uk-checkbox:checked, .uk-checkbox:indeterminate {
+  background-color: #0080FF;
+}
+.uk-radio:focus, .uk-checkbox:focus {
+  border-color: #0080FF;
+}
+.uk-radio:disabled, .uk-checkbox:disabled {
+  background-color: #f8f8f8;
+  border-color: #e5e5e5;
+}
+
 a {
   transition: color .3s, border .3s;
   border-bottom: 1px solid transparent;
@@ -12,6 +33,65 @@ a:hover {
   text-decoration: none;
   border-bottom: 1px solid;
 }
+
+.do-account {
+  margin-top: 30px;
+}
+.do-account span, .do-account img {
+  width: 220px;
+}
+.do-account a, .do-account a:hover {
+  border: 0px hidden;
+  display: inline-block;
+}
+.do-account span {
+  padding-left: 50px;
+  display: block;
+  margin: 0 auto;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.github-link {
+  position: absolute;
+  right: -60px;
+  top: 0;
+  transform: rotate(45deg);
+  font-size: 0;
+}
+.github-link i,
+.github-link img {
+  position: absolute;
+  font-size: 40px;
+  width: 36px;
+  left: 60px;
+  top: 35px;
+  color: #0080FF;
+  transform: translate(-50%, -50%);
+}
+.github-link::before {
+  content: "";
+  width: 0; 
+  height: 0; 
+  border-left: 60px solid transparent;
+  border-right: 60px solid transparent;
+  border-bottom: 60px solid white;
+}
+
+
+
+/*** HEADER ***/
+
+header {
+  cursor: default;
+  background: linear-gradient(180deg,#66a5ff,#0069ff);
+  min-height: 230px;
+  padding: 20px 0 30px;
+  margin-bottom: 15px;
+  color: white;
+  overflow: hidden;
+  position: relative;
+}
 header a {
   color: #ffffff;
   text-decoration: none;
@@ -26,18 +106,15 @@ header a:hover {
   border-bottom: 1px solid;
   border-color: #c1deff;
 }
-body {
-  font-weight: 300;
-  font-size: 16px;
-}
-h1 {
+
+header h1 {
   font-size: 50px;
   line-height: 60px;
   font-weight: 300;
   letter-spacing: 5px;
   color: white;
 }
-h3 {
+header h3 {
   margin-top: 25px;
   font-size: 22px;
   line-height: unset;
@@ -46,43 +123,7 @@ h3 {
   color: white;
 }
 @media (max-width: 450px) {
-  h1 {
+  header h1 {
     padding: 25px 0 0;
   }
 }
-header {
-  cursor: default;
-  background: linear-gradient(180deg,#66a5ff,#0069ff);
-  min-height: 230px;
-  padding: 20px 0 30px;
-  margin-bottom: 15px;
-  color: white;
-  overflow: hidden;
-  position: relative;
-}
-
-.github-link {
-  position: absolute;
-  right: -60px;
-  top: 0;
-  transform: rotate(45deg);
-  font-size: 0;
-}
-.github-link i,
-.github-link img {
-  position: absolute;
-  font-size: 40px;
-  width: 36px;
-  left: 60px;
-  top: 35px;
-  color: #438eff;
-  transform: translate(-50%, -50%);
-}
-.github-link::before {
-  content: "";
-  width: 0; 
-  height: 0; 
-  border-left: 60px solid transparent;
-  border-right: 60px solid transparent;
-  border-bottom: 60px solid white;
-}