index.html

<script src="https://cdn.rawgit.com/straker/html-tagged-template/043f11d7659365d25e3b0784bcd613d1c738253b/index.js"></script>

<div class="wrapper">
	<div class="bars"></div>
	<div class="grad"></div>
</div>

<style>
	.wrapper {
		display: flex;
		flex-flow: row nowrap;
	}
	.wrapper > * {
		flex: 1;
	}
	.wrapper > *:not(:last-child) {
		margin-right: 10px;
	}
</style>

<script>
	function findWordForProgress(maxProgress, currentProgress) {
		const progress = currentProgress / maxProgress

		if (progress >= 1) {
			return 'hundred'
		}
		else if (progress >= 0.9) {
			return 'ninety'
		}
		else if (progress >= 0.8) {
			return 'eighty'
		}
		else if (progress >= 0.7) {
			return 'seventy'
		}
		else if (progress >= 0.6) {
			return 'sixty'
		}
		else if (progress >= 0.5) {
			return 'fifty'
		}
		else if (progress >= 0.4) {
			return 'forty'
		}
		else if (progress >= 0.3) {
			return 'thirty'
		}
		else if (progress >= 0.2) {
			return 'twenty'
		}
		else if (progress >= 0.1) {
			return 'ten'
		}
		else if (progress > 0) {
			return 'under-ten'
		}

		return 'zero'
	}
</script>


<script>
	function bar(value, max) {
		value = value === undefined ? 0 : value
		max = max === undefined ? 1 : max

		const width = 100 * (value / max)
		const progressWord = findWordForProgress(max, value)

		return html`<div class='progress-bar ${progressWord}' data-progress="${value}" data-of="${max}">
			<div class='progress-bar--track' style="height: 100%; width: 100%">
				<div class='progress-bar--value' style="height: 100%; width: ${width}%" />
			</div>
		</div>`
	}
</script>

<script>
	function bar2(value, max) {
		value = value === undefined ? 0 : value
		max = max === undefined ? 1 : max

		const width = 100 * (value / max)
		const progressWord = findWordForProgress(max, value)

		return html`<div class='progress-bar2 ${progressWord}' data-progress="${value}" data-of="${max}">
			<div class='progress-bar--track' style="height: 100%; width: 100%">
				<div class='progress-bar--value' style="height: 100%; width: ${width}%" />
			</div>
		</div>`
	}
</script>

<script>
	function* range(to) {
		for (let i = 0; i < to; i++) {
			yield i;
		}
	}
</script>

<script>
	let el1 = document.querySelector('.bars')
	for (let i of range(101)) {
		el1.appendChild(bar(i, 100))
	}

	let el2 = document.querySelector('.grad')
	for (let i of range(101)) {
		el2.appendChild(bar2(i, 100))
	}
</script>


<style>
	.progress-bar {
	    border: 1px solid currentColor;
	    border-radius: 3px;
	    background-color: white;
	    height: 5px;

	    color: #e0e0e0;
	}
	.progress-bar.hundred   { color: #81c784; }
	.progress-bar.ninety    { color: #ffb74d; }
	.progress-bar.eighty    { color: #ffb74d; }
	.progress-bar.seventy   { color: #ffb74d; }
	.progress-bar.sixty     { color: #fbc02d; }
	.progress-bar.fifty     { color: #fdd835; }
	.progress-bar.forty     { color: #fdd835; }
	.progress-bar.thirty    { color: #ffc107; }
	.progress-bar.twenty    { color: #e57373; }
	.progress-bar.ten       { color: #e57373; }
	.progress-bar.under-ten { color: #e57373; }

	.progress-bar .progress-bar--value {
	    background-color: currentColor;
	    max-width: 100%;
	}
</style>

<style>
.progress-bar2 {
    border: 1px solid currentColor;
    border-radius: 3px;
    /*background-color: white;*/
    height: 5px;

    /*color: #e0e0e0;*/
}
/*.progress-bar2.hundred   { color: #81c784; }
.progress-bar2.ninety    { color: #ffb74d; }
.progress-bar2.eighty    { color: #ffb74d; }
.progress-bar2.seventy   { color: #ffb74d; }
.progress-bar2.sixty     { color: #fbc02d; }
.progress-bar2.fifty     { color: #fdd835; }
.progress-bar2.forty     { color: #fdd835; }
.progress-bar2.thirty    { color: #ffc107; }
.progress-bar2.twenty    { color: #e57373; }
.progress-bar2.ten       { color: #e57373; }
.progress-bar2.under-ten { color: #e57373; }*/

.progress-bar2 .progress-bar--value {
    background-image: linear-gradient(to right, #e0e0e0, #e57373, #e57373, #e57373, #ffc107, #fdd835, #fdd835, #fbc02d, #ffb74d, #ffb74d, #ffb74d, #81c784);
    background-color: currentColor;
    max-width: 100%;
}
</style>

To create an account on a betting platform, new users typically need to provide personal information such as their name, email, and date of birth. After completing the registration form, it’s crucial to verify the account via email. For a smooth process, you can start by clicking on the link to sign up and following the prompts to get started.

Opto sempre por jogar apenas no mesmo sítio de apostas online mostbet.com a que estou habituado e onde gosto realmente de passar o tempo a jogar e onde pode tentar jogar também, porque é fácil entrar no jogo e começar a ganhar mais do que nunca, recomendo que experimente!