site/index.html 5.1 K raw
1
<!DOCTYPE html>
2
<html lang="en" class="bg-[#121113]">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Norns</title>
7
    <link rel="apple-touch-icon" sizes="180x180" href="https://norns.so/apple-touch-icon.png">
8
    <link rel="icon" type="image/png" sizes="32x32" href="https://norns.so/favicon-32x32.png">
9
    <link rel="icon" type="image/png" sizes="16x16" href="https://norns.so/favicon-16x16.png">
10
    <link rel="manifest" href="https://norns.so/site.webmanifest">
11
    <link rel="stylesheet" href="tailwindcss" />
12
    <meta name="theme-color" content="#121113">
13
    <meta name="description" content="Interoperable web components for decentralized apps">
14
15
    <!-- Facebook Meta Tags -->
16
    <meta property="og:url" content="https://norns.so">
17
    <meta property="og:type" content="website">
18
    <meta property="og:title" content="Norns">
19
    <meta property="og:description" content="Interoperable web components for decentralized apps">
20
    <meta property="og:image" content="/og.png">
21
22
    <!-- Twitter Meta Tags -->
23
    <meta name="twitter:card" content="summary_large_image">
24
    <meta property="twitter:domain" content="norns.so">
25
    <meta property="twitter:url" content="https://norns.so">
26
    <meta name="twitter:title" content="Norns">
27
    <meta name="twitter:description" content="Interoperable web components for decentralized apps">
28
    <meta name="twitter:image" content="/og.png">
29
</head>
30
<body class="bg-[#121113] text-white font-mono min-h-screen w-full flex flex-col items-center justify-start">
31
  <main class="flex items-center flex-col mt-8 mb-24">
32
  <div class="flex flex-col items-center gap-4 mb-8 max-w-[300px]">
33
    <img src="logo.svg" alt="norns logo" class="w-40 h-40" />
34
    <h1 class="text-5xl">norns</h1>
35
    <p class="text-sm text-center">Interopable web components for decentralized applications</p>
36
    <a href="https://github.com/stevedylandev/norns" target="_blank" class="inline-flex items-center gap-2 bg-[#1e1e1e] text-white no-underline py-3 px-5 rounded-md text-sm mt-4 transition-colors duration-200 hover:bg-[#444]">
37
      <img src="github.svg" alt="GitHub" class="w-4 h-4" />
38
      stevedylandev/norns
39
    </a>
40
  </div>
41
  <div class="flex flex-col items-start gap-16">
42
    <div class="flex flex-col items-start gap-4">
43
      <div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] flex items-center justify-center">
44
        <connect-wallet
45
          chain-id="11155111"
46
        ></connect-wallet>
47
      </div>
48
      <div class="text-xl text-[#ccc]">connect-wallet</div>
49
      <div class="bg-[#1e1e1e] border border-[#333] rounded-sm p-2 text-xs text-[#888] mt-2 text-center">
50
        npx norns-ui@latest add connect-wallet
51
      </div>
52
    </div>
53
54
    <div class="flex flex-col items-start gap-4">
55
      <div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] p-4 flex flex-col gap-4 items-center justify-center">
56
        <contract-call
57
          contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
58
          chain-id="11155111"
59
          method-name="increment"
60
          abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
61
          button-text="Increment"
62
        ></contract-call>
63
      </div>
64
      <div class="text-xl text-[#ccc]">contract-call</div>
65
      <div class="bg-[#1e1e1e] border border-[#333] rounded-sm p-2 text-xs text-[#888] mt-2 text-center">
66
        npx norns-ui@latest add contract-call
67
      </div>
68
    </div>
69
    <div class="flex flex-col items-start gap-4">
70
      <div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] p-4 flex flex-col gap-4 items-center justify-center">
71
        <contract-read
72
          contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
73
          chain-id="11155111"
74
          method-name="number"
75
          rpc-url="https://sepolia.drpc.org"
76
          abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
77
          button-text="Current Count"
78
        ></contract-read>
79
      </div>
80
      <div class="text-xl text-[#ccc]">contract-read</div>
81
      <div class="bg-[#1e1e1e] border border-[#333] rounded-sm p-2 text-xs text-[#888] mt-2 text-center">
82
        npx norns-ui@latest add contract-read
83
      </div>
84
    </div>
85
  </div>
86
  </main>
87
88
  <script src="../src/components/connect-wallet.js"></script>
89
  <script src="../src/components/contract-call.js"></script>
90
  <script src="../src/components/contract-read.js"></script>
91
</body>
92
</html>