2025-01-27 14:25:00 +10:00
<!doctype html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< style >
body {
display: flex;
flex-direction: column;
padding: 5px;
height: 300px;
font-size: 20px;
font-family: sans-serif;
2025-01-30 17:40:10 +10:00
margin-bottom: 20px;
2025-01-27 14:25:00 +10:00
}
.header {
display: flex;
align-items: center;
}
.header img {
padding-right: 10px;
}
#close {
position: absolute;
top: 20px;
right: 20px;
border: black 1px solid;
border-radius: 7px;
background-color: white;
min-height: 30px;
min-width: 75px;
cursor: pointer;
}
2025-01-30 17:40:10 +10:00
.generate-button,
#url-conflict-yes,
#url-conflict-no {
2025-01-27 14:25:00 +10:00
border: black 1px solid;
border-radius: 7px;
background-color: white;
min-height: 50px;
min-width: 200px;
cursor: pointer;
}
#close:hover,
2025-01-30 17:40:10 +10:00
.generate-button:hover,
#url-conflict-yes:hover,
#url-conflict-no:hover {
2025-01-27 14:25:00 +10:00
background-color: #bbb;
}
.generate {
display: flex;
align-items: baseline;
}
label {
padding: 0 10px;
align-items: baseline;
padding: 5px 0;
}
input {
2025-01-27 17:26:25 +10:00
min-width: 250px;
2025-01-27 14:25:00 +10:00
min-height: 17px;
padding: 5px;
border: 2px solid black;
border-radius: 7px;
text-align: center;
font-size: 15px;
}
#message,
#message2,
2025-01-30 17:40:10 +10:00
#message3,
#url-conflict,
#delete-error {
2025-01-27 14:25:00 +10:00
display: none;
}
.warning {
color: red;
display: block !important;
}
.shown {
display: block !important;
}
< / style >
< / head >
< body >
< div class = "header" >
< img src = "/icons/chhoto-url-48.png" > < / img >
< h1 > Generate a Chhoto URL< / h1 >
< / div >
< button id = "close" type = "button" > ✖ Close< / button >
2025-01-27 17:26:25 +10:00
< form id = "generate" >
< div class = "generate" >
< label >
Short URL
< input autofocus required type = "text" id = "shorturl" placeholder = "interesting-short-url" >
< p id = "message" > < / p >
< / label >
< / div >
< div class = "generate" >
< label >
Long URL
< input required type = "text" id = "longurl" placeholder = "https://example.com" >
< p id = "message2" > The provided URL is invalid.< / p >
< / label >
< / div >
< div class = "generate" >
< label >
< input class = "generate-button" type = "submit" value = "Shorten!" >
< p id = "message3" > Error: Required fields are missing.< / p >
< / label >
< / div >
< / form >
2025-01-27 14:25:00 +10:00
2025-01-30 17:40:10 +10:00
< div id = "url-conflict" >
< h2 id = "url-conflict-header" > < / h2 >
< h3 > Would you like to replace it?< / h3 >
< input id = "url-conflict-yes" type = "submit" value = "Yes" >
< input id = "url-conflict-no" type = "submit" value = "No (append a random string)" >
< p > If you replace a link, your browser may still cache the old destination. Others will be able to see the correct destination, if their browser didn't do the same.< / p >
< / div >
< div id = "delete-error" >
< h2 > Error: Failed to replace link< / h2 >
< p id = "delete-error-message" > < / p >
< / div >
2025-01-27 14:25:00 +10:00
< script type = "application/javascript" src = "/lib/browser-polyfill.min.js" > < / script >
< script type = "application/javascript" src = "/popup/popup.js" > < / script >
< / body >
< / html >
