Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Created May 29, 2021 06:27
Show Gist options
  • Save neno-tech/1829e295c797c8c047a5dd947af977f9 to your computer and use it in GitHub Desktop.
Save neno-tech/1829e295c797c8c047a5dd947af977f9 to your computer and use it in GitHub Desktop.
Download ZIP
การสร้างสื่อแอพพลิเคชั่นด้วย.. Web App 2021
Raw
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.setTitle("Responsive web app")
.addMetaTag('viewport','width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent()
}
Raw
index.html
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="th" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Web App</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<style>
body{font-family: 'Prompt', sans-serif;font-size: 50px;font-weight: 600;text-align: center;}
</style>
</head>
<body>
<audio id="myAudio1"> <source src = "https://drive.google.com/uc?id="></audio>
<audio id="myAudio2"> <source src = "https://drive.google.com/uc?id="></audio>
<audio id="myAudio3"> <source src = "https://drive.google.com/uc?id="></audio>
<audio id="myAudio4"> <source src = "https://drive.google.com/uc?id="></audio>
<audio id="myAudio5"> <source src = "https://drive.google.com/uc?id="></audio>
<div class="container">
<div class="wrapper">
<div class="carousel owl-carousel">
<div class="card card-0">
<img src="http://drive.google.com/uc?id=ภาพหน้าปก">
</div>
<div class="card card-1">
<div>ห่าน</div>
<img src="http://drive.google.com/uc?id=ภาพที่1" onclick="playAudio(1)">
</div>
<div class="card card-2">
<div>เป็ด</div>
<img src="http://drive.google.com/uc?id=ภาพที่2" onclick="playAudio(2)">
</div>
<div class="card card-3">
<div>หมู</div>
<img src="http://drive.google.com/uc?id=ภาพที่3" onclick="playAudio(3)">
</div>
<div class="card card-4">
<div>ไก่</div>
<img src="http://drive.google.com/uc?id=ภาพที่4" onclick="playAudio(4)">
</div>
<div class="card card-5">
<div>ลา</div>
<img src="http://drive.google.com/uc?id=ภาพที่5" onclick="playAudio(5)">
</div>
</div>
</div>
</div>
<script>
$(".carousel").owlCarousel({
margin: 20,
// loop: true,
// autoplay: false,
// autoplayTimeout: 2000,
// autoplayHoverPause: true,
responsive: {
0:{
items:1,
nav: false
},
600:{
items:2,
nav: false
},
1000:{
items:3,
nav: false
}
}
});
</script>
<script>
function playAudio(id){
var audio = document.getElementById('myAudio'+id)
if(!audio.paused) audio.playAudio()
else audio.play()
}
</script>
</body>
</html>
Raw
js.html
<script>
let span = document.getElementsByTagName('span');
let product = document.getElementsByClassName('product')
let product_page = Math.ceil(product.length/4);
let l = 0;
let movePer = 25.34;
let maxMove = 203;
// mobile_view
let mob_view = window.matchMedia("(max-width: 768px)");
if (mob_view.matches)
{
movePer = 50.36;
maxMove = 504;
}
let right_mover = ()=>{
l = l + movePer;
if (product == 1){l = 0; }
for(const i of product)
{
if (l > maxMove){l = l - movePer;}
i.style.left = '-' + l + '%';
}
}
let left_mover = ()=>{
l = l - movePer;
if (l<=0){l = 0;}
for(const i of product){
if (product_page>1){
i.style.left = '-' + l + '%';
}
}
}
span[1].onclick = ()=>{right_mover();}
span[0].onclick = ()=>{left_mover();}
</script>
<script>
function playAudio(id){
var audio = document.getElementById('myAudio'+id)
if(!audio.paused) audio.playAudio()
else audio.play()
}
</script>
Raw
style.html
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Prompt', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
}
.wrapper{
width: 100%;
}
.carousel{
max-width: 1200px;
margin: auto;
padding: 0 30px;
}
.carousel .card{
color: #fff;
text-align: center;
margin: 20px 0;
line-height: 250px;
font-size: 90px;
font-weight: 600;
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}
.carousel .card-1{
background: #ed1c24;
}
.carousel .card-2{
background: #0072bc;
}
.carousel .card-3{
background: #39b54a;
}
.carousel .card-4{
background: #f26522;
}
.carousel .card-5{
background: #630460;
}
.owl-dots{
text-align: center;
margin-top: 40px;
}
.owl-dot{
height: 15px;
width: 45px;
margin: 0 5px;
outline: none;
border-radius: 14px;
border: 2px solid #0072bc!important;
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.owl-dot.active,
.owl-dot:hover{
background: #0072bc!important;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment