🌸 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:
jwinterm
2025-12-25 08:07:21 -05:00
parent e8540e0c35
commit 07e99c272a
9 changed files with 281 additions and 99 deletions
+60 -63
View File
@@ -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!
![Wownero](https://wownero.org/images/wownero.png)
## 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
+38
View File
@@ -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());
+2 -1
View File
@@ -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;
@@ -102,7 +103,7 @@ MicroCore::get_block_by_height(const uint64_t& height, block& blk)
{
cerr << "Block of height " << height
<< " not found in the blockchain!"
<< e.what()
<< e.what()
<< endl;
return false;
+167 -30
View File
@@ -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,21 +69,49 @@ 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;
min-height: 240px;
clear: both;
margin: 25px 0;
}
@@ -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);
}
+10 -2
View File
@@ -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>
+4 -3
View File
@@ -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