2022-02-24 19:51:11 +01:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Sample Templates - Instant View< / title >
< link rel = "icon" type = "image/svg+xml" href = "/img/website_icon.svg?4" >
2022-04-21 15:52:36 +02:00
< link rel = "apple-touch-icon" sizes = "180x180" href = "/img/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/img/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/img/favicon-16x16.png" >
< link rel = "alternate icon" href = "/img/favicon.ico" type = "image/x-icon" / >
2022-02-24 19:51:11 +01:00
< link href = "/css/bootstrap.min.css?3" rel = "stylesheet" >
< link href = "/css/bootstrap-extra.css?2" rel = "stylesheet" >
2022-09-13 18:10:01 +02:00
< link href = "/css/telegram.css?232" rel = "stylesheet" >
2022-02-24 19:51:11 +01:00
< link href = "/css/instantview.css?115" rel = "stylesheet" >
< / head >
< body class = "no-transition" >
< header >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-12 col-lg-10 col-lg-offset-1" >
< div class = "header-wrap" >
< div id = "header-panel" class = "header-panel" >
< div class = "header-breadcrumb header-breadcrumb-simple" >
< ol id = "breadcrumb" class = "header-nav breadcrumb" > < li class = "iv-logo" > < a href = "/" > < i class = "iv-icon" > < / i > < span class = "iv-logo-title" > Instant View< / span > < / a > < / li > < li class = "active" > Sample Templates< / li > < / ol >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / header >
< main class = "rules container" >
< div class = "row" >
< div class = "col-sm-3 col-sm-push-9 col-lg-offset-1 col-lg-3 col-lg-push-7" >
< section class = "nav-menu" >
< ul class = "nav nav-pills nav-stacked" > < li > < a href = "/" > Intro< / a > < / li > < li > < a href = "/templates" > Templates< / a > < / li > < li > < a href = "/checklist" > Checklist< / a > < / li > < li > < a href = "/contest/winners2017" > 2017 Contest Winners< / a > < / li > < li > < a href = "/contest/winners2019" > 2019 Contest Winners< / a > < / li > < li class = "divider" > < / li > < li class = "active" > < a href = "/samples/" > Sample Templates< / a > < / li > < li > < a href = "/my/" data-need-auth > My Templates< / a > < / li > < li > < a href = "/docs" > Manual< / a > < / li > < / ul >
< div class = "nav-footer" >
< a class = "logged-link" href = "/auth" data-need-auth > Login< / a >
< span class = "logged" >
< span class = "logged-label" > Hello, anonymous! < / span >
< / span >
< / div >
< / section >
< / div >
< div class = "col-sm-9 col-sm-pull-3 col-lg-7 col-lg-pull-3" >
< div class = "content" >
< section >
< h3 > Sample Templates< / h3 >
< p class = "about-text" > In this section, you can check out the exact same templates that we' re currently using to generate Instant View pages for posts on < b > Medium< / b > , < b > Telegra.ph< / b > , and the < b > Telegram Blog< / b > . We' ve added many comments to these templates, so they literally speak for themselves.< / p >
< / section > < section data-section = "medium.com" >
< h3 >
< a class = "section-header" href = "/samples/medium.com/" > medium.com< / a > < span class = "header-count" > 7< / span >
< / h3 >
< a class = "list-group-row" href = "/samples/medium.com/" > < div class = "list-group-item iv-icon-before list-group-item-success" style = "width: 100%;" >
< div class = "list-group-item-body" >
< h4 class = "list-group-item-heading" > < b > 7 pages< / b > < / h4 >
< p class = "list-group-item-text" > Not modified< / p >
< / div >
< / div > < / a >
< div class = "list-group list-group-template hide" >
< a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40_cmdv_%2Fi-want-to-learn-javascript-in-2015-e96cd85ad225" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225
< / h4 >
< p class = "list-group-item-text" >
Want to learn JavaScript ?
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40durov%2Fhow-to-hack-telegram-43dc9e6c5ac2" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://medium.com/@durov/how-to-hack-telegram-43dc9e6c5ac2
< / h4 >
< p class = "list-group-item-text" >
How to “hack” Telegram
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40ev%2Fwelcome-to-medium-9e53ca408c48" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://medium.com/@ev/welcome-to-medium-9e53ca408c48
< / h4 >
< p class = "list-group-item-text" >
Welcome to Medium
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40ev%2Fwriting-in-medium-df8eac9f4a5e" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://medium.com/@ev/writing-in-medium-df8eac9f4a5e
< / h4 >
< p class = "list-group-item-text" >
Writing in Medium
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2F%40frisch%2Fmath-the-elections-over-can-we-please-move-on-20b2ad1b6088" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://medium.com/@frisch/math-the-elections-over-can-we-please-move-on-20b2ad1b6088
< / h4 >
< p class = "list-group-item-text" >
Math: The Election’ s Over. Can We Please Move On?
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2Fcharged-tech%2Fapple-just-told-the-world-it-has-no-idea-who-the-mac-is-for-722a2438389b" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://medium.com/charged-tech/apple-just-told-the-world-it-has-no-idea-who-the-mac-is-for-722a2438389b
< / h4 >
< p class = "list-group-item-text" >
Apple just told the world it has no idea who the Mac is for
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/medium.com/?url=https%3A%2F%2Fmedium.com%2Fmatter%2Fthe-terrifying-true-story-of-the-garbage-that-could-kill-the-whole-human-race-b17eebd6d54" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://medium.com/matter/the-terrifying-true-story-of-the-garbage-that-could-kill-the-whole-human-race-b17eebd6d54
< / h4 >
< p class = "list-group-item-text" >
The terrifying true story of the garbage that could kill the whole human race
< / p >
< / div >
< / a >
< / div >
< / section > < section data-section = "telegra.ph" >
< h3 >
< a class = "section-header" href = "/samples/telegra.ph/" > telegra.ph< / a > < span class = "header-count" > 2< / span >
< / h3 >
< a class = "list-group-row" href = "/samples/telegra.ph/" > < div class = "list-group-item iv-icon-before list-group-item-success" style = "width: 100%;" >
< div class = "list-group-item-body" >
< h4 class = "list-group-item-heading" > < b > 2 pages< / b > < / h4 >
< p class = "list-group-item-text" > Not modified< / p >
< / div >
< / div > < / a >
< div class = "list-group list-group-template hide" >
< a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegra.ph/?url=https%3A%2F%2Ftelegra.ph%2FGifs-FAQ" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegra.ph/Gifs-FAQ
< / h4 >
< p class = "list-group-item-text" >
What are GIFs?
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegra.ph/?url=https%3A%2F%2Ftelegra.ph%2Fapi" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegra.ph/api
< / h4 >
< p class = "list-group-item-text" >
Telegraph API
< / p >
< / div >
< / a >
< / div >
< / section > < section data-section = "telegram.org" >
< h3 >
< a class = "section-header" href = "/samples/telegram.org/" > telegram.org< / a > < span class = "header-count" > 7< / span >
< / h3 >
< a class = "list-group-row" href = "/samples/telegram.org/" > < div class = "list-group-item iv-icon-before list-group-item-success" style = "width: 100%;" >
< div class = "list-group-item-body" >
< h4 class = "list-group-item-heading" > < b > 7 pages< / b > < / h4 >
< p class = "list-group-item-text" > Not modified< / p >
< / div >
< / div > < / a >
< div class = "list-group list-group-template hide" >
< a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fandroid-themes" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegram.org/blog/android-themes
< / h4 >
< p class = "list-group-item-text" >
Custom Themes
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fcalls" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegram.org/blog/calls
< / h4 >
< p class = "list-group-item-text" >
Voice Calls: Secure, Crystal-Clear, AI-Powered
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fdesktop-1-0" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegram.org/blog/desktop-1-0
< / h4 >
< p class = "list-group-item-text" >
Telegram Desktop reaches version 1.0 – and it' s BEAUTIFUL
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fedit" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegram.org/blog/edit
< / h4 >
< p class = "list-group-item-text" >
Edit Messages, New Mentions and More
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Finstant-view" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegram.org/blog/instant-view
< / h4 >
< p class = "list-group-item-text" >
Instant View, Telegraph, and Other Goodies
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Ftelegraph" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegram.org/blog/telegraph
< / h4 >
< p class = "list-group-item-text" >
Meet the Telegraph API for Logins and Stats
< / p >
< / div >
< / a > < a class = "list-group-item iv-icon-before list-group-item-success" href = "/samples/telegram.org/?url=https%3A%2F%2Ftelegram.org%2Fblog%2Funsend-and-usage" >
< div class = "list-group-item-body" >
< div class = "list-group-item-status" > Not modified< / div >
< h4 class = "list-group-item-heading" >
https://telegram.org/blog/unsend-and-usage
< / h4 >
< p class = "list-group-item-text" >
Unsend Messages, Network Usage, and More
< / p >
< / div >
< / a >
< / div >
< / section >
< / div >
< / div >
< / div >
< / main > < div class = "popup-container login-popup-container hide" id = "login-popup-container" >
< div class = "popup" >
< div class = "popup-body" >
< section >
< h2 > Log In< / h2 >
< p > Log in here to create Instant View templates. Please enter your < b > phone number< / b > in the < a target = "_blank" rel = "noopener" href = "https://telegram.org/faq#login-and-sms" > international format< / a > and we will send a confirmation message to your account via Telegram.< / p >
< div id = "login-alert" > < / div >
< form id = "send-form" class = "login-form" onsubmit = "return requestConfirmation(event);" >
< div class = "form-group" >
< input type = "tel" class = "form-control iv-form-control input-lg" id = "phone-number" placeholder = "+12223334455" autocomplete = "off" / >
< / div >
< div class = "popup-buttons" >
< a class = "btn btn-link btn-lg login-cancel-btn" > Cancel< / a > <!--
-->< button type = "submit" class = "btn btn-link btn-lg" > Next< / button >
< / div >
< / form >
< div id = "login-form" class = "hide" >
< div class = "form-group" >
< span class = "form-control iv-form-control input input-lg input-disabled" > < strong id = "phone-number-field" > < / strong > (< a class = "login-back" href = "/auth" > Incorrect?< / a > )< / span >
< p class = "help-block dots-animated" > We' ve just sent you a message.< br / > Please confirm access via Telegram< / p >
< / div >
< div class = "popup-buttons" >
< a class = "btn btn-link btn-lg login-cancel-btn" > Cancel< / a > <!--
-->< a class = "btn btn-link btn-lg login-back" > Back< / a >
< / div >
< / div >
< / section >
< / div >
< / div >
< / div >
< script src = "/js/jquery.min.js?1" > < / script >
< script src = "/js/bootstrap.min.js" > < / script >
< script src = "/js/instantview.js?72" > < / script >
< script > A p p = { " b a s e U r l " : " \ / a p i \ / s a m p l e s ? h a s h = t e l e g r a m - c r a w l e r " , " f r a m e O r i g i n " : " h t t p s : \ / \ / i v w e b c o n t e n t . t e l e g r a m . o r g " , " l a n g " : { " d e l e t e _ u r l _ c o n f i r m a t i o n " : " A r e y o u s u r e y o u w a n t t o s t o p t r a c k i n g t h i s U R L ? " , " d e l e t e _ u r l _ c o n f i r m _ b u t t o n " : " D e l e t e " , " n o t _ r e a d y _ f o r _ c o n t e s t _ a l e r t " : " S o r r y , t h i s t e m p l a t e c o v e r s t o o f e w a r t i c l e U R L s t h a t g e n e r a t e < b > v a l i d I n s t a n t V i e w p a g e s < \ / b > t o e n t e r t h e c o n t e s t . < b r \ / > < b r \ / > P l e a s e a d d a t l e a s t < b > 1 0 d i f f e r e n t U R L s < \ / b > f r o m t h i s w e b s i t e t o y o u r t e m p l a t e a n d p r e s s < b > T r a c k C h a n g e s < \ / b > o n e a c h o f t h e m t o m a k e s u r e t h e y a r e < a h r e f = \ " h t t p s : \ / \ / i n s t a n t v i e w . t e l e g r a m . o r g \ / c h e c k l i s t \ " > p r o c e s s e d c o r r e c t l y < \ / a > a n d g e n e r a t e v a l i d p a g e s . " , " s u b m i t _ f o r _ c o n t e s t _ c o n f i r m a t i o n " : " A r e y o u s u r e y o u w a n t t o s u b m i t t h i s t e m p l a t e f o r t h e c o n t e s t ? < b r \ / > < b r \ / > < b > N E W & # 3 3 ; < \ / b > C h e c k o u t t h e < a t a r g e t = \ " _ b l a n k \ " r e l = \ " n o o p e n e r \ " h r e f = \ " h t t p s : \ / \ / i n s t a n t v i e w . t e l e g r a m . o r g \ / c o n t e s t \ / \ / l i n k s \ " > l i s t o f p o t e n t i a l l y p r o b l e m a t i c l i n k s < \ / a > f o r < b > < \ / b > a n d m a k e s u r e t h a t y o u r t e m p l a t e s a t i s f i e s a l l t h e c r i t e r i a f o r a < a t a r g e t = \ " _ b l a n k \ " r e l = \ " n o o p e n e r \ " h r e f = \ " h t t p s : \ / \ / i n s t a n t v i e w . t e l e g r a m . o r g \ / c h e c k l i s t \ " > p e r f e c t t e m p l a t e < \ / a > . < b r \ / > < b r \ / > Y o u c a n r e s u b m i t a f i x e d v e r s i o n l a t e r , b u t i t w i l l l o s e i t s p l a c e a t t h e t o p o f t h e l i s t . A l l r e s u b m i s s i o n s w i l l b e c o n s i d e r e d n e w t e m p l a t e s f o r t h e p u r p o s e s o f d e t e r m i n i n g t h e w i n n e r . " , " s u b m i t _ f o r _ c o n t e s t _ c o n f i r m _ b u t t o n " : " C o n f i r m " , " s u b m i t _ t e m p l a t e _ c o n f i r m a t i o n " : " A r e y o u s u r e y o u w a n t t o s u b m i t t h i s t e m p l a t e ? < b r \ / > M a k e s u r e t h a t y o u r t e m p l a t e s a t i s f i e s a l l t h e c r i t e r i a f o r a < a t a r g e t = \ " _ b l a n k \ " r e l = \ " n o o p e n e r \ " h r e f = \ " h t t p s : \ / \ / i n s t a n t v i e w . t e l e g r a m . o r g \ / c h e c k l i s t \ " > p e r f e c t t e m p l a t e < \ / a > . < b r \ / > < b r \ / > N o t e t h a t i t w i l l < b > n o t < \ / b > p a r t i c i p a t e i n c o n t e s t . " , " s u b m i t _ t e m p l a t e _ c o n f i r m _ b u t t o n " : " C o n f i r m " , " r e v o k e _ f r o m _ c o n t e s t _ c o n f i r m a t i o n " : " A r e y o u s u r e y o u w a n t t o r e v o k e t h i s t e m p l a t e f r o m t h e c o n t e s t ? Y o u c a n r e s u b m i t a n e w v e r s i o n l a t e r , b u t y o u r t e m p l a t e w i l l l o s e i t s p l a c e a t t h e t o p o f t h e l i s t . " , " r e v o k e _ f r o m _ c o n t e s t _ c o n f i r m _ b u t t o n " : " R e v o k e " , " r e v o k e _ t e m p l a t e _ c o n f i r m a t i o n " : " A r e y o u s u r e y o u w a n t t o r e v o k e t h i s t e m p l a t e ? < b r \ / > < b r \ / > N o t e t h a t i t d o e s < b > n o t < \ / b > p a r t i c i p a t e i n c o n t e s t . " , " r e v o k e _ t e m p l a t e _ c o n f i r m _ b u t t o n " : " R e v o k e " , " r e s u b m i t _ f o r _ c o n t e s t _ c o n f i r m a t i o n " : " A r e y o u s u r e y o u w a n t t o r e s u b m i t t h i s t e m p l a t e f o r t h e c o n t e s t ? Y o u r p r e v i o u s t e m p l a t e w i l l l o s e i t s p l a c e a t t h e t o p o f t h e l i s t . < b r \ / > < b r \ / > < b > N E W & # 3 3 ; < \ / b > C h e c k o u t t h e < a t a r g e t = \ " _ b l a n k \ " r e l = \ " n o o p e n e r \ " h r e f = \ " h t t p s : \ / \ / i n s t a n t v i e w . t e l e g r a m . o r g \ / c o n t e s t \ / \ / l i n k s \ " > l i s t o f p o t e n t i a l l y p r o b l e m a t i c l i n k s < \ / a > f o r < b > < \ / b > a n d m a k e s u r e t h a t y o u r n e w v e r s i o n s a t i s f i e s a l l t h e c r i t e r i a f o r a < a t a r g e t = \ " _ b l a n k \ " r e l = \ " n o o p e n e r \ " h r e f = \ " h t t p s : \ / \ / i n s t a n t v i e w . t e l e g r a m . o r g \ / c h e c k l i s t \ " > p e r f e c t t e m p l a t e < \ / a > . " , " r e s u b m i t _ f o r _ c o n t e s t _ c o n f i r m _ b u t t o n " : " C o n f i r m " , " r e s u b m i t _ t e m p l a t e _ c o n f i r m a t i o n " : " A r e y o u s u r e y o u w a n t t o r e s u b m i t t h i s t e m p l a t e ? < b r \ / > M a k e s u r e t h a t y o u r t e m p l a t e s a t i s f i e s a l l t h e c r i t e r i a f o r a < a t a r g e t = \ " _ b l a n k \ " r e l = \ " n o o p e n e r \ " h r e f = \ " h t t p s : \ / \ / i n s t a n t v i e w . t e l e g r a m . o r g \ / c h e c k l i s t \ " > p e r f e c t t e m p l a t e < \ / a > . < b r \ / > < b r \ / > N o t e t h a t i t w i l l < b > n o t < \ / b > p a r t i c i p a t e i n c o n t e s t . " , " r e s u b m i t _ t e m p l a t e _ c o n f i r m _ b u t t o n " : " C o n f i r m " } } ;
$(window).resize(updateNavBar);updateNavBar();
initRulesList();
function showLoginError(error_text) {
$('#login-alert').html('< div class = "alert alert-danger" > < a class = "close" data-dismiss = "alert" href = "#" > × < / a > ' + error_text + ' < / div > ').show();
}
function requestConfirmation(event) {
event.preventDefault();
$('#login-alert').hide();
var phone = $('#phone-number').val();
$.ajax({
type: 'POST',
url: '/auth/request',
data: {
phone: phone
},
success: function(result) {
$('#phone-number-field').text(phone);
$('#send-form').addClass('hide');
$('#login-form').removeClass('hide');
checkAuth(result.temp_session);
},
error: function(xhr) {
showLoginError(xhr.responseText || 'Server error');
},
dataType: 'json'
});
return false;
}
function cancelConfirmation(event) {
event & & event.preventDefault();
$('#login-alert').hide();
$('#phone-number-field').text('');
$('#send-form').removeClass('hide');
$('#login-form').addClass('hide');
$('#phone-number').focus();
clearTimeout(window.authTimeout);
return false;
}
function checkAuth(temp_session) {
clearTimeout(window.authTimeout);
window.authTimeout = setTimeout(function doCheckAuth() {
$.ajax({
type: 'POST',
url: '/auth/login',
data: {
temp_session: temp_session
},
success: function(result) {
if (result) {
location.reload();
} else {
checkAuth(temp_session);
}
},
error: function (xhr) {
showLoginError(xhr.responseText || 'Server error');
},
dataType: 'json'
});
}, 700);
}
$('#login-popup-container').on('popup:open', function() {
$('#phone-number').focus();
});
$('#login-popup-container').on('popup:close', function() {
cancelConfirmation();
if (location.pathname == '/auth') {
window.history & & history.replaceState(null, null, '/');
}
});
App.unauth = true;
$('a[data-need-auth]').click(function(e) {
e.preventDefault();
openPopup('#login-popup-container');
});
$('#login-popup-container .login-cancel-btn').click(function(e) {
e.preventDefault();
closePopup('#login-popup-container');
});
$('.login-back').click(cancelConfirmation);
< / script >
< / body >
< / html >