Skip to content
SMS/
/
/
Creating the UI
Last updated

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:

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <head>
    <meta charset="utf-8" />
    <title>Sinch Appointment Confirmation</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
  </head>
  <body>
    <!--If form submission results in error, flash error message -->
    {% with messages = get_flashed_messages() %} {% if messages %}
    <ul class="flashes">
      {% for message in messages %}
      <li>{{ message }}</li>
      {% endfor %}
    </ul>
    {% endif %} {% endwith %}
    <div>
      <h1>Sinch Hospital Appointment Confirmation</h1>
    </div>
    <div class="container">
      <form action="{{ url_for('appointment') }}" method="post">
        <div class="row">
          <div class="col-25">
            <label for="name">Patient: </label>
          </div>
          <div class="col-75">
            <input
              type="text"
              name="patient"
              placeholder="Patient name"
              required
            />
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="treatment">Doctor: </label>
          </div>
          <div class="col-75">
            <input
              type="text"
              name="doctor"
              placeholder="Name of doctor"
              required
            />
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="appointment-date">Appointment date: </label>
          </div>
          <div class="col-75">
            <input type="date" id="appointment_date" name="appointment_date" required />
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="appointment_time">Appointment time: </label>
          </div>
          <div class="col-75">
            <input type="time" id="appointment_time" name="appointment_time" required />
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="phone">Patient mobile number: </label>
          </div>
          <div class="col-75">
            <input
              type="tel"
              id="phone"
              name="phone"
              placeholder="01234..."
              required
            />
          </div>
        </div>
        <div>
          <input type="submit" value="Make Appointment" />
        </div>
      </form>
    </div>
  </body>
</html>

Adding a success page

Now let's add the success page. Open success.html and paste in the following code:

<html>
  <head>
    <title>Sinch Appointment Confirmation</title>
  </head>
<body>
    <p><em>{{patient}}</em> has been scheduled for an appointment with Dr <em>{{doctor}}</em>.</p>
    <p>The appointment is set for {{appointment_datetime}}.</p>
    <p>A reminder message will be sent to the following phone number: {{phone}}.</p>
  </body>
</html>

Adding the stylesheet

Let's now add the stylesheet. Navigate into the static folder and open style.css. Paste in the following code:

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;
}


Previous page
Next page