abit-tech.github.io/auditool.html at main · abit-tech/abit-tech.github.io · 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
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
  <title>Audience Earnings Calculator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .container {
      margin-top: 50px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      font-weight: bold;
    }

    #videoViewsLabel,
    #ownershipPercentageLabel {
      font-weight: normal;
    }

    #audienceEarnings {
      font-weight: bold;
    }

    /* Remove default styles */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Customize the track */
.slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 0px;
  background: #764CC2;
  border: none;
  border-radius: 0px;
  border: 2.5px solid #764CC2;
}

.slider::-moz-range-track {
  width: 100%;
  height: 0px;
  background: #764CC2;
  border: none;
  border-radius: 5px;
}

/* Customize the thumb (handle) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: #764CC2;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  top: -15px;
}

.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background: #764CC2;
  border-radius: 50%;
  cursor: pointer;
}

/* Change thumb color on hover */
.slider:hover::-webkit-slider-thumb {
  background: #764CC2;
}

.slider:hover::-moz-range-thumb {
  background: #764CC2;
}

  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <h3>Audience Earnings Calculator</h3>
        <div class="form-group">
          <label for="videoViews">Video Views:</label>
          <input type="range" class="slider" id="videoViews" min="100000" max="3000000" step="100000" value="100000">
          <span id="videoViewsLabel">100,000</span>
        </div>
        <div class="form-group">
          <label for="ownershipPercentage">Co-owner Ownership Percentage:</label>
          <input type="range" class="form-control-range" id="ownershipPercentage" min="0" max="100" step="0.01" value="0.24">
          <span id="ownershipPercentageLabel">0.24%</span>
        </div>
        <div class="form-group">
          <label for="earningsPerView">Earnings per Video View ($):</label>
          <input type="number" class="form-control" id="earningsPerView" step="0.001" value="0.005">
        </div>
        <div class="form-group">
          <label for="audienceEarnings">Audience Earnings:</label>
          <input type="text" class="form-control" id="audienceEarnings" readonly>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // Update video views label
      $('#videoViews').on('input', function() {
        var views = $(this).val();
        $('#videoViewsLabel').text(formatNumber(views));
        calculateAudienceEarnings();
      });

      // Update ownership percentage label
      $('#ownershipPercentage').on('input', function() {
        var percentage = $(this).val();
        $('#ownershipPercentageLabel').text(percentage + "%");
        calculateAudienceEarnings();
      });

      // Update audience earnings on input change
      $('#earningsPerView, #videoViews, #ownershipPercentage').on('input', calculateAudienceEarnings);

      // Calculate audience earnings
      function calculateAudienceEarnings() {
        var views = parseInt($('#videoViews').val());
        var percentage = parseFloat($('#ownershipPercentage').val()) / 100;
        var earningsPerView = parseFloat($('#earningsPerView').val());
        var audienceEarnings = (views * earningsPerView) * percentage;
        $('#audienceEarnings').val(audienceEarnings.toFixed(2));
      }

      // Format number with commas
      function formatNumber(number) {
        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
    });
  </script>
</body>
</html>