diff --git a/index.html b/index.html
new file mode 100644
index 0000000..832ace8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+ Dua Kolom Teks ke URL
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f256d9e
--- /dev/null
+++ b/script.js
@@ -0,0 +1,78 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+ const urlParams = new URLSearchParams(window.location.search);
+ const text1 = urlParams.get('text1');
+ const text2 = urlParams.get('text2');
+ const font = urlParams.get('font');
+ const color = urlParams.get('color');
+
+ if (text1 || text2) {
+ const displayTexts = document.getElementById('displayTexts');
+ displayTexts.style.display = 'block';
+
+ if (text1) {
+ const marqueeText = document.getElementById('marqueeText');
+ marqueeText.innerHTML = `${text1}`;
+ if (font) marqueeText.style.fontFamily = font;
+ if (color) marqueeText.style.color = color;
+ }
+
+ if (text2) {
+ animateText('animatedText', text2);
+ document.getElementById('listenButton').style.display = 'block';
+ } else {
+ document.getElementById('listenButton').style.display = 'none';
+ }
+
+ document.getElementById('form-container').style.display = 'none';
+ }
+});
+
+function generateURL() {
+ const text1 = document.getElementById('text1').value;
+ const text2 = document.getElementById('text2').value;
+ const font = document.getElementById('fontSelect').value;
+ const color = document.getElementById('colorPicker').value;
+ const baseURL = window.location.origin + window.location.pathname;
+ const url = `${baseURL}?text1=${encodeURIComponent(text1)}&text2=${encodeURIComponent(text2)}&font=${encodeURIComponent(font)}&color=${encodeURIComponent(color)}`;
+ document.getElementById('generatedURL').value = url;
+}
+
+function copyURL() {
+ const urlField = document.getElementById('generatedURL');
+ urlField.select();
+ document.execCommand('copy');
+ alert('URL disalin ke clipboard');
+}
+
+function animateText(elementId, text) {
+ const element = document.getElementById(elementId);
+ let index = 0;
+ element.innerHTML = '';
+
+ function typeWriter() {
+ if (index < text.length) {
+ element.innerHTML += text.charAt(index);
+ index++;
+ setTimeout(typeWriter, 50);
+ }
+ }
+
+ typeWriter();
+}
+
+function speakText() {
+ const text = document.getElementById('animatedText').innerText;
+ if ('speechSynthesis' in window) {
+ const utterance = new SpeechSynthesisUtterance(text);
+ speechSynthesis.speak(utterance);
+ } else {
+ alert('Peramban Anda tidak mendukung fitur text-to-speech.');
+ }
+}
+
+function updateTextStyle() {
+ const font = document.getElementById('fontSelect').value;
+ const color = document.getElementById('colorPicker').value;
+ document.getElementById('text1').style.fontFamily = font;
+ document.getElementById('text1').style.color = color;
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..88bb221
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,113 @@
+body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 20px;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ max-width: 600px;
+ align-items: center;
+ padding: 10px;
+}
+
+.column {
+ width: 100%;
+ margin: 10px 0;
+}
+
+textarea {
+ width: 100%;
+ height: 150px;
+ padding: 10px;
+ box-sizing: border-box;
+}
+
+button {
+ margin-top: 10px;
+ padding: 10px 20px;
+ cursor: pointer;
+}
+
+#result {
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
+
+#generatedURL {
+ width: 70%;
+ padding: 10px;
+ margin-right: 10px;
+ box-sizing: border-box;
+}
+
+#displayTexts {
+ margin-top: 20px;
+ width: 100%;
+ max-width: 600px;
+ word-wrap: break-word;
+ white-space: pre-wrap; /* To preserve newlines */
+ display: none;
+ align-items: center;
+}
+
+#marqueeText {
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ box-sizing: border-box;
+ margin-bottom: 10px;
+ font-size: 100px;
+}
+
+#marqueeText span {
+ display: inline-block;
+ padding-left: 100%;
+ animation: marquee 10s linear infinite;
+}
+
+#animatedText {
+ width: 100%;
+}
+
+#listenButton {
+ margin-top: 10px;
+}
+
+@keyframes marquee {
+ from {
+ transform: translateX(100%);
+ }
+ to {
+ transform: translateX(-100%);
+ }
+}
+
+@media (max-width: 600px) {
+ .container {
+ padding: 5px;
+ }
+
+ button {
+ width: 100%;
+ margin: 5px 0;
+ }
+
+ #result {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ #generatedURL {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+}
\ No newline at end of file