[ Posted by Jonathan ] update2 for stasis

fiddle_030960.php

<style>
	*{
		top: 0px;
		margin: 0px;
		padding: 0px;
		font-family: sans-serif;
	}
	.form_group{
		display: block;
		margin-bottom: 10px;
	}
	
	.form_group label{
		font-size: 15px;
		font-weight: bold;
		display: block;
	}
	
	.form_group input[type='text'] {
		width: 80%;
	}
	
	input[type='submit'] {
		background-color: orangered;
		padding: 10px 15px;
		border: 0px;
		outline: 0px;
		color: white;
		margin-top: 10px;
		font-weight: bold;
		font-size: 15px;
	}
	
	.broadcaster_info{
		position: relative;
		width: 100%;
		padding: 10px;
	}
	
	.broadcaster_info .form_group{
		display: inline-block;
		width: 20%;
	}
	
	/* accordion begin */
	.accordion{
		min-height: 200px;
		background-color: #ddd;
	}
	
	.accordion_header {
		position: relative;
		width: 100%;
		height: 30px;
		background-color: orangered;
		color: white;
		line-height: 30px;
		border-bottom: 1px solid red;
	}
	
	.accordion_header strong {
		margin-left: 20px;
	}
	
	.accordion_content {
		position: relative;
		height: auto;
		padding: 0px 20px;
		-webkit-transition: all 0.5s linear;
    	transition: all 0.5s linear;
	}
	/* accordion end */
	
</style>
<b>update</b>
<form method="POST" style="width: 98%;">
	<h1>
		Profile builder
	</h1>
	<p style="padding-bottom: 10px;">
		Please note: this is not an official profile builder (nor do I even know if that exists). This is a free tool. If you have paid for this, you are being ripped of.
	</p>
	<div class="accordion">
		<div class="accordion_header header1"  onclick="accordion_open(1)">
			<strong>General</strong>
		</div>
		<div class="accordion_content content1">
			<div class="broadcaster_info">
				<div class="form_group">
					<label for="broadcaster_name">Broadcaster(s) name</label>
					<input name="broadcaster_name" type="text" value="<?php refillField('broadcaster_name');?>"/>
				</div><div class="form_group">
				<label for="broadcaster_url">Broadcaster(s) profile</label>
				<input name="broadcaster_url" type="text" value="<?php refillField('broadcaster_url');?>"/>
				</div><div class="form_group">
				<label for="broadcaster_age">Broadcaster(s) age</label>
				<input name="broadcaster_age" type="text" value="<?php refillField('broadcaster_age');?>"/>
				</div><div class="form_group">
				<label for="broadcaster_height">Broadcaster(s) height</label>
				<input name="broadcaster_height" type="text" value="<?php refillField('broadcaster_height');?>"/>
				</div><div class="form_group">
				<label for="broadcaster_size">Broadcaster(s) size in cm</label>
				<input name="broadcaster_size" type="text" value="<?php refillField('broadcaster_size');?>"/>
				</div>
			</div>
		</div>
		<div class="accordion_header header2" onclick="accordion_open(2)">
			<strong>Header</strong>
		</div>
		<div class="accordion_content content2">
			<div class="form_group">
				<label for="enable_header">Enable header</label>
				<input type="checkbox" id="enable_header" name="enable_header" value="Yes" <?php recheckField('enable_header'); ?>> Yes<br>
				
				<div id="header_group" <?php if(recheckField('enable_header') == false){echo 'hidden';}; ?>>
					<strong>Image</strong>
					<label for="enable_header_profile_image">Enable header profile image</label>
					<input type="checkbox" id="enable_header_profile_image" name="enable_header_profile_image" value="Yes"<?php recheckField('enable_header_profile_image'); ?>> Yes<br>
					
					<strong>Name</strong>
					<label for="enable_header_profile_name">Enable header profile name</label>
					<input type="checkbox" id="enable_header_profile_name" name="enable_header_profile_name" value="Yes"<?php recheckField('enable_header_profile_name'); ?>> Yes<br>
					<input type="radio" name="header_name_align" value="left" <?php reselectRadio('header_name_align', 'left');?>> left<br>
					<input type="radio" name="header_name_align" value="center" <?php reselectRadio('header_name_align', 'center');?>> center<br>
					<input type="radio" name="header_name_align" value="right" <?php reselectRadio('header_name_align', 'right');?>> right<br>
					<input type="radio" name="header_name_align" value="justify" <?php reselectRadio('header_name_align', 'justify');?>> justified<br>
										
					<strong>stats</strong>
					<label for="enable_header_profile_stats">Enable header profile stats</label>
					<input type="checkbox" id="enable_header_profile_stats" name="enable_header_profile_stats" value="Yes"<?php recheckField('enable_header_profile_stats'); ?>> Yes<br>
					<input type="radio" name="header_stats_align" value="left" <?php reselectRadio('header_stats_align', 'left');?>> left<br>
					<input type="radio" name="header_stats_align" value="center" <?php reselectRadio('header_stats_align', 'center');?>> center<br>
					<input type="radio" name="header_stats_align" value="right" <?php reselectRadio('header_stats_align', 'right');?>> right<br>
					<input type="radio" name="header_stats_align" value="justify" <?php reselectRadio('header_stats_align', 'justify');?>> justified<br>
					
					<strong>Background</strong>
					<div class="form_group">
						<label for="header_background_image">Background image url(no upload)</label>
						<input name="header_background_image" type="text" value="<?php refillField('header_background_image', 'https://static.pexels.com/photos/5369/lights-night-building-construction.jpg');?>"/>
					</div><div class="form_group">
						<label for="header_background_color">Background color(if no image)</label>
						<input name="header_background_color" type="color" value="<?php refillField('header_background_color');?>"/>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="form_group">
		<input type="submit" value="update"/>
	</div>
