MisakaNet/docs/search/danmaku-widget.html at main · ghzhost/MisakaNet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<!-- Danmaku Friction Wall Widget for MisakaNet (closes #513) -->
<!-- Include this snippet in any page. Minimal, opt-out, zero-track. -->
<style>
.danmaku-wall{position:fixed;bottom:0;right:10px;width:300px;max-height:50vh;background:#1a1a2e;border:1px solid #333;border-radius:12px 12px 0 0;z-index:10000;font:13px system-ui;overflow:hidden;transition:transform 0.3s}
.danmaku-wall.minimized{transform:translateY(calc(100% - 36px))}
.danmaku-header{padding:8px 12px;background:#16213e;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#e94560;font-weight:600;font-size:12px}
.danmaku-header .count{background:#e94560;color:#fff;border-radius:10px;padding:2px 8px;font-size:10px}
.danmaku-feed{max-height:calc(50vh - 36px - 50px);overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
.danmaku-msg{background:#0f3460;border-radius:8px;padding:6px 10px;color:#eaeaea;font-size:11px;line-height:1.4;animation:slideIn .3s ease}
.danmaku-msg .time{color:#666;font-size:10px}
.danmaku-send{display:flex;gap:4px;padding:6px 8px;border-top:1px solid #333}
.danmaku-send input{flex:1;background:#0f3460;border:none;color:#fff;padding:6px 8px;border-radius:6px;font-size:11px;outline:none}
.danmaku-send input::placeholder{color:#555}
.danmaku-send button{background:#e94560;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600}
.danmaku-optout{text-align:center;padding:2px;font-size:10px}
.danmaku-optout a{color:#555;text-decoration:none}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
</style>

<div class="danmaku-wall minimized" id="danmakuWall">
  <div class="danmaku-header" onclick="toggleDanmaku()">
    <span>⚡ Friction Sensor</span>
    <span class="count" id="danmakuCount">0</span>
  </div>
  <div class="danmaku-feed" id="danmakuFeed"></div>
  <div class="danmaku-send">
    <input type="text" id="danmakuInput" placeholder="Where did you get stuck?"
           onkeypress="if(event.key==='Enter')sendDanmaku()" maxlength="200">
    <button onclick="sendDanmaku()">Send</button>
  </div>
  <div class="danmaku-optout">
    <a href="#" onclick="optOut(event)">hide this (opt-out)</a>
  </div>
</div>

<script>
(function(){
  const wall=document.getElementById('danmakuWall');
  const feed=document.getElementById('danmakuFeed');
  const input=document.getElementById('danmakuInput');
  const count=document.getElementById('danmakuCount');
  let msgs=JSON.parse(localStorage.getItem('danmaku_msgs')||'[]');
  let visible=localStorage.getItem('danmaku_visible')!=='false';

  if(!visible){wall.style.display='none';return}
  if(localStorage.getItem('danmaku_minimized')==='true'){
    wall.classList.add('minimized');
  }

  function render(){
    feed.innerHTML=msgs.slice(-30).map(m=>
      '<div class="danmaku-msg"><span class="time">'+esc(m.time)+'</span> '+esc(m.text)+'</div>'
    ).join('');
    count.textContent=msgs.length;
    feed.scrollTop=feed.scrollHeight;
  }

  function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML}

  window.sendDanmaku=function(){
    const text=input.value.trim();
    if(!text)return;
    const msg={text,time:new Date().toLocaleTimeString(),url:location.pathname};
    msgs.push(msg);
    localStorage.setItem('danmaku_msgs',JSON.stringify(msgs));
    input.value='';
    render();
    wall.classList.remove('minimized');
    localStorage.setItem('danmaku_minimized','false');
  };

  window.toggleDanmaku=function(){
    wall.classList.toggle('minimized');
    localStorage.setItem('danmaku_minimized',wall.classList.contains('minimized'));
  };

  window.optOut=function(e){
    e.preventDefault();
    wall.style.display='none';
    localStorage.setItem('danmaku_visible','false');
  };

  render();
})();
</script>