-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (116 loc) · 3.47 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<title>Ambratolm Web Tools</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/buefy.min.css" />
<link rel="stylesheet" href="assets/bulmaswatch.min.css" />
<link rel="stylesheet" href="assets/custom.css" />
<script src="assets/fontawesome.all.min.js"></script>
<script src="assets/vue.min.js"></script>
<script src="assets/buefy.min.js"></script>
</head>
<body class="container">
<section id="app" class="section" v-cloak>
<div class="card">
<header class="card-header">
<h1 class="card-header-title">
<b-icon icon="tools" pack="fas"></b-icon>
<span>Ambratolm Web Tools</span>
</h1>
</header>
<div class="card-content">
<div class="columns is-multiline ">
<div
v-for="webTool in webTools"
class="column is-one-fifth has-text-centered"
>
<a
:label="webTool.title"
:href="webTool.url"
target="_blank"
class="button is-multiline is-link is-outlined is-large is-expanded"
style="width: 7em; height: 7em;"
>
<b-icon
:icon="webTool.icon"
:pack="webTool.iconPack"
size="is-large"
class="is-marginless"
></b-icon>
<span>{{ webTool.title }}</span>
</a>
</div>
</div>
<!-- <b-menu>
<b-menu-list>
<b-menu-item
v-for="webTool in webTools"
:label="webTool.title"
:icon="webTool.icon"
:icon-pack="webTool.iconPack"
:href="webTool.url"
target="_blank"
tag="a"
>
</b-menu-item>
</b-menu-list>
</b-menu> -->
</div>
<footer class="card-footer">
<div class="card-footer-item">
<p class="has-text-grey-light">© Ambratolm 2021</p>
</div>
</footer>
</div>
</section>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
webTools: [
{
name: "reddit-images",
title: "Reddit Images",
url: "./reddit-images.html",
icon: "reddit-square",
iconPack: "fab"
},
{
name: "reddit-search",
title: "Reddit Search",
url: "./reddit-search.html",
icon: "reddit",
iconPack: "fab"
},
{
name: "moroccan-currencies",
title: "Moroccan Currencies",
url: "./moroccan-currencies.html",
icon: "money-bill-wave",
iconPack: "fas"
},
{
name: "paypal-fee",
title: "Paypal Fee",
url: "./paypal-fee.html",
icon: "paypal",
iconPack: "fab"
},
{
name: "fiverr-fee",
title: "Fiverr Fee",
url: "./fiverr-fee.html",
icon: "dollar-sign",
iconPack: "fas"
}
]
};
}
});
</script>
</html>