Разработка интерфейса пользователя

1

Дано изображение, сделайте его в оттенках серого, наложите эффект размытия.
Задачу можно выполнить как с помощью HTML+CSS так и с помощью графического редактора

Решение:

Для преобразования изображения в оттенки серого и наложения эффекта размытия можно использовать как HTML и CSS, так и графический редактор.

С помощью HTML и CSS можно применить фильтры к изображению, используя свойство filter.

Например, для преобразования в оттенки серого используется фильтр grayscale (оттенки серого), а для размытия — blur (размытие).

Пример кода для применения фильтра оттенков серого:

img {

filter: grayscale(100%);

 }

.

Для графического редактора можно использовать, например, Adobe Illustrator. Нужно загрузить официальную версию приложения, запустить его и открыть файл изображения, который нужно преобразовать. Затем открыть меню «Редактировать», выбрать «Редактировать цвета» и «Преобразовать в оттенки серого». После этого нажать «Файл» и «Сохранить» для экспорта изображения в градациях серого. 1

Также для преобразования изображений в оттенки серого и применения эффекта размытия можно использовать онлайн-инструменты, например, PineTool или OnlineJPGTool

2

Создайте UI-комплект из следующих элементов: текстовое поле, кнопка, выпадающий список, чекбокс, радиокнопка, метка с чекбоксом, метка с радиокнопкой, выпадающий календарь ввода, диапазон, прогресс-бар.

3

С помощью CSS/HTML сделать 3D-куб, который медленно бесконечно вращается. Каждая грань куба должна дополнительно поделена на 9 частей.

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font-family: Arial, sans-serif;

  background-color: #f0f0f0;

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

}

/* Стилизация контейнера с перспективой */

.container {

  perspective: 1000px;

  /* Свойство perspective определяет, насколько далеко объект находится от зрителя */

  /* Меньшее значение создает более интенсивный 3D-эффект */

}

/* Стили контейнера куба */

.cube {

  width: 200px;

  height: 200px;

  position: relative;

  transform-style: preserve-3d;

  /* Это сообщает браузеру, что дочерние элементы должны быть позиционированы в трехмерном пространстве */

}

/* Общие стили для всех граней */

.face {

  position: absolute;

  width: 200px;

  height: 200px;

  border: 2px solid white;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 24px;

  font-weight: bold;

  color: white;

  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

  opacity: 0.9;

}

4

Вам предоставляется спрайт таблица (sprite sheet) с персонажем ее необходимо анимировать. Персонаж должен бежать слева направо

import pygame

WIDTH = 480

HEIGHT = 600

FPS = 60

WHITE = (255, 255, 255)

BLACK = (0, 0, 0)

RED = (255, 0, 0)

GREEN = (0, 255, 0)

BLUE = (0, 0, 255)

YELLOW = (255, 255, 0)

pygame.init()

pygame.mixer.init()

screen = pygame.display.set_mode((WIDTH, HEIGHT))

pygame.display.set_caption("Shmup!")

clock = pygame.time.Clock()

class Player(pygame.sprite.Sprite):

    def __init__(self):

        pygame.sprite.Sprite.__init__(self)

        self.image = pygame.Surface((50, 40))

        self.image.fill(GREEN)

        self.rect = self.image.get_rect()

        self.rect.centerx = WIDTH / 2

        self.rect.bottom = HEIGHT - 10

        self.speedx = 0

    def update(self):

        self.speedx = 0

        keystate = pygame.key.get_pressed()

        if keystate[pygame.K_LEFT]:

            self.speedx = -8

        if keystate[pygame.K_RIGHT]:

            self.speedx = 8

        self.rect.x += self.speedx

        if keystate[pygame.K_DOWN]:

            self.speedy = -8

            self.rect.y += self.speedy                  # +

        if keystate[pygame.K_UP]:

            self.speedy = 8

            self.rect.y += self.speedy                  # +

#        self.rect.y += self.speedy

        if self.rect.right > WIDTH:

            self.rect.right = WIDTH

        if self.rect.left < 0:

            self.rect.left = 0

all_sprites = pygame.sprite.Group()

player = Player()

all_sprites.add(player)

running = True

while running:

    clock.tick(FPS)

    for event in pygame.event.get():

        if event.type == pygame.QUIT:

            running = False

    all_sprites.update()

    screen.fill(BLACK)

    all_sprites.draw(screen)

    pygame.display.flip()

pygame.quit()

Задачи для самостоятельного решения

5

Сделать адаптивный макет (только секции) для блога: шапка, основная (в основной секции необходимо реализовать блоки для постов. Ширина постов составляет ⅓ ширины контейнера), боковая панель, футер. Макет должен корректно отображаться в следующих значениях ширины: ≥576px, ≥768px, ≥992px.

6

Создание тумблера для IOS с использованием только HTML и CSS. Посмотрите видео, чтобы узнать подробности анимации и детали.

Результат должен быть представлен в файле: task6.html

Разработка на стороне клиента

7

Создать генератор цветов RGB. При перемещении соответствующих ползунков должен изменяться цвет и выводится RGB код

Попробуйте использовать холст, чтобы создать блокнот для рисования со следующими возможностями:

- Рисование с помощью нажатия и перемещения мыши
- Переключение 3 цветов

Решение.

   

        href="style.css">

RGB Colour Generator

style.css

body {

    margin: 0;

    padding: 0;

    display: grid;

    place-items: center;

    height: 100vh;

}

.main {

    height: 400px;

    width: 250px;

    background: #333;

    border-radius: 10px;

    display: grid;

    place-items: center;

    color: #fff;

    font-family: verdana;

}

#box {

    height: 40px;

    width: 80%;

    border: none;

    outline: none;

    outline: none;

    border-radius: 50px;

    text-align: center;

}

/* CSS property for slider */

input[type="range"] {

    -webkit-appearance: none;

    height: 10px;

    width: 80%;

    border-radius: 50px;

    outline: none;

}

/* CSS property for slider thumb */

input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    height: 25px;

    width: 25px;

    background: #fff;

    border-radius: 50%;

    cursor: pointer;

}

.main #red {

    background: linear-gradient(90deg, #000, red);

}

.main #green {

    background: linear-gradient(90deg, #000, green);

}

.main #blue {

    background: linear-gradient(90deg, #000, blue);

}

script.js

function myColour() {

    // Get the value of red color

    var red = document.getElementById('red').value;

    // Get the value of green color

    var green = document.getElementById('green').value;

    // Get the value of blue color

    var blue = document.getElementById('blue').value;

    // rgb() function is used to create the color

    // from red, green and blue values

    var colour = 'rgb(' + red + ',' + green + ',' + blue + ')';

    // Change background colour with the

    // color obtained by rgb function

    document.body.style.backgroundColor = colour;

    // Set the obtained rgb() colour code in the

    // input text field having id=box  

    document.getElementById('box').value = colour;

}

// On changing red range slider myColour()

// function is called  

document.getElementById('red')

    .addEventListener('input', myColour);

// On changing green range slider myColour()

// function is called

document.getElementById('green')

    .addEventListener('input', myColour);

// On changing blue range slider myColour()

// function is called

document.getElementById('blue')

    .addEventListener('input', myColour);

8

Создайте экранную клавиатуру. При клике по кнопке в поле ввода должен записаться соответствующий символ. Shift переключает регистр.

Решение.

                content="width=device-width,

                initial-scale=1.0" />

"https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

        

        </p><p class="c3"><span class="c1">                class="text-area use-keyboard-input"</span></p><p class="c3"><span class="c1">                placeholder="Click me!"></span></p><p class="c3"><span class="c1">        

CSS

/* style.css */

.text-area {

        padding: 5px;

        width: calc(100vw - 30px);

        height: calc(100vh - 295px);

}

.keyboard {

        position: fixed;

        left: 0;

        bottom: 0;

        width: 100%;

        padding: 5px 0;

        background: #004134;

        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);

        transition: bottom 0.4s;

}

.keyboard--hidden {

        bottom: -100%;

}

.keyboard__keys {

        text-align: center;

}

.keyboard__key {

        height: 45px;

        width: 6%;

        max-width: 90px;

        margin: 3px;

        border-radius: 4px;

        border: none;

        background: rgba(255, 255, 255, 0.2);

        color: white;

        font-size: 1.05rem;

        outline: none;

        cursor: pointer;

        display: inline-flex;

        justify-content: center;

        align-items: center;

        vertical-align: top;

        padding: 0;

        -webkit-tap-highlight-color: transparent;

        position: relative;

}

