[add] init
This commit is contained in:
commit
ebc8cf3a17
24
index.html
Normal file
24
index.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AR - LIFF</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<center>
|
||||||
|
<div class="flex">
|
||||||
|
<a href="line://ti/p/%40iov0354t" class="bttn">Thank You</a>
|
||||||
|
</div></center>
|
||||||
|
<center>
|
||||||
|
<h2><button class="button button1" id="textx">Text</button></h2>
|
||||||
|
<h2><button class="button button2" id="imagex">Image</button></h2>
|
||||||
|
<h2><button class="button button3" id="videox">Video</button></h2>
|
||||||
|
<h2><button class="button button4" id="audiox">Audio</button></h2>
|
||||||
|
<h2><button class="button button5" id="stickerx">Big Sticker</button></h2></center>
|
||||||
|
<center>
|
||||||
|
<h2 style="color: #3f3f3f;">Designed by <a href="https://ari-yk.github.io/" style="color: #3f3f3f; text-decoration: none; font-size: 20px;">Ari.</a></h2>
|
||||||
|
<h3><code style="color: #3f3f3f;"><i><a href="https://ari-yk.github.io/" style="color: #3f3f3f; text-decoration: none;">Ari.</a> © 2019</i></code></h3>
|
||||||
|
</center>
|
||||||
|
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
|
||||||
|
<script src="liff-starter.js"></script>
|
||||||
|
</body>
|
||||||
2
index.php
Normal file
2
index.php
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<!-- This file allows you to host this page as a static file on Heroku -->
|
||||||
|
<?php header( 'Location: /index.html' ) ; ?>
|
||||||
1
liff-starter.js
Normal file
1
liff-starter.js
Normal file
File diff suppressed because one or more lines are too long
202
style.css
Normal file
202
style.css
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
html{
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: -webkit-linear-gradient(200deg, #00C4FF, #9D1BB2);
|
||||||
|
background: linear-gradient(205deg, #00C4FF, #9D1BB2);
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
background: #24252A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
min-height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imag {
|
||||||
|
max-width: 25%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button5 {
|
||||||
|
background-color: #3f3f3f;
|
||||||
|
color: black;
|
||||||
|
width: 250px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid #3f3f3f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user