OriginJS/index.html at main · dheeraz101/OriginJS · 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Origin.js - Content Origin, Made Visible</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
  <meta name="description" content="Origin.js is a tiny client-side library that makes content origin visible: author, source, date, and type surfaced directly in the UI." />
  <meta name="keywords" content="origin, attribution, content origin, author, source, date, type, javascript library, client-side, ui" />
  <meta name="author" content="Dheeraz V." />
  <link rel="apple-touch-icon" sizes="180x180" href="https://dheeraz.netlify.app/assets/yabp/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://dheeraz.netlify.app/assets/yabp/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://dheeraz.netlify.app/assets/yabp/favicon-16x16.png">
  <link rel="manifest" href="https://dheeraz.netlify.app/assets/yabp/site.webmanifest">
  <link rel="icon" href="https://dheeraz.netlify.app/assets/yabp/favicon.ico" type="image/x-icon">
  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <style>
    ::selection { background:#007aff; color:white; }
  </style>
</head>

<body class="bg-neutral-50 text-neutral-900 antialiased">

<!-- PAGE WRAPPER -->
<div class="max-w-6xl mx-auto px-6 py-24">

  <!-- HERO -->
  <section class="max-w-3xl">
    <h1 class="text-4xl md:text-5xl font-semibold tracking-tight">
      Origin.js
    </h1>

    <p class="mt-6 text-lg text-neutral-600">
      A tiny client-side library that makes content origin visible
      author, source, date, and type surfaced directly in the UI.
    </p>

    <div class="mt-8 rounded-xl bg-amber-50 border border-amber-200 p-4 text-amber-900">
      <strong>Important:</strong>
      Origin.js does not verify truth, authenticity, or ownership.
      It only displays origin metadata provided by the creator.
    </div>

    <!-- SCRIPT COPY BLOCK -->
    <div class="mt-10">
      <p class="text-sm text-neutral-500 mb-2">Include once:</p>

      <div class="relative rounded-xl bg-neutral-900 text-neutral-100 p-4 font-mono text-sm">
        <pre id="scriptCode">&lt;script src="https://originjs.netlify.app/origin.min.js"&gt;&lt;/script&gt;</pre>
        <button
          id="copyBtn"
          onclick="copyScript()"
          class="absolute top-3 right-3 flex items-center gap-1 text-xs bg-neutral-700 hover:bg-neutral-600 px-3 py-1 rounded-md transition"
        >
          <span id="copyIcon">
            <!-- copy icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
              viewBox="0 0 24 24" stroke="currentColor">
              <rect x="9" y="9" width="13" height="13" rx="2"></rect>
              <path d="M5 15V5a2 2 0 0 1 2-2h10"></path>
            </svg>
          </span>
          <span id="copyText">Copy</span>
        </button>
      </div>
    </div>
  </section>

  <!-- WHY -->
  <section class="mt-32 max-w-3xl">
    <h2 class="text-2xl font-semibold">Why this exists</h2>
    <p class="mt-4 text-neutral-600">
      Most content already has an origin, it’s just invisible.
      Buried in markup, lost when shared, or stripped entirely.
    </p>
    <p class="mt-3 text-neutral-600">
      Origin.js surfaces that information without adding
      backends, accounts, verification systems, or trust claims.
    </p>
  </section>

  <!-- HOW -->
  <section class="mt-24 max-w-3xl">
    <h2 class="text-2xl font-semibold">How it works</h2>
    <p class="mt-4 text-neutral-600">
      Add simple <code class="bg-neutral-200 px-1 rounded">data-origin-*</code>
      attributes to any element. Origin.js detects them automatically.
    </p>

    <div class="mt-6 rounded-xl bg-neutral-900 text-neutral-100 p-5 font-mono text-sm overflow-x-auto">
<pre>&lt;article
  data-origin-author="Jane Doe"
  data-origin-source="https://example.com"
  data-origin-date="2026-01-10T08:00:00Z"
  data-origin-type="blog"&gt;
&lt;/article&gt;</pre>
    </div>
  </section>

  <!-- MODES -->
  <section class="mt-24 max-w-3xl">
    <h2 class="text-2xl font-semibold">Optional behavior modes</h2>
    <p class="mt-4 text-neutral-600">
      Configuration is optional. If omitted, Origin.js works automatically.
    </p>

    <div class="mt-6 rounded-xl bg-neutral-900 text-neutral-100 p-5 font-mono text-sm">
<pre>&lt;script&gt;
window.ORIGIN_CONFIG = { mode: "hover" }
&lt;/script&gt;</pre>
    </div>

    <ul class="mt-6 space-y-2 text-neutral-600">
      <li><strong>auto</strong> - badge always visible (default)</li>
      <li><strong>hover</strong> - badge appears on hover or focus</li>
      <li><strong>manual</strong> - no badge; call <code>Origin.show(el)</code></li>
    </ul>
  </section>

  <!-- EXAMPLES -->
  <section class="mt-24">
    <h2 class="text-2xl font-semibold">Examples</h2>

    <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <a href="examples/blog.html"
        class="rounded-2xl border bg-white p-6 hover:shadow-lg transition">
        <h3 class="font-medium">Blog post</h3>
        <p class="mt-2 text-sm text-neutral-600">Article attribution</p>
      </a>

      <a href="examples/image.html"
        class="rounded-2xl border bg-white p-6 hover:shadow-lg transition">
        <h3 class="font-medium">Image</h3>
        <p class="mt-2 text-sm text-neutral-600">Visual content origin</p>
      </a>

      <a href="examples/ai.html"
        class="rounded-2xl border bg-white p-6 hover:shadow-lg transition">
        <h3 class="font-medium">AI-assisted</h3>
        <p class="mt-2 text-sm text-neutral-600">Disclosure example</p>
      </a>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="mt-40 text-sm text-neutral-400">
    <a href="https://www.buymeacoffee.com/dheeraz" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 50px !important;width: 180px !important;" ></a>
    <br /><br />
    Origin.js is a client-side UI utility.
    No backend. No tracking. No verification.
  </footer>
</div>

<!-- BACK TO TOP BUTTON -->
<button id="backToTopBtn" class="hidden fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 focus:outline-none transition">
  <i class="ri-arrow-up-line text-xl"></i> <!-- Remixicon Arrow Up Icon -->
</button>

<!-- COPY SCRIPT LOGIC -->
<script>
function copyScript() {
  const code = document.getElementById('scriptCode').innerText;
  const btn = document.getElementById('copyBtn');
  const text = document.getElementById('copyText');
  const icon = document.getElementById('copyIcon');

  navigator.clipboard.writeText(code).then(() => {
    text.textContent = 'Copied';

    icon.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4 text-green-400"
        fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round"
          stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
    `;

    btn.classList.remove('bg-neutral-700');
    btn.classList.add('bg-green-600');

    setTimeout(() => {
      text.textContent = 'Copy';
      btn.classList.remove('bg-green-600');
      btn.classList.add('bg-neutral-700');

      icon.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4"
          fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <rect x="9" y="9" width="13" height="13" rx="2"></rect>
          <path d="M5 15V5a2 2 0 0 1 2-2h10"></path>
        </svg>
      `;
    }, 1800);
  });
}
</script>

<!-- Back to Top Button Logic -->
<script>
  const backToTopBtn = document.getElementById('backToTopBtn');

  window.onscroll = function() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      backToTopBtn.classList.remove('hidden');  // Show the button
    } else {
      backToTopBtn.classList.add('hidden');     // Hide the button
    }
  };

  backToTopBtn.onclick = function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
</script>

<script src="origin.js"></script>
</body>
</html>