.keyboard__key:active {

        background: rgba(255, 255, 255, 0.12);

}

.keyboard__key--wide {

        width: 12%;

}

.keyboard__key--extra--wide {

        width: 36%;

        max-width: 500px;

}

.keyboard__key--activatable::after {

        content: "";

        position: absolute;

        top: 10px;

        right: 10px;

        width: 8px;

        height: 8px;

        background: rgba(0, 0, 0, 0.4);

        border-radius: 50%;

}

.keyboard__key--active::after {

        background: #08ff00;

}

.keyboard__key--dark {

        background: rgba(0, 0, 0, 0.25);

}

JavaScript

// script.js

const Keyboard = {

        elements: {

                main: null,

                keysContainer: null,

                keys: [],

                capsKey: null,

        },

        properties: {

                value: "",

                capsLock: false,

                keyboardInputs: null,

                keyLayout: [

                        "1",

                        "2",

                        "3",

                        "4",

                        "5",

                        "6",

                        "7",

                        "8",

                        "9",

                        "0",

                        "backspace",

                        "q",

                        "w",

                        "e",

                        "r",

                        "t",

                        "y",

                        "u",

                        "i",

                        "o",

                        "p",

                        "caps",

                        "a",

                        "s",

                        "d",

                        "f",

                        "g",

                        "h",

                        "j",

                        "k",

                        "l",

                        "enter",

                        "done",

                        "z",

                        "x",

                        "c",

                        "v",

                        "b",

                        "n",

                        "m",

                        ",",

                        ".",

                        "?",

                        "space",

                ],

        },

        init() {

                // create and setup main element

                this.elements.main =

                        document.createElement("div");

                this.elements.main.classList

                        .add("keyboard", "keyboard--hidden");

                document.body

                        .appendChild(this.elements.main);

                // create and setup child container component

                this.elements.keysContainer =

                        document.createElement("div");

                this.elements.keysContainer

                        .classList.add("keyboard__keys");

                this.elements.main

                        .appendChild(this.elements.keysContainer);

                // create and setup key elements

                this.elements.keysContainer

                        .appendChild(this._createKeys());

                this.elements.keys =

                        this.elements.keysContainer

                                .querySelectorAll(".keyboard__key");

                // open keyboard for elements with .use-keyboard-input

                this.properties.keyboardInputs =

                        document.querySelectorAll(

                                ".use-keyboard-input"

                        );

                this.properties

                        .keyboardInputs

                        .forEach((element) => {

                                element.addEventListener("focus", () => {

                                        this

                                                .open(element.value, (currentValue) => {

                                                        element.value = currentValue;

                                                });

                                });

                        });

        },

        _createIconHTML(icon_name) {

                return `${icon_name}`;

        },

        _createKeyBtn(iconName, class1, onclick, class2) {

                this.keyElement =

                        document.createElement("button");

                // add common attributes and classes

                this.keyElement

                        .setAttribute("type", "button");

                this.keyElement

                        .classList.add("keyboard__key");

                // add specific listeners and classes

                this.keyElement

                        .classList.add(class1, class2);

                this.keyElement.innerHTML =

                        this._createIconHTML(iconName);

                this.keyElement

                        .addEventListener("click", onclick);

        },

        _createKeys() {

                const fragment =

                        document.createDocumentFragment();

                this.properties.keyLayout.forEach((key) => {

                        const insertLineBreak =

                                ["backspace", "p", "enter", "?"].indexOf(key) !== -1;

                        switch (key) {

                                case "backspace":

                                        this._createKeyBtn(

                                                "backspace", "keyboard__key--wide",

                                                () => {

                                                        this.properties.value =

                                                                this.properties.value.slice(0, -1);

                                                        this._updateValueInTarget();

                                                });

                                        break;

                                case "caps":

                                        this._createKeyBtn(

                                                "keyboard_capslock",

                                                "keyboard__key--activatable",

                                                () => {

                                                        this.elements.capsKey

                                                                .classList

                                                                .toggle("keyboard__key--active");

                                                        this._toggleCapsLock();

                                                },

                                                "keyboard__key--wide"

                                        );

                                        this.elements.capsKey = this.keyElement;

                                        break;

                                case "enter":

                                        this._createKeyBtn(

                                                "keyboard_return", "keyboard__key--wide",

                                                () => {

                                                        this.properties.value += "\n";

                                                        this._updateValueInTarget();

                                                });

                                        break;

                                case "space":

                                        this._createKeyBtn(

                                                "space_bar", "keyboard__key--extra--wide",

                                                () => {

                                                        this.properties.value += " ";

                                                        this._updateValueInTarget();

                                                });

                                        break;

                                case "done":

                                        this._createKeyBtn(

                                                "check_circle",

                                                "keyboard__key--dark",

                                                () => {

                                                        this.close();

                                                        this._updateValueInTarget();

                                                },

                                                "keyboard__key--wide"

                                        );

                                        break;

                                default:

                                        this._createKeyBtn();

                                        this.keyElement.textContent =

                                                key.toLowerCase();

                                        this.keyElement

                                                .addEventListener(

                                                        "click",

                                                        () => {

                                                                this.properties.value +=

                                                                        this.properties.capsLock

                                                                                ? key.toUpperCase()

                                                                                : key.toLowerCase();

                                                                this._updateValueInTarget();

                                                        });

                                        break;

                        }

                        fragment.appendChild(this.keyElement);

                        if (insertLineBreak) {

                                fragment

                                        .appendChild(document.createElement("br"));

                        }

                });

                return fragment;

        },

        _updateValueInTarget() {

                this.properties

                        .keyboardInputs

                        .forEach((keyboard) => {

                                keyboard.value =

                                        this.properties.value;

                        });

        },

        _toggleCapsLock() {

                this.properties.capsLock =

                        !this.properties.capsLock;

                for (let key of this.elements.keys) {

                        if (key.childElementCount === 0) {

                                key.textContent =

                                        this.properties.capsLock

                                                ? key.textContent.toUpperCase()

                                                : key.textContent.toLowerCase();

                        }

                }

        },

        open(initialValue, oninput) {

                this.properties.value =

                        initialValue || "";

                this.elements.main

                        .classList

                        .remove("keyboard--hidden");

        },

        close() {

                this.properties.value =

                        this.properties.value;

                this.elements.main

                        .classList.add("keyboard--hidden");

        },

};

