Merge branch 'refactor_template' into 'master'
Refactor template See merge request wolvie/short!7
This commit is contained in:
commit
870c87d672
@ -1,4 +1,4 @@
|
|||||||
FROM golang:1.12.4 as builder
|
FROM golang:1.12.9 as builder
|
||||||
|
|
||||||
ENV CGO_ENABLED=0
|
ENV CGO_ENABLED=0
|
||||||
|
|
||||||
|
|||||||
89
main.go
89
main.go
@ -22,34 +22,48 @@ import (
|
|||||||
"github.com/patrickmn/go-cache"
|
"github.com/patrickmn/go-cache"
|
||||||
)
|
)
|
||||||
|
|
||||||
const letterBytes = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" // Base strings for RandStringBytesMaskImprSrc
|
const letterBytes = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" // Base strings for randStringBytesMaskImprSrc
|
||||||
const (
|
const (
|
||||||
letterIdxBits = 6 // 6 bits to represent a letter index
|
letterIdxBits = 6 // 6 bits to represent a letter index
|
||||||
letterIdxMask = 1<<letterIdxBits - 1 // All 1-bits, as many as letterIdxBits
|
letterIdxMask = 1<<letterIdxBits - 1 // All 1-bits, as many as letterIdxBits
|
||||||
letterIdxMax = 63 / letterIdxBits // # of letter indices fitting in 63 bits
|
letterIdxMax = 63 / letterIdxBits // # of letter indices fitting in 63 bits
|
||||||
)
|
)
|
||||||
const appVersion = "1.0.1"
|
const appVersion = "1.1.0"
|
||||||
|
|
||||||
var src = rand.NewSource(time.Now().UnixNano())
|
var src = rand.NewSource(time.Now().UnixNano())
|
||||||
var pool = cache.New(240*time.Hour, 1*time.Hour)
|
var pool = cache.New(240*time.Hour, 1*time.Hour)
|
||||||
var okTmpl = template.Must(template.ParseFiles("templates/ok.html"))
|
var templates *template.Template
|
||||||
var indexTmpl = template.Must(template.ParseFiles("templates/index.html"))
|
var allFiles []string
|
||||||
var returnTmpl = template.Must(template.ParseFiles("templates/returnPage.html"))
|
|
||||||
var notFoundTmpl = template.Must(template.ParseFiles("templates/404.html"))
|
func init() {
|
||||||
var badRequestTmpl = template.Must(template.ParseFiles("templates/400.html"))
|
files, err := ioutil.ReadDir("templates")
|
||||||
var internalErrorTmpl = template.Must(template.ParseFiles("templates/500.html"))
|
if err != nil {
|
||||||
|
log.Fatalln(err)
|
||||||
|
}
|
||||||
|
for _, file := range files {
|
||||||
|
filename := file.Name()
|
||||||
|
if strings.HasSuffix(filename, ".html") {
|
||||||
|
allFiles = append(allFiles, "templates/"+filename)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
templates, err = template.ParseFiles(allFiles...)
|
||||||
|
if err != nil {
|
||||||
|
log.Fatalln(err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
func index(w http.ResponseWriter, r *http.Request) {
|
func index(w http.ResponseWriter, r *http.Request) {
|
||||||
indexTmpl.Execute(w, indexTmpl)
|
t := templates.Lookup("index.html")
|
||||||
|
t.Execute(w, nil)
|
||||||
}
|
}
|
||||||
|
|
||||||
// get executes the GET command
|
// get executes the GET command
|
||||||
func get(key string) (string, bool) {
|
func get(key string) (string, bool) {
|
||||||
value, status := pool.Get(key)
|
value, status := pool.Get(key)
|
||||||
if status {
|
if !status {
|
||||||
return value.(string), status
|
return "", status
|
||||||
}
|
}
|
||||||
return "", false
|
return value.(string), status
|
||||||
}
|
}
|
||||||
|
|
||||||
// set executes the redis SET command
|
// set executes the redis SET command
|
||||||
@ -63,22 +77,23 @@ func set(key, suffix string) {
|
|||||||
func redirect(w http.ResponseWriter, r *http.Request, path string) {
|
func redirect(w http.ResponseWriter, r *http.Request, path string) {
|
||||||
vals := mux.Vars(r)
|
vals := mux.Vars(r)
|
||||||
key := vals["key"]
|
key := vals["key"]
|
||||||
|
t := templates.Lookup("404.html")
|
||||||
if path != "" {
|
if path != "" {
|
||||||
key = strings.Replace(key, path, "", 1)
|
key = strings.Replace(key, path, "", 1)
|
||||||
}
|
}
|
||||||
rgx, _ := regexp.Compile("[a-zA-Z0-9]+")
|
rgx, _ := regexp.Compile("[a-zA-Z0-9]+")
|
||||||
key = rgx.FindString(key)
|
key = rgx.FindString(key)
|
||||||
key, status := get(key)
|
key, status := get(key)
|
||||||
if status {
|
if !status {
|
||||||
|
w.WriteHeader(http.StatusNotFound)
|
||||||
|
t.Execute(w, nil)
|
||||||
|
return
|
||||||
|
}
|
||||||
u, _ := url.Parse(key)
|
u, _ := url.Parse(key)
|
||||||
if u.Scheme == "" {
|
if u.Scheme == "" {
|
||||||
u.Scheme = "https"
|
u.Scheme = "https"
|
||||||
}
|
}
|
||||||
http.Redirect(w, r, u.String(), http.StatusFound)
|
http.Redirect(w, r, u.String(), http.StatusFound)
|
||||||
} else {
|
|
||||||
w.WriteHeader(http.StatusNotFound)
|
|
||||||
notFoundTmpl.Execute(w, notFoundTmpl)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// shortner reads url from a POST request, validates the url, generate a
|
// shortner reads url from a POST request, validates the url, generate a
|
||||||
@ -87,30 +102,30 @@ func redirect(w http.ResponseWriter, r *http.Request, path string) {
|
|||||||
// then if writes the kv pair suffix, url to the database and return the
|
// then if writes the kv pair suffix, url to the database and return the
|
||||||
// shortened url to the user
|
// shortened url to the user
|
||||||
func shortner(w http.ResponseWriter, r *http.Request, proto, domain, hostSuf, path string, urlSize int) {
|
func shortner(w http.ResponseWriter, r *http.Request, proto, domain, hostSuf, path string, urlSize int) {
|
||||||
if govalidator.IsURL(r.FormValue("url")) {
|
ret := templates.Lookup("returnPage.html")
|
||||||
|
badR := templates.Lookup("400.html")
|
||||||
|
if !govalidator.IsURL(r.FormValue("url")) {
|
||||||
|
w.WriteHeader(http.StatusBadRequest)
|
||||||
|
badR.Execute(w, nil)
|
||||||
|
return
|
||||||
|
}
|
||||||
u, _ := url.Parse(r.FormValue("url"))
|
u, _ := url.Parse(r.FormValue("url"))
|
||||||
|
suffix := randStringBytesMaskImprSrc(urlSize)
|
||||||
|
|
||||||
suffix := RandStringBytesMaskImprSrc(urlSize)
|
|
||||||
for {
|
for {
|
||||||
_, status := get(suffix)
|
_, status := get(suffix)
|
||||||
if status {
|
if !status {
|
||||||
suffix = RandStringBytesMaskImprSrc(urlSize)
|
|
||||||
} else {
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
suffix = randStringBytesMaskImprSrc(urlSize)
|
||||||
}
|
}
|
||||||
set(u.String(), suffix)
|
set(u.String(), suffix)
|
||||||
shortend := proto + "://" + domain + hostSuf + path + suffix
|
shortend := proto + "://" + domain + hostSuf + path + suffix
|
||||||
returnTmpl.Execute(w, shortend)
|
ret.Execute(w, shortend)
|
||||||
|
|
||||||
} else {
|
|
||||||
w.WriteHeader(http.StatusBadRequest)
|
|
||||||
badRequestTmpl.Execute(w, badRequestTmpl)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// RandStringBytesMaskImprSrc Generate random string of n size
|
// randStringBytesMaskImprSrc Generate random string of n size
|
||||||
func RandStringBytesMaskImprSrc(n int) string {
|
func randStringBytesMaskImprSrc(n int) string {
|
||||||
b := make([]byte, n)
|
b := make([]byte, n)
|
||||||
// A src.Int63() generates 63 random bits, enough for letterIdxMax characters!
|
// A src.Int63() generates 63 random bits, enough for letterIdxMax characters!
|
||||||
for i, cache, remain := n-1, src.Int63(), letterIdxMax; i >= 0; {
|
for i, cache, remain := n-1, src.Int63(), letterIdxMax; i >= 0; {
|
||||||
@ -130,9 +145,10 @@ func RandStringBytesMaskImprSrc(n int) string {
|
|||||||
// internalError receives a http.ResponseWriter, msg and error and
|
// internalError receives a http.ResponseWriter, msg and error and
|
||||||
// return a internal error page with http code 500 to the user
|
// return a internal error page with http code 500 to the user
|
||||||
func internalError(w http.ResponseWriter, msg string, err error) {
|
func internalError(w http.ResponseWriter, msg string, err error) {
|
||||||
|
t := templates.Lookup("500.html")
|
||||||
log.Println(err)
|
log.Println(err)
|
||||||
w.WriteHeader(http.StatusInternalServerError)
|
w.WriteHeader(http.StatusInternalServerError)
|
||||||
internalErrorTmpl.Execute(w, msg+err.Error())
|
t.Execute(w, msg+err.Error())
|
||||||
}
|
}
|
||||||
|
|
||||||
// itemsCount returns the number of kv pairs on the in meomry database
|
// itemsCount returns the number of kv pairs on the in meomry database
|
||||||
@ -161,6 +177,7 @@ func itemsDump(w http.ResponseWriter, r *http.Request) {
|
|||||||
|
|
||||||
// itemsFromFile loads kv pairs from the dumpFile json to the in memory database
|
// itemsFromFile loads kv pairs from the dumpFile json to the in memory database
|
||||||
func itemsFromFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
|
func itemsFromFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
|
||||||
|
t := templates.Lookup("ok.html")
|
||||||
jsonFile, err := ioutil.ReadFile(dumpFile)
|
jsonFile, err := ioutil.ReadFile(dumpFile)
|
||||||
var dumpObj map[string]cache.Item
|
var dumpObj map[string]cache.Item
|
||||||
json.Unmarshal([]byte(jsonFile), &dumpObj)
|
json.Unmarshal([]byte(jsonFile), &dumpObj)
|
||||||
@ -168,12 +185,13 @@ func itemsFromFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
|
|||||||
internalError(w, "Cannot open file "+dumpFile+": ", err)
|
internalError(w, "Cannot open file "+dumpFile+": ", err)
|
||||||
} else {
|
} else {
|
||||||
pool = cache.NewFrom(240*time.Hour, 1*time.Hour, dumpObj)
|
pool = cache.NewFrom(240*time.Hour, 1*time.Hour, dumpObj)
|
||||||
okTmpl.Execute(w, "Imported "+strconv.Itoa(len(dumpObj))+" items to the DB")
|
t.Execute(w, "Imported "+strconv.Itoa(len(dumpObj))+" items to the DB")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// itemsFromPost loads kv pairs from a json POST to the in memory database
|
// itemsFromPost loads kv pairs from a json POST to the in memory database
|
||||||
func itemsFromPost(w http.ResponseWriter, r *http.Request) {
|
func itemsFromPost(w http.ResponseWriter, r *http.Request) {
|
||||||
|
t := templates.Lookup("ok.html")
|
||||||
decoder := json.NewDecoder(r.Body)
|
decoder := json.NewDecoder(r.Body)
|
||||||
var dumpObj map[string]cache.Item
|
var dumpObj map[string]cache.Item
|
||||||
err := decoder.Decode(&dumpObj)
|
err := decoder.Decode(&dumpObj)
|
||||||
@ -181,12 +199,13 @@ func itemsFromPost(w http.ResponseWriter, r *http.Request) {
|
|||||||
internalError(w, "Cannot parse JSON: ", err)
|
internalError(w, "Cannot parse JSON: ", err)
|
||||||
} else {
|
} else {
|
||||||
pool = cache.NewFrom(240*time.Hour, 1*time.Hour, dumpObj)
|
pool = cache.NewFrom(240*time.Hour, 1*time.Hour, dumpObj)
|
||||||
okTmpl.Execute(w, "Imported "+strconv.Itoa(len(dumpObj))+" items to the DB")
|
t.Execute(w, "Imported "+strconv.Itoa(len(dumpObj))+" items to the DB")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// itemsDumpToFile dumps the kv pairs from the in memory database to the dumpFile
|
// itemsDumpToFile dumps the kv pairs from the in memory database to the dumpFile
|
||||||
func itemsDumpToFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
|
func itemsDumpToFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
|
||||||
|
t := templates.Lookup("ok.html")
|
||||||
dumpObj, _ := json.Marshal(
|
dumpObj, _ := json.Marshal(
|
||||||
pool.Items(),
|
pool.Items(),
|
||||||
)
|
)
|
||||||
@ -194,7 +213,7 @@ func itemsDumpToFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
|
|||||||
if err != nil {
|
if err != nil {
|
||||||
internalError(w, "Failed to open json file: ", err)
|
internalError(w, "Failed to open json file: ", err)
|
||||||
} else {
|
} else {
|
||||||
okTmpl.Execute(w, "Dump writen to: "+dumpFile)
|
t.Execute(w, "Dump writen to: "+dumpFile)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -218,7 +237,7 @@ func main() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if *port > 65535 || *port < 1 {
|
if *port > 65535 || *port < 1 {
|
||||||
|
log.Fatalln("Invalid port number")
|
||||||
}
|
}
|
||||||
if *path != "" && !strings.HasSuffix(*path, "/") {
|
if *path != "" && !strings.HasSuffix(*path, "/") {
|
||||||
*path = *path + "/"
|
*path = *path + "/"
|
||||||
|
|||||||
@ -1,258 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<head>
|
{{ template "header" }}
|
||||||
<title>Short: the simple url shortener</title>
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #D3DEEA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
margin-top: -40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ghost {
|
|
||||||
width: 50%;
|
|
||||||
height: 53%;
|
|
||||||
left: 25%;
|
|
||||||
top: 10%;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50% 50% 0 0;
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
border-bottom: none;
|
|
||||||
animation: float 2s ease-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ghost-copy {
|
|
||||||
width: 50%;
|
|
||||||
height: 53%;
|
|
||||||
left: 25%;
|
|
||||||
top: 10%;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50% 50% 0 0;
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
border-bottom: none;
|
|
||||||
animation: float 2s ease-out infinite;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.face {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 60%;
|
|
||||||
top: 20%;
|
|
||||||
}
|
|
||||||
.eye, .eye-right {
|
|
||||||
position: absolute;
|
|
||||||
background: #585959;
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye {
|
|
||||||
left: 25%;
|
|
||||||
}
|
|
||||||
.eye-right {
|
|
||||||
right: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mouth {
|
|
||||||
position:absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 45%;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border: 3px solid;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-color: transparent #585959 #585959 transparent;
|
|
||||||
transform: rotate(225deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.one, .two, .three, .four {
|
|
||||||
position: absolute;
|
|
||||||
background: #EDEDED;
|
|
||||||
top: 85%;
|
|
||||||
width: 25%;
|
|
||||||
height: 23%;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.one {
|
|
||||||
border-radius: 0 0 100% 30%;
|
|
||||||
left: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two {
|
|
||||||
left: 23%;
|
|
||||||
border-radius: 0 0 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.three {
|
|
||||||
left: 50%;
|
|
||||||
border-radius: 0 0 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.four {
|
|
||||||
left: 74.5%;
|
|
||||||
border-radius: 0 0 30% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow {
|
|
||||||
position: absolute;
|
|
||||||
width: 30%;
|
|
||||||
height: 7%;
|
|
||||||
background: #BFC0C0;
|
|
||||||
left: 35%;
|
|
||||||
top: 80%;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: scale 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scale {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
50% {
|
|
||||||
transform: translateY(15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*text styling*/
|
|
||||||
h1 {
|
|
||||||
font-family: 'Abril Fatface', serif;
|
|
||||||
color: #EDEDED;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 9em;
|
|
||||||
margin: 0;
|
|
||||||
text-shadow: -1px 0 #BFC0C0, 0 1px #BFC0C0, 1px 0 #BFC0C0, 0 -1px #BFC0C0;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
font-size: 2em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-align: center;
|
|
||||||
color: #BFC0C0;
|
|
||||||
margin-top: -20px;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
color: #585959;
|
|
||||||
font-size: .6em;
|
|
||||||
margin-top: -20px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*search style*/
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
padding: 5px;
|
|
||||||
height: 20px;
|
|
||||||
margin-left: -30px;
|
|
||||||
width: 200px;
|
|
||||||
outline: none;
|
|
||||||
&:focus {
|
|
||||||
border: 1px solid #D3DEEA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn {
|
|
||||||
position: absolute;
|
|
||||||
width: 30px;
|
|
||||||
height: 32px;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
background: #BFC0C0;
|
|
||||||
text-align: center;
|
|
||||||
color: #EDEDED;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1em;
|
|
||||||
outline: none;
|
|
||||||
&:hover {
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #EDEDED;
|
|
||||||
color: #BFC0C0;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
background: #EDEDED;
|
|
||||||
padding: 15px 20px;
|
|
||||||
margin: 5px;
|
|
||||||
color: #585959;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: .6em;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
border: 0;
|
|
||||||
&:hover {
|
|
||||||
background: #BFC0C0;
|
|
||||||
transition: all .4s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.8em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 10px;
|
|
||||||
color: #EA7996;
|
|
||||||
letter-spacing: 3px;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
a {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
&:hover {
|
|
||||||
color: #7d7d7d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<div id="background"></div>
|
<div id="background"></div>
|
||||||
<div class="top">
|
<div class="top">
|
||||||
@ -270,7 +18,7 @@
|
|||||||
<div class="face">
|
<div class="face">
|
||||||
<div class="eye"></div>
|
<div class="eye"></div>
|
||||||
<div class="eye-right"></div>
|
<div class="eye-right"></div>
|
||||||
<div class="mouth"></div>
|
<div class="sad_mouth"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shadow"></div>
|
<div class="shadow"></div>
|
||||||
@ -287,7 +35,6 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
{{ template "footer" }}
|
||||||
<p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,258 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<head>
|
{{ template "header" }}
|
||||||
<title>Short: the simple url shortener</title>
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #D3DEEA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
margin-top: -40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ghost {
|
|
||||||
width: 50%;
|
|
||||||
height: 53%;
|
|
||||||
left: 25%;
|
|
||||||
top: 10%;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50% 50% 0 0;
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
border-bottom: none;
|
|
||||||
animation: float 2s ease-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ghost-copy {
|
|
||||||
width: 50%;
|
|
||||||
height: 53%;
|
|
||||||
left: 25%;
|
|
||||||
top: 10%;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50% 50% 0 0;
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
border-bottom: none;
|
|
||||||
animation: float 2s ease-out infinite;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.face {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 60%;
|
|
||||||
top: 20%;
|
|
||||||
}
|
|
||||||
.eye, .eye-right {
|
|
||||||
position: absolute;
|
|
||||||
background: #585959;
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye {
|
|
||||||
left: 25%;
|
|
||||||
}
|
|
||||||
.eye-right {
|
|
||||||
right: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mouth {
|
|
||||||
position:absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 45%;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border: 3px solid;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-color: transparent #585959 #585959 transparent;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.one, .two, .three, .four {
|
|
||||||
position: absolute;
|
|
||||||
background: #EDEDED;
|
|
||||||
top: 85%;
|
|
||||||
width: 25%;
|
|
||||||
height: 23%;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.one {
|
|
||||||
border-radius: 0 0 100% 30%;
|
|
||||||
left: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two {
|
|
||||||
left: 23%;
|
|
||||||
border-radius: 0 0 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.three {
|
|
||||||
left: 50%;
|
|
||||||
border-radius: 0 0 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.four {
|
|
||||||
left: 74.5%;
|
|
||||||
border-radius: 0 0 30% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow {
|
|
||||||
position: absolute;
|
|
||||||
width: 30%;
|
|
||||||
height: 7%;
|
|
||||||
background: #BFC0C0;
|
|
||||||
left: 35%;
|
|
||||||
top: 80%;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: scale 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scale {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
50% {
|
|
||||||
transform: translateY(15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*text styling*/
|
|
||||||
h1 {
|
|
||||||
font-family: 'Abril Fatface', serif;
|
|
||||||
color: #EDEDED;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 9em;
|
|
||||||
margin: 0;
|
|
||||||
text-shadow: -1px 0 #BFC0C0, 0 1px #BFC0C0, 1px 0 #BFC0C0, 0 -1px #BFC0C0;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
font-size: 2em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-align: center;
|
|
||||||
color: #BFC0C0;
|
|
||||||
margin-top: -20px;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
color: #585959;
|
|
||||||
font-size: .6em;
|
|
||||||
margin-top: -20px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*search style*/
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
padding: 5px;
|
|
||||||
height: 20px;
|
|
||||||
margin-left: -30px;
|
|
||||||
width: 200px;
|
|
||||||
outline: none;
|
|
||||||
&:focus {
|
|
||||||
border: 1px solid #D3DEEA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn {
|
|
||||||
position: absolute;
|
|
||||||
width: 30px;
|
|
||||||
height: 32px;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
background: #BFC0C0;
|
|
||||||
text-align: center;
|
|
||||||
color: #EDEDED;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1em;
|
|
||||||
outline: none;
|
|
||||||
&:hover {
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #EDEDED;
|
|
||||||
color: #BFC0C0;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
background: #EDEDED;
|
|
||||||
padding: 15px 20px;
|
|
||||||
margin: 5px;
|
|
||||||
color: #585959;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: .6em;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
border: 0;
|
|
||||||
&:hover {
|
|
||||||
background: #BFC0C0;
|
|
||||||
transition: all .4s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.8em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 10px;
|
|
||||||
color: #EA7996;
|
|
||||||
letter-spacing: 3px;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
a {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
&:hover {
|
|
||||||
color: #7d7d7d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<div id="background"></div>
|
<div id="background"></div>
|
||||||
<div class="top">
|
<div class="top">
|
||||||
@ -287,7 +36,6 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
{{ template "footer" }}
|
||||||
<p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,258 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<head>
|
{{ template "header" }}
|
||||||
<title>Short: the simple url shortener</title>
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #D3DEEA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
margin-top: -40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ghost {
|
|
||||||
width: 50%;
|
|
||||||
height: 53%;
|
|
||||||
left: 25%;
|
|
||||||
top: 10%;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50% 50% 0 0;
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
border-bottom: none;
|
|
||||||
animation: float 2s ease-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ghost-copy {
|
|
||||||
width: 50%;
|
|
||||||
height: 53%;
|
|
||||||
left: 25%;
|
|
||||||
top: 10%;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50% 50% 0 0;
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
border-bottom: none;
|
|
||||||
animation: float 2s ease-out infinite;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.face {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 60%;
|
|
||||||
top: 20%;
|
|
||||||
}
|
|
||||||
.eye, .eye-right {
|
|
||||||
position: absolute;
|
|
||||||
{# background: #585959; #}
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye {
|
|
||||||
left: 25%;
|
|
||||||
}
|
|
||||||
.eye-right {
|
|
||||||
right: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mouth {
|
|
||||||
position:absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 45%;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border: 3px solid;
|
|
||||||
border-radius: 50%;
|
|
||||||
border-color: transparent #585959 #585959 transparent;
|
|
||||||
transform: rotate(225deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.one, .two, .three, .four {
|
|
||||||
position: absolute;
|
|
||||||
background: #EDEDED;
|
|
||||||
top: 85%;
|
|
||||||
width: 25%;
|
|
||||||
height: 23%;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.one {
|
|
||||||
border-radius: 0 0 100% 30%;
|
|
||||||
left: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.two {
|
|
||||||
left: 23%;
|
|
||||||
border-radius: 0 0 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.three {
|
|
||||||
left: 50%;
|
|
||||||
border-radius: 0 0 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.four {
|
|
||||||
left: 74.5%;
|
|
||||||
border-radius: 0 0 30% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow {
|
|
||||||
position: absolute;
|
|
||||||
width: 30%;
|
|
||||||
height: 7%;
|
|
||||||
background: #BFC0C0;
|
|
||||||
left: 35%;
|
|
||||||
top: 80%;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: scale 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scale {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
50% {
|
|
||||||
transform: translateY(15px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*text styling*/
|
|
||||||
h1 {
|
|
||||||
font-family: 'Abril Fatface', serif;
|
|
||||||
color: #EDEDED;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 9em;
|
|
||||||
margin: 0;
|
|
||||||
text-shadow: -1px 0 #BFC0C0, 0 1px #BFC0C0, 1px 0 #BFC0C0, 0 -1px #BFC0C0;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
font-size: 2em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-align: center;
|
|
||||||
color: #BFC0C0;
|
|
||||||
margin-top: -20px;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
color: #585959;
|
|
||||||
font-size: .6em;
|
|
||||||
margin-top: -20px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*search style*/
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
padding: 5px;
|
|
||||||
height: 20px;
|
|
||||||
margin-left: -30px;
|
|
||||||
width: 200px;
|
|
||||||
outline: none;
|
|
||||||
&:focus {
|
|
||||||
border: 1px solid #D3DEEA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn {
|
|
||||||
position: absolute;
|
|
||||||
width: 30px;
|
|
||||||
height: 32px;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
background: #BFC0C0;
|
|
||||||
text-align: center;
|
|
||||||
color: #EDEDED;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1em;
|
|
||||||
outline: none;
|
|
||||||
&:hover {
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #EDEDED;
|
|
||||||
color: #BFC0C0;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
background: #EDEDED;
|
|
||||||
padding: 15px 20px;
|
|
||||||
margin: 5px;
|
|
||||||
color: #585959;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: .6em;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
border: 0;
|
|
||||||
&:hover {
|
|
||||||
background: #BFC0C0;
|
|
||||||
transition: all .4s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.8em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 10px;
|
|
||||||
color: #EA7996;
|
|
||||||
letter-spacing: 3px;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
a {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
&:hover {
|
|
||||||
color: #7d7d7d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<div id="background"></div>
|
<div id="background"></div>
|
||||||
<div class="top">
|
<div class="top">
|
||||||
@ -268,8 +17,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="ghost">
|
<div class="ghost">
|
||||||
<div class="face">
|
<div class="face">
|
||||||
<div class="eye"><h3 style="color:black;font-size:1.5em">X</h3></div>
|
<div class="deadeye"><h3 style="color:black;font-size:1.5em">X</h3></div>
|
||||||
<div class="eye-right"><h3 style="color:black;font-size:1.5em">X</h3></div>
|
<div class="deadeye-right"><h3 style="color:black;font-size:1.5em">X</h3></div>
|
||||||
<div class="mouth"></div>
|
<div class="mouth"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -281,7 +30,6 @@
|
|||||||
His last words where: {{ . }} </p>
|
His last words where: {{ . }} </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
{{ template "footer" }}
|
||||||
<p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
5
templates/footer.html
Normal file
5
templates/footer.html
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{{ define "footer" }}
|
||||||
|
<footer>
|
||||||
|
<p>html theme by <a href="https://codepen.io/juliepark"> julie</a> ♡
|
||||||
|
</footer>
|
||||||
|
{{ end }}
|
||||||
282
templates/header.html
Normal file
282
templates/header.html
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
{{ define "header" }}
|
||||||
|
<head>
|
||||||
|
<title>Short: the simple url shortener</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #D3DEEA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
margin-top: -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost {
|
||||||
|
width: 50%;
|
||||||
|
height: 53%;
|
||||||
|
left: 25%;
|
||||||
|
top: 10%;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50% 50% 0 0;
|
||||||
|
background: #EDEDED;
|
||||||
|
border: 1px solid #BFC0C0;
|
||||||
|
border-bottom: none;
|
||||||
|
animation: float 2s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost-copy {
|
||||||
|
width: 50%;
|
||||||
|
height: 53%;
|
||||||
|
left: 25%;
|
||||||
|
top: 10%;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50% 50% 0 0;
|
||||||
|
background: #EDEDED;
|
||||||
|
border: 1px solid #BFC0C0;
|
||||||
|
border-bottom: none;
|
||||||
|
animation: float 2s ease-out infinite;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.face {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
top: 20%;
|
||||||
|
}
|
||||||
|
.eye, .eye-right {
|
||||||
|
position: absolute;
|
||||||
|
background: #585959;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye {
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
.eye-right {
|
||||||
|
right: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deadeye, .deadeye-right {
|
||||||
|
position: absolute;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deadeye {
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
.deadeye-right {
|
||||||
|
right: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mouth {
|
||||||
|
position:absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 45%;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border: 3px solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-color: transparent #585959 #585959 transparent;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sad_mouth {
|
||||||
|
position:absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 45%;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border: 3px solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-color: transparent #585959 #585959 transparent;
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.one, .two, .three, .four {
|
||||||
|
position: absolute;
|
||||||
|
background: #EDEDED;
|
||||||
|
top: 85%;
|
||||||
|
width: 25%;
|
||||||
|
height: 23%;
|
||||||
|
border: 1px solid #BFC0C0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.one {
|
||||||
|
border-radius: 0 0 100% 30%;
|
||||||
|
left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.two {
|
||||||
|
left: 23%;
|
||||||
|
border-radius: 0 0 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.three {
|
||||||
|
left: 50%;
|
||||||
|
border-radius: 0 0 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.four {
|
||||||
|
left: 74.5%;
|
||||||
|
border-radius: 0 0 30% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
position: absolute;
|
||||||
|
width: 30%;
|
||||||
|
height: 7%;
|
||||||
|
background: #BFC0C0;
|
||||||
|
left: 35%;
|
||||||
|
top: 80%;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: scale 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
50% {
|
||||||
|
transform: translateY(15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*text styling*/
|
||||||
|
h1 {
|
||||||
|
font-family: 'Abril Fatface', serif;
|
||||||
|
color: #EDEDED;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 9em;
|
||||||
|
margin: 0;
|
||||||
|
text-shadow: -1px 0 #BFC0C0, 0 1px #BFC0C0, 1px 0 #BFC0C0, 0 -1px #BFC0C0;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
font-size: 2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
color: #BFC0C0;
|
||||||
|
margin-top: -20px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
color: #585959;
|
||||||
|
font-size: .6em;
|
||||||
|
margin-top: -20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*search style*/
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
border: 1px solid #BFC0C0;
|
||||||
|
padding: 5px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: -30px;
|
||||||
|
width: 200px;
|
||||||
|
outline: none;
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid #D3DEEA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-btn {
|
||||||
|
position: absolute;
|
||||||
|
width: 30px;
|
||||||
|
height: 32px;
|
||||||
|
border: 1px solid #BFC0C0;
|
||||||
|
background: #BFC0C0;
|
||||||
|
text-align: center;
|
||||||
|
color: #EDEDED;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1em;
|
||||||
|
outline: none;
|
||||||
|
&:hover {
|
||||||
|
background: #EDEDED;
|
||||||
|
border: 1px solid #EDEDED;
|
||||||
|
color: #BFC0C0;
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background: #EDEDED;
|
||||||
|
padding: 15px 20px;
|
||||||
|
margin: 5px;
|
||||||
|
color: #585959;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: .6em;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
border: 0;
|
||||||
|
&:hover {
|
||||||
|
background: #BFC0C0;
|
||||||
|
transition: all .4s ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 10px;
|
||||||
|
color: #EA7996;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
a {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
&:hover {
|
||||||
|
color: #7d7d7d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
{{ end }}
|
||||||
@ -1,76 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<head>
|
{{ template "slimheader" }}
|
||||||
<title>Short: the simple url shortener</title>
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #D3DEEA;
|
|
||||||
}
|
|
||||||
|
|
||||||
form{
|
|
||||||
position:fixed;
|
|
||||||
top:32%;
|
|
||||||
left:35%;
|
|
||||||
width:500px;
|
|
||||||
font-family:georgia,garamond,serif;
|
|
||||||
font-size:16px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.bottom {
|
|
||||||
position:fixed;
|
|
||||||
top:30%;
|
|
||||||
left:35%;
|
|
||||||
width:500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
color: #585959;
|
|
||||||
font-size: .6em;
|
|
||||||
margin-top: -20px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
padding: 5px;
|
|
||||||
height: 20px;
|
|
||||||
margin-left: -30px;
|
|
||||||
width: 200px;
|
|
||||||
outline: none;
|
|
||||||
&:focus {
|
|
||||||
border: 1px solid #D3DEEA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn {
|
|
||||||
position: absolute;
|
|
||||||
width: 30px;
|
|
||||||
height: 32px;
|
|
||||||
border: 1px solid #BFC0C0;
|
|
||||||
background: #BFC0C0;
|
|
||||||
text-align: center;
|
|
||||||
color: #EDEDED;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1em;
|
|
||||||
outline: none;
|
|
||||||
&:hover {
|
|
||||||
background: #EDEDED;
|
|
||||||
border: 1px solid #EDEDED;
|
|
||||||
color: #BFC0C0;
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<p>Welcome to Short, the simple URL shortener,
|
<p>Welcome to Short, the simple URL shortener,
|
||||||
@ -83,5 +13,6 @@
|
|||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
{{ template "footer" }}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,33 +1,10 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<head>
|
{{ template "slimheader" }}
|
||||||
<title>Short: the simple url shortner</title>
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #D3DEEA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
position:fixed;
|
|
||||||
top:30%;
|
|
||||||
left:35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
color: #585959;
|
|
||||||
font-size: .9em;
|
|
||||||
margin-top: -20px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<p>{{ . }}</a></p>
|
<p>{{ . }}</a></p>
|
||||||
</div>
|
</div>
|
||||||
|
{{ template "footer" }}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,33 +1,10 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang=en>
|
<html lang=en>
|
||||||
<head>
|
{{ template "slimheader" }}
|
||||||
<title>Short: the simple url shortner</title>
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #D3DEEA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
position:fixed;
|
|
||||||
top:30%;
|
|
||||||
left:35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Lato', sans-serif;
|
|
||||||
color: #585959;
|
|
||||||
font-size: 1em;
|
|
||||||
margin-top: -20px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
<p>URL Shortened to <a href="{{ . }}">{{ . }}</a></p>
|
<p>URL Shortened to <a href="{{ . }}">{{ . }}</a></p>
|
||||||
</div>
|
</div>
|
||||||
|
{{ template "footer" }}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
72
templates/slimheader.html
Normal file
72
templates/slimheader.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
{{ define "slimheader" }}
|
||||||
|
<head>
|
||||||
|
<title>Short: the simple url shortener</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #D3DEEA;
|
||||||
|
}
|
||||||
|
|
||||||
|
form{
|
||||||
|
position:fixed;
|
||||||
|
top:32%;
|
||||||
|
left:35%;
|
||||||
|
width:500px;
|
||||||
|
font-family:georgia,garamond,serif;
|
||||||
|
font-size:16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
position:fixed;
|
||||||
|
top:30%;
|
||||||
|
left:35%;
|
||||||
|
width:500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
color: #585959;
|
||||||
|
font-size: .6em;
|
||||||
|
margin-top: -20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
border: 1px solid #BFC0C0;
|
||||||
|
padding: 5px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: -30px;
|
||||||
|
width: 200px;
|
||||||
|
outline: none;
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid #D3DEEA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-btn {
|
||||||
|
position: absolute;
|
||||||
|
width: 30px;
|
||||||
|
height: 32px;
|
||||||
|
border: 1px solid #BFC0C0;
|
||||||
|
background: #BFC0C0;
|
||||||
|
text-align: center;
|
||||||
|
color: #EDEDED;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1em;
|
||||||
|
outline: none;
|
||||||
|
&:hover {
|
||||||
|
background: #EDEDED;
|
||||||
|
border: 1px solid #EDEDED;
|
||||||
|
color: #BFC0C0;
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
{{ end }}
|
||||||
Loading…
x
Reference in New Issue
Block a user