<commit_before><!DOCTYPE html>
<html>
<head>
	<title>Ripple effect examples</title>	
	<style type="text/css">

		.controls {
			margin-bottom: 15px;
		}
		.element-with-ripple {
			width: 150px;
			height: 50px;
			background-color: red;
			float: left;
			margin-left: 15px; 
			margin-bottom: 15px;
		}
	</style>
	<script src="../dist/rippleJS.js"></script>
	<script type="text/javascript">
		function onLoad () {
			Ripple.init(document, {selectors:".element-with-ripple", duration: 200, color:'#ffffff'});
		}

		function addElement () {
			var el = document.createElement("div");		
			el.classList.add('element-with-ripple');
			document.body.appendChild(el);
		}
	</script>
</head>
<body onload="onLoad()">
	<div class="controls"><button onclick="addElement()">Add</button></div>	
	<div class="element-with-ripple">Button</div>
</body><commit_msg>Updating examples with absolutle and relatively positioned buttons, inline button and round button<commit_after><!DOCTYPE html>
<html>
<head>
	<title>Ripple effect examples</title>	
	<style type="text/css">

		.controls {
			margin-bottom: 15px;
		}
		.element-with-ripple {	
			width: 150px;				
			background-color: #5181F4;			
			padding: 10px;
			margin-right: 10px;
			margin-bottom: 10px;
			color: white;
		}

		.button-wrapper {
			padding-top: 10px;
			margin-bottom: 20px;
		}

		.relative {
			position: relative;
		}

		.absolute {
			position: absolute;
			left: 200px;
			top: 50px;
		}

		.inline {
			display: inline;
		}

		.round {
			display: inline-block;			
			width: 50px;
			height: 50px;
			border-radius: 50px;
			
		}
		
	</style>
	<script src="../dist/rippleJS.js"></script>
	<script type="text/javascript">
		function onLoad () {
			Ripple.init(document, {selectors:".element-with-ripple", duration: 200, color:'#ffffff'});
		}

		function addElement () {
			var el = document.createElement("div");		
			el.classList.add('element-with-ripple');
			el.textContent = "Dynamic button";
			document.body.appendChild(el);
		}
	</script>
</head>
<body onload="onLoad()">
	<div class="controls"><button onclick="addElement()">Add</button></div>	
	<div class="element-with-ripple">Button</div>
	<div class="element-with-ripple relative">Relative button</div>
	<div class="element-with-ripple absolute">Absolute button</div>
	<div class="button-wrapper">
		<div class="element-with-ripple inline">Inline button</div>	
	</div>		
	<div class="element-with-ripple round"></div>	
	
</body>
{'fraction_non_alphanumeric': 0.17175417175417176, 'fraction_numerical': 0.019536019536019536, 'mean_word_length': 3.7451737451737452, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5481104', 'n_tokens_mistral': 1041, 'n_tokens_neox': 851, 'n_words': 167}