Skip to content

Instantly share code, notes, and snippets.

@zaelani23

zaelani23/Index.html

Last active October 31, 2025 03:44
Show Gist options
  • Save zaelani23/d3dcdc765eab14c6a21ffa306e338108 to your computer and use it in GitHub Desktop.
Save zaelani23/d3dcdc765eab14c6a21ffa306e338108 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body onload="getLocation()">
<div class='container'>
<form>
<p class='h4 mb-4 text-center'>Klik 'Mulai' untuk melanjutkan!!</p>
<p>Aktifkan GPS SmartPhone kalian dan izinkan akses lokasi untuk mendapatkan unique id, silakan reload jika anda belum mengizinkan akses lokasi.</p>
<div class='form-group'>
<label for='ip'>IP Address:</label>
<?!= include(); ?>
</div>
<div class='form-group'>
<label for='unik'>Unique ID:</label><p>silakkan salin unique id anda untuk proses verifikasi jawaban anda nanti.</p>
<input type='text' class='form-control' id='unik' readonly>
</div>
<a type="button" class="btn btn-primary" href='GANTI DENGAN LINK GOOGLE FORM KALIAN' target='_blank'>Mulai</a>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function makeid() {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < 7; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
document.getElementById("unik").value = result;
return result;
}
function showPosition(position) {
google.script.run.processForm(makeid(),position.coords.latitude,position.coords.longitude);
}
</script>
</body>
</html>
@alxyahmzh-hub
Copy link

<title>Sejarah Perkembangan Robot</title> <style> /* === Gaya Futuristik === */ body { font-family: 'Poppins', sans-serif; background-color: #0b0c10; color: #c5c6c7; margin: 0; padding: 0; overflow-x: hidden; } 
/* Efek teks neon */
header h1 {
  color: #66fcf1;
  text-shadow: 0 0 10px #66fcf1, 0 0 20px #45a29e, 0 0 30px #45a29e;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 10px #66fcf1; }
  to { text-shadow: 0 0 30px #45a29e; }
}

header {
  background: linear-gradient(90deg, #0b0c10, #1f2833);
  text-align: center;
  padding: 60px 20px;
  border-bottom: 2px solid #45a29e;
}

header p {
  color: #c5c6c7;
  font-size: 1.2em;
  animation: fadeIn 2s ease;
}

section {
  max-width: 900px;
  margin: 40px auto;
  background: rgba(31, 40, 51, 0.9);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(102, 252, 241, 0.2);
  transform: translateY(40px);
  animation: floatUp 1s ease forwards;
}

@keyframes floatUp {
  to { transform: translateY(0); opacity: 1; }
}

h2 {
  color: #66fcf1;
  border-left: 5px solid #45a29e;
  padding-left: 10px;
}

img {
  width: 100%;
  border-radius: 10px;
  margin-top: 15px;
  box-shadow: 0 0 15px rgba(102, 252, 241, 0.3);
  transition: transform 0.5s;
}

img:hover {
  transform: scale(1.05);
}

/* Efek partikel latar belakang */
.particles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  overflow: hidden;
}

.dot {
  position: absolute;
  width: 4px; height: 4px;
  background-color: #66fcf1;
  border-radius: 50%;
  opacity: 0.6;
  animation: move 10s linear infinite;
}

@keyframes move {
  0% { transform: translateY(0); }
  100% { transform: translateY(100vh); opacity: 0; }
}

footer {
  text-align: center;
  background-color: #1f2833;
  color: #c5c6c7;
  padding: 20px;
  font-size: 14px;
  border-top: 2px solid #45a29e;
  margin-top: 40px;
}
</style>
<script> for (let i = 0; i < 50; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); dot.style.left = Math.random() * 100 + 'vw'; dot.style.animationDelay = Math.random() * 10 + 's'; dot.style.animationDuration = (5 + Math.random() * 5) + 's'; document.body.querySelector('.particles').appendChild(dot); } </script>

Sejarah Perkembangan Robot

Dari mesin sederhana hingga kecerdasan buatan modern

Awal Mula Robot

Konsep robot sudah dikenal sejak zaman kuno, ketika ilmuwan menciptakan mesin yang dapat bergerak sendiri. Pada abad ke-15, Leonardo da Vinci merancang robotic knight — manusia mekanik pertama di dunia.

Robot Leonardo da Vinci 
<h2>Perkembangan di Abad ke-20</h2>
<p>Pada abad ke-20, istilah “robot” mulai populer lewat drama R.U.R karya Karel Čapek (1921). 
Setelah itu, robot digunakan dalam industri otomotif, elektronik, dan bahkan eksplorasi luar angkasa.</p>

<h2>Robot Modern dan AI</h2>
<p>Robot saat ini dilengkapi kecerdasan buatan (AI) yang memungkinkan mereka belajar, berbicara, dan beradaptasi. 
Contohnya adalah robot ASIMO dan Sophia yang bisa berinteraksi layaknya manusia.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Humanoid_robot_ASIMO.jpg" alt="Robot modern ASIMO">

<h2>Masa Depan Robot</h2>
<p>Di masa depan, robot akan semakin dekat dengan kehidupan manusia — menjadi asisten rumah, tenaga kerja, bahkan penjelajah planet. 
Namun, kita tetap perlu memastikan teknologi ini digunakan untuk kebaikan dan kemanusiaan.</p>

© 2025 | Website oleh [Namamu]

@alxyahmzh-hub
Copy link

alya

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment