bucky
/
url-shortener
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

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
pull/13/head
Adam Townsend 2023-10-04 18:47:45 -07:00
parent cfe2080509
commit ce89b584cb
3 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
views/create.erb
View File

@ -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>

1
views/home.erb
View File

@ -3,6 +3,7 @@
name="url"
pattern="https?://.+"
placeholder="http://www.example.com/"
autocomplete="off"
required />
<button type="submit">Submit</button>
</form>

62
views/layout.erb
View File

@ -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>