
{"success":false,"message":"Invalid email format"}



<!DOCTYPE html>
<html lang="en">


	<head>
	    
	    <script>
var message = "";
	        
	    </script>
	    
	    
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
     <meta property="og:image" content="http://www.annexiota.online/qrcodeb.png" />

<meta property="og:description" content="Annexiota" />

<meta property="og:url" content="http://www.annexiota.online/index.php" />

<meta property="og:title" content="Annexiota" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
   <title>ⴀ𝚾ͺ Annexiota</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
  
      
         #container {
      position: absolute;
      top: 50;
      width: 100%;
      height: 100%;
    }
    
    .fa {
  padding: 20px;
  font-size: 30px;
  width: 75px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin: 5px 2px;
}


.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
 color: white;
}
.fa-linkedin {
  background: #007bb5;
 color: white;
}
.fa-youtube {
 background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #631269;
  color: white;
}

.embossed{
  color: #f0f0f0;
 display: inline;
  background-color: #666666;
  text-shadow: 1px 2px 3px black;
  text-align: center;
  -webkit-background-clip: text;
    -moz-background-clip: text;

}
.engraved {
    font-size: 100px;
    font-family: Futura;
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(245,245,245,0.5) 3px 5px 1px;
 }
 #container{
     
          z-index: 80;

 }
#alchemical{
    width: 100%;
      height: 90%;
      position: absolute;
      top: 50px;
      left: 0;
            z-index: 80;

  color:cyan;  
  
      overflow-y: auto;
}
.nav{
    	z-index: 100;

}
.prodiv {
    background-color: rgba(50,50,50,0.8);
    width: 95%;
    left: 3%;
    padding: 3%;
    position: relative;

	color: white;
border-radius: 30px;
	border: 1px solid white;
  top: 5px;
	height: 50%;
	text-align: left;
		z-index: 50;
	display:block;
	overflow-y: auto;
}
.navbar {
    	z-index: 95;

}
#Contactform {
z-index: 90;
}
#CartRO,#CartRU{
    position: absolute;
    height: 50px;
    width: 200px;
    padding: 10px;
    margin: 10px;
 
    border-radius: 30px;
	border: 1px solid white;
    background-color: rgba(0,0,0,0.9);
    color: white;
    text-align: center;
}


h1{color:white;}
 h2{color:white;}
 h4{color:white;}
 p{color:white;}
 body{color:green; background-image: url('shareimage.jpeg');}

    </style>
    
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8257552615742866"
     crossorigin="anonymous"></script>
     
	</head>

	<body>
	    
	<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v15.0" nonce="gsYiwFtz"></script>
	
		    

 <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.php">ⴀ Annexiota</a><div class="navbar-brand" style="position:absolute;">𝚾ͺ </div>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li class="active"><a href="about.php">About</a></li>
        <li><a href="welcome.php">Games</a></li>
        <li><a href="https://annexiota.online/AjaxUploadItemForm.php">Sell Item</a></a></li>
        <li><a href="AnnexiotaStore.php">Browse Store</a></li>

      </ul>
      <ul class="nav navbar-nav navbar-right">

        <li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="AnnexiotaStoreSignedIn.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
       
      </ul>
    </div>
    <div id="display" style="color:white;"></div> 
  </div>
</nav>

 <div id="container"> 
</div>	   
<div id="alchemical" >  



<div>	
	<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your share button code -->
  
  
<!-- Set up a container element for the button -->

<!-- Include the PayPal JavaScript SDK. Replace `YOUR_CLIENT_ID` with your client ID.-->
<!-- Note that `enable-funding=venmo` is added as a query parameter -->



         
<h1 id="navigatelanguage"></h1>
    
