diff --git a/index.html b/index.html index ef3cec0..b2b5404 100644 --- a/index.html +++ b/index.html @@ -1,84 +1,24 @@ + - LIFF Starter + ™PEKOK BOTS© -
-
- - -
-
- - - -
-
- -
-

Access Token

- Close Access Token - - - - - -
accessToken
-
- -
-

Profile

- Close Profile -
-
- - - - - - - - - - - - - -
userId
displayName
statusMessage
-
- -
-

LIFF Data

- - - - - - - - - - - - - - - - - - - - - - - - - -
language
context.viewType
context.userId
context.utouId
context.roomId
context.groupId
-
- +
+
+ Welcome To Liff ®Pekok Bots™ +
+
+

+

+

+

+

+
+

Created By ©PEKOK BOTS™

 +
\ No newline at end of file diff --git a/liff-starter.js b/liff-starter.js index 09454ee..fc567b0 100644 --- a/liff-starter.js +++ b/liff-starter.js @@ -1,88 +1,453 @@ window.onload = function (e) { - liff.init(function (data) { - initializeApp(data); + + liff.init(function () { + + getP(); + }); + }; -function initializeApp(data) { - document.getElementById('languagefield').textContent = data.language; - document.getElementById('viewtypefield').textContent = data.context.viewType; - document.getElementById('useridfield').textContent = data.context.userId; - document.getElementById('utouidfield').textContent = data.context.utouId; - document.getElementById('roomidfield').textContent = data.context.roomId; - document.getElementById('groupidfield').textContent = data.context.groupId; - - // openWindow call - document.getElementById('openwindowbutton').addEventListener('click', function () { - liff.openWindow({ - url: 'https://line.me' +function getP(){ + + var tipe = getParameterByName('type') + + if (!tipe) { + + document.getElementById('textx').addEventListener('click', function () { + + liff.sendMessages([{ + + type: 'text', + + text: atob('bGluZTovL2FwcC8xNjM2MzYxMTc5LU45ZG5ScFlnP3R5cGU9Zm90ZXh0JnRleHQ9VFJJTyUyMFBFS09LJTIwQk9UUwoKdHlwZSA9PiBmb3RleHQKdGV4dCA9PiB5b3VyIHRleHQ=') + + }]).then(function () { + + liff.closeWindow(); + + }); + + }); + + document.getElementById('imagex').addEventListener('click', function () { + + liff.sendMessages([{ + + type: 'text', + + text: atob('bGluZTovL2FwcC8xNjM2MzYxMTc5LU45ZG5ScFlnP3R5cGU9Zm9pbWFnZSZpbWc9aHR0cHM6Ly9pLmliYi5jby9UcjFtallILzE1NDU5NDY0NzQ0NzQuanBnCgp0eXBlID0+IGZvaW1hZ2UgaW1hZ2UKaW1nID0+IExpbmsgKG11c3QgYmUgSFRUUFMp') + + }]).then(function () { + + liff.closeWindow(); + + }); + + }); + + document.getElementById('videox').addEventListener('click', function () { + + liff.sendMessages([{ + + type: 'text', + + text: atob('bGluZTovL2FwcC8xNjM2MzYxMTc5LU45ZG5ScFlnP3R5cGU9dmlkZW8mb2N1PWh0dHBzOi8vdGlueXVybC5jb20veThvZzNvcjUmcGl1PWh0dHBzOi8vaS5pYmIuY28vVHIxbWpZSC8xNTQ1OTQ2NDc0NDc0LmpwZwoKdHlwZSA9PiB2aWRlbwpvY3UgPT4gdmlkZW8gdXJsCnBpdSA9PiBwcmV2aWV3IGltYWdl') + + }]).then(function () { + + liff.closeWindow(); + + }); + + }); + + document.getElementById('audiox').addEventListener('click', function () { + + liff.sendMessages([{ + + type: 'text', + + text: atob('bGluZTovL2FwcC8xNjM2MzYxMTc5LU45ZG5ScFlnP3R5cGU9YXVkaW8mbGluaz1odHRwczovL3BsYXRlbGV0cy5mdW4vcHVibGljL3NvdW5kcy9tdXNpYy5tcDMKCmxpbmsgLSBtdXN0IGJlIEhUVFBT') + + }]).then(function () { + + liff.closeWindow(); + + }); + + }); + + document.getElementById('stickerx').addEventListener('click', function () { + + liff.sendMessages([{ + + type: 'text', + + text: atob('Tm8gQW5pbWF0aW9uOgpsaW5lOi8vYXBwLzE2MzYzNjExNzktTjlkblJwWWc/dHlwZT1zdGlja2VyJnN0az1ub2FuaW0mc2lkPTE4NDIzMzYzJnBrZz0xNTA5MjAyCgpXaXRoIEFuaW1hdGlvbjoKbGluZTovL2FwcC8xNjM2MzYxMTc5LU45ZG5ScFlnP3R5cGU9c3RpY2tlciZzdGs9YW5pbSZzaWQ9MTM0MzcyODEmcGtnPTEzMzM4MDI=') + + }]).then(function () { + + liff.closeWindow(); + + }); + + }); + + } else { + + makeText(); + + makeImage(); + + makeVideo(); + + makeAudio(); + + makeSticker(); + + textFooter(); + + imageFooter(); + + meProfile(); + + Profil_e(); + + flexText(); + + bigImage(); + + } + + } + +function getParameterByName(name, url) { + + if (!url) url = window.location.href; + + name = name.replace(/[\[\]]/g, '\\$&'); + + var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), + + results = regex.exec(url); + + if (!results) return null; + + if (!results[2]) return ''; + + return decodeURIComponent(results[2].replace(/\+/g, ' ')); + +} + +function getProfile(){ + + liff.getProfile().then(function (profile) { + + document.getElementById('userid').textContent = 'Hai ' + profile.displayName; + + document.getElementById('main').src = profile.pictureUrl; + + document.getElementById('close').addEventListener('click', function () { + + liff.closeWindow(); + }); - }); - // closeWindow call - document.getElementById('closewindowbutton').addEventListener('click', function () { - liff.closeWindow(); }); - // sendMessages call - document.getElementById('sendmessagebutton').addEventListener('click', function () { +} + +function makeText(){ + + var tipe = getParameterByName('type'); + + if (tipe === 'text') { + liff.sendMessages([{ + type: 'text', - text: "You've successfully sent a message! Hooray!" - }, { - type: 'sticker', - packageId: '2', - stickerId: '144' + + text: getParameterByName('text') + }]).then(function () { - window.alert("Message sent"); - }).catch(function (error) { - window.alert("Error sending message: " + error); + + liff.closeWindow(); + }); - }); - // get access token - document.getElementById('getaccesstoken').addEventListener('click', function () { - const accessToken = liff.getAccessToken(); - document.getElementById('accesstokenfield').textContent = accessToken; - toggleAccessToken(); - }); + } + +} + +function makeImage(){ + + var tipe = getParameterByName('type'); + + if (tipe === 'image') { + + liff.sendMessages([{ + + type: 'image', + + originalContentUrl: getParameterByName('img'), + + previewImageUrl: getParameterByName('img') + + }]).then(function () { + + liff.closeWindow(); - // get profile call - document.getElementById('getprofilebutton').addEventListener('click', function () { - liff.getProfile().then(function (profile) { - document.getElementById('useridprofilefield').textContent = profile.userId; - document.getElementById('displaynamefield').textContent = profile.displayName; - - const profilePictureDiv = document.getElementById('profilepicturediv'); - if (profilePictureDiv.firstElementChild) { - profilePictureDiv.removeChild(profilePictureDiv.firstElementChild); - } - const img = document.createElement('img'); - img.src = profile.pictureUrl; - img.alt = "Profile Picture"; - profilePictureDiv.appendChild(img); - - document.getElementById('statusmessagefield').textContent = profile.statusMessage; - toggleProfileData(); - }).catch(function (error) { - window.alert("Error getting profile: " + error); }); - }); + + } + } -function toggleAccessToken() { - toggleElement('accesstokendata'); +function makeVideo(){ + + var tipe = getParameterByName('type'); + + if (tipe === 'video') { + + liff.sendMessages([{ + + type: 'video', + + originalContentUrl: getParameterByName('ocu'), + + previewImageUrl: getParameterByName('piu') + + }]).then(function () { + + liff.closeWindow(); + + }); + + } + } -function toggleProfileData() { - toggleElement('profileinfo'); +function makeAudio(){ + + var tipe = getParameterByName('type'); + + if (tipe === 'audio') { + + liff.sendMessages([{ + + type: 'audio', + + originalContentUrl: getParameterByName('link'), + + duration: 60000 + + }]).then(function () { + + liff.closeWindow(); + + }); + + } + } -function toggleElement(elementId) { - const elem = document.getElementById(elementId); - if (elem.offsetWidth > 0 && elem.offsetHeight > 0) { - elem.style.display = "none"; - } else { - elem.style.display = "block"; +function makeSticker(){ + + var tipe = getParameterByName('type'); + + if (tipe === 'sticker') { + + var stk = getParameterByName('stk'); + + var sid = getParameterByName('sid'); + + var pkg = getParameterByName('pkg'); + + var ep = ''; + + if (stk === 'anim') { + + ep = "/IOS/sticker_animation@2x.png"; + + } else { + + ep = "/IOS/sticker@2x.png"; + + } + + liff.sendMessages([{ + + type: "template", + + altText: "Sticker", + + template: { + + type: "image_carousel", + + columns: [{ + + imageUrl: "https://stickershop.line-scdn.net/stickershop/v1/sticker/"+sid+ep, + + action: { + + type: "uri", + + uri: "line://shop/sticker/detail/"+pkg}} + + ] + + } + + }]).then(function () { + + liff.closeWindow(); + + }); + } -} \ No newline at end of file + +} + +function textFooter(){ + + var tipe = getParameterByName('type'); + + liff.getProfile().then(function (prof) { + + var teks = getParameterByName('text'); + + if (tipe === 'fotext') { + + liff.sendMessages([{ + + type: 'text', + + text: getParameterByName('text'), + + sentBy: { + + label: prof.displayName, + + iconUrl: prof.pictureUrl, + + linkUrl: "line://app/1581589150-le0GNepN?type=fotext&text="+encodeURI(teks)} + + }]).then(function () { + + liff.closeWindow(); + + }); + + } + + }); + +} + +function imageFooter(){ + + var tipe = getParameterByName('type'); + + liff.getProfile().then(function (prof) { + + if (tipe === 'foimage') { + + liff.sendMessages([{ + + type: 'image', + + originalContentUrl: getParameterByName('img'), + + previewImageUrl: getParameterByName('img'), + + sentBy: { + + label: prof.displayName, + + iconUrl: prof.pictureUrl, + + linkUrl: "line://app/1581589150-le0GNepN?type=foimage&img="+getParameterByName('img')} + + }]).then(function () { + + liff.closeWindow(); + + }); + + } + + }); + +} + +function meProfile(){ + + var tipe = getParameterByName('type'); + + liff.getProfile().then(function (prof) { + + var stat = prof.statusMessage; + + if (stat == null) { + + var stat = " - "; + + } + + if (stat.length > 60) { + + var stat = "Status Message is too long! Max 60 words"; + + } + + if (tipe === 'profile') { + + liff.sendMessages([{ + + type: "template", + + altText: "Profile "+prof.displayName, + + template: { + + type: "buttons", + + thumbnailImageUrl: prof.pictureUrl, + + imageAspectRatio: "square", + + imageSize: "cover", + + title: prof.displayName, + + text: stat, + + actions: [ + + { + + type:"uri", + + label:"Me", + + uri:"line://app/1581589150-le0GNepN?type=profile" + + } + + ] + + } + + }]).then(function () { + + liff.closeWindow(); + + }); + + } + + }); + +} diff --git a/style.css b/style.css index 88848f5..91ce478 100644 --- a/style.css +++ b/style.css @@ -1,45 +1,200 @@ - -html { +html{ font-size: 11px; } -table { - width: 100%; - table-layout:fixed; - word-break: break-all; +body { + background-color:transparent; + margin: 0; + padding: 0; } -.div { - max-width: 100%; - text-align: center; +.dark { + background: #24252A; } -#profilepicturediv { - text-align: center; +.flex { + min-height: 20vh; + display: flex; + align-items: center; + justify-content: center; } -img { +#imag { max-width: 25%; height: auto; } -#profileimagediv { - height: 100px; - width: 100px; +.button { + background-color: #bababa; /* Green */ + border: none; + color: white; + padding: 8px 42px; + text-align: center; + text-decoration: none; + display: inline-block; + font-family: "Open Sans", sans-serif; + font-size: 16px; + margin: 1px 1px; + -webkit-transition-duration: 0.4s; /* Safari */ + transition-duration: 0.4s; + cursor: pointer; +} + +.button6 { + background-color: #212121; + color: white; + width: 250px; + border-radius: 6px; + border: 2px solid #212121; } -#contextinfo { - display: none; +.button6:hover { + background-color: transparent; + color: black; + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); } -#accesstokendata, #profileinfo { - display: none; +.button5 { + background-color: #3f3f3f; + color: black; + width: 250px; + border-radius: 6px; + border: 2px solid #3f3f3f; } -.buttongroup { - text-align: center; +.button5:hover { + background-color: transparent; + color: white; + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); +} + +.button4 { + background-color: #555555; + color: white; + width: 250px; + border-radius: 6px; + border: 2px solid #555555; } -button { - margin: 4px; +.button4:hover { + background-color: transparent; + color: black; + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); +} + +.button3 { + background-color: #7c7c7c; + color: black; + width: 250px; + border-radius: 6px; + border: 2px solid #7c7c7c; +} + +.button3:hover { + background-color: transparent; + color: white; + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); +} + +.button2 { + background-color: #a5a5a5; + color: white; + width: 250px; + border-radius: 6px; + border: 2px solid #a5a5a5; +} + +.button2:hover { + background-color: transparent; + color: black; + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); +} + +.button1 { + background-color: #cccccc; + color: black; + width: 250px; + border-radius: 6px; + border: 2px solid #cccccc; +} + +.button1:hover { + background-color: transparent; + color: white; + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); +} + +.responsive { + max-width: 100%; + height: auto; +} + +.layang { + position:fixed; + right:5px; + top:10px; +} + +@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400"; +*, +*::before, +*::after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +a.bttn { + color: white; + text-decoration: none; + -webkit-transition: 0.3s all ease; + transition: 0.3s ease all; +} +a.bttn:hover { + color: #2376fc; +} +a.bttn:focus { + color: #2376fc; +} + +.bttn { + font-family: "Open Sans", sans-serif; + font-size: 20px; + letter-spacing: 3px; + text-transform: uppercase; + display: inline-block; + text-align: center; + width: 270px; + font-weight: bold; + padding: 5px 0px; + border: 3px solid #1bf992; + border-radius: 1px; + position: relative; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1); +} +.bttn:before { + -webkit-transition: 0.5s all ease; + transition: 0.5s all ease; + position: absolute; + top: 0; + left: 50%; + right: 50%; + bottom: 0; + opacity: 0; + content: ''; + background-color: #1bf992; + z-index: -2; +} +.bttn:hover:before { + -webkit-transition: 0.5s all ease; + transition: 0.5s all ease; + left: 0; + right: 0; + opacity: 1; } +.bttn:focus:before { + transition: 0.5s all ease; + left: 0; + right: 0; + opacity: 1; +} \ No newline at end of file