Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active May 26, 2021 10:43
Show Gist options
  • Save neno-tech/35c5662dfba3d68f2101889446a22ce6 to your computer and use it in GitHub Desktop.
Save neno-tech/35c5662dfba3d68f2101889446a22ce6 to your computer and use it in GitHub Desktop.
Download ZIP
การพัฒนาสื่อการเรียนแบบออนไลน์ในรูปแบบเว็บแอพ
Raw
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent()
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>โรงเรียนอภิวัฒน์สอนสร้างสื่อวิทยาคม</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<?!=include('style')?>
</head>
<body>
<main>
<div class="text">
<h1>โรงเรียนอภิวัฒน์สอนสร้างสื่อวิทยาคม</h1>
<p>
<marquee><h3>ยินดีต้อนรับเข้าสู้เนื้อหาบทเรียนเว็บแอพ เรียนสนุก ลุกนั่งสบาย อยากทำอะไรก็ทำ แต่ขอให้เข้ามาเรียน.</h3> </marquee>
</p>
</div>
<header>
<h1>ส่วนประกอบของเนื้อหา/ภาพ</h1>
<p>
<span>&#139;</span>
<span>&#155;</span>
</p>
</header>
<section>
<div class="product">
<picture>
<img src="https://drive.google.com/uc?id=" alt="">
</picture>
<!-- <div class="detail">
<b>คำอธิบาย/รายละเอียดเนื้อหา</b><br>
</div> -->
</div>
<div class="product">
<picture>
<img src="https://drive.google.com/uc?id=" alt="">
</picture>
<!-- <div class="detail">
<b>คำอธิบาย/รายละเอียดเนื้อหา</b><br>
</div> -->
</div>
<div class="product">
<picture>
<img src="https://drive.google.com/uc?id=" alt="">
</picture>
<!-- <div class="detail">
<b>คำอธิบาย/รายละเอียดเนื้อหา</b><br>
</div> -->
</div>
<div class="product">
<picture>
<img src="https://drive.google.com/uc?id=" alt="">
</picture>
<!-- <div class="detail">
<b>คำอธิบาย/รายละเอียดเนื้อหา</b><br>
</div> -->
</div>
<div class="product">
<picture>
<img src="https://drive.google.com/uc?id=" alt="">
</picture>
<!-- <div class="detail">
<b>คำอธิบาย/รายละเอียดเนื้อหา</b><br>
</div> -->
</div>
<div class="product">
<picture>
<img src="https://drive.google.com/uc?id=" alt="">
</picture>
<!-- <div class="detail">
<b>คำอธิบาย/รายละเอียดเนื้อหา</b><br>
</div> -->
</div>
</section>
</main>
<?!=include('js')?>
<script type="text/javascript" src="js/main.js"></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>
Raw
style.html
<style>
@charset "utf-8";
*{
padding: 0;
margin: 0;
box-sizing: border-box;
/* font-family: -webkit-pictograph; */
font-family: 'Prompt', sans-serif;
}
main{
width: 100%;
height: 840px;
/*background: red;*/
margin: 10px auto;
position: relative;
padding: 5px 0;
}
main .text{
padding: 10px;
text-align: center;
/*font-size: 30px;*/
color: #554;
}
.text h1{
font-size: 50px;
}
.text p{
width: 60%;
padding: 5px;
margin: auto;
line-height: 30px;
}
main header{
width: 98%;
height: 60px;
margin: 0 auto;
/*background: gray;*/
display: flex;
align-items: center;
padding: 20px;
justify-content: space-between;
border-bottom: 2px solid #ddd;
}
header p span{
font-size: 40px;
margin: 0 5px;
cursor: pointer;
color: #555;
width: 30px;
height: 30px;
display: inline-block;
line-height: 19px;
text-align: center;
border-radius: 3px;
}
header p span:hover{
background: #222;
color: white;
}
section{
width: 98%;
height: 450px;
/*background: red;*/
margin: auto;
display: flex;
align-items: center;
overflow-x: auto;
}
section::-webkit-scrollbar{
display: none;
}
section .product{
min-width: 24%;
height: 95%;
background: whitesmoke;
margin: 0 20px 0 0;
border-radius: 20px;
position: relative;
left: 0;
transition: 0.5s;
}
picture{
width: 100%;
height: 100%;
padding: 20px;
/*background: green;*/
display: flex;
overflow: hidden;
margin-bottom: 20px;
}
picture img{
width: 100%;
}
.detail,
.button{
width: 90%;
/*background: red;*/
margin: auto;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
font-size: 20px;
color: #444;
}
small{color: #555;}
a{
text-decoration: none;
padding: 6px 14px;
font-size: 15px;
margin: 5px 0 0 20px;
display: inline-block;
background: #6773ff;
color: white;
}
p.star{
margin: 5px auto;
width: 65%;
font-size: 25px;
color: #808080;
}
@media (max-width: 768px) {
.text h1{
font-size: 35px;
}
.text p{
width: 90%;
}
header h1{
font-size: 25px;
}
header p span{
font-size: 30px;
}
section .product {
min-width: 49%;
margin: 0 10px 0 0;
}
.detail, .button{
font-size: 16px;
}
a{
padding: 6px 10px;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment