-
Notifications
You must be signed in to change notification settings - Fork 2
/
44-mobil-yatay-kartlar.htm
134 lines (98 loc) · 4.15 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
<!DOCTYPE html>
<html>
<head>
<title>Mobil Yatay Kartlar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- DIŞARIDAN YÜKLENEN KÜTÜPHANE DOSYALARI -->
<link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
<script src="kutuphane/basic.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)
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)
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
}
// 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)
that.load("resimler/44/" + image)
// NESNE: Kartın başlığı.
cardObject.lblTitle = createLabel(10, 20, "auto")
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")
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 içeriği -->
</body>
</html>