mirror of
https://codeberg.org/wownero/onion-wownero-blockchain-explorer-themefork.git
synced 2026-10-17 05:41:27 +02:00
🌸 Add Wownero pink/yellow theme with Wownero-chan mascot
- New pink & yellow CSS theme with gradient background - Glowing text effects and custom scrollbar - Wownero-chan mascot in bottom right corner - Updated header with doge-speak tagline - Added /img/ route for serving static images - Updated README with fork info and theme description
This commit is contained in:
@@ -1,6 +1,39 @@
|
||||
# Onion Monero Blockchain Explorer
|
||||
# 🌸 Wownero Blockchain Explorer 🌸
|
||||
|
||||
Currently available Monero blockchain explorers have several limitations which are of
|
||||
*Much privacy. Very blocks. Such wow.*
|
||||
|
||||
A Wownero-themed fork of the Onion Monero Blockchain Explorer with pink & yellow aesthetics and Wownero-chan mascot!
|
||||
|
||||

|
||||
|
||||
## What's Different in This Fork?
|
||||
|
||||
This fork adds a fun Wownero theme to the explorer:
|
||||
|
||||
- 💖 **Pink & Yellow color scheme** - Because Wownero is fun!
|
||||
- 🌙 **Dark purple gradient background** - Easy on the eyes
|
||||
- ✨ **Glowing text effects** - Such aesthetic, very wow
|
||||
- 🎀 **Wownero-chan mascot** - Bottom right corner cuteness
|
||||
- 🔗 **Custom styled buttons & links** - Pink → Yellow on hover
|
||||
- 📜 **Themed scrollbars** - Even the scrollbar is fabulous
|
||||
|
||||
## Upstream
|
||||
|
||||
This is a themed fork of:
|
||||
- **Original**: [moneroexamples/onion-monero-blockchain-explorer](https://github.com/moneroexamples/onion-monero-blockchain-explorer)
|
||||
|
||||
To pull upstream updates:
|
||||
```bash
|
||||
git remote add upstream https://github.com/moneroexamples/onion-monero-blockchain-explorer.git
|
||||
git fetch upstream
|
||||
git merge upstream/master
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Onion Wownero Blockchain Explorer
|
||||
|
||||
Currently available blockchain explorers have several limitations which are of
|
||||
special importance to privacy-oriented users:
|
||||
|
||||
- they use JavaScript,
|
||||
@@ -8,104 +41,68 @@ special importance to privacy-oriented users:
|
||||
- track users activities through google analytics,
|
||||
- are closed sourced,
|
||||
- are not available as hidden services,
|
||||
- do not support Monero testnet nor stagenet networks,
|
||||
- do not support testnet nor stagenet networks,
|
||||
- have limited JSON API.
|
||||
|
||||
|
||||
In this example, these limitations are addressed by development of
|
||||
an Onion Monero Blockchain Explorer. The example not only shows how to use
|
||||
Monero C++ libraries, but also demonstrates how to use:
|
||||
In this explorer, these limitations are addressed. The explorer not only shows how to use
|
||||
Wownero/Monero C++ libraries, but also demonstrates how to use:
|
||||
|
||||
- [crow](https://github.com/ipkn/crow) - C++ micro web framework
|
||||
- [mstch](https://github.com/no1msd/mstch) - C++ {{mustache}} templates
|
||||
- [json](https://github.com/nlohmann/json) - JSON for Modern C++
|
||||
- [fmt](https://github.com/fmtlib/fmt) - Small, safe and fast string formatting library
|
||||
|
||||
## Explorer hosts
|
||||
## Explorer Features
|
||||
|
||||
Clearnet versions:
|
||||
- [https://xmrchain.net/](https://xmrchain.net/) - https enabled, most popular and very stable.
|
||||
- [https://monerohash.com/explorer/](https://monerohash.com/explorer/) - nice looking one, https enabled.
|
||||
- [http://monerochain.com/](http://monerochain.com/) - JSON API based, multiple nodes.
|
||||
- [https://blox.minexmr.com/](https://blox.minexmr.com/) - - https enabled.
|
||||
- [https://community.xmr.to/explorer/mainnet/](https://community.xmr.to/explorer/mainnet/)
|
||||
The key features of the Wownero Blockchain Explorer are:
|
||||
|
||||
Testnet version:
|
||||
|
||||
- [https://testnet.xmrchain.com/](https://testnet.xmrchain.com/) - https enabled.
|
||||
- [https://community.xmr.to/explorer/testnet/](https://community.xmr.to/explorer/testnet/)
|
||||
|
||||
Stagenet version:
|
||||
|
||||
- [https://stagenet.xmrchain.net/](https://stagenet.xmrchain.net/)
|
||||
- [https://community.xmr.to/explorer/stagenet/](https://community.xmr.to/explorer/stagenet/)
|
||||
|
||||
i2p users (main Monero network):
|
||||
|
||||
- [http://7o4gezpkye6ekibhgpkg7v626ze4idsirapufzrefkdysa6zxhha.b32.i2p/](http://7o4gezpkye6ekibhgpkg7v626ze4idsirapufzrefkdysa6zxhha.b32.i2p/)
|
||||
|
||||
Alternative block explorers:
|
||||
|
||||
- [https://localmonero.co/blocks](https://localmonero.co/blocks)
|
||||
- [https://monerovision.com](https://monerovision.com)
|
||||
|
||||
|
||||
## Onion Monero Blockchain Explorer features
|
||||
|
||||
The key features of the Onion Monero Blockchain Explorer are:
|
||||
|
||||
- no cookies, no web analytics trackers, no images,
|
||||
- no cookies, no web analytics trackers, much privacy,
|
||||
- open sourced,
|
||||
- made fully in C++,
|
||||
- showing encrypted payments ID,
|
||||
- showing ring signatures,
|
||||
- showing transaction extra field,
|
||||
- showing public components of Monero addresses,
|
||||
- decoding which outputs and mixins belong to the given Monero address and viewkey,
|
||||
- can prove that you send Monero to someone,
|
||||
- showing public components of Wownero addresses,
|
||||
- decoding which outputs and mixins belong to the given Wownero address and viewkey,
|
||||
- can prove that you sent Wownero to someone,
|
||||
- detailed information about ring members, such as their age, timescale, and ring sizes,
|
||||
- showing number of amount output indices,
|
||||
- support Monero testnet and stagnet networks,
|
||||
- support testnet and stagenet networks,
|
||||
- tx checker and pusher for online pushing of transactions,
|
||||
- estimate possible spendings based on address and viewkey,
|
||||
- can provide total amount of all miner fees,
|
||||
- decoding encrypted payment id,
|
||||
- decoding outputs and proving txs sent to sub-address.
|
||||
- listing RandomX code for each block
|
||||
- decoding outputs and proving txs sent to sub-address,
|
||||
- listing RandomX code for each block,
|
||||
- **Wownero-chan in the corner!** 🎀
|
||||
|
||||
## Compilation
|
||||
|
||||
## Development branch
|
||||
#### Wownero download and compilation
|
||||
|
||||
Current development branch:
|
||||
First compile Wownero from source:
|
||||
|
||||
- https://github.com/moneroexamples/onion-monero-blockchain-explorer/tree/devel
|
||||
|
||||
Note: `devel` branch of the explorer follows `master` branch of the monero!
|
||||
|
||||
## Compilation on Ubuntu 18.04/20.04
|
||||
|
||||
|
||||
#### Monero download and compilation
|
||||
|
||||
To download and compile recent Monero follow instructions
|
||||
in the following link:
|
||||
|
||||
https://github.com/moneroexamples/monero-compilation/blob/master/README.md
|
||||
```bash
|
||||
git clone --recursive https://github.com/wownero/wownero.git
|
||||
cd wownero
|
||||
make -j$(nproc)
|
||||
```
|
||||
|
||||
##### Compile and run the explorer
|
||||
|
||||
Once the Monero compiles, the explorer can be downloaded and compiled
|
||||
Once Wownero compiles, the explorer can be downloaded and compiled
|
||||
as follows:
|
||||
|
||||
```bash
|
||||
# go to home folder if still in ~/monero
|
||||
# go to home folder if still in ~/wownero
|
||||
cd ~
|
||||
|
||||
# download the source code
|
||||
git clone https://github.com/moneroexamples/onion-monero-blockchain-explorer.git
|
||||
git clone https://codeberg.org/wownero/onion-wownero-blockchain-explorer-themefork.git
|
||||
|
||||
# enter the downloaded sourced code folder
|
||||
cd onion-monero-blockchain-explorer
|
||||
cd onion-wownero-blockchain-explorer-themefork
|
||||
|
||||
# make a build folder and enter it
|
||||
mkdir build && cd build
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
#include "src/MicroCore.h"
|
||||
|
||||
#include <fstream>
|
||||
#include <sstream>
|
||||
#include <regex>
|
||||
|
||||
using boost::filesystem::path;
|
||||
@@ -332,6 +333,43 @@ main(int ac, const char* av[])
|
||||
+ req.get_header_value("Host");
|
||||
};
|
||||
|
||||
// Serve static images (for Wownero theme)
|
||||
CROW_ROUTE(app, "/img/<string>")
|
||||
([](string filename) {
|
||||
// Only allow specific safe characters in filename
|
||||
static const regex safe_filename{"^[a-zA-Z0-9_-]+\\.(webp|png|jpg|gif|svg)$"};
|
||||
if (!regex_match(filename, safe_filename)) {
|
||||
return crow::response(404);
|
||||
}
|
||||
|
||||
string filepath = "./templates/img/" + filename;
|
||||
ifstream file(filepath, ios::binary);
|
||||
if (!file) {
|
||||
return crow::response(404);
|
||||
}
|
||||
|
||||
stringstream buffer;
|
||||
buffer << file.rdbuf();
|
||||
|
||||
crow::response res(buffer.str());
|
||||
|
||||
// Set content type based on extension
|
||||
if (filename.find(".webp") != string::npos)
|
||||
res.add_header("Content-Type", "image/webp");
|
||||
else if (filename.find(".png") != string::npos)
|
||||
res.add_header("Content-Type", "image/png");
|
||||
else if (filename.find(".jpg") != string::npos)
|
||||
res.add_header("Content-Type", "image/jpeg");
|
||||
else if (filename.find(".gif") != string::npos)
|
||||
res.add_header("Content-Type", "image/gif");
|
||||
else if (filename.find(".svg") != string::npos)
|
||||
res.add_header("Content-Type", "image/svg+xml");
|
||||
|
||||
// Cache for 1 day
|
||||
res.add_header("Cache-Control", "public, max-age=86400");
|
||||
return res;
|
||||
});
|
||||
|
||||
CROW_ROUTE(app, "/")
|
||||
([&]() {
|
||||
return myxmr::htmlresponse(xmrblocks.index2());
|
||||
|
||||
@@ -37,6 +37,7 @@ MicroCore::MicroCore():
|
||||
bool
|
||||
MicroCore::init(const string& _blockchain_path, network_type nt)
|
||||
{
|
||||
cout << _blockchain_path << endl;
|
||||
int db_flags = 0;
|
||||
|
||||
blockchain_path = _blockchain_path;
|
||||
|
||||
+166
-29
@@ -1,29 +1,39 @@
|
||||
/* Wownero Theme - Pink & Yellow - Much WOW! */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: white;
|
||||
background-color: black;
|
||||
color: #f8e1f4;
|
||||
background: linear-gradient(135deg, #1a0a1a 0%, #2d1f3d 50%, #1a0a1a 100%);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 a {
|
||||
color: #ff69b4 !important;
|
||||
text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4, 0 0 30px #ff69b4;
|
||||
}
|
||||
|
||||
h1 a:hover {
|
||||
color: #ffeb3b !important;
|
||||
text-shadow: 0 0 10px #ffeb3b, 0 0 20px #ffeb3b, 0 0 40px #ffeb3b;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: auto;
|
||||
width: 96%;
|
||||
/*border: 1px solid #73AD21;
|
||||
padding: 10px;*/
|
||||
}
|
||||
|
||||
tr, li, #pages, .info {
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size : 12px;
|
||||
font-size: 12px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
#pages
|
||||
{
|
||||
#pages {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@@ -32,24 +42,26 @@ td {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Links - Pink with yellow hover */
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: #ff69b4;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: #da70d6;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: white;
|
||||
color: #ffeb3b;
|
||||
text-shadow: 0 0 5px #ffeb3b;
|
||||
}
|
||||
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
form {
|
||||
@@ -57,18 +69,46 @@ form {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Search box styling */
|
||||
.style-1 input[type="text"] {
|
||||
padding: 2px;
|
||||
border: solid 1px #dcdcdc;
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #ff69b4;
|
||||
border-radius: 8px;
|
||||
background-color: #2d1f3d;
|
||||
color: #f8e1f4;
|
||||
transition: box-shadow 0.3s, border 0.3s;
|
||||
}
|
||||
|
||||
.style-1 input[type="text"]:focus,
|
||||
.style-1 input[type="text"].focus {
|
||||
border: solid 1px #707070;
|
||||
box-shadow: 0 0 5px 1px #969696;
|
||||
border: 2px solid #ffeb3b;
|
||||
box-shadow: 0 0 10px #ff69b4, 0 0 20px #ffeb3b;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.style-1 input[type="text"]::placeholder {
|
||||
color: #b794c7;
|
||||
}
|
||||
|
||||
/* Submit button styling */
|
||||
input[type="submit"] {
|
||||
padding: 8px 20px;
|
||||
border: 2px solid #ff69b4;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #ff69b4 0%, #da70d6 100%);
|
||||
color: #1a0a1a;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background: linear-gradient(180deg, #ffeb3b 0%, #ffc107 100%);
|
||||
border-color: #ffeb3b;
|
||||
box-shadow: 0 0 15px #ffeb3b;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
position: relative;
|
||||
min-height: 240px;
|
||||
@@ -81,12 +121,18 @@ form {
|
||||
}
|
||||
|
||||
.tab label {
|
||||
background: black;
|
||||
background: #2d1f3d;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #ff69b4;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
left: 1px;
|
||||
color: #ff69b4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab label:hover {
|
||||
background: #3d2f4d;
|
||||
}
|
||||
|
||||
.tab [type=radio] {
|
||||
@@ -97,17 +143,18 @@ form {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
background: black;
|
||||
background: #1a0a1a;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #ff69b4;
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type=radio]:checked ~ label {
|
||||
background: #505050 ;
|
||||
border-bottom: 1px solid white;
|
||||
background: #ff69b4;
|
||||
color: #1a0a1a;
|
||||
border-bottom: 1px solid #ff69b4;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -122,23 +169,26 @@ form {
|
||||
|
||||
input#toggle-1[type=checkbox] {
|
||||
position: absolute;
|
||||
/*top: -9999px;*/
|
||||
left: -9999px;
|
||||
|
||||
}
|
||||
|
||||
label#show-decoded-inputs {
|
||||
/*-webkit-appearance: push-button;*/
|
||||
/*-moz-appearance: button;*/
|
||||
display: inline-block;
|
||||
/*margin: 60px 0 10px 0;*/
|
||||
cursor: pointer;
|
||||
background-color: black;;
|
||||
color: white;
|
||||
background-color: #2d1f3d;
|
||||
color: #ff69b4;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: 1px solid #ff69b4;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
div#decoded-inputs{
|
||||
label#show-decoded-inputs:hover {
|
||||
background-color: #ff69b4;
|
||||
color: #1a0a1a;
|
||||
}
|
||||
|
||||
div#decoded-inputs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -146,3 +196,90 @@ div#decoded-inputs{
|
||||
input#toggle-1[type=checkbox]:checked ~ div#decoded-inputs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
background: linear-gradient(180deg, #ff69b4 0%, #da70d6 100%);
|
||||
color: #1a0a1a;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: rgba(255, 105, 180, 0.1);
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: rgba(45, 31, 61, 0.8);
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: rgba(255, 105, 180, 0.2);
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid rgba(255, 105, 180, 0.3);
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
/* Wownero-chan mascot */
|
||||
.wowchan-container {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.wowchan-container:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.wowchan-container img {
|
||||
max-height: 150px;
|
||||
filter: drop-shadow(0 0 10px #ff69b4);
|
||||
}
|
||||
|
||||
/* Footer styling */
|
||||
.footer-info {
|
||||
color: #b794c7;
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-info a {
|
||||
color: #ff69b4;
|
||||
}
|
||||
|
||||
/* Wow such blockchain */
|
||||
.wow-banner {
|
||||
color: #ffeb3b;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
text-shadow: 0 0 5px #ffeb3b;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1a0a1a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #ff69b4, #da70d6);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, #ffeb3b, #ffc107);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<div class="center">
|
||||
<div class="center footer-info">
|
||||
<h6 style="margin-top:10px">
|
||||
<a href="https://github.com/moneroexamples/onion-monero-blockchain-explorer">source code</a>
|
||||
<a href="https://wownero.org">wownero.org</a>
|
||||
| <a href="https://github.com/wownero/onion-wownero-blockchain-explorer">source code</a>
|
||||
| explorer version (api): {{git_branch_name}}-{{last_git_commit_date}}-{{last_git_commit_hash}} ({{api}})
|
||||
| wownero version: {{monero_version_full}}
|
||||
</h6>
|
||||
<p style="font-size: 11px; color: #da70d6;">Made with 💖 by the Wownero community</p>
|
||||
</div>
|
||||
|
||||
<!-- Wownero-chan mascot -->
|
||||
<div class="wowchan-container">
|
||||
<img src="/img/wowchan.webp" alt="Wownero-chan" title="Much WOW! Such privacy!">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
{{#refresh}}
|
||||
<meta http-equiv="refresh" content="10">
|
||||
{{/refresh}}
|
||||
<title>Onion Wownero Blockchain Explorer</title>
|
||||
<title>WOW! Wownero Blockchain Explorer</title>
|
||||
<!--<link rel="stylesheet" type="text/css" href="/css/style.css">-->
|
||||
<style type="text/css">
|
||||
{{#css_styles}}{{/css_styles}}
|
||||
@@ -18,8 +18,9 @@
|
||||
<div>
|
||||
|
||||
<div class="center">
|
||||
<h1 class="center"><a href="/">Onion Wownero Blockchain Explorer</a></h1>
|
||||
<h4 style="font-size: 15px; margin: 0px">(no javascript - no cookies - no web analytics trackers - no images - open sourced)</h4>
|
||||
<h1 class="center"><a href="/">🌸 Wownero Blockchain Explorer 🌸</a></h1>
|
||||
<h4 style="font-size: 15px; margin: 0px; color: #b794c7;">(no javascript - no cookies - no trackers - much privacy - very wow)</h4>
|
||||
<p class="wow-banner">✨ such blocks, many transactions, wow ✨</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Reference in New Issue
Block a user