Ze1598

import requests
from PIL import Image
from io import BytesIO

# Target image URL
url = "https://i.imgur.com/EdAGGFS.jpg"
# Get the text after the last slash in the URL, that is, the file name,\
# which includes its extension
file_name = url.split("/")[-1]

Ze1598

from PIL import Image, ImageDraw, ImageFont
from textwrap import wrap

# Constants
# -----------------------------------------------------------------------------
# Set the font to be used
FONT_USER_INFO = ImageFont.truetype("arial.ttf", 90, encoding="utf-8")
FONT_TEXT = ImageFont.truetype("arial.ttf", 110, encoding="utf-8")
# Image dimensions (pixels)
WIDTH = 2376

Ze1598

<main id="logout-button-holder">
    <button mat-raised-button id="logout-button" (click)="openModal()">Logout</button>
</main>

Ze1598

#logout-button {
    color: white;
    background-color: #4b4b4b;
    border: 1px solid black;
}

Ze1598

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    justify-items: center;
    align-items: center;

Ze1598

import { Component } from '@angular/core';

import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Ze1598

<div id="modal-content-wrapper">
    <header id="modal-header">
        <h1 id="modal-title">Are you sure you want to logout?</h1>
    </header>
    <section id="modal-body">
        <p>If you logout bad things might happen, but don't mind me, I'm just the description in a modal...</p>
    </section>
    <footer id="modal-footer">
        <button mat-raised-button id="modal-action-button" (click)="actionFunction()">Logout</button>
        <button mat-raised-button id="modal-cancel-button" (click)="closeModal()">Go back</button>

Ze1598

#modal-content-wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: repeat(1fr, 3);
}

#modal-title {
    font-size: 22px;
}

Ze1598

import { Component, OnInit } from '@angular/core';

import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})

Ze1598

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { ModalComponent as ModalComponent } from './modal/modal.component';