arafatea

Sleeping

File size: 11,131 Bytes

6b6c410

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Produk</title>
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
  "use strict";
  var mode_pesanan = false;
  var mode_tanya = false;
  var bicara=annyang
  // first we make sure annyang started succesfully
  if (bicara) {
    // define the functions our commands will run.
    var hello = function(text) {
      $("#prompt-input").slideDown("slow");
      scrollTo("#prompt-input");
	  if (mode_tanya==false) {
		$("#prompt-input").val(""+text)
		mode_tanya = true
	  } else {
		let prev= $("#prompt-input").val()
		$("#prompt-input").val(prev+" "+text)
	  }
	  //console.log($("#prompt-input").val())
	  $("#AppTitle").val("Tanya")
    };
	
	var pesanan = function(text) {
      $("#prompt-input").slideDown("slow");
      scrollTo("#prompt-input");
	  if (mode_pesanan==false) {
		$("#prompt-input").val(""+text)
		mode_pesanan = true
	  } else {
		let prev= $("#prompt-input").val()
		$("#prompt-input").val(prev+" "+text)
	  }
	  //console.log($("#prompt-input").val())
	  $("#AppTitle").val("Pesanan")
    };
	
	var ulangi = function(text) {
		$("#prompt-input").slideDown("slow");
		scrollTo("#prompt-input");
		$("#prompt-input").val("")
		mode_pesanan = false
    };
	
	var tutup = function() {
      $("#hello1").hide();
	  $("#section_hello").hide();
	  $("#section_warna").hide();
	  $("#section_rasa").hide();
	  $("#section_aroma").hide();
	  scrollTo("#section_hello");
    };

    var submitButton = function() {
      $("#button-input").slideDown("slow");
      scrollTo("#button-input");
	  $("#button-input").click()
	  console.log("LANJUT")
	  mode_pesanan = false
	  mode_tanya   = false
	  $("#AppTitle").val("-")
    };

    var getStarted = function() {
      window.location.href = 'https://arafaasia.com';
    }

    // define our commands.
    // * The key is the phrase you want your users to say.
    // * The value is the action to do.
    //   You can pass a function, a function name (as a string), or write your function as part of the commands object.
    var commands = {
      'halo *teman': hello,
	  'tanya *teman': hello,
	  'pesanan *teman': pesanan,
      'lanjut':    submitButton,
      'masuk':   submitButton,
	  'ulangi':   ulangi,
	  'ulang':   ulangi,
	  'ganti':   ulangi,
	  '*teman': pesanan,
    };

    // OPTIONAL: activate debug mode for detailed logging in the console
    bicara.debug();
    bicara.addCommands(commands);
    bicara.setLanguage('id-ID'); // en
    // Start listening. You can call this here, or attach this call to an event, button, etc.
    bicara.start();
  } else {
    $(document).ready(function() {
      $('#unsupported').fadeIn('fast');
    });
  }

  var scrollTo = function(identifier, speed=1000) {
	//console.log(identifier, speed)
	$(identifier).show();
    $('html, body').animate({
       // scrollTop: $(identifier).offset().top
    }, speed || 1000);
  }
  </script>
 
  <style>
    .table {
		display:table;
		
		height:100%;
		border:1px solid #000;
	}
	.row2 {
		display:table-row;
		height:100%;
	}
	.cell1, .cell2, .cell3 {
		display:table-cell;
		width:33%;
		height:auto;
		border:1px solid #CCC;
	}
	#section_warna {
	  background-color: #ADAD03;
	  color: #fff;
	}
	#section_rasa {
	  background-color: #03AD77;
	  color: #fff;
	}
	#section_aroma {
	  background-color: #6503AD;
	  color: #fff;
	}
  </style>
<style>
figure {
  display: flex inline;
  justify-content: space-between;
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  background-color: #ADAD03;
  color: white;
  font-style: italic;
  padding: 0px;
  text-align: center;
  font-size: 14px;
}


.container {
  background: white;
  margin: 0 auto;
  padding: 5%;
  width: 90%;
}
.img_ds1 {
  width: 80%;
  height: auto
  horizontal-align: center;
}
.img_ds {
  width: 100%;
  height: 100%; // auto
  vertical-align: middle;
}

.pics_in_a_row {
  display: flex;
}

.img1 { flex: 1.5; }
.img2 { flex: 1.5; }
.img3 { flex: 1.5; }

.pics_in_a_row {
  margin: 25px 0;
}

.pics_in_a_row > div:not(:last-child) {
  margin-right: 2%;
}

