-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (76 loc) · 7.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Give Image URL</title>
<meta name="description" content="Give your local image a url">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Give Image URL">
<meta property="og:description" content="Give your local image a url">
<meta property="og:image" content="">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="shortcut icon" type="image/ico" href="http://rajatsingla.in/favicon.ico">
<style>
#firstIdfile,button{width:100%;line-height:25px;transform:scaleX(1.0012)}body{background-color:#f9fafb;position:relative;font-family:'Muli',"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.01rem;font-size:1.8rem;line-height:1.75em;color:#71757b;padding:35px 35px 100px}.main-content{border-width:1px;border-color:#edf0f4;border-style:solid;background-color:#fff;box-shadow:9px 16px 20.79px .21px rgba(219,222,228,.6);max-width:875px;height:275px;margin:auto;padding:4.2% 2.5%;text-align:center;position:relative}#firstIdfile,.main-content.link-content .link-div{border-width:1px;border-color:#71757b;border-style:solid}.tagline{color:#113e89;font-size:28px;font-weight:400;line-height:25px;text-align:center;margin-bottom:50px}#firstIdfile{max-width:630px;font-size:15px;text-align:right}input[type=file]::-webkit-file-upload-button{background-color:#113e89;width:190px;height:40px;color:#fff;font-size:15px;line-height:23px;text-align:center;transform:scaleX(1.0012)}.content-wrapper{text-align:center;width:100%;max-width:630px;margin:auto}.meta-button{display: block;cursor: pointer;color:#71757b;font-size:14px;line-height:25px;text-align:right;margin-top:14.5px}#firstIdsubmit{max-width:400px}button{background-color:#113e89;height:42px;color:#fff;font-size:15px;text-align:center;margin-top:50px;cursor:pointer}.site-footer{color:#BBC7CC;bottom:0;font-size:12px;position:absolute;margin:0 35px;left:0;right:0}.site-footer a{color:#BBC7CC;text-decoration:none;font-weight:700}section.copyright{width:45%;float:left}section.poweredby{float:right;width:45%;text-align:right}.main-content.link-content{display: none;padding:2% 2.5% 3%;margin-top:3px;height:auto}.main-content.link-content .content-wrapper{display:flex;flex-wrap:wrap;height:auto}.main-content.link-content .tagline{margin-bottom:25px;font-size:24px;width:100%}.main-content.link-content .link-div{font-size:15px;flex:3;padding:14px}.main-content.link-content button{float:right;flex:1;margin:0 0 0 26px;height:auto}.progress-bar{position:absolute;width:0;transition:width 1s;height:2px;background:#103e89;top:0;left:0}.error{text-align:center;width:100%;font-size:20px} li.each-link{font-size: 18px;margin: auto;width: 100%;list-style: none;} .close-links{position: absolute;bottom: -12px;right: 6px;font-size: 12px;cursor: pointer;} img.link-img{border-radius: 3px;box-shadow: 1px 1px 1px rgba(16, 62, 137, 0.47);position: relative;vertical-align: middle;margin-right: 12px;}@media only screen and (max-width:640px){li.each-link{font-size: 15px;} body{padding:5px 5px 100px}.tagline{font-size:20px}input[type=file]{font-size:13px}input[type=file]::-webkit-file-upload-button{width:90px;font-size:13px}.error{font-size:15px}section.copyright,section.poweredby{width:100%;text-align:center}.main-content.link-content .tagline{font-size:18px}.main-content.link-content button{margin:10px 0 0;height:40px;flex: auto;}} .noselect{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .main-content.link-content.display_block{display: block;}
</style>
</head>
<body>
<div id="app">
<div class="main-content">
<div class="progress-bar" v-bind:style="{ width: progress + '%' }"></div>
<div class="content-wrapper">
<div class="tagline">
Shareable <strong>Image URL</strong> generator
</div>
<input id="firstIdfile" name="file"
title="Upload file" placeholder="Upload file" type="file" accept=".png,.jpg">
<a class="meta-button noselect" v-on:click="show_links">All Generated Links</a>
<button v-on:click="generate" id="firstIdsubmit" name="submitbtn" title="Generate Link"
v-bind:disabled="disable_button">
Generate Link
</button>
</div>
</div>
<div v-if="link_generated" class="main-content link-content" v-bind:class="{ display_block: loaded }">
<div class="content-wrapper">
<div class="tagline">
Shareable <a v-bind:href="link" target="new">Link</a> generated
</div>
<input type="text" v-bind:value="link" readonly="" class="link-div" id="link-div">
<button id="copybutton" name="copybutton" v-bind:title="copy_title" v-on:click="copy">
{{copy_title}}
</button>
</div>
</div>
<div v-if="error.length>0" class="main-content link-content" v-bind:class="{ display_block: loaded }">
<div class="content-wrapper">
<div class="error">
{{error}}
</div>
</div>
</div>
<div v-if="showing_links" class="main-content link-content" v-bind:class="{ display_block: loaded }">
<div class="content-wrapper">
<span v-on:click="close_links" class="close-links">close</span>
<ul style="margin: auto;text-align: left;padding:0;">
<li v-for="item in JSON.parse(localStorage.links)" class="each-link">
<img height="30" width="30" v-bind:src="item" class="link-img">{{ item }}
</li>
</ul>
</div>
</div>
</div>
<footer class="site-footer clearfix">
<section class="copyright">
<a href="http://rajatsingla.in">Rajat's Blog</a> ©
• All rights reserved.
</section>
<section class="poweredby">Design by Tanmai Sharma
<a href="https://www.behance.net/tanmaisharma" target="new">tanny</a>
</section>
</footer>
<script>
if(localStorage||(localStorage={},localStorage.links=JSON.stringify([])),localStorage){let e="";try{e=JSON.parse(localStorage.links)}catch(e){console.log("reintializing localStorage links")}"object"!=typeof e&&(localStorage.links=JSON.stringify([]))}var app=new Vue({el:"#app",data:{upload_url:"https://api.imgur.com/3/image",pname:"image",loaded:true,link:"",link_generated:!1,progress:0,error:"",copy_title:"Copy the Link",showing_links:!1,disable_button:!1,progress_handler:function(e){e.lengthComputable&&(this.progress=e.loaded/e.total*100)}},methods:{generate:function(){var e=this;e.error="",e.copy_title="Copy Link",e.link_generated=!1;var t=new FormData,n=this.upload_url,i=this.pname,l=document.getElementById("firstIdfile").files;if(l.length){e.disable_button=1;var o=(l=l[0]).name;t.append(i,l,o);var a=new XMLHttpRequest;a.upload.addEventListener("progress",this.progress_handler.bind(this)),a.open("POST",n,!0),a.setRequestHeader("Authorization","Client-ID 2e56de818495150"),a.send(t),a.onreadystatechange=function(t){if(e.disable_button=!1,4===a.readyState)if(200===a.status){document.getElementById("firstIdfile").value="",e.link_generated=!0,e.link=JSON.parse(a.response).data.link;let t=JSON.parse(localStorage.links)||[];t.push(e.link),localStorage.links=JSON.stringify(t),console.log(e.link),e.progress=0}else e.error="Something went wrong, Please try again."}}else e.error="Select a File"},copy:function(){document.getElementById("link-div").select(),document.execCommand("Copy"),this.copy_title="copied"},show_links:function(){this.showing_links=!0},close_links:function(){this.showing_links=!1}}});
</script>
</body>