chbae/index.html at main · mattr64/chbae · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-24HFN4LTHH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-24HFN4LTHH');
</script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Let's hop on a quick call</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Protest Riot', sans-serif;
        }
        .highlight {
            font-weight: bold;
            color: #007bff;
        }
        .footer {
            padding: 20px;
            background-color: #f8f9fa;
            text-align: center;
            margin-top: 20px;
        }
        .shadow-container {
            box-shadow: 0 4px 8px rgba(0,0,0,.1);
            padding: 20px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .topCard {
            border: 2px solid black;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #9bc2be !important;
        }

.text-bg-dark {
    background-color: #f8f9fa;
}

        #costDisplay {
        font-size: 2em; /* Makes the text larger */
        text-align: center; /* Centers the text */
        margin-top: 30px; /* Adjust spacing as needed */
        color: #007bff; /* Change the color to something noticeable */
        padding: 20px; /* Add some padding */
        border-radius: 8px; /* Optional: Rounds the corners */
        background-color: #f8f9fa; /* Optional: Adds a background color */
        border: 2px solid #007bff; /* Optional: Adds a border */
        width: 100%; /* Use the full container width */
        box-shadow: 0 4px 8px rgba(0,0,0,.1); /* Adds a subtle shadow */
    }

    #receiptContainer {
        font-family: 'Courier New', Courier, monospace;
        white-space: pre; /* Preserve spacing for monotype font */
        max-width: 600px; /* Adjust based on preference */
        margin: 0 auto; /* Center the container */
    }

    @keyframes blink {
        50% { border-color: transparent; }
    }
    #receiptContainer::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 20px;
        vertical-align: bottom;
        margin-left: 5px;
        border-left: 2px solid black;
        animation: blink 1s step-start infinite;
    }

</style>
</head>

<body>

    <div class="container mt-5">
        <div class="topCard text-bg-dark p-3">
            <div class="d-flex align-items-center justify-content-center">
                <img src="chbae_mascot.webp" height="200px" class="mr-3"/>
                <div>
                    <h1 class="mb-0">Let's hop on a quick call</h1>
                    <p class="lead mb-0">Because some meetings ✨really could have been an email✨.</p>
                </div>
            </div>
        </div>
    </div>


    <div class="shadow-container">
        <div class="shadow-container">
        <h2 class="ml-2 mb-4">1: Set the meeting vibes</h2>
        <p>Drag the slider to influence the cost</p>
        <label>Meeting is full of:</label>
        <input type="range" class="custom-range" id="salarySlider" min="1" max="5" value="3">
        <div class="d-flex justify-content-between">
            <span id="label1">Underpaid lackeys</span>
            <span id="label2">Average Joes</span>
            <span id="label3">Overpaid Management</span>
    </div>
</div>
        <br/><br/>
        <div class=" shadow-container">
            <h2 class="ml-2 mb-2"><label for="participants">2: How many victims are online?</label></h2>
            <input type="number" id="participants" value="4" class="form-control" min="1">
        </div>
<br/><br/>
        <div class=" shadow-container">
            <h2 class="ml-2 mb-2"><label for="participants">3: Start the timer and watch that ✨shareholder value✨ go up and up</label></h2>

        <button id="startMeeting" class="btn btn-success mt-3">Start</button>
        <button id="stopMeeting" class="btn btn-warning mt-3" style="display:none;">Stop</button>
        <button id="resetMeeting" class="btn btn-secondary mt-3" style="display:none;">Reset</button>
    </div>

    <div id="costDisplay" class="mt-3 text-right">
       Shareholder value will magically appear here
    </div>
    <div id="receiptContainer" class="mt-2">
        <!-- Receipt items will be added here -->
    </div>
</div>

<footer class="footer">
    <div>Made with ❤️ and sarcasm. ©️ yer maw 2024</div>
</footer>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>