window.addEventListener("DOMContentLoaded", function () {

        Keyboard.init();

});

9

Создайте арифметическую функцию, которая при вводе строки выражения возвращает вычисленный результат. Эта функция должна включать следующие операторы, перечисленные в порядке по приоритету:

from math import  *

x=input()

print(eval(x))

Результат должен быть представлен в файле: task9

Разработка на стороне сервера

10

В файле дан список имен  пользователей, оставивших  комментарий на странице.  Определить наиболее активного пользователя. (того, чье имя встречается в списке чаще всего). Если таких пользователей несколько, то вывести все их логины

f=open('C:/Users/днс/Python 3.8.5/чемпионат спитаски/10.txt')

mx=0

b=[]

for s in f:

    a=[x for x in s.split()]

for i in a:

    if a.count(i)>mx:

        b=[]

        b.append(i)

        mx=a.count(i)

    elif a.count(i)==mx:

        b.append(i)

print(*set(b))

Результат должен быть представлен в файле: task10

11

В введенной строке требуется найти самую длинную её подстроку, у которой совпадает первый и последний символы. Если подходит несколько подстрок, то выведите любую из них.

a=input()

n=0

s=' '

for  i in range (len(a)):

    k=a.rfind(a[i])

    b=len(a[i:k+1])

    if b>n:

        s=a[i:k+1]

        n=b        

print(s)

Результат должен быть представлен в файле: task11

12

С помощью PHP/Python для создания изображения проверочного кода (captcha), которое должно соответствовать следующим правилам:

a. Случайным образом генерировать четыре символа, состоящих из английского алфавита (A-Z) или цифр

цифр (0-9).

b. Четыре символа должны быть слегка повернуты.

c. Четыре символа не должны располагаться в одном ряду.

d. Изображение содержит не менее 3 случайных линий.

