1<HTML> 2<HEAD> 3 <title>303Net.com Electronic Music Blog</title> 4 <meta property="og:image" content="https://www.303net.com/303netnewlogo-squashed.jpg" /> 5 <meta property="og:description" content="Electronic music blog by 303net.com." /> 6<meta name="keywords" content="Electronic Music, trance, techno, ambient, EDM, dance, artists, DJs, links, indie artists, live trance radio, live radio, radio, rave, free MP3, DJ, synthesizer, keyboard"> 7<link rel="apple-touch-icon" href="apple-touch-icon.png"> 8<META NAME="ROBOTS" CONTENT="ALL"> 9<meta name="robots" content="max-image-preview:large"> 10<meta name="viewport" content="width=device-width, initial-scale=1.0"> 11</HEAD> 12<BODY BGCOLOR="#034aa1" TEXT="white" VLINK="white" ALINK="grey" 13LINK="white"> 14 15
16<script async data-id="101497461" src="//static.getclicky.com/js"></script>
16 17 18 19 20<!-- Default Statcounter code for 303net.com 21https://www.303net.com -->
22<script type="text/javascript"> 23var sc_project=13213355; 24var sc_invisible=1; 25var sc_security="4505a313"; 26</script>
vendor: 1 bytes, line 26
26
27<script type="text/javascript" 28src="https://www.statcounter.com/counter/counter.js" 29async></script>
29 30<noscript><div class="statcounter"><a title="Web Analytics" 31href="https://statcounter.com/" target="_blank"><img 32class="statcounter" 33src="https://c.statcounter.com/13213355/0/4505a313/1/" 34alt="Web Analytics" 35referrerPolicy="no-referrer-when-downgrade"></a></div></noscript> 36<!-- End of Statcounter Code --> 37 38 39 <!-- Mobirise-safe SoundCloud Minibar (Shadow DOM) â White Theme + Track Fix + Centered Mobile Albums --> 40<div id="scx-mount" style="display:none"></div>
41<script> 42(function() { 43 function loadSC(cb){ 44 if (window.SC && SC.Widget) return cb(); 45 var s = document.createElement('script'); 46 s.src = "https://w.soundcloud.com/player/api.js"; 47 s.onload = cb; 48 document.head.appendChild(s); 49 } 50 51 function init(){ 52 var host = document.createElement('div'); 53 host.id = 'scx-host'; 54 host.style.position = 'fixed'; 55 host.style.left = '0'; 56 host.style.right = '0'; 57 host.style.bottom = '0'; 58 host.style.zIndex = '999999'; 59 document.body.appendChild(host); 60 61 var root = host.attachShadow({mode: 'open'}); 62 63 const html = ` 64 <div id="bar" role="region" aria-label="Audio player"> 65 <button id="close" aria-label="Close player" title="Close">×</button> 66 67 <button class="ctrl" id="prev" aria-label="Previous"> 68 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7.5 12L18 5v14L7.5 12zM6 5h2v14H6z"/></svg> 69 </button> 70 71 <button class="ctrl play" id="play" aria-label="Play/Pause" aria-pressed="false"> 72 <svg class="icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg> 73 <svg class="icon-pause" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg> 74 </button> 75 76 <button class="ctrl" id="next" aria-label="Next"> 77 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16.5 12L6 19V5l10.5 7zM18 5h-2v14h2z"/></svg> 78 </button> 79 80 <span class="time" id="tNow">0:00</span> 81 82 <div class="progress"> 83 <input type="range" id="seek" min="0" max="100" value="0" aria-label="Seek"/> 84 </div> 85 86 <span class="time" id="tDur">0:00</span> 87 88 <!-- Track Counter (Desktop Only) --> 89 <span id="trackCounter" aria-hidden="true"></span> 90 91 <div class="meta"> 92 <img id="art" alt="" /> 93 <a id="title" aria-live="polite" target="_blank" rel="noopener noreferrer">—</a> 94 </div> 95 96 <!-- Desktop cover-thumb dropdown --> 97 <label class="plist" id="desktopPlist"> 98 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18v2H3V6zm0 5h12v2H3v-2zm0 5h8v2H3v-2z"/></svg> 99 <button type="button" id="dtrigger" class="dtrigger" aria-haspopup="listbox" aria-expanded="false"> 100 <img id="dthumb" alt="" /> 101 <span id="dlabel">â</span> 102 <span class="caret" aria-hidden="true">â¾</span> 103 </button> 104 </label> 105 106 <!-- Mobile Albums button (shadow-only; real toggle is global) --> 107 <button id="mAlbums" aria-haspopup="listbox" aria-expanded="false">Albums</button> 108 109 <a id="attr" class="attr" href="https://soundcloud.com/dylantauber/sets/turquoise-lagoon" 110 target="_blank" rel="noopener noreferrer" aria-label="View this playlist on SoundCloud"> 111 by Dylan Tauber ⢠<span class="sc-brand"><span aria-hidden="true">Powered by SoundCloud</span><img src="https://developers.soundcloud.com/assets/powered_by_black-d723c698b61a7444b8d1d8e977cb8b231f583824b4b22855ef3bcee8fb890ac3.png" alt="Powered by SoundCloud" width="160" height="14"></span> 112 </a> 113 </div> 114 115 <div id="ddrop" class="panel" hidden role="listbox" aria-label="Choose album"></div> 116 117 <!-- hidden engine --> 118 <iframe id="engine" title="SoundCloud Player" allow="autoplay" 119 style="position:absolute;width:0;height:0;opacity:0;pointer-events:none;border:0;"></iframe> 120 121 <!-- Restore button (moved to document.body; globally styled) --> 122 <button id="restore" title="Show Player" style="display:none;">SHOW PLAYER</button> 123 `; 124 125 const css = ` 126 :host { all: initial; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } 127 128 /* ---- Bar ---- */ 129 #bar{ 130 position:fixed; left:0; right:0; bottom:0; 131 min-height:48px; 132 padding:8px 12px calc(8px + env(safe-area-inset-bottom)); 133 background:#fff; background-image:linear-gradient(#fafafa,#f1f1f1); 134 color:#000; display:flex; align-items:center; gap:10px; 135 border-top-left-radius:0; border-top-right-radius:0; 136 overflow:visible; 137 border-top:1px solid #ccc; 138 } 139 @media (min-width:769px){ 140 #bar{ left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:800px; } 141 } 142 143 #close{ 144 position:absolute; top:-18px; right:8px; width:26px; height:26px; border-radius:50%; 145 border:1px solid rgba(0,0,0,.25); background:#fff; color:#000; font-size:20px; line-height:1; 146 display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.15); 147 } 148 @media (max-width:768px){ #close{ display:flex; } } 149 150 .ctrl{ width:34px; height:34px; border:0; border-radius:50%; background:#e0e0e0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#000; line-height:0; flex:0 0 auto; } 151 .ctrl.play{ width:38px; height:38px; background:#000; color:#fff; } 152 .ctrl svg, .plist>svg{ width:18px; height:18px; display:inline-block; } 153 svg path{ fill:currentColor; stroke:none; } 154
155 .time{ font-weight:700; font-size:12px; opacity:.9; min-width:36px; text-align:center; flex:0 0 auto; color:#000; } 156 157 #trackCounter{ 158 font-size:11px; font-weight:600; color:#666; 159 min-width:40px; text-align:center; margin-left:8px; display:none; 160 flex:0 0 auto; 161 } 162 @media (min-width:521px){ 163 #trackCounter{ display:inline-block; } 164 } 165 166 .progress{ flex:1 1 auto; display:flex; align-items:center; min-width:80px; } 167 #seek{ width:100%; appearance:none; background:transparent; height:16px; } 168 #seek::-webkit-slider-runnable-track{ height:3px; background-color:#ccc; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='%2330dffa' d='M0 0h1v1H0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:var(--played,0%) 100%; border-radius:2px; } 169 #seek::-moz-range-progress{ height:3px; background:#30dffa; border-radius:2px; } 170 #seek::-moz-range-track{ height:3px; background:#ccc; border-radius:2px; } 171 #seek::-webkit-slider-thumb{ appearance:none; width:12px; height:12px; border-radius:50%; background:#000; margin-top:-4.5px; } 172 #seek::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#000; border:0; } 173 174 .meta{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; } 175 #art{ width:36px; height:36px; border-radius:6px; object-fit:cover; background:#ddd; flex:0 0 auto; } 176 #title{ text-decoration:none; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.95; color:#000; } 177 178 #title[href]:hover, #title[href]:focus-visible, #title[href]:active{ text-decoration:underline; text-decoration-color:#30dffa; text-decoration-thickness:2px; } 179 #title[href]:focus-visible{ outline:1px solid #30dffa; outline-offset:-1px; } 180 .sc-brand{ position:relative; display:inline-block; } 181 .sc-brand > span{ visibility:hidden; } 182 .sc-brand img{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:auto; } 183 184 .plist{ display:flex; align-items:center; gap:6px; margin-left:6px; } 185 #dtrigger{ 186 display:inline-flex; align-items:center; gap:6px; 187 background:#fff; color:#000; border:1px solid #aaa; border-radius:14px; 188 padding:4px 8px; font-size:12px; cursor:pointer; flex:0 0 auto; 189 } 190 #dtrigger img{ width:16px; height:16px; border-radius:3px; object-fit:cover; } 191 192 /* Mobile: hide inner Albums + progress */ 193 #mAlbums{ display:none; } 194 @media (max-width:768px){
195 #desktopPlist{ display:none !important; } 196 #mAlbums{ display:none !important; } 197 .progress{ display:none !important; } 198 } 199 200 .panel{ 201 position:fixed; 202 min-width:240px; 203 max-width:360px; 204 max-height:none; 205 overflow:visible; 206 background:linear-gradient(#fff,#f8f8f8); 207 border:1px solid #ccc; 208 border-radius:10px; 209 box-shadow:0 10px 24px rgba(0,0,0,.15); 210 padding:6px; 211 z-index:1000002; 212 } 213 214 /* Album rows (override inline) */ 215 .panel button.row{ 216 background:#fff !important; 217 color:#000 !important; 218 border:1px solid transparent; 219 border-radius:8px; 220 width:100%; 221 text-align:left; 222 } 223 .panel button.row:hover{ 224 background:#eee !important; 225 } 226 227 .attr{ 228 position:fixed; left:50%; transform:translateX(-50%); 229 bottom:calc(54px + env(safe-area-inset-bottom)); 230 background:#fff; border:1px solid #ccc; border-radius:8px; padding:2px 6px; 231 font-size:11px; color:#000; opacity:.9; white-space:nowrap; text-decoration:none; 232 } 233 @media (max-width:768px){ 234 .attr{ left:8px; transform:none; bottom:calc(50px + env(safe-area-inset-bottom)); border-radius:12px; padding:4px 10px; font-size:10px; } 235 } 236 237 @media (max-width:520px){ 238 #bar{ gap:8px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); } 239 .ctrl{ width:32px; height:32px; } 240 .ctrl.play{ width:36px; height:36px; } 241 } 242 243 @media (min-width:769px){ 244 #bar{ 245 gap:8px; 246 } 247 248 .progress{ 249 flex:0 0 110px; 250 min-width:110px; 251 } 252 253 .time{ 254 min-width:32px; 255 } 256 257 #trackCounter{ 258 min-width:34px; 259 } 260 261 .meta{ 262 flex:1 1 auto; 263 min-width:0; 264 } 265 266 .plist{ 267 margin-left:0; 268 } 269 270 .plist > svg{ 271 display:none; 272 } 273 } 274 `; 275 276 const style = document.createElement('style'); style.textContent = css; root.appendChild(style); 277 const wrap = document.createElement('div'); wrap.innerHTML = html; root.appendChild(wrap); 278 279 const btnPrev = root.getElementById('prev'); 280 const btnPlay = root.getElementById('play'); 281 const iconPlay = btnPlay.querySelector('.icon-play'); 282 const iconPause = btnPlay.querySelector('.icon-pause'); 283 const btnNext = root.getElementById('next'); 284 const tNow = root.getElementById('tNow'); 285 const tDur = root.getElementById('tDur'); 286 const trackCounter = root.getElementById('trackCounter'); 287 const seek = root.getElementById('seek'); 288 const art = root.getElementById('art'); 289 const titleEl = root.getElementById('title'); 290 const dtrigger = root.getElementById('dtrigger'); 291 const dthumb = root.getElementById('dthumb'); 292 const dlabel = root.getElementById('dlabel'); 293 const ddrop = root.getElementById('ddrop'); 294 const mAlbums = root.getElementById('mAlbums'); 295 const attr = root.getElementById('attr'); 296 const restore = root.getElementById('restore'); 297 const closeBtn = root.getElementById('close'); 298 299 const PLAYLISTS = [ 300 { title: 'Electric Love', url: 'https://soundcloud.com/dylantauber/sets/electric-love' }, 301 { title: 'Turquoise Lagoon', url: 'https://soundcloud.com/dylantauber/sets/turquoise-lagoon' }, 302 { title: 'Echoes in the Deep 2', url: 'https://soundcloud.com/dylantauber/sets/echoes-in-the-deep-2' }, 303 { title: 'Echoes In The Deep', url: 'https://soundcloud.com/dylantauber/sets/echoes-in-the-deep' }, 304 { title: 'Ancient Temple', url: 'https://soundcloud.com/dylantauber/sets/ancient-temple' }, 305 { title: 'Sea People', url: 'https://soundcloud.com/dylantauber/sets/sea-people' }, 306 { title: 'I Am Alive', url: 'https://soundcloud.com/dylantauber/sets/i-am-alive' }, 307 { title: 'The Lagoon', url: 'https://soundcloud.com/dylantauber/sets/the-lagoon' }, 308 { title: 'He Loves Carmen', url: 'https://soundcloud.com/dylantauber/sets/he-loves-carmen' }, 309 { title: 'Harmony of Earth 2', url: 'https://soundcloud.com/dylantauber/sets/harmony-of-earth-2' }, 310 { title: 'I Am Alive In This Moment', url: 'https://soundcloud.com/dylantauber/sets/i-am-alive-in-this-moment' }, 311 { title: 'Harmony of Earth', url: 'https://soundcloud.com/dylantauber/sets/harmony-of-earth' }, 312 { title: 'Dolphin Waves 2', url: 'https://soundcloud.com/dylantauber/sets/dolphin-waves-2' }, 313 { title: 'Dolphin Waves', url: 'https://soundcloud.com/dylantauber/sets/dolphin-waves' }, 314 { title: 'Sounds From Space 2',url: 'https://soundcloud.com/dylantauber/sets/sounds-from-space-2' }, 315 { title: 'Sounds From Space', url: 'https://soundcloud.com/dylantauber/sets/sounds-from-space' }, 316 { title:'Dolphin Trance 2', url:'https://soundcloud.com/dylantauber/sets/dolphin-trance-2' } 317 ]; 318 const COVERS = [
319 'https://www.sonofwaves.studio/content/thumbnails/ElectricLoveCovervsm.webp', 320 'https://www.sonofwaves.studio/content/thumbnails/TurquoiseLagoon140.webp', 321 'https://www.sonofwaves.studio/content/thumbnails/Echoes2.webp', 322 'https://www.sonofwaves.studio/content/thumbnails/Echoes.webp', 323 'https://www.sonofwaves.studio/content/thumbnails/AncientTempleCover.webp', 324 'https://www.sonofwaves.studio/content/thumbnails/SonofWaves.jpg', 325 'https://www.sonofwaves.studio/content/thumbnails/IAmAliveCoversm.jpg', 326 'https://www.sonofwaves.studio/content/thumbnails/TheLagoonCovervsm.jpg', 327 'https://www.sonofwaves.studio/content/thumbnails/helovescarmencovervsm.jpg', 328 'https://www.sonofwaves.studio/content/thumbnails/Earth.webp', 329 'https://www.sonofwaves.studio/content/thumbnails/IAmAliveInThisMoment.webp', 330 'https://www.sonofwaves.studio/content/thumbnails/Earth.webp', 331 'https://www.sonofwaves.studio/content/thumbnails/DolphinWaves2coverSM.jpg', 332 'https://www.sonofwaves.studio/content/thumbnails/DolphinWavesCoverSM.jpg', 333 'https://www.sonofwaves.studio/content/thumbnails/soundsfromspacevsm.jpg', 334 'https://www.sonofwaves.studio/content/thumbnails/soundsfromspacevsm.jpg', 335 'https://www.sonofwaves.studio/content/thumbnails/dolphintrance2vsm.jpg' 336 ]; 337 338 let widget=null, duration=0, seeking=false, curIdx=0; 339 let sounds=[], trackIdx=0; 340 341 function fmt(ms){ 342 const s=Math.max(0,Math.floor(ms/1000)); 343 const m=Math.floor(s/60), r=String(s%60).padStart(2,'0'); 344 return m+':'+r; 345 } 346 function setPlayState(on){ 347 iconPlay.style.display = on?'none':''; 348 iconPause.style.display = on?'':'none'; 349 btnPlay.setAttribute('aria-pressed', on?'true':'false'); 350 } 351 function buildURL(url,autoplay){ 352 return 'https://w.soundcloud.com/player/?url='+encodeURIComponent(url)+ 353 '&auto_play='+(autoplay?'true':'false')+ 354 '&visual=false&show_teaser=false&show_user=false&hide_related=true&show_comments=false&color=%23000000'; 355 } 356 function setCover(i){ 357 const u=COVERS[i]||''; 358 if(u) art.src=u; 359 } 360 function setTrigger(i){ 361 dthumb.src=COVERS[i]||''; 362 dlabel.textContent=PLAYLISTS[i]?.title||'â'; 363 } 364 function setTrackLink(sound){ 365 if(sound && sound.permalink_url){ 366 titleEl.href = sound.permalink_url; 367 } else { 368 titleEl.removeAttribute('href'); 369 } 370 } 371 function labelFromIndex(i){ 372 const t = Array.isArray(sounds) && sounds[i] ? sounds[i] : null; 373 titleEl.textContent = t && t.title ? t.title : 'â'; 374 setTrackLink(t); 375 duration = t && t.duration ? t.duration : 0; 376 tDur.textContent = duration ? fmt(duration) : '0:00'; 377 } 378 function labelFromWidget(){ 379 if(!widget) return; 380 const sourceWidget = widget; 381 sourceWidget.getCurrentSound(function(s){ 382 if(sourceWidget !== widget) return; 383 if(s && (s.title || s.user)){ 384 titleEl.textContent = s.title || 'â'; 385 setTrackLink(s); 386 duration = s.duration || 0; 387 tDur.textContent = duration ? fmt(duration) : '0:00'; 388 } else { 389 sourceWidget.getCurrentSoundIndex(function(i){ 390 sourceWidget.getSounds(function(ss){ 391 if(sourceWidget !== widget) return; 392 sounds = Array.isArray(ss)? ss : []; 393 trackIdx = (typeof i==='number' && i>=0) ? i : 0; 394 labelFromIndex(trackIdx); 395 }); 396 }); 397 } 398 }); 399 } 400 function updateTrackCounter(){ 401 if(!widget || !trackCounter) return; 402 try{ 403 widget.getCurrentSound(function(sound){ 404 if(!sound) return; 405 widget.getSounds(function(ss){ 406 if(!Array.isArray(ss) || !ss.length) return; 407 const idx = ss.findIndex(function(s){ return s && s.id === sound.id; }); 408 const cur = (idx >= 0 ? idx : 0) + 1; 409 trackCounter.textContent = cur + '/' + ss.length; 410 }); 411 }); 412 }catch(e){} 413 } 414 415 function snapshot(cb){ 416 const sourceWidget = widget; 417 let tries=0; 418 (function poll(){ 419 sourceWidget.getSounds(function(ss){ 420 if(sourceWidget !== widget) return; 421 if(Array.isArray(ss) && ss.length){ 422 sounds = ss; 423 sourceWidget.getCurrentSoundIndex(function(i){ 424 if(sourceWidget !== widget) return; 425 trackIdx = (typeof i==='number' && i>=0)? i : 0; 426 labelFromIndex(trackIdx); 427 cb&&cb(); 428 }); 429 } else if(++tries<25){ 430 setTimeout(poll,120); 431 } else { 432 sounds=[]; 433 titleEl.textContent='â'; 434 setTrackLink(null); 435 tDur.textContent='0:00'; 436 cb&&cb(); 437 } 438 }); 439 })(); 440 } 441 442 /* === recreate: fresh iframe (track-title safe) === */ 443 function recreate(url,autoplay){ 444 const old = root.getElementById('engine'); 445 const fresh = old.cloneNode(false); 446 fresh.id = 'engine'; 447 fresh.src = buildURL(url, !!autoplay); 448 old.parentNode.replaceChild(fresh, old); 449 450 widget = SC.Widget(fresh); 451 window.__scxWidget = widget; 452 453 widget.bind(SC.Widget.Events.READY, function(){ 454 snapshot(function(){
455 labelFromWidget(); 456 setTimeout(updateTrackCounter,200); 457 if(autoplay){ 458 widget.play(); 459 setTimeout(updateTrackCounter,150); 460 setTimeout(function(){ 461 try{ 462 widget.isPaused(function(p){ 463 if(p) unlockOnce(); 464 }); 465 }catch(e){ 466 unlockOnce(); 467 } 468 },200); 469 } 470 }); 471 }); 472 473 widget.bind(SC.Widget.Events.PLAY, function(){ 474 setPlayState(true); 475 setTimeout(labelFromWidget,80); 476 setTimeout(updateTrackCounter,100); 477 try{ 478 widget.getCurrentSoundIndex(function(i){ 479 if (typeof i === 'number' && i >= 0) trackIdx = i; 480 }); 481 }catch(e){} 482 }); 483 484 widget.bind(SC.Widget.Events.PAUSE, function(){ 485 setPlayState(false); 486 }); 487 488 widget.bind(SC.Widget.Events.SEEK, function(){ 489 setTimeout(labelFromWidget,60); 490 }); 491 492 widget.bind(SC.Widget.Events.PLAY_PROGRESS, function(e){ 493 if(!seeking && e){ 494 tNow.textContent = fmt(e.currentPosition); 495 if(duration>0){ 496 var pct = Math.max(0, Math.min(100, (e.currentPosition/duration)*100)); 497 if (seek){ seek.value = pct; seek.style.setProperty('--played', seek.value + '%'); } 498 } 499 } 500 }); 501 502widget.bind(SC.Widget.Events.FINISH, function(){ 503 setTimeout(function(){ 504 widget.getCurrentSoundIndex(function(i){ 505 widget.getSounds(function(ss){ 506 const len = Array.isArray(ss) ? ss.length : 0; 507 508 widget.isPaused(function(paused){ 509 if(paused && len && typeof i === 'number' && i >= len - 1){ 510 const next = (curIdx + 1) % PLAYLISTS.length; 511 load(next, true); 512 } 513 }); 514 }); 515 }); 516 }, 300); 517}); 518 } 519 520 function unlockOnce(){ 521 const unlock = ()=>{ 522 widget && widget.play && widget.play(); 523 window.removeEventListener('pointerdown',unlock,true); 524 window.removeEventListener('touchstart',unlock,true); 525 window.removeEventListener('click',unlock,true); 526 }; 527 window.addEventListener('pointerdown', unlock, true); 528 window.addEventListener('touchstart', unlock, true); 529 window.addEventListener('click', unlock, true); 530 } 531 function updateAttr(i){ attr.href = PLAYLISTS[i].url; } 532 533 function load(i, autoplay){ 534 curIdx = i; 535 setTrigger(i); 536 setCover(i); 537 duration=0; 538 seeking=false; 539 tNow.textContent='0:00'; 540 tDur.textContent='0:00'; 541 titleEl.textContent='â'; 542 setTrackLink(null); 543 if(trackCounter) trackCounter.textContent=''; 544 sounds=[]; 545 trackIdx=0; 546 if (seek){ seek.value = 0; seek.style.setProperty('--played', '0%'); } 547 updateAttr(i); 548 recreate(PLAYLISTS[i].url, autoplay); 549 setMobileActiveAlbum(i); 550 } 551 552 // controls 553 btnPlay.addEventListener('click', function(){ 554 if(!widget) return; 555 try{ 556 widget.toggle(); 557 }catch{ 558 try{ 559 widget.isPaused(p => (p ? widget.play() : widget.pause())); 560 }catch{} 561 } 562 setTimeout(updateTrackCounter,120); 563 }); 564 btnPrev.addEventListener('click', function(){ 565 if(!widget) return; 566 widget.prev(()=>{ setTimeout(labelFromWidget,120); setTimeout(updateTrackCounter,140); }); 567 }); 568 btnNext.addEventListener('click', function(){ 569 if(!widget) return; 570 widget.next(()=>{ setTimeout(labelFromWidget,120); setTimeout(updateTrackCounter,140); }); 571 }); 572 573 seek.addEventListener('input', function(){ 574 seek.style.setProperty('--played', seek.value + '%'); 575 seeking = true; 576 const pos = (seek.value/100) * (duration||0); 577 tNow.textContent = fmt(pos); 578 }); 579 seek.addEventListener('change', function(){ 580 const pos = (seek.value/100) * (duration||0); 581 if(widget) widget.seekTo(pos); 582 seeking = false; 583 }); 584 585 // desktop album panel 586 function openPanel(triggerEl){ 587 const r = triggerEl.getBoundingClientRect(); 588 ddrop.style.left = Math.max(8, Math.min(window.innerWidth - 380, r.left)) + 'px'; 589 ddrop.style.bottom = (window.innerHeight - r.top + 6) + 'px'; 590 ddrop.hidden = false;
591 triggerEl.setAttribute('aria-expanded','true'); 592 ddrop.innerHTML = PLAYLISTS.map((p,i)=>` 593 <button type="button" data-i="${i}" class="row" style="display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid transparent;background:transparent;color:#eee;cursor:pointer;border-radius:8px;"> 594 <img src="${COVERS[i]||''}" style="width:20px;height:20px;border-radius:4px;object-fit:cover;background:#333;" alt=""> 595 <span style="font:600 12px/1.2 system-ui;">${(p.title||'').replace(/"/g,'"')}</span> 596 </button> 597 `).join(''); 598 } 599 function closePanel(triggerEl){ 600 ddrop.hidden = true; 601 if (triggerEl) triggerEl.setAttribute('aria-expanded','false'); 602 } 603 604 dtrigger?.addEventListener('click', (e)=>{ 605 e.stopPropagation(); 606 ddrop.hidden ? openPanel(dtrigger) : closePanel(dtrigger); 607 }); 608 mAlbums.addEventListener('click', (e)=>{ 609 e.preventDefault(); 610 }); 611 612 ddrop.addEventListener('click', (e)=>{ 613 const btn=e.target.closest('[data-i]'); 614 if(!btn) return; 615 const i=parseInt(btn.dataset.i,10)||0; 616 if(i!==curIdx) load(i,true); 617 const trg = matchMedia('(max-width:768px)').matches ? mAlbums : dtrigger; 618 closePanel(trg); 619 }); 620 621 document.addEventListener('click', (e)=>{ 622 if(!ddrop.hidden){ 623 const path = e.composedPath(); 624 if(!path.includes(ddrop) && !path.includes(dtrigger) && !path.includes(mAlbums)){ 625 closePanel(matchMedia('(max-width:768px)').matches ? mAlbums : dtrigger); 626 } 627 } 628 }); 629 document.addEventListener('keydown', (e)=>{ 630 if(e.key==='Escape'){ 631 closePanel(matchMedia('(max-width:768px)').matches ? mAlbums : dtrigger); 632 } 633 }); 634 635 /* ---- Restore button: move to document.body and style globally ---- */ 636 restore.id = 'scx-restore'; 637 var gcss = document.createElement('style'); 638 gcss.textContent = ` 639 #scx-restore{ 640 position:fixed; left:50%; transform:translateX(-50%); 641 bottom:calc(72px + env(safe-area-inset-bottom)); 642 background:#fff; border:1px solid #000; border-radius:20px; padding:6px 12px; 643 display:none; align-items:center; gap:8px; cursor:pointer; color:#000; font-size:13px; 644 z-index:1000001; 645 } 646 #scx-restore::before{ content:"ð§"; display:inline-block; font-size:16px; line-height:1; margin-right:6px; } 647 @media (min-width:769px){ #scx-restore{ display:none !important; } } 648 `; 649 document.head.appendChild(gcss); 650 document.body.appendChild(restore); 651 652 /* ==== MOBILE ALBUMS TOGGLE + PANEL ==== */ 653 const maToggle = document.createElement('button'); 654 maToggle.id = 'scx-albums-toggle'; 655 maToggle.type = 'button'; 656 maToggle.textContent = 'Albums'; 657 maToggle.setAttribute('aria-expanded','false'); 658 maToggle.setAttribute('aria-controls','scx-albums-panel'); 659 maToggle.style.display = 'none'; 660 document.body.appendChild(maToggle); 661 662 const maPanel = document.createElement('div'); 663 maPanel.id = 'scx-albums-panel'; 664 maPanel.hidden = true; 665 maPanel.setAttribute('aria-label','Choose album'); 666 const maList = document.createElement('div'); 667 maList.className = 'dt-malbums-list'; 668 maPanel.appendChild(maList); 669 document.body.appendChild(maPanel); 670 671 // Mobile albums CSS (global) 672 var malbumsCss = document.createElement('style'); 673 malbumsCss.textContent = ` 674 @media (max-width:768px){ 675 #scx-albums-toggle{ 676 position:fixed; 677 bottom:calc(50px + env(safe-area-inset-bottom)); 678 left:-9999px; 679 display:inline-flex; 680 align-items:center; 681 justify-content:center; 682 background:#fff; 683 border:1px solid #000; 684 border-radius:12px; 685 padding:4px 10px; 686 font-size:10px; 687 font-weight:700; 688 line-height:1.1; 689 color:#000; 690 opacity:1; 691 z-index:1000002; 692 -webkit-tap-highlight-color:transparent; 693 font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; 694 } 695 #scx-albums-toggle:focus{ 696 outline:none; 697 box-shadow:0 0 0 2px rgba(0,0,0,.35); 698 border-color:#000; 699 } 700 #scx-albums-panel{ 701 position:fixed; 702 left:50%; 703 transform:translateX(-50%); 704 bottom:calc(96px + env(safe-area-inset-bottom)); 705 width:min(96vw,800px); 706 max-height:52vh; 707 background:rgba(17,17,17,.98); 708 border:1px solid #333; 709 border-radius:12px; 710 box-shadow:0 10px 24px rgba(0,0,0,.45); 711 padding:8px; 712 z-index:1000003; 713 overflow-y:auto; 714 backdrop-filter:blur(6px); 715 } 716 .dt-malbums-list{ 717 display:grid; 718 grid-template-columns:1fr; 719 gap:6px; 720 } 721 .dt-malbum-item{ 722 display:flex; 723 align-items:center; 724 gap:8px; 725 width:100%; 726 background:#1a1a1a; 727 color:#eee; 728 border:1px solid #2a2a2a; 729 border-radius:10px; 730 padding:6px 8px; 731 text-align:left; 732 cursor:pointer; 733 font:600 12px/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; 734 } 735 .dt-malbum-item img{ 736 width:28px; 737 height:28px; 738 object-fit:cover; 739 border-radius:6px; 740 background:#333; 741 flex:0 0 auto; 742 } 743 .dt-malbum-item[aria-selected="true"]{ 744 border-color:#fff !important; 745 box-shadow:0 0 0 2px rgba(255,255,255,.35) !important; 746 } 747 .dt-malbum-item:focus{ 748 outline:none; 749 box-shadow:0 0 0 2px rgba(255,255,255,.35); 750 border-color:#fff; 751 } 752 } 753 `; 754 document.head.appendChild(malbumsCss); 755 756 function isMobile(){ 757 return window.matchMedia('(max-width:768px)').matches; 758 } 759 760 function buildMobileAlbumsList(){ 761 if (!maList) return; 762 maList.innerHTML = PLAYLISTS.map(function(p,i){ 763 var cover = COVERS[i] || ''; 764 var safeTitle = (p.title || '').replace(/"/g,'"'); 765 return ` 766 <button class="dt-malbum-item" type="button" role="option" 767 data-index="${i}" aria-selected="${i===curIdx ? 'true' : 'false'}"> 768 <img src="${cover}" alt="">
769 <span>${safeTitle}</span> 770 </button> 771 `; 772 }).join(''); 773 } 774 775 function setMobileActiveAlbum(index){ 776 if (!maList) return; 777 var items = maList.querySelectorAll('.dt-malbum-item'); 778 items.forEach(function(b){ b.setAttribute('aria-selected','false'); }); 779 var active = maList.querySelector('.dt-malbum-item[data-index="'+index+'"]'); 780 if (active){ 781 active.setAttribute('aria-selected','true'); 782 try{ active.scrollIntoView({behavior:'smooth', block:'nearest'}); }catch(e){} 783 } 784 } 785 786 function openMobilePanel(){ 787 if (!maPanel || !maToggle) return; 788 if (!maList.innerHTML) buildMobileAlbumsList(); 789 maPanel.hidden = false; 790 maToggle.setAttribute('aria-expanded','true'); 791 } 792 function closeMobilePanel(){ 793 if (!maPanel || !maToggle) return; 794 maPanel.hidden = true; 795 maToggle.setAttribute('aria-expanded','false'); 796 } 797 function toggleMobilePanel(){ 798 if (!maPanel) return; 799 maPanel.hidden ? openMobilePanel() : closeMobilePanel(); 800 } 801 802 // â EXACT CENTERING between attribution and X 803 function repositionMobileToggle(){ 804 if (!maToggle || !attr || !isMobile()) return; 805 806 const cs = getComputedStyle(attr); 807 maToggle.style.padding = cs.padding; 808 maToggle.style.fontSize = cs.fontSize; 809 maToggle.style.lineHeight = cs.lineHeight; 810 maToggle.style.borderRadius = cs.borderRadius; 811 maToggle.style.borderWidth = cs.borderWidth; 812 maToggle.style.borderStyle = cs.borderStyle; 813 maToggle.style.borderColor = cs.borderColor; 814 maToggle.style.background = cs.backgroundColor || '#fff'; 815 maToggle.style.color = cs.color || '#000'; 816 maToggle.style.opacity = cs.opacity; 817 818 const attrRect = attr.getBoundingClientRect(); 819 const closeRect = closeBtn.getBoundingClientRect(); 820 821 let rightEdge; 822 if (closeRect.width > 0) { 823 rightEdge = closeRect.left; 824 } else { 825 rightEdge = window.innerWidth - 44; 826 } 827 828 const leftEdge = attrRect.right; 829 const mid = (leftEdge + rightEdge) / 2; 830 831 const tW = maToggle.offsetWidth || 0; 832 let left = Math.round(mid - tW / 2); 833 834 left = Math.max(8, Math.min(left, window.innerWidth - tW - 8)); 835 836 maToggle.style.left = left + 'px'; 837 maToggle.style.bottom = cs.bottom || `calc(50px + env(safe-area-inset-bottom))`; 838 } 839 840 function ensureToggleVisibility(){ 841 if (!maToggle) return; 842 if (isMobile() && host.style.display !== 'none'){ 843 maToggle.style.display = 'inline-flex'; 844 repositionMobileToggle(); 845 } else { 846 maToggle.style.display = 'none'; 847 } 848 } 849 850 maToggle.addEventListener('click', function(){ 851 toggleMobilePanel(); 852 }); 853 854 if (maList){ 855 maList.addEventListener('click', function(e){ 856 var btn = e.target.closest('.dt-malbum-item'); 857 if (!btn) return; 858 var idx = parseInt(btn.getAttribute('data-index'),10) || 0; 859 if (idx !== curIdx) load(idx, true); 860 closeMobilePanel(); 861 setTimeout(repositionMobileToggle, 150); 862 }); 863 } 864 865 // close mobile panel when tapping outside 866 document.addEventListener('click', function(e){ 867 if (!maPanel || maPanel.hidden) return; 868 var target = e.target; 869 if (!target.closest || (!target.closest('#scx-albums-panel') && !target.closest('#scx-albums-toggle'))){ 870 closeMobilePanel(); 871 } 872 }); 873 874 window.addEventListener('resize', function(){ 875 ensureToggleVisibility(); 876 repositionMobileToggle(); 877 }); 878 window.addEventListener('orientationchange', function(){ 879 ensureToggleVisibility(); 880 setTimeout(repositionMobileToggle, 100); 881 }); 882 883 /* ---- show/hide bar (also hide/show mobile albums toggle) ---- */ 884 closeBtn.addEventListener('click', ()=>{ 885 host.style.display='none'; 886 if (isMobile()) { 887 document.getElementById('scx-restore').style.display='inline-flex'; 888 if (maToggle) maToggle.style.display = 'none'; 889 closeMobilePanel(); 890 } 891 }); 892 restore.addEventListener('click', ()=>{ 893 host.style.display='block'; 894 document.getElementById('scx-restore').style.display='none'; 895 ensureToggleVisibility(); 896 }); 897 898 // Keep title metadata/link current even when a sound is selected while paused. 899 setInterval(function(){
900 if(widget) labelFromWidget(); 901 }, 500); 902 903 // start 904 load(0,true); 905 if (isMobile()){ 906 ensureToggleVisibility(); 907 setTimeout(repositionMobileToggle, 200); 908 } 909 } 910 911 loadSC(init); 912})(); 913</script>
913 914 915 916<CENTER><html> 917 918<head> 919<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" ></link> 920 921</head> 922<!--<link rel="stylesheet" href="style.css" type="text/css">--> 923<style> 924.menubar{ 925 width: 820px; 926 position: relative; 927 margin-left: auto; 928 top: 0; 929 left: 0; 930 /* padding: 0 100px; */ 931 box-sizing: border-box; 932 margin-right: auto; 933 934} 935#ul1 { 936 list-style-type: none; 937 margin: 0; 938 padding: 0; 939 overflow: hidden; 940 background-color: black; 941 margin-left:-4px; 942 margin-right:2px; 943 border-radius: 15px; 944} 945 946#ul1 li { 947 float: left; 948} 949 950#ul1 li a { 951 display: block; 952 color: #ffffff; 953 text-align: center; 954 padding: 13px 13px; 955 text-decoration: none; 956 font-size:20px; 957 font-family:verdana; 958} 959 960li a:hover { 961 background-color: #333333; 962} 963<!--@media screen 964and (max-width:620px) 965{ 966 #ul1{ 967 width:100%; 968 } 969#ul1 li a { 970 padding: 12px 12px; 971 font-size:20px; 972} 973} 974@media screen 975and (max-width:420px) 976{ 977 #ul1{ 978 width:100%; 979 } 980 #ul1 li{ 981 float:none; 982 } 983#ul1 li a { 984 padding: 9px 4px; 985 font-size:20px; 986} 987}--> 988.menu-toggle{ 989 990 color: #ffffff; 991 float: right; 992 line-height: 50px; 993 font-size: 24px; 994 cursor: pointer; 995 display: none; 996 997} 998 999@media screen 1000and (max-width:991px) 1001{ 1002 .menubar{ 1003 width: 100%; 1004 padding: 0px 0px; 1005 display: block; 1006 font-size: 32px; 1007 background: transparent; 1008 position: relative; 1009 text-align: center 1010 } 1011 .menu-toggle { 1012 display:block; 1013 margin: 5px 42% 35px 0px; 1014 text-decoration: none; 1015 text-shadow: 0 1px 1px rgba(255,255,255,.75); 1016 -webkit-border-radius: 4px; 1017 -moz-border-radius: 4px; 1018 border-radius: 4px; 1019 background-color: #222!important; 1020 padding: .438em .625em; 1021 line-height: 1.125em; 1022 vertical-align: middle; 1023 float: none !important; 1024 width: auto; 1025 display: inline-block; 1026 margin: 0 auto; 1027 } 1028 1029 .menubar #ul1{ 1030 position:absolute; 1031 width:100%; 1032 height:calc(100vh-50px); 1033 background:#000; 1034 left:-130%; 1035 top:50px; 1036 transition:0.5s!important; 1037 } 1038 .menubar #ul1.active{ 1039 left:0; 1040 } 1041 .menubar ul{ 1042 display:block; 1043 text-align:center; 1044 1045 } 1046 #ul1 li { 1047 display: contents; 1048 } 1049 #ul1 li a:hover { 1050 background-color: #333333; 1051 } 1052 .menubar ul li a{ 1053 border-bottom:1px solid rgba(0,0,0,0.2); 1054 } 1055 .slicknav_menutxt { 1056 display: block; 1057 line-height: 1.188em; 1058 float: left; 1059 color: #fff; 1060 font-weight: 700; 1061 text-shadow: 0 1px 3px #000; 1062 padding-right: 10px; 1063 margin-top: -2px; 1064 } 1065} 1066 1067</style> 1068<body> 1069<div class="menubar"> 1070<ul id="ul1" > 1071<li><a href="https://www.303net.com/index.html">303net.com</a></li> 1072<li><a href="https://sonofwaves.studio/music">SWS Music</a></li> 1073<li><a href="https://www.303net.com/music">Music</a></li> 1074<li><a href="https://www.303net.com/video">Video</a></li> 1075<li><a href="https://www.303net.com/live">Live</a></li> 1076<li><a href="https://www.303net.com/blog">Blog</a></li> 1077<li><a href="https://www.303net.com/artists">Artists</a></li> 1078<li><a href="https://www.303net.com/MP3">MP3</a></li> 1079<li><a href="https://www.303net.com/rave">Rave</a></li> 1080</ul> 1081 1082<div class="menu-toggle"> 1083<span class="slicknav_menutxt">MENU</span> 1084<i class="fa fa-bars" aria-hidden="true"></i> 1085</div> 1086</div> 1087 1088 1089
1090<script 1091src="https://code.jquery.com/jquery-3.3.1.js" 1092integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 1093crossorigin="anonymous"></script>
1093 1094
1095<script type="text/javascript"> 1096 $(document).ready(function(){ 1097 $(".menu-toggle").click(function(){ 1098 1099$("#ul1").toggleClass("active"); 1100 }); 1101 }) 1102</script>
1102 1103</body> 1104</html> 1105 1106 <P><CENTER> 1107<style> 1108 html, body { 1109 height: 100%; 1110 } 1111 1112 body { 1113 background-color: #000; 1114 background: url("https://www.dylantauber.studio/303net/dj-720589_1280.jpg") no-repeat center center fixed; 1115 -webkit-background-size: cover; 1116 -moz-background-size: cover; 1117 -o-background-size: cover; 1118 background-size: cover; 1119 position: relative; 1120 transition: background-image 1s ease-in-out; /* Smoother transition */ 1121 -webkit-animation: fade 1s ; /* Chrome, Safari, Opera */ 1122 animation: fade 1s ; 1123 } 1124 1125 @media screen and (max-width: 992px) { 1126 body { 1127 background: url("https://www.dylantauber.studio/303net/dj-720589_1280.jpg") repeat-y top center scroll; /* Repeat only vertically */ 1128 background-size: contain; /* Ensure the full image fits on the screen */ 1129 background-attachment: scroll; /* Remove fixed background attachment on mobile */ 1130 position: relative; 1131 } 1132 } 1133 1134 /* Chrome, Safari, Opera */ 1135 @-webkit-keyframes fade { 1136 from {opacity: 0.2;} 1137 to {opacity: 1;} 1138 } 1139 1140 /* Standard syntax */ 1141 @keyframes fade { 1142 from {opacity: 0.2;} 1143 to {opacity: 1;} 1144 } 1145</style> 1146
1147<script> 1148 var images = [ 1149 'https://www.dylantauber.studio/303net/dj-720589_1280.jpg', 1150 'https://www.dylantauber.studio/303net/303netback-squashed.jpg', 1151 'https://www.dylantauber.studio/303net/303net1200-squashed.jpg', 1152 'https://www.dylantauber.studio/303net/night-629084_1280.jpg', 1153 'https://www.dylantauber.studio/303net/dj-3731970_1280.jpg', 1154 'https://www.dylantauber.studio/303net/dj-2250056_1920.jpg', 1155 'https://www.dylantauber.studio/303net/music-2805506_1280.jpg', 1156 'https://www.dylantauber.studio/303net/greenlasers.jpg' 1157 ]; 1158 1159 // Preload images 1160 images.forEach(function(src) { 1161 var img = new Image(); 1162 img.src = src; 1163 }); 1164 1165 var num = 0; 1166 1167 // Function to lazy load images 1168 function next() { 1169 num++; 1170 if (num >= images.length) { 1171 num = 0; 1172 } 1173 1174 // Lazy load the background image 1175 var newImage = new Image(); 1176 newImage.src = images[num]; 1177 newImage.onload = function() { 1178 document.body.style.backgroundImage = 'url("' + images[num] + '")'; 1179 }; 1180 } 1181 1182 setInterval(next, 3000); 1183</script>
1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 <link rel="stylesheet" type="text/css" 1198 href="https://fonts.googleapis.com/css?family=Montserrat"> 1199 <style> 1200 body { 1201 font-family: 'Montserrat', sans-serif; 1202 font-size: 24; 1203 } 1204 </style> 1205 1206 1207 1208 1209 <P><CENTER><A HREF="https://www.dylantauber.com"><IMG SRC="https://dylantauber.studio/DylanTauber728retina-squashed.jpg" 1210 class="responsivebanner" BORDER="0"></A> 1211 1212<style> 1213 .responsivebanner { 1214 width: 100%; 1215 max-width: 728px; 1216 height: auto; 1217 max-height: 90px; 1218 } 1219 </style> 1220 1221 <P> 1222 1223 1224 <A HREF="/"><IMG SRC="../303netnewlogo-squashed.jpg" class="responsivelogo" style="border-radius:30%;"></A> 1225 1226 <style> 1227 .responsivelogo { 1228 width: 100%; 1229 max-width: 500px; 1230 height: auto; 1231 max-height: 344px; 1232 } 1233 </style> 1234 1235 1236 <link rel="stylesheet" type="text/css" 1237 href="https://fonts.googleapis.com/css?family=Montserrat"> 1238 <style> 1239 body { 1240 font-family: 'Montserrat', sans-serif; 1241 font-size: 24; 1242 } 1243 </style> 1244 1245 1246
1246<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5d555e59bf5356001962c8b5&product=sticky-share-buttons' async='async'></script>
1246 1247 <P> 1248 1249 1250 1251 <P><CENTER> 1252 1253 <!DOCTYPE html> 1254<html> 1255<head> 1256 <title></title> 1257 <style type="text/css" media="screen"> 1258.select-hidden { 1259 display: none; 1260 visibility: hidden; 1261 padding-right: 10px; 1262} 1263 1264.select { 1265 cursor: pointer; 1266 display: inline-block; 1267 position: relative; 1268 font-size: 16px; 1269 color: #fff; 1270 width: 220px; 1271 height: 40px; 1272} 1273 1274.select-styled { 1275 position: absolute; 1276 top: 0; 1277 right: 0; 1278 bottom: 0; 1279 left: 0; 1280 font-size: 12px; 1281 background-color: #000; 1282 padding: 13px 15px; 1283 -moz-transition: all 0.2s ease-in; 1284 -o-transition: all 0.2s ease-in; 1285 -webkit-transition: all 0.2s ease-in; 1286 transition: all 0.2s ease-in; 1287} 1288.select-styled:after { 1289 content: ""; 1290 width: 0; 1291 height: 0; 1292 border: 7px solid transparent; 1293 border-color: #fff transparent transparent transparent; 1294 position: absolute; 1295 top: 16px; 1296 right: 10px; 1297} 1298.select-styled:hover { 1299 background-color: #000; 1300} 1301.select-styled:active, .select-styled.active { 1302 background-color: #000; 1303} 1304.select-styled:active:after, .select-styled.active:after { 1305 top: 9px; 1306 border-color: transparent transparent #fff transparent; 1307} 1308 1309.select-options { 1310 display: none; 1311 position: absolute; 1312 top: 100%; 1313 right: 0; 1314 left: 0; 1315 z-index: 999; 1316 margin: 0; 1317 padding: 0; 1318 list-style: none; 1319 background-color: #000; 1320} 1321.s-btn { 1322 background-color: #000; 1323 border: none; 1324 color: white; 1325 padding: 9px 32px; 1326 text-align: center; 1327 text-decoration: none; 1328 display: inline-block; 1329 font-size: 16px; 1330 position: relative; 1331 top: -15px; 1332 font-weight: bold; 1333 cursor: pointer; 1334 border: 2px solid #000; 1335 border-radius: 0px; 1336 -webkit-border-radius: 0px; 1337 -moz-border-radius: 0px; 1338 -o-border-radius: 0px; 1339 -ms-border-radius: 0px; 1340} 1341.s-btn:hover, .s-btn:focus{ 1342 background: #fff; 1343 border: 2px solid #000; 1344 color: #000; 1345 outline: 0; 1346} 1347.select-options li { 1348 margin: 0; 1349 padding: 4px 0; 1350 text-indent: 0; 1351 font-size: 12px; 1352 border-top: 1px solid #ddd; 1353 -moz-transition: all 0.15s ease-in; 1354 -o-transition: all 0.15s ease-in; 1355 -webkit-transition: all 0.15s ease-in; 1356 transition: all 0.15s ease-in; 1357} 1358.select-options li:hover { 1359 color: #000; 1360 background: #fff; 1361} 1362.select-options li[rel="hide"] { 1363 display: none; 1364} 1365 1366 </style> 1367</head> 1368<body> 1369<FORM> 1370<!--SELECTION--> 1371<H5><CENTER></FORM> 1372<FORM ACTION="/cgi-bin/jump.cgi" 1373ENCTYPE="ENCTYPE="x-www-form-urlencoded"" METHOD="POST"> 1374<SELECT NAME="url" id="uniq-drop"> 1375 <OPTION VALUE="https://www.303net.com/artists/" SELECTED>303Net Network 1376 <OPTION VALUE="https://www.303net.com">[303Net.com home] 1377 <OPTION VALUE="https://www.303net.com/index1.html">303Net 1378 <OPTION VALUE="https://www.303net.com/artists">303Net Top Indie Artists 1379 <OPTION VALUE="https://303net.com/MP3">Top indie MP3 sites 1380 <OPTION VALUE="https://303net.com/music">303net.com Music 1381 <OPTION VALUE="https://SWStudios.net/music">SWS Music 1382 <OPTION VALUE="https://www.303net.com/index1.html#radio">Live radio 1383 <OPTION VALUE="https://DoubleMirrors.com/MP3">Double Mirrors MP3 1384 <OPTION VALUE="https://303net.com/303hoo">303hoo music links 1385 <OPTION VALUE="https://303net.com/rave">303net rave 1386 <OPTION VALUE="https://303net.com/club">303net club 1387 <OPTION VALUE="https://DylanTauber.com">DylanTauber.com 1388 <OPTION VALUE="https://www.Dylan.promo">Dylan.promo 1389 <OPTION VALUE="https://www.SWStudios.net">Son of Waves Studios 1390 <OPTION VALUE="https://SWStudios.net/contact.html">contact 1391</SELECT> <INPUT TYPE="submit" NAME="Go" class="s-btn" VALUE="Go"><!--/SELECTION--></CENTER></H5> 1392</FORM> 1393<!--
1393<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1393 -->
1394<script type="text/javascript"> 1395/* 1396Reference: https://jsfiddle.net/BB3JK/47/ 1397*/ 1398 1399$('#uniq-drop').each(function(){ 1400 var $this = $(this), numberOfOptions = $(this).children('option').length; 1401 1402 $this.addClass('select-hidden'); 1403 $this.wrap('<div class="select"></div>'); 1404 $this.after('<div class="select-styled"></div>'); 1405 1406 var $styledSelect = $this.next('div.select-styled'); 1407 $styledSelect.text($this.children('option').eq(0).text()); 1408 1409 var $list = $('<ul />', { 1410 'class': 'select-options' 1411 }).insertAfter($styledSelect); 1412 1413 for (var i = 0; i < numberOfOptions; i++) { 1414 $('<li />', { 1415 text: $this.children('option').eq(i).text(), 1416 rel: $this.children('option').eq(i).val() 1417 }).appendTo($list); 1418 } 1419 1420 var $listItems = $list.children('li'); 1421 1422 $styledSelect.click(function(e) { 1423 e.stopPropagation(); 1424 $('div.select-styled.active').not(this).each(function(){ 1425 $(this).removeClass('active').next('ul.select-options').hide(); 1426 }); 1427 $(this).toggleClass('active').next('ul.select-options').toggle(); 1428 }); 1429 1430 $listItems.click(function(e) { 1431 e.stopPropagation(); 1432 $styledSelect.text($(this).text()).removeClass('active'); 1433 $this.val($(this).attr('rel')); 1434 $list.hide(); 1435 //console.log($this.val()); 1436 }); 1437 1438 $(document).click(function() { 1439 $styledSelect.removeClass('active'); 1440 $list.hide(); 1441 }); 1442 1443}); 1444</script>
1444 1445</body> 1446</html> 1447 </CENTER> 1448 1449<P><CENTER><TABLE BORDER="0" CELLSPACING="2" CELLPADDING="10"> 1450 <TR> 1451 <TD COLSPAN="2" BGCOLOR="#000000" style="border-radius: 15px"> 1452 <P><CENTER><FONT COLOR="#ffffff" SIZE="+1">Welcome 1453 the 303net.com Blog<BR> 1454 1455 <CENTER><p>By a contributing writer for 303net.com</CENTER> 1456</FONT></CENTER></TD> 1457 </TR> 1458</TABLE></P></CENTER> 1459 1460 1461 <CENTER> 1462 1463 <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="20"> 1464 <TR> 1465 <TD WIDTH="100%" BGCOLOR="black" style="border-radius: 15px"> 1466 1467 <P><CENTER>Original 303net.com articles:</CENTER> 1468 1469 <P> 1470 <OL> 1471 <LI><A HREF="Manhattan-club-scene2023.html">Manhattan Club Scene in 2023</A> 1472 <LI><A HREF="NYC-club-scene.html">The Current NYC Club Scene</A> 1473 <LI><A HREF="HistoryofElectronicMusic.html">The History of Electronic Music</A> 1474 <LI><A HREF="NIneInchNails.html">Nine Inch Nails</A> 1475 <LI><A HREF="BestElectronicMusicofToday.html">Best Electronic Music of Today</A> 1476 <LI><A HREF="../ILoveElectronicMusic.html">I Love Electronic Music</A> 1477 </OL> 1478 1479 </TD> 1480 </TR> 1481 </TABLE></CENTER></P> 1482 1483 1484 1485 1486 1487 <P><CENTER> 1488 1489 1490 1491 <popup-widget widgetid="6065" class="widgio-widget"></popup-widget> 1492 1493 1494 1495 1496 1497 <style> 1498.sws-fb-widget { 1499 font-family: Helvetica, Arial, sans-serif; 1500 font-size: 14px; 1501 color: #ffffff; 1502 border: 1px solid #d3d6db; 1503 max-width: 540px; 1504 width: 100%; 1505 margin: 30px auto; 1506 overflow: hidden; 1507 position: relative; 1508 1509 background-image: url("https://www.sonofwaves.studio/FBCover2025island6-squashed.jpg"); 1510 background-size: cover; 1511 background-position: center top; 1512 height: 190px; 1513} 1514 1515/* Avatar stays upper-left */ 1516.sws-fb-avatar { 1517 position: absolute; 1518 top: 18px; 1519 left: 18px; 1520 width: 72px; 1521 height: 72px; 1522 object-fit: cover; 1523 border: 2px solid #fff; 1524 border-radius: 4px; 1525 box-shadow: 0 1px 4px rgba(0,0,0,0.3); 1526 background: #fff; 1527 z-index: 2; 1528} 1529 1530/* NEW: Title top-center, but safely to the right of the avatar area */ 1531.sws-fb-title-top { 1532 position: absolute; 1533 top: 18px; 1534 left: 100px; 1535 right: 16px; 1536 z-index: 2; 1537 text-align: center; 1538 text-shadow: 0 1px 3px rgba(0,0,0,0.6); 1539} 1540 1541.sws-fb-title-top a { 1542 color: #ffffff; 1543 font-size: 22px; 1544 text-decoration: none; 1545 margin: 0; 1546 line-height: 1.2; 1547 display: inline-block; 1548 white-space: nowrap; 1549 overflow: hidden; 1550 text-overflow: ellipsis; 1551 max-width: 100%; 1552} 1553 1554/* Text block directly under avatar */ 1555.sws-fb-textblock { 1556 position: absolute; 1557 left: 18px; 1558 top: 112px; 1559 z-index: 2; 1560 width: 240px; 1561 text-shadow: 0 1px 3px rgba(0,0,0,0.6); 1562} 1563 1564.sws-fb-followers { 1565 font-size: 14px; 1566 color: #f0f2f5; 1567 line-height: 1.2; 1568 margin: 0; 1569 text-align: left; 1570} 1571 1572/* Bottom buttons */ 1573.sws-fb-bottom { 1574 position: absolute; 1575 left: 16px; 1576 right: 16px; 1577 bottom: 10px; 1578 display: flex; 1579 justify-content: space-between; 1580 align-items: center; 1581} 1582 1583.sws-fb-btn { 1584 border: 1px solid #ced0d4; 1585 background: rgba(245,246,247,0.95); 1586 border-radius: 2px; 1587 padding: 4px 12px; 1588 display: inline-flex; 1589 align-items: center; 1590 gap: 6px; 1591 font-size: 13px; 1592 color: #4b4f56; 1593 text-decoration: none; 1594} 1595 1596.sws-fb-f { 1597 display: inline-block; 1598 width: 18px; 1599 height: 18px; 1600 border-radius: 2px; 1601 background: #4b68a2; 1602 color: #fff; 1603 font-weight: bold; 1604 font-size: 14px; 1605 line-height: 18px; 1606 text-align: center; 1607} 1608 1609/* Mobile: make widget 95% width */ 1610@media (max-width: 600px) { 1611 .sws-fb-widget { width: 95%; } 1612} 1613 1614/* Extra safety for very small screens */ 1615@media (max-width: 360px) { 1616 .sws-fb-title-top a { font-size: 18px; } 1617} 1618</style> 1619 1620<div class="sws-fb-widget"> 1621 1622 <img 1623 class="sws-fb-avatar" 1624 src="https://www.sonofwaves.studio/artistphoto.webp" 1625 alt="Son of Waves Studios" 1626 > 1627 1628 <div class="sws-fb-title-top"> 1629 <a 1630 href="https://www.facebook.com/SonofWavesStudios" 1631 target="_blank" 1632 rel="noopener" 1633 >Son of Waves Studios</a> 1634 </div> 1635 1636 <div class="sws-fb-textblock"> 1637 <div class="sws-fb-followers">49,649 followers</div> 1638 </div> 1639 1640 <div class="sws-fb-bottom"> 1641 <div class="sws-fb-btn"> 1642 <span class="sws-fb-f">f</span> 1643 Followed 1644 </div> 1645 <a 1646 class="sws-fb-btn" 1647 href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.facebook.com%2FSonofWavesStudios" 1648 target="_blank" 1649 rel="noopener" 1650 > 1651 Share 1652 </a> 1653 </div> 1654</div> 1655 1656 1657 1658 1659 1660 1661 1662 <P><CENTER> 1663 <div style="max-width: 610px; margin: 0 auto; text-align: center; background-color: #000; padding: 10px; border-radius: 10px;"> 1664 1665 <!-- Counter section with improved font styling --> 1666 <div style="background-color: #30dffa; padding: 5px 10px; margin: -5px -5px 10px -5px;"> 1667 <p style="color: black; font-family: Verdana, sans-serif; font-size: 13px; margin: 0;"> 1668 You are visitor # 1669 <a href="https://smallcounter.com"> 1670 <img src="https://smallcounter.com/count.php?c_style=126&id=1743742488" border="0" alt="web counter" style="mix-blend-mode: multiply;"> 1671 </a> 1672 to the <a href="https://www.sws.network" style="color: black;">SWS Network</a> 1673 (total count for all <a href="https://www.sws.network" style="color: black;">30 sites</a>): 1674 </p> 1675 </div> 1676 1677 <!-- Links section with wider padding --> 1678 <div class="sws-links"> 1679 <a href="https://DylanTauber.com">DylanTauber.com</a> | 1680 <a href="https://DolphinSpirit.earth">DolphinSpirit.earth</a> | 1681 <a href="https://Dylan.promo">Dylan.promo</a> | 1682 <a href="https://SWStudios.net/">SWStudios.net</a> | 1683 <a href="https://sonofwaves.studio/video">SWS Video</a> | 1684 <a href="https://DoubleMirrors.com/">DoubleMirrors.com</a> | 1685 <a href="https://www.DylanTauber.studio">DylanTauber.studio</a> | 1686 <a href="https://www.transcendentalelectronic.com">Transcendental</a> | 1687 <a href="https://Dolphin1.net">Dolphin1.net</a> | 1688 <a href="https://SonofWaves.net">SonofWaves</a> | 1689 <a href="https://SWStudios.net/island">Island</a> | 1690 <a href="https://DylanTauber.me">Me</a> | 1691 <a href="https://DolphinTrance.com">DolphinTrance</a> | 1692 <a href="https://DolphinNet.org">DolphinNet</a> | 1693 <a href="https://cyberartist.me">CyberArtist</a> | 1694 <a href="https://www.dolphinspirit.earth/artwork.html">Art</a> | 1695 <a href="https://SonofWaves.studio/photo">Photo</a> | 1696 <a href="https://www.dolphinspirit.earth/books.html">Books</a> | 1697 <a href="https://SonofWaves.studio/music">Music</a> 1698 </div> 1699</div> 1700 1701<style> 1702.sws-links { 1703 font-family: 'Montserrat', sans-serif; 1704 font-size: 13px; 1705 color: white; 1706 margin-top: 5px; 1707 line-height: 1.5; 1708 word-wrap: break-word; 1709} 1710.sws-links a { 1711 color: white; 1712 text-decoration: none; 1713 margin: 0 2px; 1714 display: inline; 1715} 1716.sws-links a:hover { 1717 background-color: #30dffa; 1718 color: black; 1719} 1720</style> 1721 1722 1723 <P><CENTER> </CENTER></P> 1724 <P><CENTER> </CENTER></P> 1725 1726 1727</BODY> 1728</HTML>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.