Ctrl-Alt-Hack/notification.html at master · hack-summit/Ctrl-Alt-Hack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Health Care App</title>
  <link href="assets/notifs.css" rel="stylesheet" />
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"
  />
  <script
  defer
  src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
  ></script>
  <!-- <link rel="stylesheet" href="/assets/bluma-switch.min.css"> -->
</head>

<body id="notif-bg" scrolling="no">
  <div class ="has-text-centered rand-message"><i class="fa fa-bell"></i> <span class = "rand-message-span">Time to Stretch up a little</span></div>
  <div class = "ename has-text-centered" id = "ename"></div>
  <section class="section">
    <div class="columns">
      <div class="column">
        <figure
        class = "image notif-img">
        <img src="https://i0.wp.com/thumbs.gfycat.com/OrderlyCraftyLadybug-size_restricted.gif?w=1155" id = "notif-img-src"/>
      </figure>
    </div>
    <div id="text">
      <div class = "desc" id = "description">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Expedita, quae quod, adipisci corrupti architecto minus qui esse</div>
        <div class ="divider"></div>
        <div class = "desc" id = "benefits">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
        </div>
      </div>
      <div class="columns">
        <div class="column">
          <div class="title" id="text" style="text-align: center">
            <div class = "did-you">Did you really do it?</div>
            <span class="btn" id = "yes"><i class="fa fa-check"></i></span>
            <span class="btn" id = "no"><i class="fa fa-times"></i></span>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
<script>
  const electron = require('electron');
  const { ipcRenderer } = electron;
  let yes = document.getElementById("yes");
  let no = document.getElementById("no");
  let imgsrc = document.getElementById("notif-img-src");
  let desc = document.getElementById("description");
  let ben = document.getElementById("benifits");
  let ename = document.getElementById("ename");

  yes.addEventListener("click" , (e) => {
    ipcRenderer.send("yes:clicked", 1);
  })

  ipcRenderer.on("no:clicked", (err, item) => {
    alert('YOU WILL BE FACING CONSEQUENCES');
  })

  no.addEventListener("click", (e) => {
    ipcRenderer.send("no:clicked", 1);
  })

  ipcRenderer.on("exercise-details", (err, details) => {
    desc.innerText = details.desc;
    benefits.innerText = details.ben;
    imgsrc.src = details.img;
    ename.innerText = details.ename;
  })


  let msgs = [
    "Time to stretch up a little",
    "Get up and walk!",
    "Exercise Time",
    "Straighten your spines"
  ];
  let randmsg = msgs[Math.floor(Math.random() * msgs.length)]
  document.getElementsByClassName("rand-message-span")[0].innerText = randmsg
</script>
</html>