From 9c5fa5366f27f64aaa01177fb4ca19762b70d0af Mon Sep 17 00:00:00 2001
From: Adam Townsend <adam@desnudopenguino.com>
Date: Wed, 4 Oct 2023 11:28:07 -0700
Subject: [PATCH 1/3] ignore the coverage directory from simplecov output

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)
diff --git a/.gitignore b/.gitignore
index 6b1c8a2..930ad46 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 .bundle
 *.db
 .env.rb
+coverage
-- 
2.41.0


From cfe20805095ed4a6d4d4d5d5233431d09f038e79 Mon Sep 17 00:00:00 2001
From: Adam Townsend <adam@desnudopenguino.com>
Date: Wed, 4 Oct 2023 11:28:31 -0700
Subject: [PATCH 2/3] added some more colorized styles for the UI to give it a
 little more interactive niceness

---
 views/create.erb |  4 ++--
 views/home.erb   |  3 +--
 views/layout.erb | 59 +++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/views/create.erb b/views/create.erb
index 2cf03d4..6e3b587 100644
--- a/views/create.erb
+++ b/views/create.erb
@@ -1,2 +1,2 @@
-<h2><a href="/" style="color: #555555;">Home</a></h2>
-<h3 style="overflow-wrap: break-word; word-wrap: break-word;"><a href="<%= @new_link %>" target="_blank" style="color: #555555;"><%= @new_link %></a></h3>
+<h2><a href="/">Home</a></h2>
+<h3 style="overflow-wrap: break-word; word-wrap: break-word;"><a href="<%= @new_link %>" target="_blank"><%= @new_link %></a></h3>
diff --git a/views/home.erb b/views/home.erb
index 11e6885..c5d636c 100644
--- a/views/home.erb
+++ b/views/home.erb
@@ -3,7 +3,6 @@
     name="url"
     pattern="https?://.+"
     placeholder="http://www.example.com/"
-    style="padding: 0.5rem;"
     required />
-  <button type="submit" style="padding: 0.5rem;">Submit</button>
+  <button type="submit">Submit</button>
 </form>
diff --git a/views/layout.erb b/views/layout.erb
index a15f97c..a0d0583 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -2,9 +2,66 @@
   <head>
     <title><%= @page_title || "URL Shortener" %></title>
     <link rel="icon" href="data:,">
+    <style>
+      input[type=url] {
+        padding: 1rem;
+        border-radius: 5px;
+        border: 2px solid #99b1ff;
+        margin-right: 1rem;
+      }
+
+      input[type=url]:focus, input[type=url]:hover, input[type=url]:active {
+        border: 2px solid #809DFF;
+      }
+
+      button {
+        padding: 1rem;
+        border-radius: 5px;
+        border: 2px solid #99b1ff;
+        background: #e6ecff;
+        font-weight: bold;
+        transition: all .25s ease-in-out;
+        -moz-transition: all .25s ease-in-out;
+        -webkit-transition: all .25s ease-in-out;
+      }
+
+      button:hover {
+        border: 2px solid #809DFF;
+        background: #CCD8FF;
+      }
+
+      button:active {
+        background: #809DFF;
+        color: #FEFEFE;
+      }
+
+      a {
+        color: #809DFF;
+        transition: all .25s ease-in-out;
+        -moz-transition: all .25s ease-in-out;
+        -webkit-transition: all .25s ease-in-out;
+      }
+
+      a:hover, a:active, a:focus {
+        color: #555;
+      }
+      main {
+        max-width: 30rem;
+        min-width: 18rem;
+        border: 5px solid #B3C6FF;
+        border-radius: 20px;
+        margin: auto;
+        padding: 1rem;
+        margin-top: 5rem;
+        text-align: center;
+        min-height: 175px;
+        box-shadow: 3px 2px 10px #333;
+      }
+
+    </style>
   </head>
   <body style="background: #FEFEFE; font-family: Helvetica, sans-serif; color: #555555;">
-    <main style="max-width: 30rem; min-width: 18rem; border: 5px solid #999999; border-radius: 20px; margin: auto; padding: 1rem; margin-top: 5rem; text-align: center; min-height: 175px;">
+    <main>
       <h1>URL Shortener</h1>
       <h4 id="message"><%== @message %></h4>
       <%== yield %>
-- 
2.41.0


From ce89b584cbc3e30fdebcc4de831ac678ffd14821 Mon Sep 17 00:00:00 2001
From: Adam Townsend <adam@desnudopenguino.com>
Date: Wed, 4 Oct 2023 18:47:45 -0700
Subject: [PATCH 3/3] more updates!

