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

added some more colorized styles for the UI to give it a little more 

interactive niceness
pull/13/head
Adam Townsend 2023-10-04 11:28:31 -07:00
parent 9c5fa5366f
commit cfe2080509
3 changed files with 61 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
views/create.erb
View File

@ -1,2 +1,2 @@
<h2><a href="/" style="color: #555555;">Home</a></h2> <h2><a href="/">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> <h3 style="overflow-wrap: break-word; word-wrap: break-word;"><a href="<%= @new_link %>" target="_blank"><%= @new_link %></a></h3>

3
views/home.erb
View File

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

59
views/layout.erb
View File

@ -2,9 +2,66 @@
<head> <head>
<title><%= @page_title || "URL Shortener" %></title> <title><%= @page_title || "URL Shortener" %></title>
<link rel="icon" href="data:,"> <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> </head>
<body style="background: #FEFEFE; font-family: Helvetica, sans-serif; color: #555555;"> <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> <h1>URL Shortener</h1>
<h4 id="message"><%== @message %></h4> <h4 id="message"><%== @message %></h4>
<%== yield %> <%== yield %>