</style>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    main {
      max-width: 700px;
    }
    #conversation .user::before {
      content: 'Anda: ';
      font-weight: bold;
      display: block;
    }
    #conversation .model::before {
      content: 'AI: ';
      font-weight: bold;
      display: block;
    }
    #conversation .form::before {
      content: 'Form: ';
      font-weight: bold;
      display: block;
    }
    #spinner {
      opacity: 0;
      transition: opacity 500ms ease-in;
      width: 30px;
      height: 30px;
      border: 3px solid #222;
      border-bottom-color: transparent;
      border-radius: 50%;
      animation: rotation 1s linear infinite;
    }
    @keyframes rotation {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #spinner.active {
      opacity: 1;
    }
  </style>
  <style>
  {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 10px 10px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 30%;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 30%;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
  font-size: 12px;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 2px;
  margin: 1px 0 2px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 10px 10px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}
.form-container .umum {
  background-color: grey;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
  </style>
  <script>
		function openForm() {
		  document.getElementById("myForm").style.display = "block";
		}
		function closeForm() {
		  document.getElementById("myForm").style.display = "none";
		}
		function closeAiForm(id) {
		  document.getElementById("myaiForm"+id).style.display = "none";
		  document.getElementById("myaiForm2"+id).style.display = "block";
		}
		function openAiForm(id) {
		  document.getElementById("myaiForm"+id).style.display = "block";
		  document.getElementById("myaiForm2"+id).style.display = "none";
		}
		function abcde(id) {
		  alert("abcde:"+id);
		}
  </script>
</head>
<body>
  <main class="border rounded mx-auto my-5 p-4">
    <h1 id="AppTitle">ARAFATEA</h1>
	<p>Produk-produk All-Natural</p>
    <p>"-", lanjutkan dengan "masuk" atau "lanjut"</p>
    <div id="conversation" class="px-2"></div>
    <div class="d-flex justify-content-center mb-3">
      <div id="spinner"></div>
    </div>
    <form method="post">
      <input id="prompt-input" name="prompt" class="form-control"/>
      <div class="d-flex justify-content-end">
        <button id="button-input" class="btn btn-primary mt-2">Send</button>
      </div>
    </form>
    <div id="error" class="d-none text-danger">
      Erro occurred, check the browser developer console for more information.
    </div>
  </main>
  
<!--  
<button class="open-button" onclick="openForm()">Open Form</button>
<div class="form-popup" id="myForm">
  <form action="" class="form-container">
    <h3>Pesanan</h3>
	<table>
		<tr>
			<td><label for="ds_salesOrderId"><b>SO#</b></label><input type="text" placeholder="SO#" name="ds_salesOrderId" required></td>
			<td><label for="ds_salesDate"><b>Date</b></label><input type="text" placeholder="Date" name="ds_salesDate" required></td>
		</tr>
	</table>
	
    <label for="ds_customerName"><b></b></label><input type="text" placeholder="Cust" name="ds_customerName" required>
	<label for="ds_customerAddress"><b></b></label><input type="text" placeholder="Addr" name="ds_customerAddress" required>
	
	<table>
		<tr><th>Prod</th><th>Qty</th><th>Prc</th><th>Rp</th></tr>
		<tr>
			<td><input type="text" placeholder="-" name="ds_productName1"></td>
			<td><input type="text" placeholder="0" name="ds_quantity1"></td>
			<td><input type="text" placeholder="0" name="ds_unitPrice1"></td>
			<td><input type="text" placeholder="0" name="ds_itemAmt1"></td>
		</tr>
		<tr>
			<td><input type="text" placeholder="-" name="ds_productName2"></td>
			<td><input type="text" placeholder="0" name="ds_quantity2"></td>
			<td><input type="text" placeholder="0" name="ds_unitPrice2"></td>
			<td><input type="text" placeholder="0" name="ds_itemAmt2"></td>
		</tr>
		<tr>
			<td><input type="text" placeholder="-" name="ds_productName3"></td>
			<td><input type="text" placeholder="0" name="ds_quantity3"></td>
			<td><input type="text" placeholder="0" name="ds_unitPrice3"></td>
			<td><input type="text" placeholder="0" name="ds_itemAmt3"></td>
		</tr>
	</table>
	
	<table>
		<tr>
			<td><label for="ds_shippingCost"><b>Ongkir</b></label><input type="text" placeholder="Ongkir" name="ds_shippingCost" required></td>
			<td><label for="ds_totalAmount"><b>Total</b></label><input type="text" placeholder="Total" name="ds_totalAmount" required></td>
		</tr>
	</table>
    <button type="submit" class="btn">Submit</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>
-->
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/5.6.3/typescript.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module">
  // to let me write TypeScript, without adding the burden of npm we do a dirty, non-production-ready hack
  // and transpile the TypeScript code in the browser
  // this is (arguably) A neat demo trick, but not suitable for production!
  async function loadTs() {
    const response = await fetch('/chat_app.ts');
    const tsCode = await response.text();
    const jsCode = window.ts.transpile(tsCode, { target: "es2015" });
    let script = document.createElement('script');
    script.type = 'module';
    script.text = jsCode;
    document.body.appendChild(script);
  }

  loadTs().catch((e) => {
    console.error(e);
    document.getElementById('error').classList.remove('d-none');
    document.getElementById('spinner').classList.remove('active');
  });
</script>