+ disable autocomplete on the url field
+ added custom colors to make styling a little easier
+ moved body to style block, and added a nice gradient
+ made header a link, removed the "home" link on created route
+ added some nice ui changes for button and input
---
 views/create.erb |  1 -
 views/home.erb   |  1 +
 views/layout.erb | 62 ++++++++++++++++++++++++++++++++----------------
 3 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/views/create.erb b/views/create.erb
index 6e3b587..6d3a1f7 100644
--- a/views/create.erb
+++ b/views/create.erb
@@ -1,2 +1 @@
-<h2><a href="/">Home</a></h2>
 <h3 style="overflow-wrap: break-word; word-wrap: break-word;"><a href="<%= @new_link %>" target="_blank"><%= @new_link %></a></h3>
diff --git a/views/home.erb b/views/home.erb
index c5d636c..e94d3c6 100644
--- a/views/home.erb
+++ b/views/home.erb
@@ -3,6 +3,7 @@
     name="url"
     pattern="https?://.+"
     placeholder="http://www.example.com/"
+    autocomplete="off"
     required />
   <button type="submit">Submit</button>
 </form>
diff --git a/views/layout.erb b/views/layout.erb
index a0d0583..3caaa0a 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -3,22 +3,41 @@
     <title><%= @page_title || "URL Shortener" %></title>
     <link rel="icon" href="data:,">
     <style>
-      input[type=url] {
-        padding: 1rem;
-        border-radius: 5px;
-        border: 2px solid #99b1ff;
-        margin-right: 1rem;
+      :root {
+        --white: #FEFEFE;
+        --shadow: #333;
+        --black: #555;
+        --darker-blue: #809DFF;
+        --dark-blue: #99b1ff;
+        --medium-blue: #B3C6FF;
+        --light-blue: #CCD8FF;
+        --lightest-blue: #E6EBFF;
       }
 
-      input[type=url]:focus, input[type=url]:hover, input[type=url]:active {
-        border: 2px solid #809DFF;
+      body {
+        background: var(--white);
+        background-image: linear-gradient(to bottom right, var(--lightest-blue), var(--white), var(--lightest-blue));
+        font-family: Helvetica, sans-serif;
+        color: var(--black);
+      }
+      input {
+        padding: 1rem;
+        border-radius: 5px;
+        border: 3px solid var(--dark-blue);
+        margin-right: 1rem;
+        outline: none;
+      }
+
+      input:focus, input:hover {
+        border: 3px solid var(--darker-blue);
       }
 
       button {
+        color: var(--white);
         padding: 1rem;
         border-radius: 5px;
-        border: 2px solid #99b1ff;
-        background: #e6ecff;
+        border: 2px solid var(--dark-blue);
+        background: var(--dark-blue);
         font-weight: bold;
         transition: all .25s ease-in-out;
         -moz-transition: all .25s ease-in-out;
@@ -26,43 +45,46 @@
       }
 
       button:hover {
-        border: 2px solid #809DFF;
-        background: #CCD8FF;
+        background: var(--darker-blue);
       }
 
       button:active {
-        background: #809DFF;
-        color: #FEFEFE;
+        background: var(--light-blue);
+        color: var(--black);
       }
 
       a {
-        color: #809DFF;
+        color: var(--black);
+        text-decoration: none;
+        border-bottom: 4px solid var(--white);
         transition: all .25s ease-in-out;
         -moz-transition: all .25s ease-in-out;
         -webkit-transition: all .25s ease-in-out;
       }
 
       a:hover, a:active, a:focus {
-        color: #555;
+        color: var(--darker-blue);
+        border-bottom: 4px solid var(--darker-blue);
       }
       main {
         max-width: 30rem;
         min-width: 18rem;
-        border: 5px solid #B3C6FF;
+        border: 5px solid var(--medium-blue);
         border-radius: 20px;
         margin: auto;
         padding: 1rem;
         margin-top: 5rem;
         text-align: center;
-        min-height: 175px;
-        box-shadow: 3px 2px 10px #333;
+        min-height: 200px;
+        box-shadow: 3px 2px 10px var(--shadow);
+        background: var(--white);
       }
 
     </style>
   </head>
-  <body style="background: #FEFEFE; font-family: Helvetica, sans-serif; color: #555555;">
+  <body style="">
     <main>
-      <h1>URL Shortener</h1>
+      <h1><a href="/">URL Shortener</a></h1>
       <h4 id="message"><%== @message %></h4>
       <%== yield %>
     </main>
-- 
2.41.0

