rawbrowser/offline.html at main · sharp4real/rawbrowser · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Internet — RAW Browser</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #080808; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #fff;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 32px 24px;
}

#icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0,212,200,.07);
  border: 1px solid rgba(0,212,200,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  box-shadow: 0 0 40px rgba(0,212,200,.08);
}

#heading {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: -.3px;
  margin-bottom: 10px;
}

#subtext {
  font-size: 13px;
  color: rgba(255,255,255,.3);
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 32px;
}

#retry-btn {
  padding: 11px 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,212,200,.45);
  background: rgba(0,212,200,.1);
  color: #00d4c8;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
  letter-spacing: .01em;
}
#retry-btn:hover { background: rgba(0,212,200,.2); }
#retry-btn:active { transform: scale(.97); }
#retry-btn:disabled { opacity: .5; cursor: default; transform: none; }

#status-msg {
  font-size: 12px;
  color: rgba(255,80,80,.8);
  min-height: 18px;
  margin-top: 14px;
  transition: opacity .3s;
}
</style>
</head>
<body>

<div id="ui">
  <div id="icon">
    <svg width="34" height="34" viewBox="0 0 34 34" fill="none">
      <path d="M4 10C7.5 6.5 12 4.5 17 4.5s9.5 2 13 5.5" stroke="rgba(0,212,200,.25)" stroke-width="2" stroke-linecap="round"/>
      <path d="M7.5 14.5C10 12 13.3 10.5 17 10.5s7 1.5 9.5 4" stroke="rgba(0,212,200,.4)" stroke-width="2" stroke-linecap="round"/>
      <path d="M11.5 19C13 17.5 14.9 16.5 17 16.5s4 1 5.5 2.5" stroke="rgba(0,212,200,.6)" stroke-width="2" stroke-linecap="round"/>
      <line x1="5" y1="5" x2="29" y2="29" stroke="#f87171" stroke-width="1.8" stroke-linecap="round"/>
      <circle cx="17" cy="26" r="2.2" fill="rgba(0,212,200,.5)"/>
    </svg>
  </div>

  <div id="heading">You have no internet connection</div>
  <div id="subtext">Check your Wi-Fi or network cable, then try again.</div>

  <button id="retry-btn" onclick="doRetry()">Retry</button>
  <div id="status-msg"></div>
</div>

<script>
const _retryUrl = (function() {
  try { return decodeURIComponent(new URLSearchParams(window.location.search).get('url') || ''); }
  catch { return ''; }
})();

async function doRetry() {
  const btn = document.getElementById('retry-btn');
  const msg = document.getElementById('status-msg');
  btn.textContent = 'Checking\u2026'; btn.disabled = true;
  msg.textContent = '';
  try {
    const ctrl = new AbortController();
    const tid  = setTimeout(() => ctrl.abort(), 5000);
    const resp = await fetch('https://dns.google/resolve?name=google.com&type=A', { cache: 'no-store', signal: ctrl.signal });
    clearTimeout(tid);
    if (resp.ok) {
      if (_retryUrl) window.location.href = _retryUrl;
      else history.back();
      return;
    }
  } catch (_) {}
  btn.textContent = 'Retry'; btn.disabled = false;
  msg.textContent = 'Still offline \u2014 try again later.';
  setTimeout(() => { msg.textContent = ''; }, 3500);
}
</script>
</body>
</html>