-
Notifications
You must be signed in to change notification settings - Fork 0
/
44-mobil-yatay-kartlar.htm
146 lines (109 loc) · 4.53 KB
/
44-mobil-yatay-kartlar.htm
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<title>Mobil Yatay Kartlar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script src="basic/scroll-bar.min.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
overflow: hidden;
}
</style>
<script>
// DEĞİŞKENLER
var CARD_AREA_WIDTH = 560
var CARD_AREA_HEIGHT = 350
var CARD_TOP_SPACE = 10
var CARD_LEFT_SPACE = 10
var CARD_WIDTH = 200
var CARD_HEIGHT = CARD_AREA_HEIGHT - (CARD_TOP_SPACE * 2) - 10
var boxContent
var rooms = [
{name: "Oturma Odası", image: "room1.jpeg"},
{name: "Mutfak", image: "room2.jpeg"},
{name: "Banyo", image: "room3.jpeg"},
{name: "Yatak Odası", image: "room4.jpeg"},
{name: "Çocuk Odası", image: "room5.jpeg"}
]
// ÖZEL FONKSİYONLAR
// İlk çalışan fonksiyon.
var start = function() {
// Otomatik ekrana sığdır. En geniş 650px
page.fit(600, 650)
// NESNE: En Dış Taşıyıcı Kutu.
boxContent = createBox(20, 60, CARD_AREA_WIDTH, CARD_AREA_HEIGHT)
that.borderColor = "lightgray"
that.round = 13
that.scrollX = 1
// that.element.style.scrollBehavior = "smooth"
that.border = 0
that.color = "whitesmoke"
// NESNE: Kartları Taşıyan Kutu.
boxContent.b1 = createBox(0, 0, CARD_AREA_WIDTH, CARD_AREA_HEIGHT)
boxContent.add(that)
that.border = 0
that.color = "transparent"
// Aralarında 10px boşluk bırakarak kutuları oluştur.
var left = CARD_LEFT_SPACE
for (var i = 0; i < rooms.length; i++) {
// NESNE: Kutu içindeki kartlar.
boxContent.b1["btn" + i] = createCard(left, rooms[i].name, random(0, 2) + " cihaz aktif", rooms[i].image)
boxContent.b1.add(that)
left += CARD_WIDTH + CARD_LEFT_SPACE
}
// Taşıyıcı kutunun genişliğini, kart sayısına göre düzenle.
boxContent.b1.width = left
// Custom Scroll Bar:
ScrollBar({
scrollableBox: boxContent,
bar_padding: 6,
})
}
// DİĞER FONKSİYONLAR
// Rasgele renk ve boyutta bir daire oluştur.
var createCard = function(left, name, desc, image) {
// NESNE: Kartın taşıyıcı kutusu.
var cardObject = createBox(left, CARD_TOP_SPACE, CARD_WIDTH, CARD_HEIGHT)
that.round = 13
that.border = 0
that.color = "lightgray"
// NESNE: Arka resim
cardObject.imgBack = createImage(0, 0)
cardObject.add(that)
that.load("images/44/" + image)
// NESNE: Kartın başlığı.
cardObject.lblTitle = createLabel(10, 20, "auto")
cardObject.add(that)
that.text = name
that.fontSize = 22
that.color = "rgba(255, 255, 255, 0.7)"
that.round = 13
that.space = 3
that.element.style.paddingLeft = "8px"
that.element.style.paddingRight = "8px"
// NESNE: Kartın açıklaması.
cardObject.lblDesc = createLabel(10, 60, "auto")
cardObject.add(that)
that.text = desc
that.textColor = "white"
that.color = "rgba(0, 0, 0, 0.3)"
that.fontSize = 16
that.round = 13
that.space = 3
that.element.style.paddingLeft = "8px"
that.element.style.paddingRight = "8px"
//that.element.style.textShadow = "2px 1px rgba(0, 0, 0, 0.40)"
// that değişkenini bu nesne ile değiştir.
makeBasicObject(cardObject)
return cardObject
}
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>