# Creating an appointment reminder app with Python SDK ## Creating the UI In Flask, front end components live in two folders. The `templates` folder contains html files which are rendered by the application. Stylesheets are contained in the `static` folder. Let's now give your application a scheduling page and a success page. ### Adding a scheduilng page Let's add the appointment scheduling page. In `templates`, open `patient_details.html` and paste in the following code: Sinch Appointment Confirmation {% with messages = get_flashed_messages() %} {% if messages %} {% endif %} {% endwith %}

Sinch Hospital Appointment Confirmation

### Adding a success page Now let's add the success page. Open `success.html` and paste in the following code: ```html Sinch Appointment Confirmation

{{patient}} has been scheduled for an appointment with Dr {{doctor}}.

The appointment is set for {{appointment_datetime}}.

A reminder message will be sent to the following phone number: {{phone}}.

``` ### Adding the stylesheet Let's now add the stylesheet. Navigate into the `static` folder and open `style.css`. Paste in the following code: ```css html { font-family: sans-serif; background: rgb(9, 9, 49); padding: 1rem; } form { max-width: 900px; height: 22rem; padding: 10px; margin: 0 auto; background: white; } h1 { font-family: Helvetica, Arial, sans-serif; color: #eeeeee; margin: 1rem 0; text-align: center; font-weight: normal; } input[type="submit"] { align-self: start; min-width: 10rem; background-color: lightgray; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float:right; } input[type="submit"]:hover { background-color: rgb(9, 9, 49); color: white; } label { padding: 12px 12px 12px 0; display: inline-block; } .container { border-radius: 5px; background-color: rgb(255, 190, 60);; padding: 20px; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } .row::after { content: ""; display: table; clear: both; } .flashes{ height:3rem; background-color: red; color: white; } ``` br br