e. Не менее 3 точек смешанного шума.

Решение:

# Import the following modules

from captcha.image import ImageCaptcha

# Create an image instance of the given size

image = ImageCaptcha(width = 280, height = 90)

# Image captcha text

captcha_text = 'GeeksforGeeks' 

# generate the image of the given text

data = image.generate(captcha_text) 

# write the image on the given file and save it

image.write(captcha_text, 'CAPTCHA.png')

13

Создайте базу данных для информационной системы автопредприятия.

Автопредприятие описывается данными, которые могут быть сгруппированы следующим образом:

• автобусы (таблица buses) (бортовой номер автобуса, гос. номер автобуса, марка, год выпуска, пробег);
• маршруты (таблица routes) (номер маршрута, маршрут, протяженность маршрута в км, среднее время одного рейса, плановое количество рейсов за смену);
• учетные данные водителя (таблица drivers) (табельный номер, Ф.И.О. сотрудника, категория, дата приема на работу, номер автобуса);
• маршрутные листы (таблица lists) (водитель, номер маршрута, бортовой номер автобуса, дата, количество выполненных рейсов).

Все таблицы базы данных должны быть приведены к 3-й нормальной форме. Заполнение данными таблиц базы данных не требуется.

Этапы выполнения:

Заходим в PHPadmin<

Создать базу. Называем авто:

Создаем таблицы, задаем размеры, типы данных.

Каждая таблица должна содержать поля, по которым можно получить доступ непосредственно только к 1 соседнему полю. То есть не должно быть дублирования.

В каждой таблице задаем ID и по нему держим связь.

.

14

Вводится список из n дат рождения пользователей в формате xx.xx.xxxx  и через пробел логин пользователя. Необходимо вывести логин самого взрослого пользователя.

Решение.

n=int(input('введите длину списка'))

a = [list(map(str, input('введите в формате: dd.mm.gggg логин')\

              .split(' '))) for i in range(n)]

b=[]

for i in range(len(a)):

    c=a[i][0]

    d=a[i][1]

    b.append([x for x in c.split('.')])

    b[i].append(d)

b=sorted(b, key=lambda b: (b[2],b[1],b[0]))

nik=(min(b, key=lambda b: (b[2],b[1],b[0])))

print(nik[-1])

Результат должен быть представлен в папке: task14

Идея: создать двумерный список, отсортировать его по безымянной фугкции лямбда, которая и задаст нам порядок сортировки: сначала год, потом месяц, потом день. В найденном минимуме выдать последний элемент – логин

n=int(input('введите длину списка'))

b=[]

for i in range(n):

    x,y=map(str, input('введите логин и через пробел дату рождения  dd.mm.gggg').split(' '))

    b.append(y.split('.'))

    b[i].append(x)

nik=(min(b, key=lambda b: (b[2],b[1],b[0])))

print(nik[-1])

print(b)

15

Вам предоставляется несколько массивов в медиафайлах, реализуйте PHP/Python-функцию, которая сравнивает два заданных массива и возвращает новый массив, содержащий общие элементы из обоих заданных массивов.

a=[1,2,3,4,5,6,7]

b=[1,12,3,14,5]

c=[]

for   x in a:

    if x in b:

        c.append(x)

print(c)

Если массивы в файлах, то файлы надо подключить и массивы считать. В остальном – все то же:

f1=open('C:/Users/днс/Python 3.8.5/чемпионат спитаски/массив1-1.txt')

f2=open('C:/Users/днс/Python 3.8.5/чемпионат спитаски/массив 2-1 для сверки.txt')

a=[int(x) for x in f1]

b=[int(x) for x in f2]

c=[]

for   x in a:

    if x in b:

        c.append(x)

print(c)

Для самостоятельного решения

16

Реализуйте календарь

1. Вы можете создать index.php, используя index.html

2. Когда вы откроете index.php, в верхней области календаря должны отображаться текущий месяц и текущий

год, а сегодняшняя дата должна быть выделена, как в index.html.

3. При нажатии на кнопку со стрелкой влево должен отображаться календарь предыдущего месяца.

4. При нажатии на кнопку со стрелкой вправо должен быть показан календарь на следующий месяц.

Результат должен быть представлен в папке: task16