new theme

parent 171dad1f
......@@ -4,7 +4,7 @@
"description" : "Create shortened URL from a long URL",
"homepage_url": "https://url.itunix.eu/",
"version": "1.2.1",
"version": "1.2.2",
"icons": {
"48": "icons/icon-48.png",
......
......@@ -3,30 +3,60 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/styles/bootstrap.css" media="screen">
<link rel="stylesheet" href="/styles/custom.min.css">
<style>
body{width:400px;font-family:'Montserrat',sans-serif}h2{margin:2rem 0 0}.flexbox .normal{flex:0;margin:0 0 0 1rem}.flexbox div input{padding:.5em 1em;width:70%}.flexbox div button{padding:.5em 1em;white-space:nowrap;width:25%}input{width:100%;padding:6px 6px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;font-family:'Montserrat',sans-serif;transition:all .3s;border-bottom:2px solid #bebed2;font-size:1.2em}input:focus{border-bottom:2px solid #78788c}.button{float:right;padding:8px 12px;margin:8px 0;font-family:'Montserrat',sans-serif;border:2px solid #78788c;background:0;color:#5a5a6e;cursor:pointer;transition:all .3s}.button:hover{background:#78788c;color:#fff}#demo{font-size:.8em}#apiserver{font-size: 1em;}
</style>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
body{width:450px;height: 250px; background-color: #fff !important;}
.container {top: 10px; position: absolute;}
input {border: 1px solid #ccc !important;}
</style>
</head>
<body>
<div class="container">
<section class="flexbox" id="short_menu" style="display: none;">
<input type="text" placeholder="URL to shortening" id="urltext" />
<button id="urlclick" class="button">Submit</button>
<input type="text" id="shorturl" style="display:none;" />
<p id="info">Paste an URL in text box and click submit button.</p>
</section>
<div class="row"></div>
<div class="col-lg-6">
<section class="flexbox" id="setapi">
<p id="info">Enter server and API key to get started.</p>
<input type="text" placeholder="API Server" value="https://url.itunix.eu" id="apiserver" />
<input type="text" placeholder="API Key" id="apikey" />
<button id="apiclick" class="button">Save</button>
</section>
<fieldset id="short_menu" style="display: none;">
<div class="alert alert-dismissible alert-secondary">
<button type="button" class="close" data-dismiss="alert" id="clearapi" style="display: none;">&times;</button>
<strong id="info">Paste an URL in text box and click Shorten.</strong>
</div>
<div class="input-group mb-3 input-group-lg">
<input type="text" class="form-control" type="text" placeholder="Paste a link to shorten it" autocomplete="off" autocorrect="off" autocapitalize="off" id="urltext" aria-describedby="urlclick">
<div class="input-group-append">
<button class="btn btn-danger" type="button" id="urlclick">Shorten</button>
</div>
</div>
<div class="input-group mb-3 input-group-lg">
<input class="form-control" type="text" id="shorturl" style="display:none;" />
</div>
</fieldset>
<button id="clearapi" style="display: none;">Remove API key</button>
<fieldset id="setapi">
<p id="info" class="alert alert-dismissible alert-secondary">Enter server and API key to get started.</p>
<div class="form-group row">
<div class="col-sm-10">
<input class="form-control" type="text" placeholder="API Server" value="https://url.itunix.eu" id="apiserver" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<input class="form-control" type="text" placeholder="API key" id="apikey" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button id="apiclick" class="btn btn-secondary">Save</button>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
</html>
\ No newline at end of file
......@@ -41,7 +41,8 @@ function shortUrl(apikey, long_url) {
xhttp.onreadystatechange = function() {
if (this.status == 200 || this.status == 201) {
document.getElementById("shorturl").value = this.responseText;
document.getElementById("shorturl").setAttribute("style","display:block;");
document.getElementById("shorturl").setAttribute("style","display:block;text-align: center;font-weight: bold;");
document.getElementById("info").innerHTML = "Link is copied to clipboard";
copyToClipboard();
} else {
document.getElementById("info").innerHTML = this.responseText;
......
This diff is collapsed.
pre{background:#f7f7f9}@media (min-width: 768px){body>.navbar-transparent{box-shadow:none}body>.navbar-transparent .navbar-nav>.open>a{box-shadow:none}}#home,#help{font-size:0.9rem}#home .navbar,#help .navbar{background:#349aed;background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);transition:box-shadow 200ms ease-in}#home .navbar-transparent,#help .navbar-transparent{background:none !important;box-shadow:none}#home .navbar-brand .nav-link,#help .navbar-brand .nav-link{display:inline-block;margin-right:-30px}#home .navbar-brand img,#help .navbar-brand img{display:inline-block;margin:0 10px;width:30px}#home .nav-link,#help .nav-link{text-transform:uppercase;font-weight:500;color:#fff}#home{padding-top:0px}#home .btn{padding:0.6rem 0.55rem 0.5rem;box-shadow:none;font-size:0.7rem;font-weight:500}.bs-docs-section{margin-top:4em}.bs-docs-section .page-header h1{padding:2rem 0;font-size:3rem}.dropdown-menu.show[aria-labelledby="themes"]{display:flex;width:420px;flex-wrap:wrap}.dropdown-menu.show[aria-labelledby="themes"] .dropdown-item{width:33.333%}.dropdown-menu.show[aria-labelledby="themes"] .dropdown-item:first-child{width:100%}.bs-component{position:relative}.bs-component+.bs-component{margin-top:1rem}.bs-component .card{margin-bottom:1rem}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold}#source-modal pre{max-height:calc(100vh - 11rem);background-color:rgba(0,0,0,0.7);color:rgba(255,255,255,0.7)}.nav-tabs{margin-bottom:15px}.progress{margin-bottom:10px}#footer{margin:5em 0}#footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}#footer p{clear:left;margin-bottom:0}.splash{padding:12em 0 6em;background:#349aed;background:linear-gradient(145deg, #349aed 50%, #34d8ed 100%);color:#fff;text-align:center}.splash .logo{width:160px}.splash h1{font-size:3em;color:#fff}.splash #social{margin:2em 0 3em}.splash .alert{margin:2em 0;border:none}.splash .sponsor a{color:#fff}.section-tout{padding:6em 0 1em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:0.2em}.section-tout p{margin-bottom:5em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview img{max-width:100%}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width: 767px){.section-preview .image img{width:100%}}.sponsor img{max-width:100%}.sponsor #carbonads{max-width:240px;margin:0 auto}.sponsor .carbon-text{display:block;margin-top:1em;font-size:12px}.sponsor .carbon-poweredby{float:right;margin-top:1em;font-size:10px}@media (max-width: 767px){.splash{padding-top:8em}.splash .logo{width:100px}.splash h1{font-size:2em}#banner{margin-bottom:2em;text-align:center}}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment