bass Posted July 10, 2016 Report Share Posted July 10, 2016 Hello! Decided to make online display of departures-arrivals for the site. As it turns out modest. I suggest in this topic to create a good Board (so she could stretch across the length of the site) This HTML CSS my Board. Will be very modestly((( http://simer.clan.su/taba.html The source (html css code) Board <style>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4] table.taba{ margin: 50px 0; text-align: left; border-collapse: separate; border: 1px solid #ddd; border-spacing: 3px; border-radius: 5px; background-image: url('https://vatrus.info/img/timetable_33/background.png'); font-size: 19.5px; width: auto; } td,th{ border: 1px solid #ddd; padding: 5px; border-radius: 3px; } th{ background-image: url('http://www.airport.md/img/images/fbr_header.jpg'); } caption{ font-style: italic; text-align: right; color: #547901; } .text { color: #9DA610; letter-spacing: 6.2px; } .text2 {color: #CCCCCC} .text3 {color: #66CC00} .text4 {color: #993333} </style>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]<table class="taba" background="https://vatrus.info/img/timetable_33/background.png"> <caption> 19:40 16.09.2016 </caption> <tr> <th colspan="4" background="http://www.airport.md/img/images/fbr_header.jpg"><div align="right"><span class="text2"> <object type="application/x-shockwave-flash" data="http://www.airport.md/img/media/online_table_clocks_updated.swf" width="206" height="41" id="fbr_city_clocks" style="visibility: visible;"> <param name="wmode" value="transparent"> <param name="flashvars" value="time_shift_0=2&time_shift_1=1&time_shift_2=2&time_shift_3=4&time_shift_4=3×tamp=1468163531000&wmode=transparent"> </object> </span></div></th> </tr> <tr> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">SVR9026</span></td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">UUDD - URKK</span> </td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">A320 (RA0091)</span> </td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text3">Прибыл</span></td> </tr> <tr> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">SVR9481</span></td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">USSS - URFF</span> </td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">A321 (RA1031)</span> </td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text3">В пути </span></td> </tr> <tr> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">SVR921</span></td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">URKK - UUDD </span> </td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text">A320 (RA0051)</span> </td> <td height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text4">Отменен </span></td> </tr> </table> Quote Link to comment Share on other sites More sharing options...
bass Posted August 12, 2016 Author Report Share Posted August 12, 2016 Everything!!!) I finally made a Board for airport website) If someone is interested in my work, send me a PM. 2 Quote Link to comment Share on other sites More sharing options...
bass Posted November 9, 2016 Author Report Share Posted November 9, 2016 (edited) Board the airport. <style>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4].text { color: #B4BD26; letter-spacing: 6.2px; } td,th{ border: 1px solid #ddd; padding: 5px; border-radius: 3px; } table.taba{ text-align: left; border-collapse: separate; border: 1px solid #ddd; border-spacing: 3px; border-radius: 5px; background-image: url('https://vatrus.info/img/timetable_33/background.png'); font-size: 19.5px; width: 100%; } .fbr-clock-bottom .city1 { width: 54px; } .fbr-city-item { font: 10px/12px "Arial"; color: #cccccc; float: left; display: block; text-align: center; } .fbr-header { border-top: 1px solid #666666; background: url(http://www.airport.md/img/images/fbr_header.jpg) repeat left top; width: 100%; height: 64px; } .cfx { display: block; } .fbr-header-inner { height: 62px; margin: 0 auto; width: 100%; background: url(http://www.airport.md/img/images/by_border.jpg) repeat-x left bottom; } .dep-arr { width: 106px; height: 44px; margin: 0 10px 0 0; padding: 9px 0 0 10px; float: left; } .dep-thumb-active { background-position: -1px -56px; cursor: default; } .departure-thumb, .arrival-thumb { display: inline-block; width: 48px; height: 45px; background: url(http://www.airport.md/img/images/dep_arr.png) no-repeat; cursor: pointer; float: left; } .arrival-thumb { display: inline-block; width: 48px; height: 45px; background: url(http://www.airport.md/img/images/dep_arr.png) no-repeat; cursor: pointer; float: left; } .fbr-clock { width: 347px; height: 50px; float: left; margin-top: 4px; } #fbr_city_clocks { float: left; margin-right: 10px; } .fbr-clock-bottom .city1 { width: 54px; } .fbr-clock-bottom .city2 { width: 54px; } .fbr-clock-bottom .city3 { width: 53px; } .fbr-clock-bottom .city4 { width: 60px; } </style>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]<link href = '/lib/skins/ural/fonts/Gateway-A1.otf' rel = 'stylesheet' type = 'text/css'>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]<script type="text/javascrip"> $.fn.ticker = function( options ) { options = $.extend({ uppercase: true, extra: ',.:+=/()', speed: 50 }, options); var alph = 'ABCDEFGHIJKLMNOPQRSTUVXYZ'; if ( !options.uppercase ) { alph = alph + alph.toLowerCase(); } alph = '01234567890'+alph + options.extra + ' '; return this.each(function() { var k = 1, elems = $(this).children(), arr = alph.split(''), len = 0, fill = function( a ) { while( a.length < len ) { a.push(' '); } return a; }, texts = $.map( elems, function( elem ) { var text = $(elem).text(); len = Math.max(len, text.length); return options.uppercase ? text.toUpperCase() : text; }), target = $('<div>'), render = function(print) { target.data('prev', print.join('')); fill(print); print = $.map(print, function(p) { return p == ' ' ? ' ' : p; }); return target.html('<span>' + print.join('</span><span>') + '</span>'); }, attr = {} $.each(this.attributes, function(i, item) { target.attr( item.name, item.value ); });[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4] $(this).replaceWith( render( texts[0].split('') ) ); target.click(function(e) {[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4] var next = fill(texts[k].split('')), prev = fill(target.data('prev').split('')), print = prev; $.each(next, function(i) { if (next[i] == prev[i]) { return; } var index = alph.indexOf( prev[i] ), j = 0, tid = window.setInterval(function() { if ( next[i] != arr[index] ) { index = index == alph.length-1 ? 0 : index + 1; } else { window.clearInterval(tid); } print[i] = alph[index]; render(print); }, options.speed) }); k = k == texts.length-1 ? 0 : k + 1; }); }); };[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]$('#text').ticker(); </script> <div> <div class="fbr-header"> <div class="fbr-header-inner cfx"> <div class="dep-arr"> <span id="departure_thumb" class="departure-thumb dep-thumb-active" title="Decolare" lang="Destinatia"></span> </div> <div class="fbr-clock cfx"> <div class="fbr-clock-top cfx"><span class="text2"> <object type="application/x-shockwave-flash" data="http://www.airport.md/img/media/online_table_clocks_updated.swf" width="206" height="41" id="fbr_city_clocks" style="visibility: visible;"> <param name="wmode" value="transparent" /> <param name="flashvars" value="time_shift_0=2&time_shift_1=1&time_shift_2=2&time_shift_3=4&time_shift_4=3×tamp=1468163531000&wmode=transparent" /> </object> </span>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]<script type="text/javascript"> var flashvars ={"time_shift_0" : "2","time_shift_1" : "1","time_shift_2" : "2","time_shift_3" : "3","time_shift_4" : "3","timestamp" : "1471015261000"}; var params = {"time_shift_0" : "2","time_shift_1" : "1","time_shift_2" : "2","time_shift_3" : "3","time_shift_4" : "3","timestamp" : "1471015261000"}; params.wmode = "transparent"; </script>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]<script type="text/javascript">[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]swfobject.embedSWF("/img/media/online_table_clocks_updated.swf", "fbr_city_clocks", "206", "41", "9.0.0", flashvars, params);[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]setTimeout(function(){ $('#fbr_city_clocks').prepend('<param name="wmode" value="transparent" />'); }, 1000); </script>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4] <!-- object type="application/x-shockwave-flash" data="/img/media/online_table_clocks.swf" width="214" height="41" id="fbr_city_clocks"> <param name="movie" value="/img/media/online_table_clocks.swf" /> <param name="wmode" value="transparent" /> </object -->[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4] <p id="fbr_time" class="fbr-value"> </p> </div> <div class="fbr-clock-bottom cfx"> <span class="fbr-city-item city1">Madrid</span> <span class="fbr-city-item city2">London</span> <span class="fbr-city-item city3"> Paris</span> <span class="fbr-city-item city4"> Moscow</span></div> </div> <div align="right"><a href="/on-line-panel-ro/#main_menu" title="Orarul deplin" class="full-table-link"></a> <img src="http://va-flyinghigh.ru/lib/skins/fly/images/logo_new.png" width="225" height="41" /></div> </div> </div>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4]<table width="100%" border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" class="taba" > <?php $acrs = ACARSData::GetACARSData(); if (count($acrs) > 0) { foreach($acrs as $acr) { ?> <tr> <td width="20%" height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text"><font class="Gateway-A1"><?php echo $acr->flightnum;?></font></span></td> <td width="35%" height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text"><?php echo $acr->depicao;?> - <?php echo $acr->arricao;?></span></td> <td width="25%" height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text"><?php echo $acr->aircraftname;?></span></td> <td width="20%" height="15" background="https://vatrus.info/img/timetable_33/empty.png"><span class="text"><?php echo $acr->phasedetail; ?></span></td> <?php $a = "SELECT * FROM phpvms_airports WHERE icao = '$acr->depicao'"; $b = "SELECT * FROM phpvms_airports WHERE icao = '$acr->arricao'"; $ab = DB::get_row($a); $bc = DB::get_row($; $dis = SchedulesData::distanceBetweenPoints($ab->lat, $ab->lng, $bc->lat, $bc->lng); $dist = ROUND($dis,1); $perc = $acr->distremain; $distance = $dist - $perc; if($bar <= "0") { ?> <?php } else { ?> <?php } $val = strtoupper($acr->phasedetail); if($val == "CRUISE" OR $val == "ARRIVED" ) { ?> <?php } elseif($val == "PAUSED" OR $val == "GATE CLOSED" OR $val == "LANDING" OR $val == "FINAL APPROACH" OR $val == "PUSH BACK" OR $val == "TAKING OFF" OR $val == "TAXIING TO RUNWAY" OR $val == "DESCENDING" OR $val == "TAXI TO GATE" OR $val == "TAXIING TO GATE" OR $val == "BOARDING" OR $val == "CLIMBING" OR $val == "ON APPROACH" OR $val == "LEVEL FLIGHT") { ?> <?php } ?> </tr> <?php } } else { ?> <tr> <td colspan="11" align="center">Нет активного рейса !</td> </tr> <?php } ?> </table> </div>[/size][/font][/color] [color=#333333][font=Arial, Helvetica, sans-serif][size=4] Edited November 9, 2016 by bass Quote Link to comment Share on other sites More sharing options...
TAV1702 Posted November 9, 2016 Report Share Posted November 9, 2016 (edited) That's pretty nice man. Good job! Is that actually pulling up ACARs flights or database schedules? Sorry, I was actually a bit lazy to look at the supplied code. Edited November 9, 2016 by TAV1702 Quote Link to comment Share on other sites More sharing options...
Moderators shakamonkey88 Posted November 10, 2016 Moderators Report Share Posted November 10, 2016 How would I got about inserting this? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.