{"id":174,"date":"2026-07-13T23:26:43","date_gmt":"2026-07-13T23:26:43","guid":{"rendered":"https:\/\/radio4you.cc\/?page_id=174"},"modified":"2026-07-15T13:19:43","modified_gmt":"2026-07-15T13:19:43","slug":"174-2","status":"publish","type":"page","link":"https:\/\/radio4you.cc\/?page_id=174","title":{"rendered":"."},"content":{"rendered":"\n<div class=\"radio-kontejner\" id=\"glavniKontejner\" onclick=\"pokreniSve()\">\n  <img decoding=\"async\" src=\"https:\/\/radio4you.cc\/ramovi\/gramofonbez.png\" class=\"gramofon-baza\" alt=\"Gramofon\">\n  \n  <div class=\"ploca-okvir\">\n    <img decoding=\"async\" src=\"https:\/\/radio4you.cc\/ramovi\/ploca5.jpg\" id=\"ploca\" class=\"gramofon-ploca\" alt=\"Vinil\">\n  <\/div>\n  \n  <div id=\"rucica\" class=\"gramofon-rucica\">\n    <div class=\"zglob-baza\"><\/div>\n    <div class=\"zglob-unutrasnji\"><\/div>\n    <div class=\"srebrna-cev\"><\/div>\n    <div class=\"glava-igle\"><\/div>\n  <\/div>\n  \n  <p class=\"uputstvo-tekst\">Klikni na gramofon da pusti\u0161 \/ zaustavi\u0161 muziku<\/p>\n<\/div>\n\n<style>\n  .radio-kontejner {\n    position: relative;\n    width: 100%;\n    max-width: 500px;\n    margin: 0 auto;\n    text-align: center;\n    font-family: Arial, sans-serif;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n  \n  .gramofon-baza {\n    width: 100%;\n    display: block;\n    height: auto;\n    pointer-events: none;\n  }\n  \n  \/* Pozicija plo\u010de *\/\n  .ploca-okvir {\n    position: absolute;\n    top: 9.50%;\n    left: 7.5%;\n    width: 64.5%;\n    padding-bottom: 65.5%;\n    height: 0;\n    border-radius: 50%;\n    overflow: hidden;\n    pointer-events: none;\n  }\n  \n  .gramofon-ploca {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n  \n  \/* RESPONSIVNE PROCENTUALNE DIMENZIJE \"S\" RU\u010cICE *\/\n  .gramofon-rucica {\n    position: absolute;\n    \n    \/* Centar rotacije le\u017ee ta\u010dno preko crnog kruga *\/\n    top: 12.8%;        \n    right: 5.5%;       \n    \n    \/* \u0160irina i visina u procentima (skalira se na svim ekranima) *\/\n    width: 16%;        \n    height: 62%;       \n    z-index: 10;\n    pointer-events: none;\n    \n    \/* Ta\u010dka rotacije je centar gornjeg zgloba *\/\n    transform-origin: 50% 10% !important;\n    \n    \/* Po\u010detni polo\u017eaj mirovanja - BEZ !important *\/\n    transform: rotate(0deg);\n    \n    -webkit-transition: transform 1.2s ease-in-out !important;\n    transition: transform 1.2s ease-in-out !important;\n  }\n\n  \/* Masivni metalni zglob na vrhu *\/\n  .zglob-baza {\n    position: absolute;\n    top: 0;\n    left: 10%;\n    width: 80%;\n    padding-bottom: 80%;\n    height: 0;\n    background: radial-gradient(circle, #444 30%, #111 80%);\n    border-radius: 50%;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.5);\n  }\n\n  \/* Unutra\u0161nji srebrni prstenovi *\/\n  .zglob-unutrasnji {\n    position: absolute;\n    top: 20%;\n    left: 30%;\n    width: 40%;\n    padding-bottom: 40%;\n    height: 0;\n    background: conic-gradient(#eee, #999, #fff, #888, #eee);\n    border-radius: 50%;\n    border: 1px solid #333;\n  }\n  \n  \/* \"S\" ZAKRIVLJENA METALNA CEV *\/\n  .srebrna-cev {\n    position: absolute;\n    top: 10%;\n    left: 32%;\n    width: 45%;\n    height: 72%;\n    border-left: 4px solid #d0d0d0;\n    border-top-left-radius: 40px 110px;\n    border-bottom-left-radius: 35px 110px;\n    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.3));\n  }\n  \n  \/* Mali metalni ispravlja\u010d pre glave *\/\n  .srebrna-cev::after {\n    content: '';\n    position: absolute;\n    bottom: -3%;\n    left: -12%;\n    width: 20%;\n    height: 6%;\n    background: #aaa;\n    border-radius: 1px;\n    transform: rotate(10deg);\n  }\n\n  \/* Audio-Technica stilizovana glava (Headshell) *\/\n  .glava-igle {\n    position: absolute;\n    bottom: 12%;        \n    left: 14%;         \n    width: 25%;\n    height: 11%;\n    background: #1e1e1e;\n    border-radius: 2px 6px 2px 2px;\n    box-shadow: -1px 2px 3px rgba(0,0,0,0.4);\n    \n    \/* Ugao glave u odnosu na ravan plo\u010de *\/\n    transform: rotate(-19deg);\n    border-bottom: 3px solid #cc0000; \n  }\n\n  \/* Dr\u017ea\u010d za prst sa strane *\/\n  .glava-igle::before {\n    content: '';\n    position: absolute;\n    top: 30%;\n    right: -45%;\n    width: 45%;\n    height: 25%;\n    border-top: 2px solid #888;\n    border-right: 2px solid #888;\n    border-top-right-radius: 4px;\n  }\n\n  \/* KADA SE MUZIKA PUSTI: Ru\u010dica ide ka plo\u010di pod savr\u0161enim uglom *\/\n  .rucica-aktivna {\n    transform: rotate(24deg) !important; \n  }\n  \n  .okreci-se {\n    animation: rotacijaPloce 3s linear infinite;\n  }\n  \n  @keyframes rotacijaPloce {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n  \n  .uputstvo-tekst {\n    margin-top: 15px;\n    color: #333;\n    font-size: 14px;\n    font-weight: bold;\n  }\n<\/style>\n\n<script>\n  var isPlaying = false;\n\n  function pokreniSve() {\n    var ploca = document.getElementById(\"ploca\");\n    var rucica = document.getElementById(\"rucica\");\n    var postojeciAudio = document.querySelector(\"audio\");\n    \n    if (!isPlaying) {\n      if (postojeciAudio) {\n        postojeciAudio.load(); \n        postojeciAudio.play();\n      }\n      \n      \/\/ Prisilno pomeramo ru\u010dicu i dodajemo !important da pregazimo sav CSS\n      if (rucica) {\n        rucica.style.setProperty(\"transform\", \"rotate(24deg)\", \"important\");\n      }\n      \n      setTimeout(function() {\n        if (isPlaying && ploca) { \n          ploca.classList.add(\"okreci-se\");\n        }\n      }, 1100);\n      \n      isPlaying = true;\n    } else {\n      if (postojeciAudio) {\n        postojeciAudio.pause();\n      }\n      \n      if (ploca) {\n        ploca.classList.remove(\"okreci-se\");\n      }\n      \n      \/\/ Vra\u0107amo ru\u010dicu na nulu i tako\u0111e stavljamo !important\n      if (rucica) {\n        rucica.style.setProperty(\"transform\", \"rotate(0deg)\", \"important\");\n      }\n      \n      isPlaying = false;\n    }\n  }\n<\/script>\n\n<audio id=\"radioStrim\" src=\"https:\/\/dc1.serverse.com\/proxy\/wtuvhnef\/stream\"><\/audio>\n","protected":false},"excerpt":{"rendered":"<p>Klikni na gramofon da pusti\u0161 \/ zaustavi\u0161 muziku<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-174","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/radio4you.cc\/index.php?rest_route=\/wp\/v2\/pages\/174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/radio4you.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radio4you.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/radio4you.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/radio4you.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=174"}],"version-history":[{"count":31,"href":"https:\/\/radio4you.cc\/index.php?rest_route=\/wp\/v2\/pages\/174\/revisions"}],"predecessor-version":[{"id":209,"href":"https:\/\/radio4you.cc\/index.php?rest_route=\/wp\/v2\/pages\/174\/revisions\/209"}],"wp:attachment":[{"href":"https:\/\/radio4you.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}