PageSourceSearch

https://www.303net.com/blog/

html 303net.com collected 2026-10-06 13:17:58 UTC 54,140 bytes, 1,728 lines download raw bytes

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">&times;</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">&mdash;</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,'&quot;')}</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,'&quot;');
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=&quot;x-www-form-urlencoded&quot;" 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>&nbsp;</CENTER></P>
1724	 <P><CENTER>&nbsp;</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.