aeonscript-io/index.html at main · aeonscript-spec/aeonscript-io · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AeonScript — Redirecting to the interactive 3D explainer</title>
<meta http-equiv="refresh" content="2; url=https://aeonscript.org/explainer-3d.html">
<meta name="description" content="AeonScript is an open standard for archiving information on DNA. Click through for the interactive 3D explainer at aeonscript.org.">
<meta property="og:title" content="AeonScript — interactive 3D explainer">
<meta property="og:description" content="Watch in 3D how AeonScript writes data into DNA — built to outlive its authors.">
<meta property="og:url" content="https://aeonscript.io">
<meta property="og:image" content="https://aeonscript.org/og-image.svg">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23000'/%3E%3Cpath d='M9 8 Q16 16 23 8 M9 16 Q16 24 23 16 M9 24 Q16 32 23 24' stroke='%2300d4a8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E">
<style>
  :root {
    --bg: #0a0a0b;
    --text: #e8e8ec;
    --dim: #8a8a96;
    --accent: #00d4a8;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  .stage {
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    position: relative;
  }
  .helix {
    width: 80px;
    height: 80px;
    margin: 0 auto 28px;
    animation: spin 6s linear infinite;
  }
  @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

  h1 {
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 600;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #a0a0b0 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  h1 em { color: var(--accent); font-style: normal; -webkit-text-fill-color: var(--accent); }
  .sub {
    font-size: clamp(15px, 2vw, 18px);
    color: var(--dim);
    max-width: 540px;
    margin: 0 auto 28px;
    line-height: 1.55;
  }
  .dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(0, 212, 168, 0.08);
    border: 1px solid rgba(0, 212, 168, 0.25);
    border-radius: 100px;
    font-family: "SF Mono", "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 22px;
  }
  .dot::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent); border-radius: 50%;
    animation: pulse 1.2s infinite;
  }
  @keyframes pulse { 50% { opacity: 0.3; } }

  .links {
    margin-top: 18px;
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  }
  .btn {
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .15s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .btn-primary { background: var(--accent); color: #001a14; font-weight: 600; }
  .btn-primary:hover { background: #00f0c0; transform: translateY(-1px); }
  .btn-secondary { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.15); }
  .btn-secondary:hover { border-color: var(--dim); background: rgba(255,255,255,0.03); }

  .footer-note {
    position: absolute;
    bottom: 24px; left: 0; right: 0;
    text-align: center;
    color: #4a4a55;
    font-size: 12px;
    font-family: "SF Mono", monospace;
  }
  .footer-note .from { color: var(--accent); }
</style>
</head>
<body>
  <div class="stage">
    <div>
      <svg class="helix" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 6 Q16 16 26 6 M6 16 Q16 26 26 16 M6 26 Q16 36 26 26" stroke="#00d4a8" fill="none" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <div class="dot">redirection vers aeonscript.org</div>
      <h1>AeonScript — <em>3D interactive</em></h1>
      <p class="sub">
        Voici comment on écrit des données dans l'ADN — en 3D, en 90 secondes. La page est en cours de chargement.
      </p>
      <div class="links">
        <a class="btn btn-primary" href="https://aeonscript.org/explainer-3d.html">Continuer maintenant →</a>
        <a class="btn btn-secondary" href="https://aeonscript.org">Site principal</a>
      </div>
    </div>
    <div class="footer-note">
      <span class="from">aeonscript.io</span> → aeonscript.org/explainer-3d.html
    </div>
  </div>
  <script>
    // Belt-and-braces redirect after 2.2s (meta-refresh handles 2s; JS is a fallback)
    setTimeout(() => { window.location.replace("https://aeonscript.org/explainer-3d.html"); }, 2200);
  </script>
</body>
</html>