summaryrefslogtreecommitdiff
path: root/splash.html
blob: d2afc620a62fa0361d7f04fc59e7a74379c4beb5 (plain)
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
<!DOCTYPE html>
<html lang="en" style="height:500px;width:800px;">
<head>
    <meta charset="UTF-8">
    <title>splash</title>
    <style>
        @font-face {
            font-family: "Adobe Clean";
            src: url('splash.otf');
        }

        * {
            pointer-events: none;
            overflow: hidden;
        }
    </style>
</head>
<body style="height:500px;width:800px;">
<div style="display:grid;position:fixed;inset:0;grid-template-columns: 1.35fr 2fr;height:500px;width:800px;">
    <div style="background-color:black;color:black;padding:30px;" id="bg1">
        <img src="splashicon.svg" alt="Icon" style="margin-left:-7.5px;width:84px;height:84px;display:inline-block;"><br>
        <div style="font-family: 'Adobe Clean', -apple-system, system-ui, sans-serif;padding-top:5px;">
            <h2 style="margin:0;" id="product">Product</h2>
        </div>
        <div id="info" style="color:black;font-family: -apple-system, system-ui, sans-serif;font-size:12px;">
            <div style="padding-top:25px;">
                © 2020-<span id="year">Year</span> Minteck. Some rights reserved.
            </div>
            <div style="padding-top:10px;">
                Artwork by <span id="artwork">Author</span><br>
                For more details and legal notices, go to the<br>
                About <span id="about">App</span> screen.
            </div>
            <div style="padding-top:10px;" id="message">
                Loading surface...
            </div>
        </div>
        <div style="position:fixed;bottom:25px;left:30px;">
            <img id="cloudicon" src="" alt="" style="width:32px;height:32px;display:inline-block;">
            <h4 style="margin:0;font-family: 'Adobe Clean', -apple-system, system-ui, sans-serif;position: fixed;bottom: 34px;left: 70px;">Minteck Automate Cloud</h4>
        </div>
    </div>
    <div id="bg2" style="background-color:black;background-image:url('splash.jpeg');background-size:cover;background-position:center;"></div>
</div>

<script>
    const packdata = require('./package.json');

    const { ipcRenderer } = require('electron');
    const fs = require('fs');
    ipcRenderer.on('message', (_event, message) => {
        document.getElementById("message").innerText = message;
    })

    document.getElementById("cloudicon").src = "data:image/svg+xml;base64," + btoa(fs.readFileSync(__dirname + "/splash.svg").toString().replaceAll("%color%", packdata.colors.title));
    document.getElementById("bg2").style.backgroundColor = packdata.colors.secondary;
    document.getElementById("bg1").style.backgroundColor = packdata.colors.primary;
    document.getElementById("bg1").style.color = packdata.colors.title;
    document.getElementById("info").style.color = packdata.colors.info;
    document.getElementById("about").innerText = packdata.name;
    document.getElementById("product").innerText = packdata.product;
    document.getElementById("artwork").innerText = packdata.artwork;
    document.getElementById("year").innerText = new Date().getFullYear().toString();
</script>
</body>
</html>