telegram-crawler/data/web/instantview.telegram.org/samples.html
2023-01-05 18:02:43 +00:00

398 lines
19 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<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" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/bootstrap-extra.css?2" rel="stylesheet">
<link href="/css/telegram.css?234" rel="stylesheet">
<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&#33;</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&#39;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&#39;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 Elections 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&#39;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&#39;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>App={"baseUrl":"\/api\/samples?hash=telegram-crawler","frameOrigin":"https:\/\/ivwebcontent.telegram.org","lang":{"delete_url_confirmation":"Are you sure you want to stop tracking this URL?","delete_url_confirm_button":"Delete","not_ready_for_contest_alert":"Sorry, this template covers too few article URLs that generate <b>valid Instant View pages<\/b> to enter the contest.<br\/><br\/>Please add at least <b>10 different URLs<\/b> from this website to your template and press <b>Track Changes<\/b> on each of them to make sure they are <a href=\"https:\/\/instantview.telegram.org\/checklist\">processed correctly<\/a> and generate valid pages.","submit_for_contest_confirmation":"Are you sure you want to submit this template for the contest?<br\/><br\/><b>NEW&#33;<\/b> Check out the <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/contest\/\/links\">list of potentially problematic links<\/a> for <b><\/b> and make sure that your template satisfies all the criteria for a <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/checklist\">perfect template<\/a>.<br\/><br\/>You can resubmit a fixed version later, but it will lose its place at the top of the list. All resubmissions will be considered new templates for the purposes of determining the winner.","submit_for_contest_confirm_button":"Confirm","submit_template_confirmation":"Are you sure you want to submit this template? <br\/>Make sure that your template satisfies all the criteria for a <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/checklist\">perfect template<\/a>.<br\/><br\/>Note that it will <b>not<\/b> participate in contest.","submit_template_confirm_button":"Confirm","revoke_from_contest_confirmation":"Are you sure you want to revoke this template from the contest? You can resubmit a new version later, but your template will lose its place at the top of the list.","revoke_from_contest_confirm_button":"Revoke","revoke_template_confirmation":"Are you sure you want to revoke this template?<br\/><br\/>Note that it does <b>not<\/b> participate in contest.","revoke_template_confirm_button":"Revoke","resubmit_for_contest_confirmation":"Are you sure you want to resubmit this template for the contest? Your previous template will lose its place at the top of the list. <br\/><br\/><b>NEW&#33;<\/b> Check out the <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/contest\/\/links\">list of potentially problematic links<\/a> for <b><\/b> and make sure that your new version satisfies all the criteria for a <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/checklist\">perfect template<\/a>.","resubmit_for_contest_confirm_button":"Confirm","resubmit_template_confirmation":"Are you sure you want to resubmit this template? <br\/>Make sure that your template satisfies all the criteria for a <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/instantview.telegram.org\/checklist\">perfect template<\/a>.<br\/><br\/>Note that it will <b>not<\/b> participate in contest.","resubmit_template_confirm_button":"Confirm"}};
$(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>