rudrathegreat/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Translation Capabilities on Website

The code in this gist can be used to provide simple translation on your website. The translation itself uses Google Translate, as can be indicated in the translator.js code. Google Translate is definetely not perfect at translation, in fact it is far from it, however it does provide a simple way to translate your website.

  
## arrow.svg
<svg width="52" height="24" viewBox="0 0 52 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M51.0607 13.0607C51.6464 12.4749 51.6464 11.5251 51.0607 10.9393L41.5147 1.3934C40.9289 0.807611 39.9792 0.807611 39.3934 1.3934C38.8076 1.97919 38.8076 2.92893 39.3934 3.51472L47.8787 12L39.3934 20.4853C38.8076 21.0711 38.8076 22.0208 39.3934 22.6066C39.9792 23.1924 40.9289 23.1924 41.5147 22.6066L51.0607 13.0607ZM0 13.5H50V10.5H0V13.5Z" fill="white"/>
</svg>

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Languages</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="google_translate_element" class="translator">
		<div class="custom-arrow">
			<img src="arrow.svg" alt="">
		</div>
	</div>
	<span>
		<script src="translator.js"></script>
		<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	</span>
	<p>Hello. My name is rudrathegreat. This is a basic sentence. This paragraph is going to be used for translation purposes. This paragraph will test how good online translation is on the internt. This website will use Google Translate to make it easier to translate this paragraph into a variety of languages, including Hindi, Chinese, French, Greek, etc. Hopefully this goes well</p>
</body>
</html>

## style.css
* {
	padding: 0;
	margin: 0;
}

 body {
 	background-color: #eee;
 	color: #333;
 	text-align: center;
 	font-family: Arial;
 	font-size:1.25em;
 	display:flex;
 	justify-content: center;
 	width: 80%;
 	margin-left:10%;
 	height:100vh;
 	flex-direction: column;
 	align-items: center;
 }

 body * {
 	margin:1.5vh 0;
 }

 .translator select {
 	border:none !important;
 	background:none !important;
 	color:white !important;
 	padding:1vh 2vw;
 	border-radius:0;
 	-webkit-appearance:none;
 	width:100%;
 	padding-left:5%:;
 }

 .translator {
 	position:relative;
 	background:#333;
 	margin:0 !important;
 	z-index: 1;
 	width:50%;
 }

 .translator .skiptranslate {
 	width:100%;
 	height:100%;
 	margin:0 !important;
 }

.translator .skiptranslate div {
	width: 100%;
	height:100%;
	margin: 0 !important;
}

.translator .custom-arrow {
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:20%;
	background:#555;
	margin:0 !important;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.translator .custom-arrow img {
	width:50%;
	transform: rotate(90deg);
}

@media screen and (min-width: 900px) {
	.translator {
		width:15%;
	}
}

## translator.js
function googleTranslateElementInit() {
 new google.translate.TranslateElement(
            {pageLanguage: 'en'},
            'google_translate_element'
        );
if(typeof(document.querySelector) == 'function') {
    document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
    document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}

$('.goog-logo-link').css('display', 'none');
$('.goog-te-gadget').css('font-size', '0');
}
	<svg width="52" height="24" viewBox="0 0 52 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M51.0607 13.0607C51.6464 12.4749 51.6464 11.5251 51.0607 10.9393L41.5147 1.3934C40.9289 0.807611 39.9792 0.807611 39.3934 1.3934C38.8076 1.97919 38.8076 2.92893 39.3934 3.51472L47.8787 12L39.3934 20.4853C38.8076 21.0711 38.8076 22.0208 39.3934 22.6066C39.9792 23.1924 40.9289 23.1924 41.5147 22.6066L51.0607 13.0607ZM0 13.5H50V10.5H0V13.5Z" fill="white"/>
	</svg>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Languages</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="google_translate_element" class="translator">
	<div class="custom-arrow">
	<img src="arrow.svg" alt="">
	</div>
	</div>
	<span>
	<script src="translator.js"></script>
	<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	</span>
	<p>Hello. My name is rudrathegreat. This is a basic sentence. This paragraph is going to be used for translation purposes. This paragraph will test how good online translation is on the internt. This website will use Google Translate to make it easier to translate this paragraph into a variety of languages, including Hindi, Chinese, French, Greek, etc. Hopefully this goes well</p>
	</body>
	</html>
	* {
	padding: 0;
	margin: 0;
	}

	body {
	background-color: #eee;
	color: #333;
	text-align: center;
	font-family: Arial;
	font-size:1.25em;
	display:flex;
	justify-content: center;
	width: 80%;
	margin-left:10%;
	height:100vh;
	flex-direction: column;
	align-items: center;
	}

	body * {
	margin:1.5vh 0;
	}

	.translator select {
	border:none !important;
	background:none !important;
	color:white !important;
	padding:1vh 2vw;
	border-radius:0;
	-webkit-appearance:none;
	width:100%;
	padding-left:5%:;
	}

	.translator {
	position:relative;
	background:#333;
	margin:0 !important;
	z-index: 1;
	width:50%;
	}

	.translator .skiptranslate {
	width:100%;
	height:100%;
	margin:0 !important;
	}

	.translator .skiptranslate div {
	width: 100%;
	height:100%;
	margin: 0 !important;
	}

	.translator .custom-arrow {
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:20%;
	background:#555;
	margin:0 !important;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.translator .custom-arrow img {
	width:50%;
	transform: rotate(90deg);
	}

	@media screen and (min-width: 900px) {
	.translator {
	width:15%;
	}
	}
	function googleTranslateElementInit() {
	new google.translate.TranslateElement(
	{pageLanguage: 'en'},
	'google_translate_element'
	);
	if(typeof(document.querySelector) == 'function') {
	document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
	document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
	}

	$('.goog-logo-link').css('display', 'none');
	$('.goog-te-gadget').css('font-size', '0');
	}