v4/chatroom.html at main · OutRed/v4 · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Chat — OutRed | Unblocked Games Community</title>
  <meta name="theme-color" content="#e63946" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/style.css" />
  <link id="favicon" rel="shortcut icon" href="/assets/favicon.png" type="image/x-icon" />
  <link rel="manifest" href="/assets/json/manifest.json" />
  <script src="/js/tabcloak.js"></script>
  <style>
    /* Warning modal */
    .warning-overlay {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    .warning-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 40px 36px;
      max-width: 480px; width: 100%;
      text-align: center;
      box-shadow: var(--shadow-lg);
    }
    .warning-modal img {
      width: 80px; height: 80px;
      margin: 0 auto 20px;
      opacity: 0.9;
    }
    .warning-modal h2 {
      font-size: 1.4rem; margin-bottom: 14px;
    }
    .warning-modal p {
      font-size: 0.875rem; color: var(--text-muted);
      line-height: 1.7; margin-bottom: 28px;
    }
    .warning-actions {
      display: flex; gap: 12px; justify-content: center;
    }

    /* Chat embed area */
    .chat-wrap {
      width: 100%; max-width: 1100px;
      margin: 0 auto;
      padding: 28px 28px 64px;
      display: flex; flex-direction: column; gap: 16px;
    }
    .chat-header {
      display: flex; align-items: center; gap: 12px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    .chat-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: #57f287; box-shadow: 0 0 8px #57f28788;
      flex-shrink: 0;
    }
    .chat-embed {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      height: calc(100vh - var(--nav-h) - 140px);
      min-height: 500px;
    }
    .chat-embed widgetbot,
    .chat-embed iframe {
      width: 100% !important;
      height: 100% !important;
      border: none;
    }

    /* AD slot below chat */
    .chat-ad { margin-top: 8px; }
  </style>
</head>
<body>

<!-- Warning Modal -->
<div class="warning-overlay" id="warning-overlay">
  <div class="warning-modal">
    <img src="/assets/img/warning.png" alt="Warning" draggable="false" />
    <h2>Heads up</h2>
    <p>
      This chatroom is powered by our Discord server and is <strong>not moderated</strong> by OutRed.
      You may encounter inappropriate messages or behavior.
      By continuing, you acknowledge that OutRed is not responsible for any content within the chat.
    </p>
    <div class="warning-actions">
      <a href="/apps.html" class="btn btn-secondary">Go Back</a>
      <button class="btn btn-primary" onclick="enterChat()">
        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        Enter Chat
      </button>
    </div>
  </div>
</div>

<div class="page">
  <div class="chat-wrap" id="chat-content" style="display:none;">

    <!-- Header -->
    <div class="chat-header">
      <div class="chat-dot"></div>
      <div>
        <div style="font-weight:700; font-size:1rem;">OutRed Community Chat</div>
        <div style="font-size:0.78rem; color:var(--text-muted);">Powered by Discord · <a href="https://discord.gg/MUqwxXUHS7" target="_blank" rel="noopener" style="color:var(--accent);">Open in Discord ↗</a></div>
      </div>
    </div>

    <!-- AD: above chat embed -->
    <div class="ad-slot ad-full-banner" id="ad-chat-top">
      <!-- REPLACE with ad tag (728×90) -->
    </div>

    <!-- Discord Widgetbot embed -->
    <div class="chat-embed">
      <widgetbot
        server="1012472708010889217"
        channel="1056002719757914212"
      ></widgetbot>
      <script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>
    </div>

    <!-- AD: below chat -->
    <div class="ad-slot ad-full-banner chat-ad" id="ad-chat-bottom">
      <!-- REPLACE with ad tag -->
    </div>

  </div>
</div>

<script src="/js/core.js"></script>
<script>
  function enterChat() {
    document.getElementById('warning-overlay').style.display = 'none';
    document.getElementById('chat-content').style.display = 'block';
    sessionStorage.setItem('chat-ok', '1');
  }

  // Skip warning if already accepted this session
  if (sessionStorage.getItem('chat-ok')) enterChat();
</script>

</body>
</html>