Faceit Notifications

by deswolf

HTML

<div id="test">
</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background: black;
}

img {
  width: 50px;
  height: 50px;
}

#test {
  margin: 15px;
}

.row {
  background: #333;
  color: white;
  display: flex;
  align-items: center;
  border: 1px solid #333;
}

a, a:visited {
  color: #2de2ea;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  font-weight: bold;
}

a:hover {
  color: white;
}

.meta {
  color: gray;
}

.mini {
  font-size: 12px;
}

.row + .row {
  margin-top: 6px;
}

.row > * {
  padding: 5px;
}

JavaScript

var data = {
  "result": [
    {
      "id": "6d43c744-9ba2-4c7d-9a46-f38c814a00e8",
      "recipient": {
        "id": "817b7610-7a39-4dee-859a-76be8e60ebdf",
        "type": "user",
        "name": "Zenk3",
        "avatar": "https://assets.faceit-cdn.net/avatars/817b7610-7a39-4dee-859a-76be8e60ebdf_1550602890233.png",
        "verified": false
      },
      "reference": {
          "avatar": "https://assets.faceit-cdn.net/avatars/4f7ebd35-d51e-43dc-8149-8060d50127f9_1550984959968.jpg",
          "id": "4f7ebd35-d51e-43dc-8149-8060d50127f9",
          "name": "P1K0M0NST3R",
          "type": "user",
          "verified": false
        },
      "status": "read",
      "type": "user_elo_reverted",
      "version": 1,
      "count": 1,
      "interactors": [
        {
          "id": "817b7610-7a39-4dee-859a-76be8e60ebdf",
          "type": "user",
          "name": "Zenk3",
          "avatar": "https://assets.faceit-cdn.net/avatars/817b7610-7a39-4dee-859a-76be8e60ebdf_1550602890233.png",
          "verified": false
        }
      ],
      "data": {
          "matches_played": 1,
          "rating_delta": 23,
          "reason": "cheating"
        },
      "created_at": "1684089366500"
    },
    {
      "id": "3fd54c42-6851-4076-b110-c3c983929dbf",
      "recipient": {
        "id": "817b7610-7a39-4dee-859a-76be8e60ebdf",
        "type": "user",
        "name": "Zenk3",
        "avatar": "https://assets.faceit-cdn.net/avatars/817b7610-7a39-4dee-859a-76be8e60ebdf_1550602890233.png",
        "verified": false
      },
      "reference": {
          "id": "644f0100446ead3bc5032dd8",
          "type": "campaign"
        },
      "status": "read",
      "type": "user_mission_completed",
      "version": 1,
      "count": 1,
      "interactors": [
        {
          "id": "817b7610-7a39-4dee-859a-76be8e60ebdf",
          "type": "user",
          "name": "Zenk3",
          "avatar":...