Add files via upload

brandalokadjaya · May 15, 2024 · 2a03bbf · 2a03bbf
1 parent 55fba6e
commit 2a03bbf
Show file tree

Hide file tree

Showing 3 changed files with 239 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dua Kolom Teks ke URL</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&family=Open+Sans:wght@100&family=Lobster&family=Montserrat:wght@100&family=Poppins:wght@100&family=Raleway:wght@100&family=Pacifico&family=Roboto+Mono:wght@100&family=Nunito:wght@100&family=Quicksand:wght@100&family=Playfair+Display:wght@100&family=Lora:wght@100&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="form-container" class="container">
+        <div class="column">
+            <textarea id="text1" placeholder="Masukkan teks di kolom 1..."></textarea>
+            <label for="fontSelect">Pilih Font:</label>
+            <select id="fontSelect" onchange="updateTextStyle()">
+                <option value="Roboto">Roboto</option>
+                <option value="Open Sans">Open Sans</option>
+                <option value="Lobster">Lobster</option>
+                <option value="Montserrat">Montserrat</option>
+                <option value="Poppins">Poppins</option>
+                <option value="Raleway">Raleway</option>
+                <option value="Pacifico">Pacifico</option>
+                <option value="Roboto Mono">Roboto Mono</option>
+                <option value="Nunito">Nunito</option>
+                <option value="Quicksand">Quicksand</option>
+                <option value="Playfair Display">Playfair Display</option>
+                <option value="Lora">Lora</option>
+            </select>
+            <label for="colorPicker">Pilih Warna:</label>
+            <input type="color" id="colorPicker" onchange="updateTextStyle()">
+        </div>
+        <div class="column">
+            <textarea id="text2" placeholder="Masukkan teks di kolom 2..."></textarea>
+        </div>
+        <button onclick="generateURL()">Buat URL</button>
+        <div id="result">
+            <input type="text" id="generatedURL" readonly>
+            <button onclick="copyURL()">Salin URL</button>
+        </div>
+    </div>
+    <div id="displayTexts">
+        <div id="marqueeText"></div>
+        <button id="listenButton" onclick="speakText()">Dengarkan</button>
+        <div id="animatedText"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js 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 = `<span>${text1}</span>`;
+            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;
+}
diff --git a/styles.css 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;
+    }
+}