OTIS-Translation Page

In this example below you will see how to do a OTIS-Translation Page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by AnasTawfeek, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AnasTawfeek ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>OTIS-Translation Page </title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="content-container">
	
	<div class="translate-page">
		<div class="tp-header">
			<div class="tp-title">Select Language <span>English</span></div>
			<button class="tp-save-button">Save</button>
			<button class="tp-load-button">Load English</button>
			<div class="clearfix"></div>
		</div>
		<div class="tp-body">
			<!-- Nav tabs -->
			<ul class="translate-tabs" role="tablist">
				<li role="presentation" class="active">
					<div class="tiny-indicator-bar"></div>
					<div class="tiny-indicator-percent">25/100</div>
					<a href="#pages" aria-controls="pages" role="tab" data-toggle="tab">Pages</a>
				</li>
				<li role="presentation">
					<div class="tiny-indicator-bar"></div>
					<div class="tiny-indicator-percent">25/100</div>
					<a href="#errorCodes" aria-controls="errorCodes" role="tab" data-toggle="tab">Error codes</a>
				</li>
				<li role="presentation" class="complete">
					<div class="tiny-indicator-bar"></div>
					<div class="tiny-indicator-percent">100/100</div>
					<a href="#lookups" aria-controls="lookups" role="tab" data-toggle="tab">Lookups</a>
				</li>
				<!--<li class="indicator">
					<div class="indicator-container">
						<div class="indicator-bar" data-percent="50px"></div>
						<div class="indicator-percent">
							50/200
						</div>
					</div>
				</li>-->
			</ul>
			<!-- Tab panes -->
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="pages">
					<div class="single-key">
						<label for="dashboardPageTitle">Dashboard page title</label>
						<input type="text" id="dashboardPageTitle" />
						<i class="fa fa-check"></i>
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Default playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Currently playing label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Assigned directory label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Assigned directory label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="errorCodes">
					<div class="single-key">
						<label for="dashboardPageTitle">Add playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Configure screens label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Assigned Directory label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Add playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Configure screens label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Assigned Directory label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="lookups">
					<div class="single-key">
						<label for="dashboardPageTitle">Playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Assigned Directory label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Add playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Assigned Directory label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
					<div class="single-key">
						<label for="dashboardPageTitle">Add playlist label</label>
						<input type="text" id="dashboardPageTitle" />
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/AnasTawfeek/otis-translation-page-RWmLyd */
body {
  background: url('https://lh3.googleusercontent.com/en1uSQKUJ1iGIN2HGIbku2m6VHbygynlNiVBtCwOOHoSJnDoL-J58o0scmY1D0C8SsbSzpCxFk5JUFp3RqTObeRewhGy6K9RHuuRsqgR5zyYN8sl3noD-6t5zG31hKQoYySGkbyT9BBSoAkWEJkVauWIhODZ4QuAYdLc8sO-l3nk0UiKPvc8o5C05PuZnzn_jEs-7rhPAjuLLGsSt2sDnxqM6alrG-eQELVzvmI7wLGmgXeSjtqM-oX3pGgtkH55YTAFoRnfoNFkZ6NHJNdQ6hUJQfQr1Vn18mt0v6e9pzMKOcfwgPaGtyLHJJEQo1QIcfZn1igtposaEmIUln0V1Q_qxDJ5SuY1q2Vu7kNPjkphOtlXXi-NF3oLYUZ9wvSVlw7vo562P2f9EdbpIK7bmBDxu0DVLRXeu4jy5XYTyoReh2FfD_jb6X66XKIWiRmaLTXFaYzp6OiKu7jGUwZmyOjQ8cNU5One51YeO8XU3_siUb3fX1rHcs35GJd3bFWaUSCDHSvY_J0rUze_IQVbz3YMRTfLyjxkUWcGfhKmGVk=w1812-h1019-no');
  background-size: 100% auto;
}
body .content-container {
  width: 1170px;
  margin: auto;
  margin-top: 150px;
  color: #fff;
}
.translate-page .tp-header .tp-title {
  float: left;
  font-size: 28px;
  font-weight: normal;
  font-family: 'Segoe UI';
  text-transform: uppercase;
}
.translate-page .tp-header .tp-title span {
  text-transform: none;
  font-size: 20px;
  font-weight: lighter;
  margin-left: 5px;
}
.translate-page .tp-header .tp-save-button,
.translate-page .tp-header .tp-load-button {
  float: right;
  padding: 7px 30px;
  text-align: center;
  background: #0068b3;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  font-family: 'Segoe UI';
  text-decoration: none;
  transition: 0.5s all;
  border: none;
}
.translate-page .tp-header .tp-save-button:hover,
.translate-page .tp-header .tp-load-button:hover {
  background: #0086e6;
}
.translate-page .tp-header .tp-load-button {
  margin-right: 5px;
}
.translate-page .tp-body {
  margin-top: 20px;
}
.translate-page .tp-body .translate-tabs {
  width: 200px;
  float: left;
  padding: 0;
  list-style: none;
  background: rgba(0, 0, 0, 0.4);
  margin-top: 40px;
}
.translate-page .tp-body .translate-tabs li {
  position: relative;
}
.translate-page .tp-body .translate-tabs li a {
  color: #fff;
  display: block;
  padding: 10px;
  transition: all 0.5s;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.translate-page .tp-body .translate-tabs li a:before {
  content: '\f054';
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  left: -15px;
  transition: all 0.5s;
}
.translate-page .tp-body .translate-tabs li .tiny-indicator-bar {
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  background: #fff;
  z-index: 999;
  transition: all 0.5s;
}
.translate-page .tp-body .translate-tabs li .tiny-indicator-percent {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
  color: #fff;
  z-index: 999;
  font-family: 'Segoe UI';
}
.translate-page .tp-body .translate-tabs li.active a,
.translate-page .tp-body .translate-tabs li.active:hover a {
  box-shadow: inset 300px 0 0 #fb6e50;
  padding-left: 30px;
}
.translate-page .tp-body .translate-tabs li.active a:before,
.translate-page .tp-body .translate-tabs li.active:hover a:before {
  left: 10px;
}
.translate-page .tp-body .translate-tabs li.active .tiny-indicator-bar,
.translate-page .tp-body .translate-tabs li.active:hover .tiny-indicator-bar {
  background: #fff;
}
.translate-page .tp-body .translate-tabs li.complete a:before,
.translate-page .tp-body .translate-tabs li.complete:hover a:before {
  content: '\f046';
}
.translate-page .tp-body .translate-tabs li.complete .tiny-indicator-bar,
.translate-page .tp-body .translate-tabs li.complete:hover .tiny-indicator-bar {
  width: 100%;
}
.translate-page .tp-body .translate-tabs li:hover a {
  box-shadow: inset 300px 0 0 rgba(251, 110, 80, 0.5);
}
.translate-page .tp-body .tab-content {
  width: calc(100% - 215px);
  float: left;
  margin-left: 15px;
}
.translate-page .tp-body .tab-content .single-key {
  padding: 15px 0;
  margin: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  position: relative;
}
.translate-page .tp-body .tab-content .single-key label {
  width: 250px;
  float: left;
  font-weight: normal;
  font-family: 'Segoe UI';
  font-size: 16px;
  line-height: 30px;
}
.translate-page .tp-body .tab-content .single-key input {
  width: calc( 100% - 265px );
  margin-left: 15px;
  float: left;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.9);
  height: 30px;
  outline: none;
  padding: 0 25px 0 5px;
}
.translate-page .tp-body .tab-content .single-key .fa-check {
  float: left;
  color: #40d47e;
  border-radius: 100%;
  border: 2px solid #40d47e;
  padding: 3px;
  position: absolute;
  right: 5px;
  top: 20px;
  font-size: 10px;
}


/*Downloaded from https://www.codeseek.co/AnasTawfeek/otis-translation-page-RWmLyd */
$('.translate-tabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Comments