Add simple HTML/CSS UI

[Mantas Vilčinskas]

A green (or different color) flashing dot • (for inspiration see loading.io) that shows up based on the status of the code in index.js

This should be very easy to do.

Create a separate .html file that links to index.json and has the UI with an extra <script></script bit for the UI logic

[Parwinder Bhagat]

Do you want the data from the API to be displayed in a tabular format like most status pages do?

What is the flashing dot for?

Here is the response that I currently get

  is: 'index',
  cStateVersion: '4.2.1',
  apiVersion: '1.0.0',
  title: 'Eggsample Status',
  languageCodeHTML: 'en',
  languageCode: 'en',
  baseURL: 'https://cstate.mnts.lt',
  description: 'We continuously monitor the status of our services and if there are any interruptions, a note will be posted here.',
  logo: 'https://cstate.mnts.lt/logo.png',
  categories: [
    {
      name: 'North Coast',
      description: 'The main servers are located here.',
      hideTitle: false,
      closedByDefault: true
    },
    { name: 'East Coast', hideTitle: false, closedByDefault: false },
    { name: 'Uncategorized', hideTitle: true, closedByDefault: false }
  ],
  systems: [
    { name: 'Gateway', category: 'North Coast' },
    { name: 'Backup Gateway', category: 'East Coast' },
    {
      name: 'API',
      description: 'The guts of the application.',
      category: 'Uncategorized'
    },
    {
      name: 'Media Proxy',
      description: 'This is the service responsible for serving images, audio, and video. It is reliant on our CDN.',
      category: 'Uncategorized'
    }
  ],
  buildDate: '2020-10-04',
  buildTime: '11:40',
  buildTimezone: 'UTC',
  summaryStatus: 'disrupted',
  colorBrand: '#0a0c0f',
  colorOk: '#008000',
  colorDisrupted: '#cc4400',
  colorDown: '#e60000',
  colorNotice: '#24478f',
  alwaysKeepBrandColor: 'true',
  googleAnalytics: 'UA-00000000-1'
}```

[Mantas Vilčinskas]

Do you want the data from the API to be displayed in a tabular format like most status pages do?

I'm not sure what you mean.

This is an extension to my project cState, right, and that already has a UI. Take a look at the Live Demo at the top of the README - https://cstate.mnts.lt/

So with this project, let's say there's status.company.com, then on company.com's homepage, if something goes down, there'll be an alert box in the corner or a red dot next to a link "Status" or whatever

Imagination (and logical UX) is the limit here