<div class="prodiv">
 <h5 class="embossed">ⴀ letter An<br>
 𝚾 letter Chi<br> ͺ letter Iota Prosgegrammeni<br></h5><h1 class="embossed">ⴀ𝚾 ͅAnnexiota</h1>
   <h4 class="embossed">Programming, Electronics, and Manufacturing services </h4><h4 class="embossed"><br><br>18 Victoria Avenue, <br>Whanganui,<br>New Zealand<br><br>book an appointment via the contact form below:<br></h4>

 
 
  <div class="prodiv">

 <h2 class="embossed">Programming Services:</h2><br>
  <span</h4><h4 class="embossed" onclick="contact_web()">Web,</h4><h4 class="embossed" onclick="contact_appphotolithography()"> App,</h4><h4 class="embossed" onclick="contact_software()"> Software,</h4><h4 class="embossed" onclick="contact_firmware()"> and Firmware development,</h4><h4 class="embossed" onclick="contact_programming()"> Specialising in the languages C,C++,C#,html,Java,JS,PHP,Python,SQL, and T-SQL.
 </h4></span><br>

<h4 class="embossed">
<a href = "mailto: Luke@annexiota.online?Subject=Programming%20query" class="btn btn-primary">Click here to enquire via Email</a>
</h4>
</div>

 <div class="prodiv" id="Electronics">

 <h2   class="embossed">Electronics Services:</h2><br>
 <span><h4 class="embossed" onclick="contact_PCB_schematics()">PCB schematics, </h4><h4 class="embossed" onclick="contact_PCB_layout()"> PCB layout, </h4><h4 class="embossed" onclick="contact_CVD()"> CVD, </h4><h4 class="embossed" onclick="contact_photolithography()"> photolithography, </h4><h4 class="embossed" onclick="contact_soldermasks()"> soldermasks, </h4><h4 class="embossed" onclick="contact_PCB_etching()"> chemical etching, </h4><h4 class="embossed" onclick="contact_PCB_assembly()"> assembling PCBs with components.</h4></span><br>
<h4 class="embossed"><a href = "mailto: Luke@annexiota.online?Subject=Electronics%20query" class="btn btn-primary">Click here to enquire via Email</a>
</h4>
</div>

 <div class="prodiv">

 <h2 class="embossed">Manufacturing Services:</h2><br>
  <span><h4 class="embossed" onclick="contact_CNC_machining()">CNC turning and milling,</h4><h4 class="embossed" onclick="contact_welding()"> TIG welding,</h4><h4 class="embossed" onclick="contact_plasma()"> plasma cutting,</h4><h4 class="embossed" onclick="contact_grinding()"> grinding,</h4><h4 class="embossed" onclick="contact_sanding()"> sanding,</h4><h4 class="embossed" onclick="contact_polishing()"> polishing,</h4><h4 class="embossed" onclick="contact_electroplating()"> electroplating,</h4><h4 class="embossed" onclick="contact_anodizing()"> anodizing,</h4><h4 class="embossed" onclick="contact_painting()"> and painting.
     </h4><br><br>
     <h2 class="embossed">


Aluminum-Based Products:
</h2><br>
     <h4 class="embossed">

Custom cast aluminum parts for automotive, motorcycles, or industrial machinery.

Small-scale aluminum art or decorative items (custom plaques, emblems, or sculptures).

Replacement parts that are expensive or hard to find (e.g., vintage car/bike parts, small engine parts).
</h4><br><br>
     <h2 class="embossed">

Precision Machined Parts (Using CNC Lathe/Mill):
</h2><br>
     <h4 class="embossed">

Custom bushings, spacers, and brackets for industries like automotive, robotics, or aerospace prototyping.

Small mechanical components such as gears, pulleys, and couplings.

Firearm accessories (where legal) like muzzle brakes, scope mounts, or custom grips.

RC vehicle/drone parts (hobbyist market).
</h4><br><br>
     <h2 class="embossed">

Fabrication & Welding (Plasma & TIG Welding Machine):
</h2><br>
     <h4 class="embossed">

Custom metal enclosures for electronics or automation.

Specialized industrial brackets or mounts.

Small stainless steel or aluminum structures like handrails or machine guards.



</h4></span><br>
 <h4 class="embossed">

