<commit_before><!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <title>Aviasales Test Task</title>
    </head>

    <style>
        body, html {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 0 20px;
            background-color: #4A90E2;
            font-family: 'Open Sans', sans-serif;
            max-width: 1024px;
            box-sizing: border-box;
        }

        header label {
            color: #fff;
            font-size: 1.5rem;
            line-height: 2.2rem;
            letter-spacing: 0.02rem;
        }

        header label:last-child {
            padding-left: 7px;
        }

        .content {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            padding-top: 10px;
        }

        .button {
            height: 40px;
            width: 240px;
            background-color: #F5A623;
            box-sizing: border-box;
            border: 0px solid;
            border-bottom: 2px solid #DC951F;
            border-radius: 2px;
            flex-shrink: 0;
            outline: none;
            cursor: pointer;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
        }

        .picker {
            width: 200px;
            height: 40px;
            margin-right: 20px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 2px;
            position: relative;
        }

        input {
            border-radius: 2px;
            line-height: 40px;
            width: 100%;
            border: none;
            padding: 0 0 0 10px;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.04rem;
            outline: none;
        }

        input::placeholder {
            color: #9B9B9B;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.04rem;
        }

        .back {
            position: absolute;
            left: 0;
            right: 0;
            opacity: 0.5;
            pointer-events: none;
        }

        .message {
            display: flex;
            align-items: center;
            height: 40px;
            color: #fff;
            font-size: 0.7rem;
            line-height: 0.9rem;
            letter-spacing: 0.005rem;
        }

        .icon_wrapper {
            border-radius: 2px;
            height: 40px;
            width: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-color: #fff;
        }

        .icon {
            pointer-events: none;
        }
    </style>

    <body>
        <!--<img class="back" src="./back.png">-->

        <header>
            <label>Where does it come from?</label><label>Why do we use it?</label>
        </header>

        <div class="content">
            <label class="message">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</label>

            <div class="picker">
                <input type="text" placeholder="Depart date">
                <div class="icon_wrapper"><img class="icon" src="calendar.svg" alt="calendar"></div>
            </div>
            <div class="picker">
                <input type="text" placeholder="Return date">
                <div class="icon_wrapper"><img class="icon" src="calendar.svg" alt="calendar"></div>
            </div>

            <button class="button">search</button>
        </div>
    </body>
</html><commit_msg>Added media queries<commit_after><!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <title>Aviasales Test Task</title>
    </head>

    <style>
        body, html {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 0 20px;
            background-color: #4A90E2;
            font-family: 'Open Sans', sans-serif;
            max-width: 1024px;
            box-sizing: border-box;
        }

        header label {
            color: #fff;
            font-size: 1.5rem;
            line-height: 2.2rem;
            letter-spacing: 0.02rem;
        }

        header label:last-child {
            padding-left: 7px;
        }

        .content {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            padding-top: 10px;
        }

        .button {
            height: 40px;
            width: 240px;
            background-color: #F5A623;
            box-sizing: border-box;
            border: 0px solid;
            border-bottom: 2px solid #DC951F;
            border-radius: 2px;
            flex-shrink: 0;
            outline: none;
            cursor: pointer;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
        }

        .picker {
            width: 200px;
            height: 40px;
            margin-right: 20px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 2px;
            position: relative;
        }

        input {
            border-radius: 2px;
            line-height: 40px;
            width: 100%;
            border: none;
            padding: 0 0 0 10px;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.04rem;
            outline: none;
        }

        input::placeholder {
            color: #9B9B9B;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.04rem;
        }

        .back {
            position: absolute;
            left: 0;
            right: 0;
            opacity: 0.5;
            pointer-events: none;
        }

        .message {
            display: flex;
            align-items: center;
            height: 40px;
            color: #fff;
            font-size: 0.7rem;
            line-height: 0.9rem;
            letter-spacing: 0.005rem;
            padding-right: 20px;
        }

        .icon_wrapper {
            border-radius: 2px;
            height: 40px;
            width: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-color: #fff;
        }

        .icon {
            pointer-events: none;
        }

        @media only screen and (max-width: 970px) {
            .message {
                flex-basis: 240px;
                flex-shrink: 0;
            }

            .button {
                flex-shrink: 1;
            }

            .picker {
                flex-shrink: 1;
            }
        }


        @media only screen and (max-width: 768px) {
            .content {
                flex-wrap: wrap;
            }

            .message {
                display: inline-flex;
                height: auto;
                flex-basis: 100%;
                padding: 0 0 16px;
            }

            .picker {
                min-width: 100px;
                flex-basis: 100px;
                max-width: 220px;
                flex-shrink: 1;
                flex-grow: 1;
            }

            .button {
                max-width: 240px;
                min-width: 100px;
                margin-left: 8px;
                flex-shrink: 1;
                flex-grow: 1;
                flex-basis: 100px;
            }
        }

        @media only screen and (max-width: 570px) {
            header label {
                font-size: 1.11rem;
                line-height: 2.8rem;
            }

            .message {
                padding: 0 0 15px;
            }

            .content {
                padding: 0;
            }
        }

        @media only screen and (max-width: 500px) {
            .picker {
                margin: 0;
            }

            .picker:first-of-type {
                margin-right: 20px;
            }

            .button {
                max-width: 100%;
                flex-basis: 100%;
                margin: 20px 0 0;
            }
        }

        @media only screen and (max-width: 440px) {

        }


    </style>

    <body>
        <!--<img class="back" src="./back3.png">-->

        <header>
            <label>Where does it come from?</label><label>Why do we use it?</label>
        </header>

        <div class="content">
            <label class="message">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</label>

            <div class="picker">
                <input type="text" placeholder="Depart date">
                <div class="icon_wrapper"><img class="icon" src="calendar.svg" alt="calendar"></div>
            </div>

            <div class="picker">
                <input type="text" placeholder="Return date">
                <div class="icon_wrapper"><img class="icon" src="calendar.svg" alt="calendar"></div>
            </div>

            <button class="button">search</button>
        </div>
    </body>
</html>
{'fraction_non_alphanumeric': 0.11265745631856969, 'fraction_numerical': 0.02752945956928078, 'mean_word_length': 1.1416140961496628, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 83, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4356186', 'n_tokens_mistral': 3050, 'n_tokens_neox': 2690, 'n_words': 651}