Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Marco Kellershoff
pwny.gorilla.moe
Commits
add811f8
Verified
Commit
add811f8
authored
Aug 24, 2018
by
Marco Kellershoff
🤸
Browse files
Add title and autorun/fullscreen to share dialog
Also removed Google URL shortener, because it was sunsetted some time ago and did not work anymore.
parent
14b3326a
Changes
2
Hide whitespace changes
Inline
Side-by-side
app/assets/pwny.js
View file @
add811f8
...
...
@@ -4,7 +4,6 @@
var
Pwny
=
function
()
{
var
self
=
this
,
googleapikeys
=
{},
getWidth
=
function
()
{
return
window
.
innerWidth
;
},
...
...
@@ -36,18 +35,6 @@
this
.
version
=
3
;
this
.
getGoogleApiKey
=
function
(
k
)
{
return
googleapikeys
[
k
];
};
this
.
getGoogleApiKeys
=
function
()
{
return
googleapikeys
;
};
this
.
setGoogleApiKeys
=
function
(
apikeys
)
{
googleapikeys
=
apikeys
;
};
this
.
append
=
function
(
element
,
target
)
{
target
=
target
||
document
.
body
;
if
(
typeof
target
===
"
string
"
)
target
=
document
.
querySelector
(
target
);
...
...
@@ -377,6 +364,10 @@
if
(
!
err
)
{
EDITOR
.
setValue
(
result
);
EDITOR
.
resize
(
true
);
var
title
=
url_params
.
get
(
"
title
"
);
if
(
title
)
{
document
.
title
=
decodeURIComponent
(
title
);
}
var
line
=
url_params
.
get
(
"
l
"
);
if
(
line
)
{
var
column
=
...
...
@@ -547,42 +538,6 @@
);
};
this
.
initGoogleApiKeys
=
function
(
cb
)
{
window
.
$
.
ajax
({
url
:
"
googleapikeys.json
"
,
method
:
"
GET
"
}).
done
(
function
(
data
)
{
self
.
setGoogleApiKeys
(
data
);
if
(
cb
)
{
cb
();
}
});
};
this
.
shortenUrl
=
function
(
longUrl
,
cb
)
{
var
apikey
=
self
.
getGoogleApiKey
(
"
urlshortener
"
);
if
(
!
apikey
)
{
self
.
initGoogleApiKeys
(
function
()
{
self
.
shortenUrl
(
longUrl
,
cb
);
});
}
else
{
window
.
$
.
ajax
({
url
:
"
https://www.googleapis.com/urlshortener/v1/url?key=
"
+
apikey
,
method
:
"
POST
"
,
processData
:
false
,
dataType
:
"
json
"
,
contentType
:
"
application/json
"
,
data
:
JSON
.
stringify
({
longUrl
:
longUrl
})
}).
done
(
function
(
data
)
{
cb
(
data
);
});
}
};
this
.
showShareWindow
=
function
(
link
)
{
var
$shareDialogue
=
window
.
$
(
"
#shareDialogue
"
);
var
shareUrlBox
=
$shareDialogue
.
find
(
"
#shareUrlBox
"
);
...
...
@@ -662,6 +617,20 @@
}
else
{
port
=
"
:
"
+
port
;
}
var
title
=
window
.
$
(
"
#shareUrlTitle
"
).
val
();
var
fullscreen
=
window
.
$
(
"
#shareUrlFullscreen
"
).
is
(
"
:checked
"
);
if
(
title
.
length
)
{
title
=
"
&title=
"
+
encodeURIComponent
(
title
);
}
if
(
fullscreen
)
{
fullscreen
=
"
&a=1
"
;
}
else
{
fullscreen
=
""
;
}
self
.
compression
.
compress
(
EDITOR
.
getValue
(),
function
(
err
,
result
)
{
...
...
@@ -674,6 +643,8 @@
port
+
"
/#!/?s=
"
+
syntax
+
title
+
fullscreen
+
"
&c=
"
+
cursorPosition
.
column
+
"
&l=
"
+
...
...
@@ -799,41 +770,32 @@
window
.
$
(
"
#shareDialogue
"
).
on
(
"
hidden.bs.modal
"
,
function
()
{
window
.
$
(
"
#sh
ortenUrlCheckbox
"
).
prop
(
window
.
$
(
"
#sh
areUrlFullscreen
"
).
prop
(
"
checked
"
,
false
);
}
);
window
.
$
(
"
#sh
ortenUrlCheckbox
"
).
on
(
window
.
$
(
"
#sh
areUrlFullscreen
"
).
on
(
"
change
"
,
function
()
{
if
(
this
.
checked
===
true
)
{
self
.
shortenUrl
(
window
.
$
(
"
#shareUrlBox
"
).
val
(),
function
(
data
)
{
if
(
data
.
kind
===
"
urlshortener#url
"
)
{
window
.
$
(
"
#shareUrlBox
"
).
val
(
data
.
id
);
}
}
);
}
else
{
getShareableLink
({},
function
(
err
,
link
)
{
if
(
err
===
false
)
{
window
.
$
(
"
#shareUrlBox
"
).
val
(
link
);
}
});
}
getShareableLink
({},
function
(
err
,
link
)
{
if
(
err
===
false
)
{
window
.
$
(
"
#shareUrlBox
"
).
val
(
link
);
}
});
}
);
window
.
$
(
"
#shareUrlTitle
"
).
on
(
"
keyup
"
,
function
()
{
getShareableLink
({},
function
(
err
,
link
)
{
if
(
err
===
false
)
{
window
.
$
(
"
#shareUrlBox
"
).
val
(
link
);
}
});
});
window
.
$
(
window
).
on
(
"
hashchange
"
,
function
()
{
window
.
location
.
reload
();
});
...
...
app/index.html
View file @
add811f8
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
/>
<meta
name=
"viewport"
content=
"width=device-width"
/>
<title>
PWNY CodeTest
</title>
<meta
name=
"theme-color"
content=
"#272b30"
>
<link
rel=
"apple-touch-icon"
sizes=
"57x57"
href=
"/apple-touch-icon-57x57.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"114x114"
href=
"/apple-touch-icon-114x114.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"72x72"
href=
"/apple-touch-icon-72x72.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"144x144"
href=
"/apple-touch-icon-144x144.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"60x60"
href=
"/apple-touch-icon-60x60.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"120x120"
href=
"/apple-touch-icon-120x120.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"76x76"
href=
"/apple-touch-icon-76x76.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"152x152"
href=
"/apple-touch-icon-152x152.png"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-196x196.png"
sizes=
"196x196"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-160x160.png"
sizes=
"160x160"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-96x96.png"
sizes=
"96x96"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-16x16.png"
sizes=
"16x16"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-32x32.png"
sizes=
"32x32"
>
<style>
<head>
<meta
charset=
"utf-8"
/>
<meta
name=
"viewport"
content=
"width=device-width"
/>
<title>
PWNY CodeTest
</title>
<meta
name=
"theme-color"
content=
"#272b30"
>
<link
rel=
"apple-touch-icon"
sizes=
"57x57"
href=
"/apple-touch-icon-57x57.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"114x114"
href=
"/apple-touch-icon-114x114.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"72x72"
href=
"/apple-touch-icon-72x72.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"144x144"
href=
"/apple-touch-icon-144x144.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"60x60"
href=
"/apple-touch-icon-60x60.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"120x120"
href=
"/apple-touch-icon-120x120.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"76x76"
href=
"/apple-touch-icon-76x76.png"
>
<link
rel=
"apple-touch-icon"
sizes=
"152x152"
href=
"/apple-touch-icon-152x152.png"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-196x196.png"
sizes=
"196x196"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-160x160.png"
sizes=
"160x160"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-96x96.png"
sizes=
"96x96"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-16x16.png"
sizes=
"16x16"
>
<link
rel=
"icon"
type=
"image/png"
href=
"/favicon-32x32.png"
sizes=
"32x32"
>
<style>
@font-face
{
font-family
:
'Source Code Pro'
;
font-style
:
normal
;
font-weight
:
400
;
src
:
local
(
'Source Code Pro'
),
local
(
'SourceCodePro-Regular'
),
url(assets/SourceCodePro-Regular.woff)
format
(
'woff'
);
unicode-range
:
U
+
0000-00
FF
,
U
+
0131
,
U
+
0152-0153
,
U
+
02
C6
,
U
+
02
DA
,
U
+
02
DC
,
U
+
2000-206
F
,
U
+
2074
,
U
+
20
AC
,
U
+
2212
,
U
+
2215
,
U
+
E0FF
,
U
+
EFFD
,
U
+
F000
;
font-family
:
'Source Code Pro'
;
font-style
:
normal
;
font-weight
:
400
;
src
:
local
(
'Source Code Pro'
),
local
(
'SourceCodePro-Regular'
),
url(assets/SourceCodePro-Regular.woff)
format
(
'woff'
);
unicode-range
:
U
+
0000-00
FF
,
U
+
0131
,
U
+
0152-0153
,
U
+
02
C6
,
U
+
02
DA
,
U
+
02
DC
,
U
+
2000-206
F
,
U
+
2074
,
U
+
20
AC
,
U
+
2212
,
U
+
2215
,
U
+
E0FF
,
U
+
EFFD
,
U
+
F000
;
}
html
,
body
{
overflow
:
hidden
;
background-color
:
#272b30
;}
html
,
body
,
div
,
iframe
{
margin
:
0
;
padding
:
0
;
border
:
0
none
;}
...
...
@@ -34,249 +34,256 @@ html,body,div,iframe {margin:0;padding:0;border:0 none;}
#app
iframe
{
display
:
block
;
border
:
1px
solid
#444
;
margin-top
:
0
;}
html
,
body
,
#app
{
margin
:
0
;
padding
:
0
;
width
:
100%
;
height
:
100%
;}
@media
(
max-width
:
1000px
)
{
body
#app
#logo
{
display
:
none
;}
body
#app
{
margin-top
:
25px
;}
body
#app
#logo
{
display
:
none
;}
body
#app
{
margin-top
:
25px
;}
}
#app
#table
{
width
:
100%
;
height
:
calc
(
100%
-
111px
);
width
:
100%
;
height
:
calc
(
100%
-
111px
);
}
#app
#table-row
{
height
:
100%
;
height
:
100%
;
}
#app
{
display
:
none
;
box-sizing
:
border-box
;
margin
:
111px
0
0
0
;
width
:
100%
;
height
:
100%
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
overflow-scrolling
:
touch
;
padding
:
20px
;
display
:
none
;
box-sizing
:
border-box
;
margin
:
111px
0
0
0
;
width
:
100%
;
height
:
100%
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
overflow-scrolling
:
touch
;
padding
:
20px
;
}
#col1
,
#col2
{
height
:
100%
;}
#col1
.ace_editor
{
width
:
100%
;
height
:
100%
;}
#col2
iframe
{
position
:
relative
;
width
:
100%
;
height
:
100%
;}
#app
#col2
iframe
.fullscreen
{
position
:
relative
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
border
:
0
none
;
margin-top
:
0
;
position
:
relative
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
border
:
0
none
;
margin-top
:
0
;
}
#app
#table
.fullscreen
{
height
:
100%
;
height
:
100%
;
}
#btn_run
{
background-color
:
#82BF56
;
border-bottom
:
5px
solid
#669644
;
text-shadow
:
0px
-2px
#669644
;
background-color
:
#82BF56
;
border-bottom
:
5px
solid
#669644
;
text-shadow
:
0px
-2px
#669644
;
}
#file
{
display
:
none
;
display
:
none
;
}
#btn_file
{
background-color
:
#56bf8f
;
border-bottom
:
5px
solid
#36aa7a
;
text-shadow
:
0px
-2px
#36aa7a
;
background-color
:
#56bf8f
;
border-bottom
:
5px
solid
#36aa7a
;
text-shadow
:
0px
-2px
#36aa7a
;
}
#btn_add
{
background-color
:
#F2CF66
;
border-bottom
:
5px
solid
#D1B358
;
text-shadow
:
0px
-2px
#D1B358
;
background-color
:
#F2CF66
;
border-bottom
:
5px
solid
#D1B358
;
text-shadow
:
0px
-2px
#D1B358
;
}
#btn_delete
{
background-color
:
#E74C3C
;
border-bottom
:
5px
solid
#BD3E31
;
text-shadow
:
0px
-2px
#BD3E31
;
background-color
:
#E74C3C
;
border-bottom
:
5px
solid
#BD3E31
;
text-shadow
:
0px
-2px
#BD3E31
;
}
#btn_share
{
background-color
:
#3498DB
;
border-bottom
:
5px
solid
#2980B9
;
text-shadow
:
0px
-2px
#2980B9
;
background-color
:
#3498DB
;
border-bottom
:
5px
solid
#2980B9
;
text-shadow
:
0px
-2px
#2980B9
;
}
#templates
{
background-color
:
#112233
;
border-bottom
:
5px
solid
#051525
;
text-shadow
:
0px
-2px
#051525
;
background-color
:
#112233
;
border-bottom
:
5px
solid
#051525
;
text-shadow
:
0px
-2px
#051525
;
}
#syntax
{
background-color
:
#226666
;
border-bottom
:
5px
solid
#155050
;
text-shadow
:
0px
-2px
#155050
;
background-color
:
#226666
;
border-bottom
:
5px
solid
#155050
;
text-shadow
:
0px
-2px
#155050
;
}
#syntax
option
:checked
{
background-color
:
#033
;
background-color
:
#033
;
}
#logo
{
position
:
fixed
;
top
:
0
;
width
:
199px
;
height
:
130px
;
position
:
fixed
;
top
:
0
;
width
:
199px
;
height
:
130px
;
}
#drawer-toggle-label
:before
{
content
:
""
;
display
:
block
;
position
:
absolute
;
height
:
2px
;
width
:
24px
;
background
:
#fff
;
left
:
13px
;
top
:
18px
;
box-shadow
:
0
6px
0
#fff
,
0
12px
0
#fff
;
content
:
""
;
display
:
block
;
position
:
absolute
;
height
:
2px
;
width
:
24px
;
background
:
#fff
;
left
:
13px
;
top
:
18px
;
box-shadow
:
0
6px
0
#fff
,
0
12px
0
#fff
;
}
#drawer-toggle-label
{
display
:
none
;
position
:
fixed
;
top
:
0
;
left
:
0
;
height
:
50px
;
width
:
50px
;
z-index
:
1
;
background
:
transparent
;
display
:
none
;
position
:
fixed
;
top
:
0
;
left
:
0
;
height
:
50px
;
width
:
50px
;
z-index
:
1
;
background
:
transparent
;
}
#drawer-toggle
{
display
:
none
;
}
#drawer
{
position
:
fixed
;
top
:
0
;
padding-top
:
50px
;
height
:
100%
;
width
:
250px
;
background
:
#2f2f2f
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
left
:
-250px
;
background
:
""
;
position
:
fixed
;
top
:
0
;
padding-top
:
50px
;
height
:
100%
;
width
:
250px
;
background
:
#2f2f2f
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
left
:
-250px
;
background
:
""
;
}
#drawer
ul
{
list-style
:
none
;
padding
:
0
;
list-style
:
none
;
padding
:
0
;
}
#drawer
li
a
{
display
:
block
;
color
:
#fff
;
text-decoration
:
none
;
text-align
:
center
;
font-family
:
'Source Code Pro'
;
display
:
block
;
color
:
#fff
;
text-decoration
:
none
;
text-align
:
center
;
font-family
:
'Source Code Pro'
;
}
#drawer
li
button
,
#drawer
li
select
{
font-family
:
'Source Code Pro'
;
position
:
relative
;
padding
:
10px
40px
;
margin
:
0px
10px
10px
10px
;
border-radius
:
10px
;
font-size
:
18px
;
color
:
#FFF
;
text-decoration
:
none
;
font-family
:
'Source Code Pro'
;
position
:
relative
;
padding
:
10px
40px
;
margin
:
0px
10px
10px
10px
;
border-radius
:
10px
;
font-size
:
18px
;
color
:
#FFF
;
text-decoration
:
none
;
}
#drawer
li
button
:active
{
transform
:
translate
(
0px
,
5px
);
-webkit-transform
:
translate
(
0px
,
5px
);
border-bottom
:
1px
solid
;
transform
:
translate
(
0px
,
5px
);
-webkit-transform
:
translate
(
0px
,
5px
);
border-bottom
:
1px
solid
;
}
#drawer
li
{
margin
:
0
;
width
:
100%
;
padding
:
10px
0
margin
:
0
;
width
:
100%
;
padding
:
10px
0
}
#drawer-toggle
:checked
~
#drawer-toggle-label
,
#drawer-toggle
:checked
~
header
{
left
:
calc
(
100%
-
100px
);
}
#drawer-toggle
:checked
~
#drawer
{
width
:
calc
(
100%
-
50px
);
left
:
0
;
width
:
calc
(
100%
-
50px
);
left
:
0
;
}
#drawer-toggle
:checked
~
#app
{
margin-left
:
300px
;
width
:
calc
(
100%
-
300px
);
}
@media
screen
and
(
min-width
:
380px
)
{
#drawer-toggle
:checked
~
#drawer-toggle-label
,
#drawer-toggle
:checked
~
#drawer
{
width
:
300px
;
left
:
0
;
}
@media
screen
and
(
min-width
:
380px
)
{
#drawer-toggle
:checked
~
#drawer-toggle-label
,
#drawer-toggle
:checked
~
#drawer
{
width
:
300px
;
left
:
0
;
}
}
.loader
{
margin
:
5%
auto
;
display
:
none
;
border-radius
:
50%
;
width
:
180px
;
height
:
180px
;
-webkit-animation
:
spin
2s
linear
infinite
;
animation
:
spin
2s
linear
infinite
;
margin
:
5%
auto
;
display
:
none
;
border-radius
:
50%
;
width
:
180px
;
height
:
180px
;
-webkit-animation
:
spin
2s
linear
infinite
;
animation
:
spin
2s
linear
infinite
;
}
@-webkit-keyframes
spin
{
0
%
{
-webkit-transform
:
rotate
(
0deg
);
}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
}
0
%
{
-webkit-transform
:
rotate
(
0deg
);
}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
}
}
@keyframes
spin
{
0
%
{
transform
:
rotate
(
0deg
);
}
100
%
{
transform
:
rotate
(
360deg
);
}
0
%
{
transform
:
rotate
(
0deg
);
}
100
%
{
transform
:
rotate
(
360deg
);
}
}
.loader
{
border-top
:
16px
solid
#3498DB
;
border-right
:
16px
solid
#82BF56
;
border-bottom
:
16px
solid
#E74C3C
;
border-left
:
16px
solid
#F2CF66
;
border-top
:
16px
solid
#3498DB
;
border-right
:
16px
solid
#82BF56
;
border-bottom
:
16px
solid
#E74C3C
;
border-left
:
16px
solid
#F2CF66
;
}
</style>
</head>
<body>
<input
id=
"drawer-toggle"
type=
"checkbox"
>
<label
id=
"drawer-toggle-label"
for=
"drawer-toggle"
></label>
<nav
id=
"drawer"
></nav>
<div
id=
"loading"
class=
"loader"
></div>
<div
id=
"app"
></div>
<div
style=
"display:none;"
id=
"shareDialogue"
class=
"modal fade"
tabindex=
"-1"
role=
"dialog"
aria-labelledby=
"Share URL"
aria-hidden=
"true"
>
<div
class=
"modal-dialog"
role=
"document"
>
<div
class=
"modal-content"
>
<div
class=
"modal-header"
>
<button
type=
"button"
class=
"close"
data-dismiss=
"modal"
aria-label=
"Close"
>
<span
aria-hidden=
"true"
>
×
</span>
</button>
<h5
class=
"modal-title"
>
Share
</h5>
</div>
<div
class=
"modal-body"
>
<div
class=
"input-group"
>
<input
type=
"text"
class=
"form-control"
id=
"shareUrlBox"
readonly=
"true"
>
<span
class=
"input-group-btn"
>
<button
id=
"copyShareUrlButton"
data-dismiss=
"modal"
data-clipboard-target=
"#shareUrlBox"
class=
"btn btn-success"
type=
"button"
>
Copy
&
Close
</button>
</span>
</div>
<div
class=
"checkbox"
>
<label>
<input
type=
"checkbox"
id=
"shortenUrlCheckbox"
>
Shorten URL
</label>
</div>
</div>
<div
class=
"modal-footer"
>
<button
type=
"button"
class=
"btn btn-primary"
data-dismiss=
"modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<script
src=
"assets/ace/src-noconflict/ace.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script
src=
"assets/ace/src-noconflict/ext-language_tools.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script
src=
"assets/lzma.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script
src=
"assets/pwny.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<link
rel=
"stylesheet"
href=
"assets/bootstrap/bootstrap.min.css"
/>
<link
rel=
"stylesheet"
href=
"assets/bootstrap/themes/slate/bootstrap.min.css"
/>
<script
src=
"assets/jquery/jquery-3.2.1.min.js"
></script>
<script
src=
"assets/bootstrap/bootstrap.min.js"
></script>
<script
src=
"assets/clipboard.min.js"
></script>
<script
src=
"https://apis.google.com/js/client.js?onload=googleApiLoaded"
></script>
</body>
</style>
</head>
<body>
<input
id=
"drawer-toggle"
type=
"checkbox"
>
<label
id=
"drawer-toggle-label"
for=
"drawer-toggle"
></label>
<nav
id=
"drawer"
></nav>
<div
id=
"loading"
class=
"loader"
></div>
<div
id=
"app"
></div>
<div
style=
"display:none;"
id=
"shareDialogue"
class=
"modal fade"
tabindex=
"-1"
role=
"dialog"
aria-labelledby=
"Share URL"
aria-hidden=
"true"
>
<div
class=
"modal-dialog"
role=
"document"
>
<div
class=
"modal-content"
>
<div
class=
"modal-header"
>
<button
type=
"button"
class=
"close"
data-dismiss=
"modal"
aria-label=
"Close"
>
<span
aria-hidden=
"true"
>
×
</span>
</button>
<h5
class=
"modal-title"
>
Share
</h5>
</div>
<div
class=
"modal-body"
>
<div
class=
"input-group"
>
<input
type=
"text"
class=
"form-control"
id=
"shareUrlBox"
readonly=
"true"
/>
<span
class=
"input-group-btn"
>
<button
id=
"copyShareUrlButton"
data-dismiss=
"modal"
data-clipboard-target=
"#shareUrlBox"
class=
"btn btn-success"
type=
"button"
>
Copy
&
Close
</button>
</span>
</div>
<div
class=
"input-group"
>
<label>