</form>

<script>
	
	// accordion begin	
	function accordion_open(integer){
		
		// get all content elements
		var elements = document.getElementsByClassName('accordion_content');
		
		// loop trough all content elements and hide
		for (var i = 0; i < elements.length; i++) {
			elements[i].style.height = "0px";			
			elements[i].style.opacity = "0";	
			elements[i].style.padding = "0px 20px";
		}
		
		// open specific tab
		document.getElementsByClassName('content' + integer)[0].style.height = "auto";	
		document.getElementsByClassName('content' + integer)[0].style.opacity = "1";	
		document.getElementsByClassName('content' + integer)[0].style.padding = "20px";		
	}
	
	accordion_open(1);
	
	
	// accordion end
	
	// header checkbox
	var ageCheckbox = document.getElementById('enable_header');
	var ageInput = document.getElementById('header_group');
	
	// Just because of IE <333
	ageCheckbox.onchange = function() {
		// Check if the checkbox is checked, and show/hide the text field.
		ageInput.hidden = this.checked ? false : true;
	};
		
	
	
</script>

<?php

function refillField($field, $value = ""){
	if (isset($_POST[$field])){
		echo $_POST[$field];
	} else if ($value != ""){
		echo $value;
	}
}

function recheckField($field){
	if (isset($_POST[$field])){
		echo 'checked';
	}
}

function reselectRadio($field, $value){
	if (isset($_POST[$field]) && $_POST[$field] == $value){
		echo 'checked';
	}
}

if($_POST){
	
	$return = "";
	
	$header_broadcaster_name 	= isset($_POST['enable_header_profile_name']) ? $_POST['broadcaster_name'] : "";
	$header_broadcaster_url 	= isset($_POST['broadcaster_url']) ? $_POST['broadcaster_url'] : "";
	$header_profile_image 		= isset($_POST['enable_header_profile_image']) ? "https://roomimg.stream.highwebmedia.com/ri/" . $_POST['broadcaster_url'] . ".jpg" : "";
	$header_broadcaster_stats 	= isset($_POST['enable_header_profile_stats']) ? $_POST['broadcaster_age'] : "";
	$header_name_align			= isset($_POST['header_name_align']) ? $_POST['header_name_align'] : "";
	$header_stats_align			= isset($_POST['header_stats_align']) ? $_POST['header_stats_align'] : "";
	$header_background_image	= isset($_POST['header_background_image']) ? $_POST['header_background_image'] : "";
	$header_background_color	= isset($_POST['header_background_color']) ? $_POST['header_background_color'] : "";
	
	// header
	if(isset($_POST['enable_header'])){
		$return .= "<i style='width:100%; height:280px; display:block; position:relative; background-size:cover; background-position:0px 510px; background-image:url(\" " . $header_background_image . " \"); background-color:" . $header_background_color . "; font-style:normal;'><br><b style='position:absolute; width:100%; height:30px; display:block; '><a style='color:white; text-decoration: none; font-weight:normal; font-size:30px; font-family:\"Century Gothic\", \"Avant Garde Gothic\", \"Avant Garde\", \"URW Gothic L\", helvetica, sans-serif; text-decoration:none; text-align:" . $header_name_align . "; width: 100%; display:inline-block;' href='http://chaturbate.com/" . $header_broadcaster_url . "/' >" . $header_broadcaster_name . "</a><br><img src='" . $header_profile_image . "' style='position:relative; margin:10px auto 0px auto; border-radius:10px; border:5px white solid; min-width:182px; min-height:149px; max-width:182px; max-height:149px; display: block;'></b>";
		// header stats
		if($header_broadcaster_stats != ""){
			$return .= "<b style='position:absolute; top:auto; bottom:0px; width:100%; height:30px; display:block; color:white; text-align:" . $header_stats_align . ";'>" . $_POST['broadcaster_age'] . "Y " . $_POST['broadcaster_height'] . "CM " . $_POST['broadcaster_size'] . "CM</b>";
		}
		$return .= "<br></i>";
	}
	
	
	
	// Show the visual
	echo '<pre>' . $return . '</pre>';
	
	// Show the code
	echo '<pre style=" font-family: monospace; background-color: #eee; padding: 10px; white-space: pre-wrap;">';
	echo htmlspecialchars($return);
	echo '</pre>';
}
?>