001 |
002 | #include "#SYSPATHMS4BI+\zInclude\IncludeChartExcel.h"
003 | #include "#SYSPATHMS4BI+\02-DEMO-DESKTOP-BI-EXCELandSTANDARD\99-DATABASE\VersionADO\300-00-CreateDBDemoExcel.ms4"
004 |
005 |
006 | <div $IsVisible_lg : /* visible only large (screen) */
007 | DrawWindow : "Win1" , actions : $WinCustom + $WinMinimize + $WinMaximize + $WinClose , position :1600, 1450,600,1020 TITLEWeb: URL008 | url009 |
010 | DrawWindow : "Win2" , actions : $WinCustom + $WinMinimize + $WinMaximize , position : 1850, 10,800,1350 TITLEWeb: MS4 script"
011 | urlms4script */
012 | >;
013 | printswfor example #c /w "; /* marker down : #c = H1 + center */
014 |
015 | Begin_Block_Rwd : full_page
016 | Setting :
017 | Backgroundcolor : "gray" ;
018 |
019 | DBconnect{Ms4DB}(LEnvDemoExcelDB);
<Rwd_Row + "bg-gray" : 11021 | <Rwd_Col : lg:3 ,"text-right" :
022 | <div $widgetStyle + $bg_primary :
023 | <Rwd_Row : 2
024 | <Rwd_Col : xs:4, "text-center" :
025 | <icon : $fa_5x + $fa_pull_left + $fa_trophy > ,
026 | >,/* end col xs:4 */
027 | <Rwd_Col : xs:8, "text-right" :
028 | <Text : $Bts_Text_right , " Today’s income \n ##b $ 4,232 ##b " > ,
029 | >, /* end col xs:8 */
030 | >,/* end Row 2 */
031 | >, /* end div */
032 | >, /* end col lg:3 */
033 |
034 | <Rwd_Col : lg:3 ,"text-right" :
035 | <div $widget + $bg_navy :
036 | <Rwd_Row : 2
037 | <Rwd_Col : xs:4, "text-center" :
038 | <icon : $fa_5x + $fa_pull_left + $fa_cloud > ,
039 | >,/* end col xs:4 */
040 | <Rwd_Col : xs:8, "text-right" :
041 | <Text : $Bts_Text_right , " Today’s temperature \n ##b 26'C ##b " > ,
042 | >, /* end col xs:8 */
043 | >,/* end Row 2 */
044 | >, /* end div */
045 | >, /* end col lg:3 */
046 |
047 | <Rwd_Col : lg:3 ,"text-right" :
048 | <div $widget + $bg_white:
049 | <Rwd_Row : 2
050 | <Rwd_Col : xs:4, "text-center" :
051 | <icon : $fa_5x + $fa_pull_left + $fa_envelope_o > ,
052 | >,/* end col xs:4 */
053 | <Rwd_Col : xs:8, "text-right" :
054 | <Text : $Bts_Text_right , " New messages \n ##b 260 ##b " > ,
055 | >, /* end col xs:8 */
056 | >,/* end Row 2 */
057 | >, /* end div */
058 | >, /* end col lg:3 */
059 |
060 | <Rwd_Col : lg:3 ,"text-right" :
061 | <div $widget + $bg_yellow :
062 | <Rwd_Row : 2
063 | <Rwd_Col : xs:4, "text-center" :
064 | <icon : $fa_5x + $fa_pull_left + $fa_music >
065 | >,/* end col xs:4 */
066 | <Rwd_Col : xs:8, "text-right" :
067 | <Text : $Bts_Text_right , " New albums \n ##b 120 ##b " > ,
068 | >, /* end col xs:8 */
069 | >,/* end Row 2 */
070 | >, /* end div */
071 | >, /* end col lg:3 */
072 | >; /* end Row 1 */
073 |
074 |
075 | <Rwd_Row + "bg-gray" : 3 /* 1 : optional */
076 | <Rwd_Col : 5F0;">lg:5 ,"text-left" :
** ***************** BAR BLUEOPAL ************************************************************************
078 | <div $widget + $bg_primary + "no-padding" :
079 | <div "class='p-m' ":
080 | <Text : "" , " # $ 140.000 # " > ,
081 |
082 | <Text : "" , " ###b Annual income ###b " > ,
083 | <Text : "" , " --Income project Alpha-- " > ,
084 | > ,
085 | FormPlus : theme : "blueopal" DrawBAR, height : "350", width :"600" , titleTYPEFORMATuseView086 | >, /* end div */
087 | >, /* end col lg:6 */
088 | <Rwd_Col : lg:3 ,"text-left" :
089 | ** ***************** PIE FLAT ************************************************************************
090 | <div $widget + $bg_lazur + "no-padding" :
091 | <div "class='p-m' ":
092 | <Text : "" , " # $ 210,660 # " > ,
093 |
094 | <Text : "" , " ###b Monthly income ###b " > ,
095 | <Text : "" , " --Income project Beta-- " > ,
096 | > ,
097 | setting : chart098 | FormPlus : theme : "flat" DrawPIE ,height : "320width :"320titleANGLE120 ,
099 | TYPEFORMATuseView100 |
101 | >, /* end div */
102 | >, /* end col lg:3*/
103 | <Rwd_Col : lg:4 ,"text-left" :
104 | ** ***************** table responsive ************************************************************************
105 |
106 | <div $widget + $bg_yellowblack + "no-padding" :
107 | <div "class='p-m " :
108 | <Text : "" , " # $ 50,992 # " > ,
109 | <Text : "" , " ###b Half-year revenue margin ###b " > ,
110 | <Text : "" , " --Sales marketing-- " > ,
111 | >, /* end div */,
112 | begin_div : table responsive /* style */
113 | | # | Date | Time | Amount |
114 | | fuller | 10/21/2013 | 3:29 PM | $321.33 |
115 | | /b leverling /b | /r 10/21/2013 /r | 3:20 PM | ** $9234.34 ** |
116 | | leverling | 10/21/2013 | 3:03 PM | $724.17 |
117 | | /r Davolio /r | 10/21/2013 | 3:00 PM | /r $23.71 /r |
118 | | Peacock | 10/21/2013 | 2:49 PM | $8345.23 |
119 | | King | 10/21/2013 | 2:23 PM | $245.12 |
120 | | Callahan | 10/21/2013 | 2:15 PM | $5663.54 |
121 | | leverling | 10/21/2013 | 2:13 PM | $943.45 |
122 | end_div
123 | >, /* end div */
124 | >, /* end col lg:3*/
125 | >; /* end Row 2 */
126 |
127 | <Rwd_Row + "bg-gray" : 4 /* 1 : optional */
128 | <Rwd_Col : lg:2 :
129 | <div $widgetStyle + $bg_navy :
130 | <Rwd_Row + "vertical-align" : 5
131 | <Rwd_Col : xs:3 :
132 | <icon : $fa_3x + $fa_pull_left + $fa_user > ,
133 | >,/* end col xs:4 */
134 | <Rwd_Col : xs:9, "text-right" :
135 | <Text : $Bts_Text_right , " ##b 217 ##b " > ,
136 | >, /* end col xs:8 */
137 | >,/* end 5F0;">Row 5 */
138 | >, /* end div */
139 | >, /* end col lg:2 */
140 | <Rwd_Col : lg:2 :
141 | <div $widgetStyle + $bg_black :
142 | <Rwd_Row + "vertical-align" : 5
143 | <Rwd_Col : xs:3 :
144 | <icon : $fa_3x + $fa_pull_left + $fa_thumbs_up > ,
145 | >,/* end col xs:4 */
146 | <Rwd_Col : xs:9, "text-right" :
147 | <Text : $Bts_Text_right , " ##b 400 ##b " > ,
148 | >, /* end col xs:8 */
149 | >,/* end 5F0;">Row 5 */
150 | >, /* end div */
151 | >, /* end col lg:2 */
152 |
153 | <Rwd_Col : lg:2 :
154 | <div $widgetStyle + $bg_white :
155 | <Rwd_Row + "vertical-align" : 5
156 | <Rwd_Col : xs:3 :
157 | <icon : $fa_3x + $fa_pull_left + $fa_rss > ,
158 | >,/* end col xs:4 */
159 | <Rwd_Col : xs:9, "text-right" :
160 | <Text : $Bts_Text_right , " ##b 10 ##b " > ,
161 | >, /* end col xs:8 */
162 | >,/* end 5F0;">Row 5 */
163 | >, /* end div */
164 | >, /* end col lg:2 */
165 |
166 | <Rwd_Col : lg:2 :
167 | <div $widgetStyle + $bg_lazur :
168 | <Rwd_Row + "vertical-align" : 5
169 | <Rwd_Col : xs:3 :
170 | <icon : $fa_3x + $fa_pull_left + $fa_phone >,
171 | >,/* end col xs:4 */
172 | <Rwd_Col : xs:9, "text-right" :
173 | <Text : $Bts_Text_right , " ##b 420 ##b " > ,
174 | >, /* end col xs:8 */
175 | >,/* end 5F0;">Row 5 */
176 | >, /* end div */
177 | >, /* end col lg:2 */
178 | <Rwd_Col : lg:2 :
179 | <div $widgetStyle + $bg_red :
180 | <Rwd_Row + "vertical-align" : 5
181 | <Rwd_Col : xs:3 :
182 | <icon : $fa_3x + $fa_pull_left + $fa_euro > ,
183 | >,/* end col xs:4 */
184 | <Rwd_Col : xs:9, "text-right" :
185 | <Text : $Bts_Text_right , " ##b 462 ##b " > ,
186 | >, /* end col xs:8 */
187 | >,/* end 5F0;">Row 5 */
188 | >, /* end div */
189 | >, /* end col lg:2 */
190 |
191 | <Rwd_Col : lg:2 :
192 | <div $widgetStyle + $bg_yellow :
193 | <Rwd_Row + "vertical-align" : 5
194 | <Rwd_Col : xs:3 :
195 | <icon : $fa_3x + $fa_pull_left + $fa_shield > ,
196 | >,/* end col xs:4 */
197 | <Rwd_Col : xs:9, "text-right" :
198 | <Text : $Bts_Text_right , " ##b 610 ##b " > ,
199 | >, /* end col xs:8 */
200 | >,/* end 5F0;">Row 5 */
201 | >, /* end div */
202 | >, /* end col lg:2 */
203 |
204 | >;
205 | <Rwd_Row + "bg-gray" : 5 /* 1 : optional */
206 | ** ***************** widget * HEAD * IMG **********************************************************************
207 |
208 | <Rwd_Col : lg:4 :
209 | <div $widgetHead + $bg_navy + "p-lg text-center " :
210 | <div "class='m-b-md' " :
211 | <Text : "" , " ##b Alex Smith ##b " > ,
212 | <Text : "" , " Founder of Groupeq " > ,
213 | printswimg src='img/a4.jpg' class='img-circle circle-border m-b-md' alt='profile'>",
214 | >, /* end div */
215 | <Text : "" , " 100 Tweets |" > ,
216 | <Text : "" , " 350 Following |" > ,
217 | <Text : "" , " 610 Followers " > ,
218 | >, /* end div */
219 | <div $widgetTextbox :
220 | <Text : "" , " ####b Alex Smith ####b " > ,
221 | <Text : "" , " Lorem Ipsum is simply dummy text of the printing and typesetting industry. " > ,
222 | printswdiv class='text-right'>",/* it s possible ! */
223 | <button : $Bts_btn_xs, icon : $fa_thumbs_up , text : "--Like--" > ,
224 | <button : $Bts_btn_primary_btn_xs , icon : $fa_heart , text : "--Love--" > ,
225 | printsw226 | >, /* end div */
227 | >, /* end col lg:4*/
228 | <Rwd_Col : lg:2 :
229 | <div $widget + $bg_navy + "p-lg text-center " :
230 | <div "class='m-b-md " :
231 | <icon : $fa_4x + $fa_shield > ,
232 | <Text : "" , " # 456 # " > ,
233 | <Text : "" , " ####b Shield ####b " > ,
234 | <Text : "" , " --Power-- " > ,
235 | >, /* end div */
236 | >, /* end div */
237 | <div $widget + " p-lg text-center " :
238 | <div "class='m-b-md' " :
239 | <icon : $fa_4x + $fa_flash > ,
240 | <Text : "" , " # 612 # " > ,
241 | <Text : "" , " ####b Thunder ####b " > ,
242 | <Text : "" , " --amount-- " > ,
243 | >, /* end div */
244 | >, /* end div */
245 | >, /* end col lg:2*/
246 |
247 | <Rwd_Col : lg:4 :
248 | <div $widget + $bg_lazur + "p-xl" :
249 | <Text : "" , " ##b Janet Smith ##b " > ,
250 |
251 | printswclass='list-unstyled m-t-md'> ",
252 | printswicon : $fa_1x + $fa_envelope>, <text :"", "Email:mike1234@mail.com" > ,printsw253 | printswicon : $fa_1x + $fa_home>, <text : "","Address:Street 200, Avenue 10" >,printsw254 | printswicon : $fa_1x + $fa_phone>, <text : "","Contact:(+999) 678 3462" > ,printsw255 | printsw256 | >, /* end div */
257 |
258 | <div $widget + $bg_red + "p-xl text-center " :
259 | <div "class='m-b-md' " :
260 | <icon : $fa_4x + $fa_bell>,
261 | < text : "", " # 47 # ">,
262 | < text : "", " ###b Notifications ###b " >,
263 | < Text : "" , " --Error(s) detected’-- " >,
264 | >, /* end div */
265 | >, /* end div */
266 | >, /* end col lg:4 */
267 | <Rwd_Col : lg:2 :
268 | <div $widget + $bg_yellow + "p-xs text-center " :
269 | <div "class='m-b-md' " :
270 | <icon : $fa_4x + $fa_thumbs_up>
271 | < text : "" , " # 520 # ">,
272 | < text : "" , " ###b Likes ###b " >,
273 | < Text : "" , " --xxxxx-- " > ,
274 | >, /* end div */
275 | >, /* end div */
276 |
277 |
278 | <div $widget + $bg_yellow + " p-lg text-center " :
279 | <div "class='m-b-md' " :
280 | <icon : $fa_4x + $fa_warning>
281 | < text : "", " # Alarm # ">,
282 | < DodgerBlue;">text : "", " ###b Do ###b " >,
283 | < Text : "" , " --something-- " >
284 | >, /* end div */
285 | >, /* end div */
286 | >, /* end col lg:2 */
287 |
288 | >; /* end 5F0;">row 5*/
289 | <Rwd_Row + "bg-gray" : 6 /* 1 : optional */
290 | ** ***************** widget + MORRIS CHART**** + TOP 5****************************************************
291 | <Rwd_Col : lg:4 ,"text-right" :
292 | <div $widgetTextbox :
293 | <Rwd_Row : 2
294 | <Rwd_Col : xs:2, "text-center" :
295 | <icon : $fa_5x + $fa_pull_left + $fa_podcast >,<text :""," ##b 5F0;">TOP 5 ##b" > ,
296 | >,/* end col xs:4 */
297 | <Rwd_Col : xs:10, "text-right" :
298 | DBconnect{Ms4DB}(LEnvDemoExcelDB),
299 | Ms4_query{ms4db} option : into $MS4DBTMP
300 | (" 5 * 55555desc limit 55F0;">TOP 5 DBconnect{Ms4DB}($MS4DBTMP),
302 | FormMorrisDrawBar , titleTYPEFORMAT303 | useView304 | >, /* end col xs:8 */
305 | >,/* end Row 2 */
306 | >, /* end div */
307 | >, /* end col lg:6 */
308 | ** ***************** table TROW + TCELL ************************************************************************
309 | <Rwd_Col : lg:4 :
310 | <table $Bts_Class_Table :
311 | <trow :
312 | <tcell : <button : $Bts_btn_danger_btn_sm ,"12"> ,
313 | <Text : "" , "Total messages" >,
314 | >
315 | <tcell : <button : $Bts_btn_primary_btn_sm ,"28"> ,
316 | <Text : "" , "Posts" >,
317 | >
318 | <tcell : <button : $Bts_btn_info_btn_sm ,"15"> ,
319 | <Text : "" , "Comments" >,
320 | >
321 | >,/* end 1 Trow table */
322 | <trow :
323 | <tcell : <button : $Bts_btn_info_btn_sm ,"20"> ,
324 | <Text : "" , "News" >,
325 | >
326 | <tcell : <button : $Bts_btn_success_btn_sm ,"40"> ,
327 | <Text : "" , "Likes" >,
328 | >
329 | <tcell : <button : $Bts_btn_danger_btn_sm ,"30"> ,
330 | <Text : "" , "Notifications" >,
331 | >
332 | >,/* end 2 Trow table */
333 | <trow :
334 | <tcell : <button : $Bts_btn_warning_btn_sm ,"20"> ,
335 | <Text :"" , " Albums" >,
336 | >
337 | <tcell : <button : $Bts_btn_default_btn_sm ,"40"> ,
338 | <Text : "" , "Groups" >,
339 | >
340 | <tcell : <button : $Bts_btn_warning_btn_sm ,"30"> ,
341 | <Text : "" , "Permissions" >,
342 | >
343 | >,/* end 3 Trow table */
344 | <trow :
345 | <tcell : <button : $Bts_btn_info_btn_sm ,"10"> ,
346 | <Text : "" , "News" >,
347 | >
348 | <tcell : <button : $Bts_btn_success_btn_sm ,"25"> ,
349 | <Text : "" , "Likes" >,
350 | >
351 | <tcell : <button : $Bts_btn_danger_btn_sm ,"18"> ,
352 | <Text : "" , "Notifications" >,
353 | >
354 | >,/* end 2 Trow table */
355 | <trow :
356 | <tcell : <button : $Bts_btn_warning_btn_sm ,"72"> ,
357 | <Text :"" , " Views" >,
358 | >
359 | <tcell : <button : $Bts_btn_default_btn_sm ,"22"> ,
360 | <Text : "" , "Followers" >,
361 | >
362 | <tcell : <button : $Bts_btn_warning_btn_sm ,"89"> ,
363 | <Text : "" , "Charts" >,
364 | >
365 | >,/* end 3 Trow table */
366 | >, /* table end */
367 | >, /* en col 4*/
368 | <Rwd_Col : lg:4 :
369 | <div :
370 | <Text :"" , " Memory" > ,
371 | <Text :$Bts_Text_right_small , " 10/200 GB" > ,
372 | >, /* end div */
373 | <div $Bts_progress_small :
374 | <div "style='width: 60%;' " + $Bts_progress_bar + $bg_lazur :
375 | >, /* end div */
376 | >, /* end div */
377 | <div :
378 | <Text :"" , " Bandwidth" > ,
379 | <Text :$Bts_Text_right_small , " 20 GB" > ,
380 | >, /* end div */
381 | <div $Bts_progress_small :
382 | <div "style='width:50%' " + $Bts_progress_bar + $bg_red :
383 | >, /* end div */
384 | >, /* end div */
385 | <div :
386 | <Text :"" , " Activity" > ,
387 | <Text :$Bts_Text_right_small , " 73%" > ,
388 | >, /* end div */
389 | <div $Bts_progress_small :
390 | <div "style='width: 40%;' " + $Bts_progress_bar :
391 | >, /* end div */
392 | >, /* end div */
393 | >, /* en col 6*/
394 | >; /* end row */
395 | End_Block_Rwd ;
397 |
398 |