https://hiveuprss.github.io/drip/

1<!doctype html>
2<html data-theme="light">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <meta
7      http-equiv="Content-Security-Policy"
8      content="
9      default-src 'none';
10      script-src 'self' https://esm.sh https://cdn.jsdelivr.net https://code.jquery.com;
11      style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
12      img-src * data: blob:;
13      connect-src https://api.deathwing.me https://api.hive.blog https://esm.sh https://cdn.jsdelivr.net ws://localhost:5173;
14      font-src 'self';
15      frame-src https://www.youtube.com https://www.youtube-nocookie.com https://3speak.tv https://odysee.com https://rumble.com;
16    "
17    />
18    <link
19      rel="stylesheet"
20      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
21      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
22      crossorigin="anonymous"
23    />
24    <link rel="stylesheet" href="thirdparty/fontawesome/css/all.min.css" />
25    <link rel="stylesheet" href="style.css" />
26    

26<script src="theme.js"></script>

26
27    

27<script
28      src="https://code.jquery.com/jquery-3.6.0.min.js"
29      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
30      crossorigin="anonymous"
31    ></script>

31
32    

32<script
33      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
34      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
35      crossorigin="anonymous"
36    ></script>

36
37
38    

38<script
39      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hive-tx.min.js"
40      integrity="sha384-sK7c3vlAGPdEXkxJPtXku2++tadZEGH1bFPve59a01+BkbT+qETDVDR4t+qpjjV0"
41      crossorigin="anonymous"
42    ></script>

42
43    <title>Drip</title>
44    <meta
45      name="description"
46      content="Discover a random recently-published post from the Hive blockchain. A fun way to explore Hive content."
47    />
48    <link rel="canonical" href="https://hiveuprss.github.io/drip/" />
49    <meta property="og:type" content="website" />
50    <meta property="og:url" content="https://hiveuprss.github.io/drip/" />
51    <meta property="og:title" content="Drip" />
52    <meta
53      property="og:description"
54      content="Discover a random recently-published post from the Hive blockchain. A fun way to explore Hive content."
55    />
56    <meta name="twitter:card" content="summary" />
57    <meta name="twitter:title" content="Drip" />
58    <meta
59      name="twitter:description"
60      content="Discover a random recently-published post from the Hive blockchain. A fun way to explore Hive content."
61    />
62  </head>
63  <body>
64    <!-- Header -->
65    <header class="app-header">
66      <a class="app-logo" href="#">
67        <img src="assets/hive-32.png" alt="Hive" />
68        Drip
69      </a>
70      <span class="header-tagline"
71        >Discover random posts from the Hive blockchain</span
72      >
73      <div class="header-spacer"></div>
74      <div class="header-right">
75        <div id="signin-container">
76          <form id="signin">
77            <div class="input-group">
78              <span class="input-group-text">@</span>
79              <input
80                type="text"
81                class="form-control"
82                placeholder="Username"
83                aria-label="Username"
84              />
85              <button class="btn btn-primary" type="submit" title="Sign in">
86                <i class="fas fa-sign-in-alt"></i>
87              </button>
88            </div>
89          </form>
90        </div>
91        <div id="signout-container" style="display: none">
92          <button class="btn-ghost" id="signout" title="Sign out">
93            <i class="fas fa-sign-out-alt"></i>
94          </button>
95        </div>
96        <button class="btn-ghost" id="theme-toggle" title="Toggle dark mode">
97          <i class="fas fa-moon"></i>
98        </button>
99      </div>
100    </header>
101
102    <!-- Content -->
103    <div class="main-wrap">
104      <div class="row g-4">
105        <div class="col-lg-9" id="hr-content"></div>
106        <div class="col-lg-3" id="hr-content-md"></div>
107      </div>
108    </div>
109
110    <!-- Action bar -->
111    <nav class="action-bar">
112      <a
113        class="btn-icon"
114        id="peakd"
115        href=""
116        title="View on PeakD"
117        target="_blank"
118      >
119        <img src="assets/peakd-16.png" alt="PeakD" />
120      </a>
121      <a
122        class="btn-icon"
123        id="hiveblog"
124        href=""
125        title="View on Hive.blog"
126        target="_blank"
127      >
128        <img src="assets/hive-16.png" alt="Hive.blog" />
129      </a>
130      <div class="sep"></div>
131      <button class="btn-icon" id="upvote" title="Upvote">
132        <i class="fa fa-heart"></i>
133      </button>
134      <div id="vote-weight-container">
135        <input
136          type="range"
137          id="vote-weight-slider"
138          min="1"
139          max="100"
140          step="1"
141          value="100"
142          list="vote-weight-ticks"
143        />
144        <datalist id="vote-weight-ticks">
145          <option value="25"></option>
146          <option value="50"></option>
147          <option value="75"></option>
148          <option value="100"></option>
149        </datalist>
150        <span id="vote-weight-label">100%</span>
151      </div>
152      <button class="btn-icon" id="follow" title="Follow">
153        <i class="fa fa-users"></i>
154      </button>
155      <button class="btn-icon" id="reblog" title="Reblog">
156        <i class="fa fa-share"></i>
157      </button>
158      <div class="sep"></div>
159      <button class="btn-icon btn-next-up next" id="next-up" title="Liked it – next post">
160        <i class="fa fa-thumbs-up"></i><i class="fa fa-chevron-right"></i>
161      </button>
162      <button class="btn-icon btn-next next" id="next-down" title="Not for me – next post">
163        <i class="fa fa-thumbs-down"></i><i class="fa fa-chevron-right"></i>
164      </button>
165      <span class="branding"
166        >Brought to you by
167        <a href="https://peakd.com/@hivetrending">@HiveTrending</a></span
168      >
169    </nav>
170
171    <!-- Vote weight popup (mobile) -->
172    <div id="vote-popup" aria-hidden="true">
173      <div id="vote-popup-inner">
174        <div class="vote-popup-header">

175          <span>Vote weight</span>
176          <button id="vote-popup-close" aria-label="Close">&#x2715;</button>
177        </div>
178        <div class="vote-popup-slider-row">
179          <input
180            type="range"
181            id="vote-popup-slider"
182            min="1"
183            max="100"
184            step="1"
185            value="100"
186            list="vote-popup-ticks"
187          />
188          <datalist id="vote-popup-ticks">
189            <option value="25"></option>
190            <option value="50"></option>
191            <option value="75"></option>
192            <option value="100"></option>
193          </datalist>
194          <span id="vote-popup-label">100%</span>
195        </div>
196        <button id="vote-popup-confirm">Upvote</button>
197      </div>
198    </div>
199
200    

200<script type="module" src="index.js"></script>

200
201  </body>
202</html>