<a href = "mailto: Luke@annexiota.online?Subject=Manufacturing%20query" class="btn btn-primary">Click here to enquire via Email</a>
</h4>

</div>
</div>

<script>
var clientHeight=0;
var date = new Date();
var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
var prefixed = 0.0;
var category_P = 0.0;
var category_E = 0.0;
var category_M = 0.0;

var localelang = navigator.language;


        
 function movecontact () {
     document.getElementById('Contactform').style.position = "fixed";
         if (clientHeight + 300 > window.innerHeight || clientHeight < 0){
             clientHeight= 50;
         }
         document.getElementById('Contactform').style.top = clientHeight+"px";
 }
 
 
 
     function contact_suffix () {
            // Fetch the IP address from the API
     fetch("https://ipinfo.io/json") 
                .then(response => response.json())
                .then(data => {
                    // Display the IP address on the screen
                    document.getElementById("ip-address").textContent = 
                          `IP Address: ${data.ip}`;
                }).catch(error => {
                    console.error("Error fetching IP address:", error);
                    document.getElementById("ip-address").textContent = 
                          "Unable to retrieve IP address.";
                });
        });
 
     
 }
 
 function contact_prefix (){
     if (prefixed === 0.0){
 
        if(am_pm === "AM"){
         document.getElementById("message").innerHTML+= date+ '\n'+'\n'+"Good Morning Annexiota Team,"+ '\n'+ localelang;
        }
        else{
         document.getElementById("message").innerHTML+= date+ '\n'+'\n'+"Good Afternoon Annexiota Team, "+'\n'+ localelang;
        }
        prefixed = 1;
     }
 }
 
 
    
    function contact_CNC_machining (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for Computer Numerical Control machining of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require Computer Numerical Control machining of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
    
    function contact_welding (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for GTAW welding of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require GTAW welding of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_plasma (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for plasma cutting of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require plasma cutting of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_grinding (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for angle grinding / cutting of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require angle grinding / cutting of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_sanding (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for PCB schematics of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require PCB schematics of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_polishing (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for polishing a surface of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require polishing a surface of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_anodizing (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for anodizing a surface of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require anodizing a surface of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_electroplating (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for electroplating a surface of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require electroplating a surface of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_painting (){
         contact_prefix();
         if (category_M === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Manufacturing Services, requesting a quote for painting / coating of the following description: ";
         category_M = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require painting / coating of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
    ////
    
    
     function contact_PCB_schematics (){
         contact_prefix();
         if (category_E === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Electronics Services, requesting a quote for PCB schematics of the following description: ";
         category_E = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require PCB schematics of the following description:";
         }
        clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_PCB_layout (){
         contact_prefix();
         if (category_E === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Electronics Services, requesting a quote for PCB layout of the following description:";
         category_E = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require PCB layout of the following description:";
         }
          clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_photolithography (){
         contact_prefix();
         if (category_E === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Electronics Services, requesting a quote for UV photolithography of the following description:";
         category_E = 1;
         }
         else{
             document.getElementById("message").innerHTML+= " I also require UV photolithography of the following description:";
         }
          clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_CVD (){
         contact_prefix();
         if (category_E === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Electronics Services, requesting a quote for Chemical Vapor Deposition of the following description:";
         category_E = 1;
     }
         else{
             document.getElementById("message").innerHTML+= " I also require Chemical Vapor Deposition of the following description:";
         }
          clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_soldermasks (){
         contact_prefix();
         if (category_E === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Electronics Services, requesting a quote for soldermasks of the following description:";
         category_E = 1;
     }
         else{
             document.getElementById("message").innerHTML+= " I also require soldermasks of the following description:";
         }
          clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_PCB_etching (){
         contact_prefix();
         if (category_E === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Electronics Services, requesting a quote for etching of the following description:";
         category_E = 1;
     }
         else{
             document.getElementById("message").innerHTML+= " I also require etching of the following description:";
         }
          clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     function contact_PCB_assembly (){
         contact_prefix();
         if (category_E === 0.0){
         document.getElementById("message").innerHTML+= '\n'+'\n'+"I would like to enquire about Electronics Services, requesting a quote for PCB assembly of the following description:";
         category_E = 1;
     }
         else{
             document.getElementById("message").innerHTML+= " I also require PCB assembly of the following description:";
         }
          clientHeight= document.querySelector('#Electronics').getBoundingClientRect().top; // Y
        movecontact();
     }
     
     
</script>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="prodiv" id="Contactform" style="height:470px;width:400px;">
  <center>
      
      <h3>Contact us</h3>
<form method="POST">
    <label for="name">Name: <input type="text" name="name" id="name" style="color:cyan;background-color:black;"></label><br>
    <label for="email">Email address: <input type="email" name="email" id="email" style="color:cyan;background-color:black;"></label><br>
    <label for="message">Message: <textarea name="message" id="message" rows="10" cols="40" style="color:cyan;background-color:black;"></textarea></label><br>
    <input type="submit" value="Send" style="color:cyan;background-color:black;">
<br>
 <input type="hidden" name="ip-address" id="ip-address"><br>

</form>


<script>
ipWin= document.getElementById("ip-address");
function getIPFromAmazon() {
  fetch("https://checkip.amazonaws.com/").then(res => res.text()).then(data => ipWin.value=data)
}
document.getElementById("name").addEventListener("change", ChekforBob);
document.getElementById("email").addEventListener("change", ChekforBob);
function ChekforBob(){
    getIPFromAmazon();
      contact_name= document.getElementById("name").value;
      contact_email= document.getElementById("email").value;
     if (contact_name.includes("Robert")){
         document.getElementById("message").innerHTML += " Specify what type of goods or services you wish to purchase before requesting a price. ";
         }
     if (contact_email.includes("godaddy")){
      document.getElementById("message").innerHTML += " Use your own email address or you will not receive a reply";
     }
     
}
 </script>
 
 </center>  </div>
 
  <div class="prodiv"> 
<center>
    <h3> Subscribe  </h3>
<div id="paypal-button-container-P-7R4415494C8497025ML7RKOQ" ></div>
  </center>
 </div>
<script src="https://www.paypal.com/sdk/js?client-id=AdWLpN1XcBlLBLF9AekaTB8cT68YcyxD1xjWcKny-9M5xgZnnn2p7XfCIFRuXCsFYmND04p3d0mvvvk9&vault=true&intent=subscription&enable-funding=venmo" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'rect',
          color: 'silver',
          layout: 'vertical',
          label: 'subscribe'
      },
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          /* Creates the subscription */
          plan_id: 'P-7R4415494C8497025ML7RKOQ',
          quantity: 1 // The quantity of the product for a subscription
        });
      },
      onApprove: function(data, actions) {
        alert(data.subscriptionID); // You can add optional success message for the subscriber here
      }
  }).render('#paypal-button-container-P-7R4415494C8497025ML7RKOQ'); // Renders the PayPal button
</script>
 

  
<!-- Add font awesome icons -->
<h4 class="embossed">follow us on:</h4>
<h1>
<a href="https://www.facebook.com/annexiota/" class="fa fa-facebook"></a>
<a href="https://twitter.com/LukeSammons5" class="fa fa-twitter"></a>
<a href="https://youtube.com/channel/UCV9esWuNo8FEA6I8W1spb6Q"  class="fa fa-youtube"></a>
<a href="https://www.linkedin.com/in/luke-sammons-a1a7a3191" class="fa fa-linkedin"></a>
<a href="https://www.instagram.com/p/CXcLLz9BIiI/?utm_medium=copy_link" class="fa fa-instagram"></a>
</h1>

<iframe
width="420" height="315"
src="https://youtube.com/embed/SRpxgkyz3-s">
</iframe>


<iframe
width="420" height="315"
src="https://youtube.com/embed/SvqBaID2A-A">
</iframe>

<iframe
width ="420" height="315"
src="https://youtube.com/embed/rAvPxBztq_M"></iframe>

<iframe

width ="420" height="315"

src="https://youtube.com/embed/Ii-NYMIB1uM"></iframe>

 <iframe
width ="420" height="315"
src="https://youtube.com/embed/gbEUjiTbMpY"></iframe>

<partial name="_CookieConsentPartial" >

    <div class="container body-content">
      
        <hr />
        <footer>
            <p>&copy; 2022 - Annexiota</p>
        </footer>
    </div>
	
	  
	   </partial>
</div>
	

	     
	

		<script type="x-shader/x-vertex" id="vertexshader">

			uniform float amplitude;

			attribute vec3 displacement;
			attribute vec3 customColor;

			varying vec3 vColor;

			void main() {

				vec3 newPosition = position + amplitude * displacement;

				vColor = customColor;

				gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			uniform vec3 color;
			uniform float opacity;

			varying vec3 vColor;

			void main() {

				gl_FragColor = vec4( vColor * color, opacity );

			}

		</script>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "./three.js-master/build/three.module.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import { FontLoader } from './three.js-master/examples/jsm/loaders/FontLoader.js';
			import { TextGeometry } from './three.js-master/examples/jsm/geometries/TextGeometry.js';

            import Stats from './three.js-master/examples/jsm/libs/stats.module.js';

			let renderer, scene, camera, stats;

			let line, uniforms;

			const loader = new FontLoader();
			loader.load( './three.js-master/examples/fonts/helvetiker_bold.typeface.json', function ( font ) {

				init( font );
				animate();

			} );

			function init( font ) {

				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 400;

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x050505 );

				uniforms = {

					amplitude: { value: 3.0 },
					opacity: { value: 0.3 },
					color: { value: new THREE.Color( 0xffffff ) }

				};

				const shaderMaterial = new THREE.ShaderMaterial( {

					uniforms: uniforms,
					vertexShader: document.getElementById( 'vertexshader' ).textContent,
					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
					blending: THREE.AdditiveBlending,
					depthTest: false,
					transparent: true

				} );


				const geometry = new TextGeometry( 'annexiota.online', {

					font: font,

					size: 40,
					height: 5,
					curveSegments: 10,

					bevelThickness: 2,
					bevelSize: 1.5,
					bevelEnabled: true,
					bevelSegments: 10,

				} );

				geometry.center();

				const count = geometry.attributes.position.count;

				const displacement = new THREE.Float32BufferAttribute( count * 3, 3 );
				geometry.setAttribute( 'displacement', displacement );

				const customColor = new THREE.Float32BufferAttribute( count * 3, 3 );
				geometry.setAttribute( 'customColor', customColor );

				const color = new THREE.Color( 0xffffff );

				for ( let i = 0, l = customColor.count; i < l; i ++ ) {

					color.setRGB( 0.2,0.4,i/l );
					color.toArray( customColor.array, i * customColor.itemSize );

				}

				line = new THREE.Line( geometry, shaderMaterial );
				line.rotation.x = 0.2;
				scene.add( line );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				const container = document.getElementById( 'container' );
				container.appendChild( renderer.domElement );

			//	stats = new Stats();
			//	container.appendChild( stats.dom );

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				render();
			//	stats.update();

			}

			function render() {

				const time = Date.now() * 0.001;

				line.rotation.y = 0.25 * time;

				uniforms.amplitude.value = Math.sin( 0.5 * time );
				uniforms.color.value.offsetHSL( 0.0005, 0, 0 );

				const attributes = line.geometry.attributes;
				const array = attributes.displacement.array;

				for ( let i = 0, l = array.length; i < l; i += 3 ) {

					array[ i ] += 0.3 * ( 0.5 - Math.random() );
					array[ i + 1 ] += 0.3 * ( 0.5 - Math.random() );
					array[ i + 2 ] += 0.3 * ( 0.5 - Math.random() );

				}

				attributes.displacement.needsUpdate = true;

				renderer.render( scene, camera );

			}


		</script>

</body>

</html>
