JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<!-- основные Блоки -->

<!-- #################################################### -->
<div class="os t l sma">Информация</div>
<div class="os t l fif">
    <b>Данные спутника</b>
    <div>Название:<span id="Sat">Экспресс-AM22</span></div>
    <div>Точка стояния:<span id="SatDeg">53</span>°</div>
    <div>Расстояние:<span id="Dis">36353</span>км</div>
    <div>Угол места:<span id="ElevVal">24.9</span>°</div>
    <div>Диаметр антенны:<span id="DishSize">1.2</span>м</div>
    <div>Азимут:<span id="AziTrueVal">155.8</span>°</div>
    <div>Поляризация:<span id="LnbSkewVal">-13.7</span>°</div>
</div>

<!-- #################################################### -->
<div class="os t r sma ">Поиск места</div>
<div class="os t r fif">
    <b>Опеределение места установки:</b><br>
    <form name="satcalc" action="#" onsubmit="showAddress(this.address.value); return false">
        <input style="width:74%;" type="text" size="20" name="address" id="address" value="Введите адрес места установки"/><input width:24%; type="submit" value="Найти">
                </form>
    
</div>

<!-- #################################################### -->
<div class="os b r sma">Наведение</div>
<div class="os b r fif">
    <b>Входные данные:</b><br>
    <form name="frmInput" action="" method="post">
        <div>Дата:<input name="dta" size="8" onfocus="jstop()" type="text"></div>
        <div>Время:<input name="tm" size="8" onfocus="jstop()" type="text"></div>
        <div>Часовой пояс (GMT+):<input name="tz" size="8" onfocus="jstop()" type="text"></div>
        <div>В реальном времени:<input name="rtime" checked="checked" type="checkbox"></div>
        <div><input onclick="Calc()" value="   Ввод   " type="button"></div>
    </form>
    
    <form name="frmOutput" action="" method="post">
        <b>Результаты расчёта:</b>
        <div>Азимут солнца:<span id="az">222.2</span>°</div>
        <div>Угол места солнца:<span id="al">11.3</span>°</div>
        <div>Азимуты совпадают в:<span...

CSS

body { font: 13px arial}
.os {position:absolute;background:#fec;opacity:0.8; solid #f0f; margin:1px;border:1px solid black;
border-radius: 5px;}
/*  ;  */
.b {bottom:10px}
.t {top:0}
.l {left:0}
.r {right:0; text-align:right}

.sma {font-weight:bold;line-height:2em;padding:1px 5px;}
.fif {width:80%; text-align:left;display:none;margin:2em;z-index:1;}
    .fif div { border-bottom: 1px solid black;
                 font-weight:bold; }
    .fif div span { font-weight:normal}


input {border:1px solid black}

.dvp {display:none}

JavaScript

//вместо цсс3
$('.fif div:last-child').css('border-bottom','0');

//функцианал кнопак
var secs = 444;
$('.sma').click(function(){
    $(this).next().toggle(secs)
    .siblings(".fif:visible").hide(secs);
});
//$('.fif').click(function(){    $(this).fadeOut(secs).prev().fadeIn(secs);   });

/*
    $(document).ready(function(){
    
    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h3").click(function(){

        $(this).next("p").slideToggle("slow")



        .siblings("p:visible").slideUp("slow");




        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });

});
    
    
    */