forked from sarthakganguly/mutewitnesses
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (56 loc) · 2.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
<title>NGOs/ NPOs 訊息站</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="description" content="A list of temples, stupas or sacred places destroyed or occupied by Islamic/Christian forces in the Indian subcontinent">
<meta name="author" content="Sarthak Ganguly">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h2>實驗試作版 II</h2><br>
<p>
本站利用 google sheet/google form 為資料庫後台，半自動進行非營利非政府組織的活動訊息更新。其技術操作可參考原文<a href="https://www.thecodepost.org/using-google-sheets-as-website-database/">Using Google Sheets as Website Database</a>
</p>
<p>
另有利用 awesome-table + google sheet 之<a href="https://www.twngo.org">實驗</a>。
</p>
</div><!--jumbotron ends-->
</div><!--col-md-12 ends-->
</div><!--row ends-->
<div class="row" style="width:100%;padding:3% 3% 3% 6%;">
<div class="row postlist" style="font-size: 0.9rem;">
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script type='text/javascript'>
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1cZcjjyHE58KYgcgqkhWRyrwAxsTz6HjbiQtY2S-1-GM/edit?usp=sharing';
function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}
// var counter = 1;
function showInfo(data, tabletop) {
for(var i=0;i<data.length; i++){
$('.postlist').append('<div class="col-md-4"><h4 style="text-align:center;">'
+data[i].name+'</h4><img class="img-thumbnail rounded mx-auto d-block" style="height:200px;" alt="'+data[i].name+'" src="'+data[i].imagesrc+'"</img><p style="text-align: justify; text-justify: inter-word;">' + data[i].summary + '</p><p><b>性質分類:</b> '+ data[i].status + '</p><p><b>議題類別: </b> '+ data[i].builtdate + '</p><p><b>截止日期: </b> '+ data[i].destroyeddate + '</p><p><a class="btn btn-outline-info" target="_blank" href="'+data[i].details_link+'">詳情連結</a></p></div>');
//if (counter == 3){
//}
}
//alert('Successfully processed!')
console.log(data);
}
window.addEventListener('DOMContentLoaded', init)
</script>
</body>
</html>