majinboof-jw/art.html at main · rosics-code/majinboof-jw · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Archive Detail</title>
    <style>
        body { background-color: #000; color: #fff; font-family: Helvetica, Arial, sans-serif; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px; }
        .container { display: flex; width: 100%; max-width: 1100px; gap: 80px; align-items: flex-start; }
        .left { flex: 1.2; }
        .left img { width: 100%; border: 1px solid #1a1a1a; display: block; }
        .right { flex: 1; padding-top: 20px; }
        h1 { font-size: 2.2rem; text-transform: uppercase; margin: 0 0 15px 0; letter-spacing: -1px; }
        .status-tag { color: #888; letter-spacing: 2px; text-transform: uppercase; font-size: 0.7rem; margin-bottom: 15px; display: block; }
        .description { color: #777; line-height: 1.8; font-size: 0.95rem; margin-bottom: 30px; }
        .meta-box { background-color: #111; border-radius: 12px; padding: 20px; margin-bottom: 30px; border: 1px solid #222; }
        .meta-item { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
        .meta-item:last-child { margin-bottom: 0; }
        .meta-label { color: #555; }
        .meta-value { color: #bbb; }
        .back-btn { display: inline-block; color: #fff; text-decoration: none; font-size: 0.75rem; text-transform: uppercase; border: 1px solid #333; padding: 14px 28px; transition: 0.2s; }
        .back-btn:hover { border-color: #fff; background: #fff; color: #000; }
        #error-view { display: none; text-align: center; }
        @media (max-width: 900px) { .container { flex-direction: column; text-align: center; } }
    </style>
</head>
<body>
    <div class="container" id="main-view">
        <div class="left"><img id="art-image"></div>
        <div class="right">
            <span class="status-tag" id="art-status"></span>
            <h1 id="art-title"></h1>
            <p class="description" id="art-desc"></p>
            <div class="meta-box">
                <div class="meta-item"><span class="meta-label">📅 Release Date</span><span class="meta-value" id="release-val"></span></div>
                <div class="meta-item"><span class="meta-label">📂 Surface Date</span><span class="meta-value" id="surface-val"></span></div>
                <div class="meta-item"><span class="meta-label">🎨 Format</span><span class="meta-value">Digital Sketch</span></div>
            </div>
            <a href="index.html" class="back-btn">Return to Archive</a>
        </div>
    </div>
    <div id="error-view"><h1 style="color:#ff0000">ERROR_CODE: DATA_INVALID</h1><a href="index.html" class="back-btn">Return Home</a></div>

    <script>
        try {
            const params = new URLSearchParams(window.location.search);
            const v = params.get('v');
            if (!v) throw new Error();
            const decodedData = JSON.parse(decodeURIComponent(escape(atob(v))));

            document.getElementById('art-title').innerText = decodedData.t || 'N/A';
            document.getElementById('art-status').innerText = decodedData.s || 'N/A';
            document.getElementById('art-desc').innerText = decodedData.d || '';
            document.getElementById('release-val').innerText = decodedData.rd || 'N/A';
            document.getElementById('surface-val').innerText = decodedData.sd || 'N/A';
            document.getElementById('art-image').src = `./artwork/${decodedData.f}`;
            document.title = `${decodedData.t} | Archive`;
        } catch (e) {
            document.getElementById('main-view').style.display = 'none';
            document.getElementById('error-view').style.display = 'block';
        }
    </script>
</body>
</html>