# Creating an appointment reminder app with .NET SDK ## Creating the UI In the .NET MVC framework, web pages, known as *Views*, live in the `Views` folder. ### Modifying the `_ViewStart.cshtml` file We'll provide all the styling files required for this app below. Because we provide that content, we'll need to prevent the prevent it from being overridden by the default layout. To do so: 1. Navigate to the `Views` folder. 2. Open the `_ViewStart.cshtml` file. 3. Replace the contents of that file with the following code: ```csharp @{ Layout = null; } ``` ### Creating the `Appointment` directory In order to manage the UI, we'll need to modify the directory: 1. Navigate to the `Views` folder. 2. Create a new folder called `Appointment`. 3. In the `Appointment` folder you created in the last step, create the following files: - `Submit.cshtml` - `Success.cshtml` ### Creating the submission page First, we'll create the submisstion page. Open `Submit.cshtml` and add the following code: ```html Sinch Appointment Confirmation

Sinch Hospital Appointment Scheduler

``` ### Creating the success page Now, we'll create a success page. Open `Success.cshtml` and add the following code: ```html @using sinch_appointment_reminder.Models; Sinch Appointment Confirmation

@TempData["patient"] has been scheduled for an appointment Dr @TempData["doctor"].

The appointment is set for @TempData["appointment_datetime"].

A reminder message will be sent to the following phone number: @TempData["phone"].

``` ### Modifying the stylesheet To give your app an appropriate look and feel, we'll add a stylesheet. In the .NET MVC framework, CSS is typically located in the `wwwroots` folder, in `site.css`. Open `site.css` and add 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; } .alert{ height:3rem; background-color: red; color: white; list-style-type: none; } ``` br br