fresh new version
This commit is contained in:
anon
commit
48e7175b5e
137 changed files with 84152 additions and 0 deletions
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
__pycache__/
|
||||
venv/
|
||||
*.sqlite3
|
||||
migrations/
|
||||
service_account_credentials.json
|
||||
1
Procfile
Normal file
1
Procfile
Normal file
|
|
@ -0,0 +1 @@
|
|||
web: gunicorn bitbens.wsgi --log-file -
|
||||
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# moneropro
|
||||
|
||||
License: MIT
|
||||
23
license.md
Normal file
23
license.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
MIT License
|
||||
|
||||
## Released under MIT License
|
||||
|
||||
Copyright (c) 2022 CryptoMorpheus_ (Ben H. G.)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
22
manage.py
Executable file
22
manage.py
Executable file
|
|
@ -0,0 +1,22 @@
|
|||
#!/usr/bin/env python
|
||||
"""Django's command-line utility for administrative tasks."""
|
||||
import os
|
||||
import sys
|
||||
|
||||
|
||||
def main():
|
||||
"""Run administrative tasks."""
|
||||
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'moneropro.settings')
|
||||
try:
|
||||
from django.core.management import execute_from_command_line
|
||||
except ImportError as exc:
|
||||
raise ImportError(
|
||||
"Couldn't import Django. Are you sure it's installed and "
|
||||
"available on your PYTHONPATH environment variable? Did you "
|
||||
"forget to activate a virtual environment?"
|
||||
) from exc
|
||||
execute_from_command_line(sys.argv)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
3
monerojnet/admin.py
Normal file
3
monerojnet/admin.py
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
from django.contrib import admin
|
||||
|
||||
# Register your models here.
|
||||
5
monerojnet/apps.py
Normal file
5
monerojnet/apps.py
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class MonerojnetConfig(AppConfig):
|
||||
name = 'monerojnet'
|
||||
46
monerojnet/models.py
Normal file
46
monerojnet/models.py
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
from __future__ import unicode_literals
|
||||
from django.contrib.postgres.fields import ArrayField
|
||||
from django.contrib.auth.models import User
|
||||
from django.db import models
|
||||
|
||||
# Create your models here.
|
||||
class Coin(models.Model):
|
||||
name = models.CharField(max_length=4)
|
||||
date = models.DateField()
|
||||
priceusd = models.FloatField()
|
||||
pricebtc = models.FloatField()
|
||||
inflation = models.FloatField()
|
||||
transactions = models.FloatField()
|
||||
hashrate = models.FloatField()
|
||||
stocktoflow = models.FloatField()
|
||||
supply = models.FloatField()
|
||||
fee = models.FloatField(default="0")
|
||||
revenue = models.FloatField(default="0")
|
||||
def __str__(self):
|
||||
return self.priceusd
|
||||
|
||||
class Social(models.Model):
|
||||
name = models.CharField(max_length=4)
|
||||
date = models.DateField()
|
||||
subscriberCount = models.IntegerField()
|
||||
commentsPerHour = models.FloatField()
|
||||
postsPerHour = models.FloatField()
|
||||
|
||||
def __str__(self):
|
||||
return self.subscriberCount
|
||||
|
||||
class Dominance(models.Model):
|
||||
name = models.CharField(max_length=4)
|
||||
date = models.DateField()
|
||||
dominance = models.FloatField()
|
||||
|
||||
def __str__(self):
|
||||
return self.dominance
|
||||
|
||||
class Rank(models.Model):
|
||||
name = models.CharField(max_length=4)
|
||||
date = models.DateField()
|
||||
rank = models.IntegerField()
|
||||
|
||||
def __str__(self):
|
||||
return self.rank
|
||||
137
monerojnet/templates/monerojnet/about.html
Normal file
137
monerojnet/templates/monerojnet/about.html
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
{% load static %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card border-left-new">
|
||||
<img class="card-img-top" src="{% static 'img/morpheus.jpeg' %}" alt="Morpheus">
|
||||
</div>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-md-6 mb-4">
|
||||
<div class="alert alert-success" role="alert">
|
||||
Liked this project? Help support it, funding my CCS Proposal >
|
||||
<a href ="https://repo.getmonero.org/monero-project/ccs-proposals/-/merge_requests/318" target="_blank">Link</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Hi there</h5>
|
||||
<p class="card-text">
|
||||
You can call me Morpheus. I made this website to help fellow members of Monero's
|
||||
community understand it, visualize adoption and to compare it against other
|
||||
projects such as Bitcoin or its competitors
|
||||
on the privacy market. This project was made without any intention for profit,
|
||||
and is maintained by my own funds. If you liked it and want to help
|
||||
the project, you can donate some XMR. Also, all type of suggestions are welcome!
|
||||
I do believe Monero is like no other currency, since it has true privacy
|
||||
(optional privacy is no privacy at all),
|
||||
and also serves as a store of value (since it has an already small and yet
|
||||
decreasing anual inflation). I also believe in Bitcoin, I believe Bitcoin will
|
||||
indeed achieve its value as Digital Gold, since it has gigantic brand
|
||||
recognition, besides its proved scarcity. However, for most transactions, if we
|
||||
truly want a digital world, we cant rely on open ledgers to do businesses. It is
|
||||
just simply a privacy nightmare to pay or receive payment from
|
||||
someone without using fungible money. Bitcoin is not fungible, which means
|
||||
different Bitcoins are different from each other, since both have different
|
||||
(and verifiable) history. Will you also take the red pill?
|
||||
</p>
|
||||
<a href="https://www.getmonero.org/" class="btn btn-danger">Take the Redpill</a>
|
||||
<a href="https://www.federalreserve.gov/" class="btn btn-primary">Take the
|
||||
Bluepill</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Twitter</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800"><a
|
||||
href="https://twitter.com/CryptoMorpheus_" target="_blank">@CryptoMorpheus_</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-twitter fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
E-mail</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800"><a
|
||||
href="mailto:morpheus.anonymous@protonmail.com" target="_blank">morpheus.anonymous@protonmail.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-envelope fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Github</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800"><a
|
||||
href="https://github.com/cryptomorpheuss/moneropro" target="_blank">cryptomorpheuss/moneropro</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="bx bxl-github fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
</div>
|
||||
<!-- End of Page Wrapper -->
|
||||
|
||||
{% endblock %}
|
||||
141
monerojnet/templates/monerojnet/articles.html
Normal file
141
monerojnet/templates/monerojnet/articles.html
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% load static %}
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<title>Moneroj.net</title>
|
||||
<meta content="" name="description">
|
||||
<meta content="" name="keywords">
|
||||
|
||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'img/favicon.png' %}" rel="icon">
|
||||
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
|
||||
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
|
||||
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
div.a {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.color-orange {
|
||||
color: #ff4d21;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{% url 'monerojnet:index' %}"><i class="fab fa-monero"></i> Monero<text class="color-orange">j</text></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:sfmodel' %}">Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:articles' %}">Articles</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:about' %}">About</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown" >
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Languages
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">English</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:fr' %}">French</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:pt' %}">Portuguese</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
|
||||
<div class="container">
|
||||
<h1>Articles section is not ready yet!
|
||||
</h1>
|
||||
<h2>It's on our plan to build it, but we lack time for now. Check back later.</h2>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Hero -->
|
||||
|
||||
|
||||
<br><br><br><br><br><br>
|
||||
<!-- ======= Footer ======= -->
|
||||
<footer id="footer">
|
||||
|
||||
<div class="footer-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6 col-md-6 footer-contact">
|
||||
<h3>Moneroj.net</h3>
|
||||
<p>
|
||||
Developed by <br>
|
||||
Morpheus<br>
|
||||
<strong>Email:</strong> morpheus.anonymous@protonmail.com<br>
|
||||
<strong>Twitter:</strong> CryptoMorpheus_<br>
|
||||
<strong>Github:</strong> cryptomorpheuss<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 footer-links">
|
||||
<h4>Useful Links</h4>
|
||||
<ul>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:index' %}">Home</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:sfmodel' %}">Charts</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:about' %}">About</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.getmonero.org/">Getmonero.org</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.reddit.com/r/Monero/">Reddit/Monero</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container d-lg-flex py-4">
|
||||
<div class="mr-lg-auto text-center text-lg-left">
|
||||
<div class="copyright a">
|
||||
<strong>© Copyright <span>Moneroj.net</span></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-links text-center text-lg-right pt-3 pt-lg-0">
|
||||
<a href="https://twitter.com/CryptoMorpheus_" class="twitter"><i class="bx bxl-twitter"></i></a>
|
||||
<a href="https://github.com/cryptomorpheuss/moneropro" class="github"><i class="bx bxl-github"></i></a>
|
||||
<a href="mailto:morpheus.anonymous@protonmail.com" class="github"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<!-- End Footer -->
|
||||
|
||||
<!-- Vendor JS Files -->
|
||||
<script src="{% static 'vendor/jquery/jquery2.min.js' %}"></script>
|
||||
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
129
monerojnet/templates/monerojnet/artigos.html
Normal file
129
monerojnet/templates/monerojnet/artigos.html
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% load static %}
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<title>Moneroj.net</title>
|
||||
<meta content="" name="description">
|
||||
<meta content="" name="keywords">
|
||||
|
||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'img/favicon.png' %}" rel="icon">
|
||||
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
|
||||
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
|
||||
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
div.a {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.color-orange {
|
||||
color: #ff6b3b;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{% url 'monerojnet:index' %}"><i class="fab fa-monero"></i> Monero<text class="color-orange">j</text></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">Inicial <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:sfmodel' %}">Gráficos</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:artigos' %}">Artigos</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:about' %}">Sobre</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown" >
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Idiomas
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">Inglês</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:fr' %}">Francês</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:pt' %}">Português</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
|
||||
<div class="container">
|
||||
<h1>A seção de artigos ainda não está pronta.</h1>
|
||||
<h2>Volte novamente mais tarde.</h2>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Hero -->
|
||||
<br><br><br><br><br><br>
|
||||
<!-- ======= Footer ======= -->
|
||||
<footer id="footer">
|
||||
|
||||
<div class="footer-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6 col-md-6 footer-contact">
|
||||
<h3>Moneroj.net</h3>
|
||||
<p>
|
||||
Desenvolvido por<br>
|
||||
Morpheus<br>
|
||||
<strong>Email:</strong> morpheus.anonymous@protonmail.com<br>
|
||||
<strong>Twitter:</strong> CryptoMorpheus_<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 footer-links">
|
||||
<h4>Links úteis</h4>
|
||||
<ul>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:pt' %}">Página Inicial</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:sfmodel' %}">Gráficos</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:about' %}">Sobre</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.getmonero.org/">Getmonero.org</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.reddit.com/r/Monero/">Reddit/Monero</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container d-lg-flex py-4">
|
||||
|
||||
<div class="mr-lg-auto text-center text-lg-left">
|
||||
<div class="copyright a">
|
||||
<strong>© Copyright <span>Moneroj.net</span></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-links text-center text-lg-right pt-3 pt-lg-0">
|
||||
<a href="https://twitter.com/CryptoMorpheus_" class="twitter"><i class="bx bxl-twitter"></i></a>
|
||||
<a href="https://github.com/cryptomorpheuss/moneropro" class="github"><i class="bx bxl-github"></i></a>
|
||||
<a href="mailto:morpheus.anonymous@protonmail.com" class="github"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- End Footer -->
|
||||
|
||||
<!-- Vendor JS Files -->
|
||||
<script src="{% static 'vendor/jquery/jquery2.min.js' %}"></script>
|
||||
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
354
monerojnet/templates/monerojnet/base.html
Normal file
354
monerojnet/templates/monerojnet/base.html
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% load static %}
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Moneroj.net - Charts</title>
|
||||
|
||||
<link href="{% static 'img/favicon.png' %}" rel="icon">
|
||||
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
<link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.sidebar-brand {
|
||||
background-color: #ff4d21;
|
||||
}
|
||||
|
||||
.collapse-inner {
|
||||
background-color: #ffb6a0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
background-color: rgb(29, 26, 25);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgb(37, 34, 33);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: rgb(37, 34, 33);
|
||||
}
|
||||
|
||||
.border-left-new {
|
||||
border-left-color: rgb(221, 29, 29);
|
||||
border-left-width: 5px;
|
||||
}
|
||||
div.a {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Load plotly-->
|
||||
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#graph1.fullscreen {
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding: 0px;
|
||||
bottom: 0px;
|
||||
float: left;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#graph1 {
|
||||
height: 650px;
|
||||
}
|
||||
|
||||
#link_graph {
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
#link_graph:hover {
|
||||
color: #00FF00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
|
||||
<!-- Page Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<ul class="navbar-nav sidebar sidebar-dark accordion" id="accordionSidebar">
|
||||
|
||||
<!-- Sidebar - Brand -->
|
||||
<a class="sidebar-brand d-flex align-items-center justify-content-center"
|
||||
href="{% url 'monerojnet:index' %}">
|
||||
<div class="sidebar-brand-icon">
|
||||
<i class="fab fa-monero"></i>
|
||||
</div>
|
||||
<div class="sidebar-brand-text mx-3">Moneroj</div>
|
||||
</a>
|
||||
<br>
|
||||
<!-- Heading -->
|
||||
<div class="sidebar-heading">
|
||||
Metrics
|
||||
</div>
|
||||
<!-- Nav Item - Prices Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePrice"
|
||||
aria-expanded="true" aria-controls="collapsePrice">
|
||||
<i class="fas fa-dollar-sign"></i>
|
||||
<span>Price (14)</span>
|
||||
</a>
|
||||
<div id="collapsePrice" class="collapse" aria-labelledby="headingPrice"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:pricelog' %}">Price in Dollars (Log.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:pricelin' %}">Price in Dollars (Lin.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:pricesats' %}">Price in Sats (Lin.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:fractal' %}">Fractal Multiple</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:inflationfractal' %}">Inflation-Adjusted
|
||||
Fractal</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:golden' %}">Golden Ratio Multiplier</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:competitors' %}">Performance ($)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:competitorssats' %}">Performance (Sats, log)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:competitorssatslin' %}">Performance (Sats, lin.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:inflationreturn' %}">Return vs. Inflation</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:bitcoin' %}">Comparison to Bitcoin</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:powerlaw' %}">Power Law</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:thermocap' %}">Thermocap Multiple</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:sharpe' %}">Sharpe Ratio</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Nav Item - Marketcap Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseMarketcap"
|
||||
aria-expanded="true" aria-controls="collapseMarketcap">
|
||||
<i class="fas fa-dollar-sign"></i>
|
||||
<span>Marketcap (3)</span>
|
||||
</a>
|
||||
<div id="collapseMarketcap" class="collapse" aria-labelledby="headingMarketcap"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:dominance' %}">Dominance</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:rank' %}">Coinmarketcap Rank</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:marketcap' %}">Marketcap</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Nav Item - Transactions Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTransactions"
|
||||
aria-expanded="true" aria-controls="collapseTransactions">
|
||||
<i class="fas fa-exchange-alt"></i>
|
||||
<span>Transactions (7)</span>
|
||||
</a>
|
||||
<div id="collapseTransactions" class="collapse" aria-labelledby="headingTransactions"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:translin' %}">Transaction Count (Lin.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:translog' %}">Transaction Count (Log.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:transcost' %}">Transaction Cost ($)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:transcostntv' %}">Transaction Cost (Ntv.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:percentage' %}">Transaction Percentage</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:metcalfesats' %}">Metcalfe's Law (Sats)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:metcalfeusd' %}">Metcalfe's Law ($)</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Nav Item - Issuance Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseIssuance"
|
||||
aria-expanded="true" aria-controls="collapseIssuance">
|
||||
<i class="fas fa-chart-area"></i>
|
||||
<span>Issuance (6)</span>
|
||||
</a>
|
||||
<div id="collapseIssuance" class="collapse" aria-labelledby="headingIssuance"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:coins' %}">Coins in Circulation</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:extracoins' %}">Supply Difference</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:inflation' %}">Annual Inflation</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:compinflation' %}">Competitors' Inflation</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:dailyemission' %}">Daily Emission ($)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:dailyemissionntv' %}">Daily Emission (Ntv.)</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Nav Item - Stock-to-flow Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseSF"
|
||||
aria-expanded="true" aria-controls="collapseSF">
|
||||
<i class="fas fa-coins"></i>
|
||||
<span>Stock-to-flow (3)</span>
|
||||
</a>
|
||||
<div id="collapseSF" class="collapse" aria-labelledby="headingSF" data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:sfmodel' %}">Stock-to-flow (Log.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:sfmodellin' %}">Stock-to-flow (Lin.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:sfmultiple' %}">Stock-to-flow Multiple</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Nav Item - Stock-to-flow Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseMining"
|
||||
aria-expanded="true" aria-controls="collapseMining">
|
||||
<i class="fas fa-calculator"></i>
|
||||
<span>Mining (10)</span>
|
||||
</a>
|
||||
<div id="collapseMining" class="collapse" aria-labelledby="headingMining"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:hashrate' %}">Hashrate</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:hashprice' %}">Price Per Hashrate</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:hashvsprice' %}">Hashrate Vs Price</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:minerrev' %}">Miner Revenue ($)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:minerrevntv' %}">Miner Revenue (Ntv.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:minerfees' %}">Miner Fees ($)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:minerfeesntv' %}">Miner Fees (Ntv.)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:minerrevcap' %}">Revenue / Marketcap (%)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:commit' %}">Miner Commitment ($)</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:commitntv' %}">Miner Commitment (Ntv.)</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider">
|
||||
|
||||
<!-- Heading -->
|
||||
<div class="sidebar-heading">
|
||||
Social
|
||||
</div>
|
||||
<!-- Nav Item - Social Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseSocial"
|
||||
aria-expanded="true" aria-controls="collapseSocial">
|
||||
<i class="fab fa-reddit-alien"></i>
|
||||
<span>Reddit (7)</span>
|
||||
</a>
|
||||
<div id="collapseSocial" class="collapse" aria-labelledby="headingSocial"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:social' %}">Total Subscribers</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:social6' %}">Daily Comments</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:social7' %}">Daily Posts</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:social4' %}">Monthly Increase</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:social2' %}">Dollars / Subscriber</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:social3' %}">Subscribers Percentage</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:social5' %}">Subscribers & Transac.</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Nav Item - Darknet Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseDarknet"
|
||||
aria-expanded="true" aria-controls="collapseDarknet">
|
||||
<i class="far fa-eye-slash"></i>
|
||||
<span>Darknet (1)</span>
|
||||
</a>
|
||||
<div id="collapseDarknet" class="collapse" aria-labelledby="headingDarknet"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:dread_subscribers' %}">Dread Subscribers</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Nav Item - Adoption Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseAdoption"
|
||||
aria-expanded="true" aria-controls="collapseAdoption">
|
||||
<i class="fas fa-store"></i>
|
||||
<span>Adoption (4)</span>
|
||||
</a>
|
||||
<div id="collapseAdoption" class="collapse" aria-labelledby="headingDarknet"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:coincards' %}">Coincards Usage</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:merchants' %}">Merchant Acceptance</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:merchants_increase' %}">Merchant Increase</a>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:merchants_percentage' %}">Merchant Increase (%)</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Nav Item - Trends Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTrends"
|
||||
aria-expanded="true" aria-controls="collapseTrends">
|
||||
<i class="fab fa-google"></i>
|
||||
<span>Google Trends (1)</span>
|
||||
</a>
|
||||
<div id="collapseTrends" class="collapse" aria-labelledby="headingTrends"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Charts:</h6>
|
||||
<a class="collapse-item"
|
||||
href="https://trends.google.com/trends/explore?date=today%205-y&q=monero"
|
||||
target="_blank">Google Trends</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider d-none d-md-block">
|
||||
<!-- Heading -->
|
||||
<div class="sidebar-heading">
|
||||
Others
|
||||
</div>
|
||||
<!-- Nav Item - Others Collapse Menu -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseOthers"
|
||||
aria-expanded="true" aria-controls="collapseOthers">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<div id="collapseOthers" class="collapse" aria-labelledby="headingOthers"
|
||||
data-parent="#accordionSidebar">
|
||||
<div class="py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header text-dark">Info:</h6>
|
||||
<a class="collapse-item" href="{% url 'monerojnet:about' %}">About Us</a>
|
||||
<a class="collapse-item" href="https://twitter.com/CryptoMorpheus_" target="_blank">Twitter</a>
|
||||
<a class="collapse-item" href ="https://repo.getmonero.org/monero-project/ccs-proposals/-/merge_requests/318" target="_blank">CCS Proposal Link</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
<!-- End of Sidebar -->
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
|
||||
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
522
monerojnet/templates/monerojnet/bitcoin.html
Normal file
522
monerojnet/templates/monerojnet/bitcoin.html
Normal file
|
|
@ -0,0 +1,522 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Comparison to Bitcoin
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph2">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Comparison to Bitcoin (aligned)
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph3" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
These three charts show the comparison between Bitcoin's and Monero's prices since inception. On the
|
||||
first chart, both coins are compared with the X axis being the current
|
||||
date those prices happened. For the second chart, I placed both first local tops at the "day zero", and
|
||||
it is easily visible how both coins are very similar. While BTC took 900
|
||||
days to achieve 37x return, Monero took 1279 days to give 95x return. Since Monero's cycle is longer in
|
||||
days because it somewhat depends on how much time Bitcoin's bull market
|
||||
will take to finnish (and each cycle takes more time than the previous), Monero's return in one whole
|
||||
bull market was much better than Bitcoin's. I plotted this chart in order
|
||||
to make evident how the narrative that "Bitcoin is better any other coins" can be somehow too narrow.
|
||||
The last chart has a distorted time scale to show how both coins
|
||||
look very much like the other, and in fact it seems Monero is printing a fractal from Bitcoin's second
|
||||
cycle... but with a better return on capital.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Return on Capital',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ btc2|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Return on Capital',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ btc2|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return on Capital',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ xmr2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return on Capital',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ xmr2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Return on Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ btc|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Return on Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ btc|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return on Capital',
|
||||
x: {{ dates4|safe }},
|
||||
y: {{ xmr3|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return on Capital',
|
||||
x: {{ dates4|safe }},
|
||||
y: {{ xmr3|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data1];
|
||||
var data_2 = [data4, data5];
|
||||
var data_mobile = [data2_mobile, data1_mobile];
|
||||
var data_mobile_2 = [data4_mobile, data5_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj <br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Multiple from previous top',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2011-01-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout2 = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Multiple from previous top',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.0f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['0', '4400']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-01-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
var layout2_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.0f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['0', '4200']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
document.getElementById("graph2").style.height="350px";
|
||||
Plotly.newPlot('graph3', data_mobile_2, layout2_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
document.getElementById("graph2").style.height="700px";
|
||||
Plotly.newPlot('graph3', data_2, layout2, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
424
monerojnet/templates/monerojnet/coincards.html
Normal file
424
monerojnet/templates/monerojnet/coincards.html
Normal file
|
|
@ -0,0 +1,424 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Coincards Usage (%)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Ethereum</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_eth }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-ethereum fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Others</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_others }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Coincards usage (percentage).<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Dominance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Dominance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Dominance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 5
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Dominance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 5
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ethereum Dominance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data3|safe }},
|
||||
line: {
|
||||
color: '#0044ff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ethereum Dominance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data3|safe }},
|
||||
line: {
|
||||
color: '#0044ff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Others',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data4|safe }},
|
||||
line: {
|
||||
color: '#999999'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Others',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data4|safe }},
|
||||
line: {
|
||||
color: '#999999'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data3, data4, data2];
|
||||
var data_mobile = [data1_mobile, data3_mobile, data4_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Percentage (%)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2021-03-01', '2022-08-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2021-03-01', '2022-08-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
392
monerojnet/templates/monerojnet/coins.html
Normal file
392
monerojnet/templates/monerojnet/coins.html
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Coins in Circulation
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero's Supply</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }} XMR</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin's Supply</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }} BTC</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total issuance in units of both Bitcoin and Monero. You can see Monero is a younger
|
||||
project, since it started after. Both coins
|
||||
were distributed to miners, without premine. The main difference is Monero will be scarce comparing to
|
||||
Bitcoin until Bitcoin's next halving.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Supply',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ supplyxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Supply',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ supplyxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Supply',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ supplybtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Supply',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ supplybtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Future Supply',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ fsupplyxmr|safe }},
|
||||
line: {
|
||||
color: '#aa0d0d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Future Supply',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ fsupplyxmr|safe }},
|
||||
line: {
|
||||
color: '#aa0d0d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Future Supply',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ fsupplybtc|safe }},
|
||||
line: {
|
||||
color: '#99a300'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Future Supply',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ fsupplybtc|safe }},
|
||||
line: {
|
||||
color: '#99a300'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data3, data1, data4];
|
||||
var data_mobile = [data2_mobile, data3_mobile, data1_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Coins',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2009-01-01', '2045-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-01-01', '2045-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
345
monerojnet/templates/monerojnet/commit.html
Normal file
345
monerojnet/templates/monerojnet/commit.html
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Miner Commitment (Hashrate divided by revenue, hashs/dollar) -
|
||||
WARNING: DON'T COMPARE DIRECTLY BOTH COINS</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Miner Commitment</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Miner Commitment</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows how much hashpower miners put into the network considering their revenue in dollars.
|
||||
Higher numbers mean miners expect the value of the coin to keep increasing, since no miner would
|
||||
increase hashpower if they didnt expect better returns.
|
||||
However Bitcoin's and Monero's hashpowers can't be directly compared. The viewer must only look for each
|
||||
coin's particular increase as a percentage of itself.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Commitment',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Commitment',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Commitment',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Commitment',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.75,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Miner Commitment (hashs/dollar)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
346
monerojnet/templates/monerojnet/commitntv.html
Normal file
346
monerojnet/templates/monerojnet/commitntv.html
Normal file
|
|
@ -0,0 +1,346 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Miner Commitment (Hashrate divided by revenue, hashs/coin) -
|
||||
WARNING: DON'T COMPARE DIRECTLY BOTH COINS</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Miner Commitment</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Miner Commitment</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows how much hashpower miners put into the network considering their revenue in native
|
||||
coins.
|
||||
Higher numbers mean miners expect the value of the coin to keep increasing, since no miner would
|
||||
increase hashpower if they didnt expect better returns.
|
||||
However Bitcoin's and Monero's hashpowers can't be directly compared. The viewer must only look for each
|
||||
coin's particular increase as a percentage of itself.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Commitment',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Commitment',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Commitment',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Commitment',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.75,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Miner Commitment (hashs/coin)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2011-03-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2011-03-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
427
monerojnet/templates/monerojnet/competitors.html
Normal file
427
monerojnet/templates/monerojnet/competitors.html
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Competitor Performance</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Dash's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Grin's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_grin }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Zcash's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_zcash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the comparison between Monero's most important competitors. It shows their return as a
|
||||
multiplication of the price on their respective first top.
|
||||
This chart shows clearly that the coin with the lowest inflation is the one that protects most the
|
||||
purchasing power of its holders. In this case, since Monero's Inflation
|
||||
is way lower than its competitors, it takes the cake as the best coin (or, in other words, the one that
|
||||
made people most for their money).<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ dash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ dash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ grin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ grin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ zcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ zcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2, data1, data4];
|
||||
var data_mobile = [data3_mobile, data2_mobile, data1_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Multiple from first top',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.0f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['1', '3200']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.0f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['1', '3200']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
427
monerojnet/templates/monerojnet/competitorssats.html
Normal file
427
monerojnet/templates/monerojnet/competitorssats.html
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Competitor Performance</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Dash's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Grin's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_grin }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Zcash's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_zcash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the comparison between Monero's most important competitors. It shows their return as a
|
||||
multiplication of the price on their respective first top.
|
||||
This chart shows clearly that the coin with the lowest inflation is the one that protects most the
|
||||
purchasing power of its holders. In this case, since Monero's Inflation
|
||||
is way lower than its competitors, it takes the cake as the best coin (or, in other words, the one that
|
||||
made people most for their money).<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ dash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ dash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ grin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ grin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ zcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ zcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2, data1, data4];
|
||||
var data_mobile = [data3_mobile, data2_mobile, data1_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Multiple from first top',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.3f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.0f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['1', '3500']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.3f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.0f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['1', '3500']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
427
monerojnet/templates/monerojnet/competitorssatslin.html
Normal file
427
monerojnet/templates/monerojnet/competitorssatslin.html
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Competitor Performance</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Dash's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Grin's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_grin }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Zcash's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_zcash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the comparison between Monero's most important competitors. It shows their return as a
|
||||
multiplication of the price on their respective first top.
|
||||
This chart shows clearly that the coin with the lowest inflation is the one that protects most the
|
||||
purchasing power of its holders. In this case, since Monero's Inflation
|
||||
is way lower than its competitors, it takes the cake as the best coin (or, in other words, the one that
|
||||
made people most for their money).<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ dash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ dash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ grin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ grin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ zcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ zcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return On Capital',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2, data1, data4];
|
||||
var data_mobile = [data3_mobile, data2_mobile, data1_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.98,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Multiple from first top',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.3f"
|
||||
,nticks: 3
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.0f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['1', '3500']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.3f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.0f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['1', '3500']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
485
monerojnet/templates/monerojnet/compinflation.html
Normal file
485
monerojnet/templates/monerojnet/compinflation.html
Normal file
|
|
@ -0,0 +1,485 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Annualized Inflation for Monero and its competitors (Bitcoin and
|
||||
privacy-oriented Dash, Zcash and Grin)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-2 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Inflation (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-2 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">Monero has lower average inflation
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-2 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Inflation (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-2 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Dash Inflation (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-2 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Zcash Inflation (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_zcash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-2 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Grin Annual Inflation (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_grin }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
This page was created to help Monero's community, but this isn't financial advice. Invest at
|
||||
your own risk.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows a comparison between the annual inflation rate of Monero and its competitors. The lower
|
||||
the inflation, the better, since lower inflation rates
|
||||
protect better the purchasing power of its holders. Monero is by far the best privacy coin you hold,
|
||||
since its inflation is way lower than the others. Another thing
|
||||
evident from this chart is that the other privacy coins are many years away from having an inflation
|
||||
rate as small as Monero. Cool!<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationdash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationdash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationgrin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationgrin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationzcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationzcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationbtc|safe }},
|
||||
line: {
|
||||
color: '#ff9d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Annual Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationbtc|safe }},
|
||||
line: {
|
||||
color: '#ff9d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data1, data4, data5, data2];
|
||||
var data_mobile = [data3_mobile, data1_mobile, data4_mobile, data5_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.70,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Inflation (%)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2009-01-01', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-01-01', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
375
monerojnet/templates/monerojnet/dailyemission.html
Normal file
375
monerojnet/templates/monerojnet/dailyemission.html
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Daily Emission (USD)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current XMR Emission</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest XMR Emission</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ high_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current BTC Emission</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest BTC Emission</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ high_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total issuance in units of both Bitcoin and Monero calculated in dollars. This cant
|
||||
also be seen as how much money one would need to buy all newly mined coins in the last day.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Emission',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ emissionxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Emission',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ emissionxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Emission',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ emissionbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Emission',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ emissionbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Daily Emission (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-11-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-11-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
342
monerojnet/templates/monerojnet/dailyemissionntv.html
Normal file
342
monerojnet/templates/monerojnet/dailyemissionntv.html
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Daily Emission (Native Units)
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Daily Emission (XMR)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Daily Emission (BTC)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the number of all mined coins daily.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Daily Emission',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Daily Emission',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Daily Emission',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Daily Emission',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Daily Emission (Native Units)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
372
monerojnet/templates/monerojnet/dominance.html
Normal file
372
monerojnet/templates/monerojnet/dominance.html
Normal file
|
|
@ -0,0 +1,372 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Monero's Marketcap Dominance (%)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Dominance</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_value }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Dominance</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows Monero's dominance over the whole cryptocurrency market, judging by total marketcap value in dollars.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dominance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dominance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ pricexmr|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ pricexmr|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data1];
|
||||
var data_mobile = [data3_mobile, data1_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Dominance (%)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-08-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 120,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-08-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 100,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
396
monerojnet/templates/monerojnet/dread_subscribers.html
Normal file
396
monerojnet/templates/monerojnet/dread_subscribers.html
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Darknet Forum Subscribes (Dread)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Subscribers</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Subscribers</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Dominance</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ dominance }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Number of subscribers to Bitcoin and Monero threads on Dread forum on Darknet.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "bar",
|
||||
name: 'Bitcoin Darknet Subscribers',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
hovertemplate: '%{y}',
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 3
|
||||
},
|
||||
textposition: 'inside',
|
||||
marker: {
|
||||
color: '#ffd311',
|
||||
opacity: 0.9,
|
||||
line: {
|
||||
color: '#fff331',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "bar",
|
||||
name: 'Bitcoin Darknet Subscribers',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
hovertemplate: '%{y}',
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 3
|
||||
},
|
||||
textposition: 'inside',
|
||||
marker: {
|
||||
color: '#ffd311',
|
||||
opacity: 0.9,
|
||||
line: {
|
||||
color: '#fff331',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "bar",
|
||||
name: 'Monero Darknet Subscribers',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
hovertemplate: '%{y}',
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
},
|
||||
textposition: 'inside',
|
||||
marker: {
|
||||
color: '#dd1d1d',
|
||||
opacity: 0.9,
|
||||
line: {
|
||||
color: '#fd4d4d',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "bar",
|
||||
name: 'Monero Darknet Subscribers',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
hovertemplate: '%{y}',
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
},
|
||||
textposition: 'inside',
|
||||
marker: {
|
||||
color: '#dd1d1d',
|
||||
opacity: 0.9,
|
||||
line: {
|
||||
color: '#fd4d4d',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data2];
|
||||
var data_mobile = [data1_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Subscribers',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2021-12-01', '2022-12-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2021-12-01', '2022-12-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
323
monerojnet/templates/monerojnet/extracoins.html
Normal file
323
monerojnet/templates/monerojnet/extracoins.html
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Supply Difference</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-12 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Difference in Supply</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_diff }} BTC</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the difference between Bitcoin supply and Monero supply. Formula is BTC-Supply -
|
||||
XMR-Supply.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Current Difference',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ nsupply|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Current Difference',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ nsupply|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Future Difference',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ fsupply|safe }},
|
||||
line: {
|
||||
color: '#aa0d0d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Future Difference',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ fsupply|safe }},
|
||||
line: {
|
||||
color: '#aa0d0d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data1];
|
||||
var data_mobile = [data2_mobile, data1_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.98,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Supply Difference',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2009-01-01', '2060-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-01-01', '2060-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
758
monerojnet/templates/monerojnet/fr.html
Normal file
758
monerojnet/templates/monerojnet/fr.html
Normal file
|
|
@ -0,0 +1,758 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% load static %}
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<title>Moneroj.net</title>
|
||||
<meta content="" name="description">
|
||||
<meta content="" name="keywords">
|
||||
|
||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'img/favicon.png' %}" rel="icon">
|
||||
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
|
||||
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
|
||||
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"
|
||||
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
div.a {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.color-orange {
|
||||
color: #ff6b3b;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{% url 'monerojnet:index' %}"><i class="fab fa-monero"></i> Monero<text class="color-orange">j</text></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">Accueil <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:sfmodel' %}">Graphiques</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:articles' %}">Articles</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:about' %}">Sur</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown" >
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Langages
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">Anglais</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:fr' %}">Français</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:pt' %}">Portugaise</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
|
||||
<div class="container">
|
||||
<h1>Saviez-vous que toutes vos données sont exposées lorsque vous utilisez Bitcoin?</h1>
|
||||
<h2>Monero est ce que les gens pensent acheter lorsqu'ils investissent dans Bitcoin.</h2>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Hero -->
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- ======= Why Us Section ======= -->
|
||||
<section id="why-us" class="why-us">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-5">
|
||||
<div class="content">
|
||||
<h3>Monero protège votre vie privée, pas Bitcoin.</h3>
|
||||
<p>
|
||||
La plupart des
|
||||
gens pensent que Bitcoin est « anonyme ». Ils ne pouvaient
|
||||
pas être plus éloignés de la vérité. Bitcoin est un grand livre
|
||||
transparent et toutes les données des transactions sont
|
||||
toujours publiquement visibles sur Internet, comme le
|
||||
montant, les adresses d'expéditeur et de destinataire, les adresses IP,
|
||||
l'historique, etc. Bitcoin est en fait un cauchemar pour la vie privée.
|
||||
C'est pourquoi
|
||||
les cypherpunks ont inventé le Monero !
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="https://www.fintechweekly.com/magazine/articles/an-untraceable-currency-bitcoin-privacy-concerns"
|
||||
class="more-btn" target="_blank">
|
||||
En savoir plus sur les problèmes de Bitcoin ici<i class="bx bx-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-8 col-lg-7 d-flex">
|
||||
<div class="icon-boxes d-flex flex-column justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="far fa-eye-slash"></i>
|
||||
<h4>Monero est anonyme</h4>
|
||||
<p>Aucune entreprise, gouvernement ou tiers ne peut voir le contenu des transactions. Personne
|
||||
d'autre que l'expéditeur et le destinataire ne
|
||||
peut voir combien a été envoyé. Personne ne peut voir votre solde. Même votre IP est masquée par
|
||||
défaut.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="bx bx-cube-alt"></i>
|
||||
<h4>Monero protège vos données et vos fonds</h4>
|
||||
<p>Monero est un logiciel open source, audité de manière indépendante, qui garantit la norme de
|
||||
sécurité la plus élevée. Le développement est financé par
|
||||
le système de financement participatif communautaire pour se protéger des acteurs malveillants.
|
||||
Vos pièces sont à vous et personne ne peut les prendre.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<h4>Monero rend votre liberté</h4>
|
||||
<p>La confidentialité par défaut empêche la surveillance et la censure de masse, garantissant la
|
||||
liberté personnelle de ses utilisateurs. Monero a
|
||||
également une transparence facultative en tant que fonctionnalité, aidant les organisations à
|
||||
prouver leurs équilibres, si nécessaire.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-8 col-lg-7 d-flex">
|
||||
<div class="icon-boxes d-flex flex-column justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-percent"></i>
|
||||
<h4>Monero a une faible inflation</h4>
|
||||
<p>L'inflation annuelle actuelle n'est que de {{ now_inflation }} et diminue constamment jusqu'à ce
|
||||
que les émissions "de queue" commencent vers 2022. Il n'y avait pas de
|
||||
prémine ou ICO et toutes les pièces ont été extraites équitablement depuis 2014.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-coins"></i>
|
||||
<h4>Monero est rare</h4>
|
||||
<p>Il y a
|
||||
moins de Monero en circulation que Bitcoin, et cela restera un fait
|
||||
jusqu'en 2040. D'ici là, il est prévu que Monero prendra le relais
|
||||
marché des comptes offshore, qui est
|
||||
actuellement au moins 16.000 fois plus important que sa capitalisation
|
||||
totale.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-rocket"></i>
|
||||
<h4>Extrêmement rapide et bon marché à utiliser</h4>
|
||||
<p>Les
|
||||
transactions apparaissent instantanément dans votre portefeuille, et
|
||||
cela ne prend que quelques minutes jusqu'à ce que les fonds soient
|
||||
débloqués et puissent être à nouveau dépensés.
|
||||
La plupart des transactions coûtent moins
|
||||
d'un cent à transmettre.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-5"><br>
|
||||
<div class="content">
|
||||
<h3>Les gens prétendent que Bitcoin résout tous les problèmes de l'humanité. C'est un mensonge terrible.
|
||||
</h3>
|
||||
<p>
|
||||
Bitcoin est un
|
||||
bon projet qui mettra les gouvernements en concurrence avec l'argent
|
||||
dur privé, mais nous ne pouvons tout simplement pas prétendre qu'il
|
||||
résoudra les problèmes de confidentialité. Alors que Bitcoin
|
||||
sera bon pour les institutions qui doivent être
|
||||
auditées (puisque l'audit est plus facile en raison de la transparence),
|
||||
la plupart des gens préféreront
|
||||
utiliser de l'argent anonyme pour faire des affaires,
|
||||
car vous ne voulez pas exposer toutes vos données à tous ceux avec qui
|
||||
vous traitez.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Why Us Section -->
|
||||
|
||||
<!-- ======= About Section ======= -->
|
||||
<section id="about" class="about section-bg">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center align-items-stretch">
|
||||
<a href="https://www.youtube.com/watch?v=8quGD9W7B2I" class="venobox play-btn mb-4" data-vbtype="video"
|
||||
data-autoplay="true"></a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
|
||||
<h4>Regardez cette vidéo sur Monero</h4>
|
||||
<h3>Monero est de l'argent imparable pour les gens imparables</h3>
|
||||
<p>Monero
|
||||
est un projet de la communauté cypherpunk, complètement décentralisé,
|
||||
sans aucune autorité centrale derrière lui. Il est impossible de le
|
||||
censurer,
|
||||
tout comme Bitcoin. La différence est que les personnes
|
||||
qui utilisent Bitcoin peuvent toujours être censurées, tandis que celles
|
||||
qui utilisent Monero ne le peuvent pas, car personne ne peut savoir qui
|
||||
l'utilise.
|
||||
</p>
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fa fa-balance-scale"></i></div>
|
||||
<h4 class="title"><a href="">Peur que le gouvernement l'interdise? Réfléchissez à deux fois</a></h4>
|
||||
<p class="description">Étant
|
||||
donné que Monero est anonyme, il sert en fait de compte offshore sans
|
||||
avoir à ouvrir un compte dans une banque. Les représentants du
|
||||
gouvernement n'auront pas
|
||||
réussi à l'interdire, d'abord parce qu'il est
|
||||
impossible de fermer un réseau décentralisé, et deuxièmement parce
|
||||
qu'ils auraient également avantage à l'utiliser pour cacher des fonds.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fa fa-thermometer"></i></div>
|
||||
<h4 class="title"><a href="">Interdire Monero le rendrait encore plus cher</a></h4>
|
||||
<p class="description">Monero
|
||||
est de l'argent rare avec une intimité totale. Il y a une énorme
|
||||
demande pour un tel actif, tout comme l'or physique. Parce qu'il y a de
|
||||
l'utilité
|
||||
dans celui-ci, la demande ne disparaîtra pas avec une
|
||||
interdiction. En fait, cela ne ferait que créer plus de rareté, faisant
|
||||
monter les prix. Monero est anti-fragile. Pensez-y : Monero protège
|
||||
votre patrimoine contre l'inflation et protège votre
|
||||
vie privée. Si les gouvernements interdisent aux citoyens de protéger
|
||||
leur patrimoine contre l'inflation, et
|
||||
d'avoir de l'intimité, pensez-vous qu'il deviendrait
|
||||
moins cher d'obtenir ces choses? Pas du tout. Ce serait cher
|
||||
comme l'enfer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div
|
||||
class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
|
||||
<h4>Apprendre. Adapter. Évoluer.</h4>
|
||||
<h3>Monero pourrait être exactement ce dont votre portefeuille d'investissement a besoin</h3>
|
||||
<p>Monero
|
||||
est une crypto-monnaie pas comme les autres. Il a une faible
|
||||
corrélation avec Bitcoin, ce qui en fait un bon ajout pour vos
|
||||
investissements, car
|
||||
cela vous aidera à vous diversifier et pourrait
|
||||
augmenter votre rendement futur. N'oubliez pas : Monero est un bébé de 2
|
||||
milliards de dollars qui finira par engloutir des comptes offshore de
|
||||
32T.
|
||||
Si l'argent devenait 100 % numérique, comment se
|
||||
fait-il que les gens pensent encore que vous devrez physiquement ouvrir
|
||||
un compte dans un autre pays pour cacher de l'argent?
|
||||
</p>
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-chess-king"></i></div>
|
||||
<h4 class="title"><a
|
||||
href="https://markets.businessinsider.com/currencies/news/why-the-dark-nets-most-active-market-ditched-bitcoin-for-monero-9698092?op=1"
|
||||
target="_blank">Il a détrôné Bitcoin où la confidentialité est un must</a></h4>
|
||||
<p class="description">Bien
|
||||
que la grande majorité des activités illégales se fassent en utilisant
|
||||
le dollar, Bitcoin a également été utilisé à cette fin dans le passé.
|
||||
Parce que
|
||||
Bitcoin a une blockchain transparente, ces
|
||||
transactions peuvent être identifiées rétroactivement et marquées comme
|
||||
« entachées ». Étant donné que sans logiciel coûteux, vous ne
|
||||
pouvez pas dire le
|
||||
différence, de nombreux innocents ont été accusés
|
||||
d'actes répréhensibles. Monero est sans aucun doute l'argent le plus
|
||||
avancé disponible, et sa confidentialité totale protège les innocents
|
||||
contre
|
||||
fausses accusations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fab fa-monero"></i></div>
|
||||
<h4 class="title"><a href="https://analyticsindiamag.com/monero-cryptocurrency-hackers/"
|
||||
target="_blank">Les pirates préfèrent Monero au Bitcoin</a></h4>
|
||||
<p class="description">Monero
|
||||
est la pointe de la lance en matière d'intimité. Sa technologie de
|
||||
pointe en a fait le choix optimal pour la plupart des pirates
|
||||
informatiques. Il existe une loi économique qui dit
|
||||
les gens préfèrent se débarrasser du mauvais argent
|
||||
et détenir le meilleur argent. C'est ce à quoi nous assistons, Bitcoin
|
||||
est abandonné au profit de Monero,
|
||||
la seule véritable option de confidentialité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-5 col-lg-6 video-box2 d-flex justify-content-center align-items-stretch">
|
||||
<a href="https://www.youtube.com/watch?v=REC5V7d3pqM" class="venobox play-btn mb-4" data-vbtype="video"
|
||||
data-autoplay="true"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End About Section -->
|
||||
|
||||
|
||||
<!-- ======= Services Section ======= -->
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>
|
||||
<font style="vertical-align: inherit;">Comment investir dans Monero? </font>
|
||||
</h2>
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Intéressé? Ouvrez
|
||||
simplement un compte dans un échange de confiance, envoyez un virement
|
||||
bancaire, achetez-le et retirez-le dans votre portefeuille. N'oubliez
|
||||
pas de toujours avoir vos propres clés, sinon
|
||||
vos pièces peuvent être volées à l'échange.
|
||||
|
||||
Si vous vous souciez de la confidentialité, nous vous recommandons vraiment
|
||||
d'utiliser un échange décentralisé ou un échange non KYC (connaissez
|
||||
votre client), mais seuls les utilisateurs avancés peuvent le faire.
|
||||
Pour plus d'informations, rendez-vous sur <a href="https://localmonero.co/?language=en"
|
||||
target="_blank">Localmonero.co</a> ou essayez même <a href="https://bisq.network/"
|
||||
target="_blank">Bisq.</a>
|
||||
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-check"></i></div>
|
||||
<h4 class="title"><a href="https://www.kraken.com/en-us/learn/buy-monero-xmr" target="_blank">
|
||||
<font style="vertical-align: inherit;">Ouvrir un compte Exchange </font>
|
||||
</a></h4>
|
||||
<p class="description">
|
||||
<font style="vertical-align: inherit;">Achetez sur </font><a
|
||||
href="https://www.kraken.com/en-us/learn/buy-monero-xmr">
|
||||
<font style="vertical-align: inherit;">Kraken.com </font>
|
||||
</a>
|
||||
<font style="vertical-align: inherit;">, </font><a href="https://www.binance.com/en">
|
||||
<font style="vertical-align: inherit;">Binance.com </font>
|
||||
</a>
|
||||
<font style="vertical-align: inherit;">ou sur un échange non KYC*. Envoyez à l'échange un virement
|
||||
bancaire et convertissez vos fonds en Monero. </font>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-wallet"></i></div>
|
||||
<h4 class="title"><a href="https://www.getmonero.org/downloads/" target="_blank">
|
||||
<font style="vertical-align: inherit;">Installer un portefeuille </font>
|
||||
</a></h4>
|
||||
<p class="description">
|
||||
<font style="vertical-align: inherit;">Utilisez </font><a href="https://www.getmonero.org/downloads/">
|
||||
<font style="vertical-align: inherit;">le portefeuille logiciel officiel </font>
|
||||
</a>
|
||||
<font style="vertical-align: inherit;">sur PC ou le </font><a href="https://cakewallet.com/">
|
||||
<font style="vertical-align: inherit;">portefeuille Cake </font>
|
||||
</a>
|
||||
<font style="vertical-align: inherit;"> ou le <a href="https://www.monerujo.io/">Monerujo</a> sur votre
|
||||
téléphone portable.
|
||||
Vous pouvez également acheter un </font><a href="https://www.ledger.com/">
|
||||
<font style="vertical-align: inherit;">portefeuille matériel </font>
|
||||
</a>
|
||||
<font style="vertical-align: inherit;">. </font>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-sign-out-alt"></i></div>
|
||||
<h4 class="title"><a href="https://www.getmonero.org/resources/user-guides/securely_purchase.html"
|
||||
target="_blank">
|
||||
<font style="vertical-align: inherit;">Retirer dans votre portefeuille </font>
|
||||
</a></h4>
|
||||
<p class="description">
|
||||
<font style="vertical-align: inherit;">Accédez
|
||||
à votre compte sur l'échange et demandez-leur d'envoyer votre Monero à
|
||||
l'adresse de votre portefeuille.
|
||||
Officiel </font><a href="https://www.getmonero.org/resources/user-guides/securely_purchase.html">
|
||||
<font style="vertical-align: inherit;">Guide . </font>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Services Section -->
|
||||
|
||||
<!-- ======= F.A.Q Section ======= -->
|
||||
<section id="faq" class="faq section-bg">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>
|
||||
<font style="vertical-align: inherit;">FAQ </font>
|
||||
</h2>
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Vous hésitez encore sur la manière de l'acheter et de le conserver?
|
||||
Lisez les bases ici. </font>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-list">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" class="collapse"
|
||||
href="#faq-list-1">
|
||||
<font style="vertical-align: inherit;">Qu'est-ce que Monero exactement? </font><i
|
||||
class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i>
|
||||
</a>
|
||||
<div id="faq-list-1" class="collapse show" data-parent=".faq-list" style="">
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Monero est une
|
||||
crypto-monnaie, tout comme Bitcoin. Monero est un projet de logiciel
|
||||
open source qui fonctionne sur sa propre blockchain et qui sert de
|
||||
monnaie, tout comme le dollar.
|
||||
Beaucoup de gens laissent leur ordinateur "miner", ce
|
||||
qui signifie qu'ils prêtent la puissance de traitement de leur PC afin
|
||||
de valider toutes les transactions sur le réseau.
|
||||
En faisant cela, toute cette puissance de traitement
|
||||
est utilisée pour garantir une émission équitable de nouvelles pièces
|
||||
(ce qui provoque une inflation annuelle décroissante de {{now_inflation}}) et pour
|
||||
protéger votre argent
|
||||
des pirates informatiques. Monero a une inflation
|
||||
décroissante qui finira par tendre vers zéro, et parce qu'une faible
|
||||
inflation conduit à la rareté, il fonctionne comme une réserve de
|
||||
valeur, tout comme l'or ou le Bitcoin.
|
||||
Contrairement à Bitcoin, cependant, Monero a une
|
||||
confidentialité totale, ce qui signifie qu'il cache votre solde et vos
|
||||
transactions d'être visibles sur le réseau pour les autres.
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-2" class="collapsed"
|
||||
aria-expanded="false">
|
||||
<font style="vertical-align: inherit;">Comment Monero cache-t-il mon argent? Comment cela me donne-t-il
|
||||
de l'intimité? </font><i class="bx bx-chevron-down icon-show"></i><i
|
||||
class="bx bx-chevron-up icon-close"></i>
|
||||
</a>
|
||||
<div id="faq-list-2" class="collapse" data-parent=".faq-list" style="">
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Monero dispose
|
||||
de technologies de pointe en matière de confidentialité, telles que
|
||||
RingCT, Stealth Addresses, Bulletproof et Dandelion++. Les Ring
|
||||
Confidential Transactions (RingCT) sont utilisées pour masquer
|
||||
l'expéditeur d'une transaction et le montant,
|
||||
tandis que les adresses furtives à usage unique sont
|
||||
utilisées pour masquer l'adresse du destinataire à l'aide d'une méthode
|
||||
connue sous le nom de DKSAP. Bulletproofs est un protocole qui a
|
||||
amélioré les RingCTs, réduisant
|
||||
la taille des transactions, ce qui se traduit par des
|
||||
délais de vérification plus rapides et des frais moins élevés.
|
||||
Dandelion++, quant à lui, a été développé pour masquer l'adresse IP de
|
||||
l'appareil expéditeur.
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-3" class="collapsed"
|
||||
aria-expanded="false">
|
||||
<font style="vertical-align: inherit;">Pourquoi les gens disent-ils que Monero est imparable? </font><i
|
||||
class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i>
|
||||
</a>
|
||||
<div id="faq-list-3" class="collapse" data-parent=".faq-list" style="">
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Les
|
||||
développeurs de Monero ont déjà testé le concept d'échanges atomiques
|
||||
entre lui et Bitcoin, qui se produiront directement à partir du
|
||||
portefeuille de Monero et seront traités
|
||||
via la blockchain de Bitcoin. Dans un avenir proche,
|
||||
les utilisateurs pourront échanger facilement un actif contre un autre,
|
||||
sans avoir à dépendre des autorités centrales, telles que
|
||||
échanges, ce qui en fait la meilleure solution de
|
||||
confidentialité possible pour Bitcoin. En d'autres termes, pour
|
||||
interdire Monero, les gouvernements devraient d'abord censurer
|
||||
l'ensemble du Bitcoin
|
||||
blockchain, ce qui n'arrivera pas, car Bitcoin est
|
||||
déjà ancré dans la société. Ainsi, personne ne pourra empêcher les gens
|
||||
d'avoir de la vie privée.
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-4" class="collapsed"
|
||||
aria-expanded="false">
|
||||
<font style="vertical-align: inherit;">Comment fonctionne son inflation? Comment les nouvelles pièces
|
||||
sont-elles créées ? </font><i class="bx bx-chevron-down icon-show"></i><i
|
||||
class="bx bx-chevron-up icon-close"></i>
|
||||
</a>
|
||||
<div id="faq-list-4" class="collapse" data-parent=".faq-list" style="">
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Il n'y a
|
||||
jamais eu de prémine sur Monero. Cela signifie que personne ne contrôle
|
||||
de grandes quantités de pièces, car toutes les pièces jamais générées
|
||||
ont toujours été distribuées aux mineurs. Les mineurs
|
||||
reçoivent des pièces en fonction du travail qu'ils
|
||||
ont consacré à la validation et à la défense du réseau. Il s'agit donc
|
||||
d'une forme de revenu financier qu'ils reçoivent pour leur service.
|
||||
Depuis au
|
||||
au début (2014), il n'y avait pas de pièces en
|
||||
circulation, l'inflation était élevée. Maintenant qu'il y a {{now_units}}
|
||||
unités en circulation, l'inflation annuelle n'est que de {{now_inflation}}.
|
||||
Le paiement par bloc diminue avec le temps, de même
|
||||
que le taux d'inflation annuel diminuera lentement vers zéro. La
|
||||
demande d'argent dur fongible, numérique et axé sur la confidentialité
|
||||
va probablement monter en flèche
|
||||
au cours des prochaines années et dépasser son
|
||||
inflation, les investisseurs s'attendent donc à une hausse considérable
|
||||
des prix.
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-5" class="collapsed"
|
||||
aria-expanded="false">
|
||||
<font style="vertical-align: inherit;">Quel est le meilleur, Bitcoin ou Monero? </font><i
|
||||
class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i>
|
||||
</a>
|
||||
<div id="faq-list-5" class="collapse" data-parent=".faq-list" style="">
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Le prix de
|
||||
Bitcoin est bien plus élevé que celui de Monero depuis que le premier a
|
||||
été introduit en 2009, tandis que le dernier n'a été créé qu'en 2014.
|
||||
Lorsque Bitcoin a été créé, la technologie
|
||||
derrière Monero n'existait même pas. Les méthodes de
|
||||
Bitcoin étaient elles-mêmes un énorme progrès technologique.
|
||||
Maintenant, Bitcoin a une légion d'investisseurs, est une crypto-monnaie
|
||||
établie,
|
||||
et avoir une capitalisation boursière de 1T USD.
|
||||
Cependant, Bitcoin a de nombreux défauts, tels que le coût et le temps
|
||||
de transaction, et surtout le manque de confidentialité. Bitcoin n'a
|
||||
aucune confidentialité.
|
||||
Toutes les transactions et soldes sont stockés dans
|
||||
une chaîne de blocs, et sont totalement visibles pour tous les
|
||||
internautes. En ce sens, Bitcoin ne peut pas fonctionner comme de
|
||||
l'argent,
|
||||
parce que l'un des principaux attributs d'un bon
|
||||
argent est la fongibilité, qui est la capacité de toutes les unités à
|
||||
être indiscernables des autres. Puisque toutes les transactions de
|
||||
Bitcoins
|
||||
sont visibles, vous pouvez les différencier les uns
|
||||
des autres. Par exemple, vous pouvez choisir d'accepter les
|
||||
transactions à partir d'une seule adresse, mais choisir d'interdire aux
|
||||
personnes d'accepter
|
||||
un autre. Cela permettra inévitablement aux
|
||||
gouvernements de censurer certaines adresses en fonction de ce que font
|
||||
leurs propriétaires. Par conséquent, le manque de fongibilité n'est pas
|
||||
un
|
||||
fonctionnalité pour beaucoup d'argent. En ce sens,
|
||||
Monero est bien meilleur que Bitcoin. Monero est plus rapide, moins
|
||||
cher à traiter et totalement fongible. Vous ne pouvez pas voir les
|
||||
différences
|
||||
entre différents Moneroj (Moneroj est au pluriel de
|
||||
Monero), vous ne pouvez donc pas non plus censurer les gens. Avec
|
||||
Monero, les gens sont libres, alors qu'avec Bitcoin, les gens
|
||||
sont à la merci des dirigeants de leurs
|
||||
gouvernements.
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-6" class="collapsed"
|
||||
aria-expanded="false">
|
||||
<font style="vertical-align: inherit;">Monero est-il un bon investissement? </font><i
|
||||
class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i>
|
||||
</a>
|
||||
<div id="faq-list-6" class="collapse" data-parent=".faq-list" style="">
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Bien que
|
||||
personne ne puisse prédire exactement ce qui se passera à l'avenir, la
|
||||
communauté de Monero s'attend à ce qu'il y ait une énorme demande de
|
||||
confidentialité dans les prochaines années. Avec
|
||||
notre société s'appuyant davantage sur les processus
|
||||
numériques, il est plausible qu'un tel type de technologie finisse par
|
||||
trouver sa place dans notre vie quotidienne. Monero est un pari
|
||||
sur la numérisation de l'argent, un pari sur le
|
||||
besoin de confidentialité et aussi un pari que les gouvernements
|
||||
perdront le monopole de l'argent. En termes de retours, alors que BTC a
|
||||
pris 900
|
||||
jours pour atteindre 37x dans son premier cycle de
|
||||
marché haussier, Monero a mis 1279 jours pour donner un rendement de
|
||||
95x. Cependant, vous ne devez pas considérer cela comme un conseil
|
||||
financier et vous devez
|
||||
investir à vos risques et périls.
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-7" class="collapsed"
|
||||
aria-expanded="false">
|
||||
<font style="vertical-align: inherit;">Quelle est la première étape si je veux investir dans Monero?
|
||||
</font><i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i>
|
||||
</a>
|
||||
<div id="faq-list-7" class="collapse" data-parent=".faq-list" style="">
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">En termes
|
||||
simples, ouvrez un compte sur un échange de confiance, tel que Kraken
|
||||
(États-Unis) ou Binance (monde). Il vous suffit d'écrire vos données
|
||||
sous leur forme. Après cela, complétez
|
||||
l'ensemble du processus d'enregistrement, qui peut
|
||||
inclure des procédures KYC, comme l'envoi d'une photo de votre document
|
||||
et de votre visage. N'oubliez pas non plus d'activer le double facteur
|
||||
l'authentification, qui empêche les pirates de voler
|
||||
vos fonds et autorise également les retraits. Ensuite, envoyez un
|
||||
virement bancaire à l'échange et dans quelques heures, ils
|
||||
mettre à jour votre solde. Lorsque cela se produit,
|
||||
achetez votre Monero et procédez aux retraits.
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-8" class="collapsed"
|
||||
aria-expanded="false">
|
||||
<font style="vertical-align: inherit;">Si j'ai déjà un compte, que faire ensuite ? </font><i
|
||||
class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i>
|
||||
</a>
|
||||
<div id="faq-list-8" class="collapse" data-parent=".faq-list" style="">
|
||||
<p>
|
||||
<font style="vertical-align: inherit;">Téléchargez
|
||||
maintenant un portefeuille logiciel pour Monero sur votre téléphone
|
||||
(comme Cake Wallet ou Monerujo) ou pour votre ordinateur (le portefeuille officiel).
|
||||
Vous pouvez également acheter
|
||||
un portefeuille matériel tel que le Ledger. Lorsque
|
||||
vous avez terminé cette étape, vous pouvez vous connecter sur votre
|
||||
compte d'échange et demander un retrait de fonds. Ça signifie
|
||||
vous allez demander à la bourse d'envoyer tous vos
|
||||
Moneroj de votre compte vers l'adresse de votre portefeuille. Après
|
||||
cela, vous avez déjà le contrôle total de votre
|
||||
fonds, c'est tout.
|
||||
</font>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End F.A.Q Section -->
|
||||
|
||||
</main>
|
||||
<!-- End #main -->
|
||||
|
||||
<!-- ======= Footer ======= -->
|
||||
<footer id="footer">
|
||||
|
||||
<div class="footer-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6 col-md-6 footer-contact">
|
||||
<h3>Moneroj.net</h3>
|
||||
<p>
|
||||
Développé par<br>
|
||||
Morphée<br>
|
||||
<strong>Courriel:</strong> morpheus.anonymous@protonmail.com<br>
|
||||
<strong>Twitter:</strong> CryptoMorpheus_<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 footer-links">
|
||||
<h4>Liens utiles</h4>
|
||||
<ul>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:fr' %}">Accueil</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:sfmodel' %}">Graphiques</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:about' %}">Sur</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.getmonero.org/">Getmonero.org</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.reddit.com/r/Monero/">Reddit/Monero</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container d-lg-flex py-4">
|
||||
|
||||
<div class="mr-lg-auto text-center text-lg-left">
|
||||
<div class="copyright a">
|
||||
<strong>© Copyright <span>Moneroj.net</span></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-links text-center text-lg-right pt-3 pt-lg-0">
|
||||
<a href="https://twitter.com/CryptoMorpheus_" class="twitter"><i class="bx bxl-twitter"></i></a>
|
||||
<a href="https://github.com/cryptomorpheuss/moneropro" class="github"><i class="bx bxl-github"></i></a>
|
||||
<a href="mailto:morpheus.anonymous@protonmail.com" class="github"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- End Footer -->
|
||||
|
||||
<!-- Vendor JS Files -->
|
||||
<script src="{% static 'vendor/jquery/jquery2.min.js' %}"></script>
|
||||
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
343
monerojnet/templates/monerojnet/fractal.html
Normal file
343
monerojnet/templates/monerojnet/fractal.html
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Fractal Multiple
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Multiple From Previous Top</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_multiple }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Multiple</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This is a very simple chart that displays Monero's two cycles, one above the other, as fractals one from
|
||||
the other. This shows the past and current returns
|
||||
as a multiple from the previous cycle top.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'First Cycle',
|
||||
x: {{ dates1|safe }},
|
||||
y: {{ cycle1|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'First Cycle',
|
||||
x: {{ dates1|safe }},
|
||||
y: {{ cycle1|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Second Cycle',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ cycle2|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Second Cycle',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ cycle1|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data3];
|
||||
var data_mobile = [data2_mobile, data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.80,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Multiple from previous top',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.2f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['0', '100']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.2f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['0', '100']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
561
monerojnet/templates/monerojnet/golden.html
Normal file
561
monerojnet/templates/monerojnet/golden.html
Normal file
|
|
@ -0,0 +1,561 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Golden Ratio Multiplier</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
As proposed by Philip Swift <a
|
||||
href="https://positivecrypto.medium.com/the-golden-ratio-multiplier-c2567401e12a">here</a>, this
|
||||
chart uses the same
|
||||
indicator known as GRM (Golden Ratio Multiplier) to find nice spots where the coin is overbought,
|
||||
indicating sell signals. The algo automatically calculates (based on a
|
||||
certain logic) where would be reasonable to sell.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ prices|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ prices|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350|safe }},
|
||||
line: {
|
||||
color: '#ffffff'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350|safe }},
|
||||
line: {
|
||||
color: '#ffffff'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 0.4',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0042|safe }},
|
||||
line: {
|
||||
color: '#333333'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 0.4',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0042|safe }},
|
||||
line: {
|
||||
color: '#333333'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 0.6',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0060|safe }},
|
||||
line: {
|
||||
color: '#404040'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 0.6',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0060|safe }},
|
||||
line: {
|
||||
color: '#404040'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 2',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0200|safe }},
|
||||
line: {
|
||||
color: '#888888'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 2',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0200|safe }},
|
||||
line: {
|
||||
color: '#888888'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data6 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 3',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0300|safe }},
|
||||
line: {
|
||||
color: '#777777'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data6_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 3',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0300|safe }},
|
||||
line: {
|
||||
color: '#777777'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data7 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 5',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0500|safe }},
|
||||
line: {
|
||||
color: '#666666'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data7_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 5',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0500|safe }},
|
||||
line: {
|
||||
color: '#666666'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data8 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 8',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0800|safe }},
|
||||
line: {
|
||||
color: '#555555'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data8_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 8',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_0800|safe }},
|
||||
line: {
|
||||
color: '#555555'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data9 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 13',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_1300|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data9_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 350 days x 13',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_350_1300|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data11 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 111 days',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_111|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data11_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Median 111 days',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ m_111|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data12 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Sell Signal',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ price_cross|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: '#ff0000',
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Sell Signal',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 7,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data12_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Sell signal',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ price_cross|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: '#ff0000',
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data5, data6, data7, data8, data9, data11, data1, data12];
|
||||
var data_mobile = [data2_mobile, data5_mobile, data6_mobile, data7_mobile, data8_mobile, data9_mobile, data11_mobile, data1_mobile, data12_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-16', '2023-04-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-16', '2023-04-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
385
monerojnet/templates/monerojnet/hashprice.html
Normal file
385
monerojnet/templates/monerojnet/hashprice.html
Normal file
|
|
@ -0,0 +1,385 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Price in Dollars Per Hashrate</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-12 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Price Per Hashrate</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_hashrate }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows average daily price divided by total Hashrate/s Monero has. Higher prices on relative
|
||||
low hashrate means Monero is overbought and a top is
|
||||
getting nearer. On the other hand, if Monero has low average price and high hashrate, it signals a
|
||||
possible bottom, since many people are mining expecting future
|
||||
higher prices.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ buy|safe }},
|
||||
line: {
|
||||
color: '#00ff00'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ buy|safe }},
|
||||
line: {
|
||||
color: '#00ff00'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Sell',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ sell|safe }},
|
||||
line: {
|
||||
color: '#ff0000'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Sell',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ sell|safe }},
|
||||
line: {
|
||||
color: '#ff0000'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Dollars / Hashs/s',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ hashrate|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Dollars / Hashs/s',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ hashrate|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1 , data2, data3];
|
||||
var data_mobile = [data1_mobile, data2_mobile, data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 1,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 1,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price in Dollars Per H/s',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.8f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-04-10', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.8f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-04-10', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
300
monerojnet/templates/monerojnet/hashrate.html
Normal file
300
monerojnet/templates/monerojnet/hashrate.html
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Monero's Hashrate</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-12 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Hashrate (Hashs/s)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_hashrate }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total Hashrate/s Monero has on average. Higher hashrates mean more people are
|
||||
mining it on profit and/or confident prices will go up in the near future.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Hashs/s',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ hashrate|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Hashs/s',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ hashrate|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3];
|
||||
var data_mobile = [data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.8,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'H/s',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: " ",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
410
monerojnet/templates/monerojnet/hashvsprice.html
Normal file
410
monerojnet/templates/monerojnet/hashvsprice.html
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Price in Dollars Versus Hashrate</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Hashrate</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_hashrate }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Price in Dollars</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_priceusd }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-money-bill fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Price in Sats</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_pricebtc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows average daily price and average hashrate (hashs per second).<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Hashs/s',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ hashrate|safe }},
|
||||
yaxis: "y2",
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Hashs/s',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ hashrate|safe }},
|
||||
yaxis: "y2",
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Price in Dollars',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ prices|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Price in Dollars',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ prices|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data = [data1 , data3];
|
||||
var data_mobile = [data1_mobile, data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 0
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "log",
|
||||
showgrid: false,
|
||||
title: {
|
||||
text: 'H/s',
|
||||
font: {
|
||||
family: 'Nunito, monospace',
|
||||
size: 14,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :"2s"
|
||||
,nticks: 4
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-04-10', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "log",
|
||||
showgrid: false,
|
||||
tickformat :"2s"
|
||||
,nticks: 4
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-04-10', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
6
monerojnet/templates/monerojnet/importer.html
Normal file
6
monerojnet/templates/monerojnet/importer.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
{{ message }}
|
||||
|
||||
{% endblock %}
|
||||
486
monerojnet/templates/monerojnet/index.html
Normal file
486
monerojnet/templates/monerojnet/index.html
Normal file
|
|
@ -0,0 +1,486 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% load static %}
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<title>Moneroj.net</title>
|
||||
<meta content="" name="description">
|
||||
<meta content="" name="keywords">
|
||||
|
||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'img/favicon.png' %}" rel="icon">
|
||||
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
|
||||
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
|
||||
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
div.a {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.color-orange {
|
||||
color: #ff4d21;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{% url 'monerojnet:index' %}"><i class="fab fa-monero"></i> Monero<text class="color-orange">j</text></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:sfmodel' %}">Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:articles' %}">Articles</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:about' %}">About</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown" >
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Languages
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">English</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:fr' %}">French</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:pt' %}">Portuguese</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
|
||||
<div class="container">
|
||||
<h1>Did you know all your data is exposed when you use Bitcoin?</h1>
|
||||
<h2>Monero is what people think they are buying when they invest in Bitcoin.</h2>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Hero -->
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- ======= Why Us Section ======= -->
|
||||
<section id="why-us" class="why-us">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-5">
|
||||
<div class="content">
|
||||
<h3>Monero protects your privacy, Bitcoin doesn't.</h3>
|
||||
<p>
|
||||
Most people think Bitcoin is "anonymous". They couldn't be further from the truth. Bitcoin is a transparent ledger, and all the data from the transactions are
|
||||
forever publically visible on the internet, such as the amount, sender and receiver addresses, IPs, history, and so on. Bitcoin is actually a privacy nightmare. That's why
|
||||
cypherpunks invented Monero!
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="https://www.fintechweekly.com/magazine/articles/an-untraceable-currency-bitcoin-privacy-concerns" class="more-btn" target="_blank">Learn More About Bitcoin's Problems Here<i class="bx bx-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-8 col-lg-7 d-flex">
|
||||
<div class="icon-boxes d-flex flex-column justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="far fa-eye-slash"></i>
|
||||
<h4>Monero is Anonymous</h4>
|
||||
<p>No corporation, government or third party can see the content of the transactions. No one but the sender and the receiver can see how much was sent.
|
||||
No one can see your balance. Even your IP is hidden by default.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="bx bx-cube-alt"></i>
|
||||
<h4>Monero protects your data and your funds</h4>
|
||||
<p>Monero is an open-source, independently audited software that ensures the highest security standard. Development is funded by Community Crowdfunding System
|
||||
to protec against malicious actors. Your coins are yours, and no one can take them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<h4>Monero gives back your freedom</h4>
|
||||
<p>Privacy-by-default prevents mass surveilance and censorship, ensuring personal freedom for its users. Monero also has optional transparency as a
|
||||
feature, helping organizations prove their balances, if needed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-8 col-lg-7 d-flex">
|
||||
<div class="icon-boxes d-flex flex-column justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-percent"></i>
|
||||
<h4>Monero has low inflation</h4>
|
||||
<p>The current annual inflation is only {{ now_inflation }} and is constantly decreasing until "tail" emission kicks in around 2022. There was no premine
|
||||
or ICOs and all coins have been mined fairly since 2014.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-coins"></i>
|
||||
<h4>Monero is scarce</h4>
|
||||
<p>There are less Monero in circulation than Bitcoin, and this will remain a fact until 2040. By then, it's predicted that Monero will take over the
|
||||
market of offshore accounts, which is currently at least 16.000 times bigger than its whole capitalization.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-rocket"></i>
|
||||
<h4>Extremely fast and cheap to use</h4>
|
||||
<p>Transactions instantaneously show up in your wallet, and it takes only a few minutes until funds are unlocked and can be spent again.
|
||||
Most transactions cost less than a cent to transmit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-5"><br>
|
||||
<div class="content">
|
||||
<h3>People pretend Bitcoin solves all problems of mankind. That's a terrible lie.</h3>
|
||||
<p>
|
||||
Bitcoin is a good project that will make governments compete against private hard money, but we just can't pretend it will solve privacy issues. While Bitcoin
|
||||
will be good for institutions that need to be audited (since auditing is easier because of transparency), most people will prefer to
|
||||
use anonymous money to do business, since you don't want to expose all your data to everyone you deal with.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Why Us Section -->
|
||||
|
||||
<!-- ======= About Section ======= -->
|
||||
<section id="about" class="about section-bg">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center align-items-stretch">
|
||||
<a href="https://www.youtube.com/watch?v=8quGD9W7B2I" class="venobox play-btn mb-4" data-vbtype="video" data-autoplay="true"></a>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
|
||||
<h4>Watch this video about Monero</h4>
|
||||
<h3>Monero is unstoppable money for unstoppable people</h3>
|
||||
<p>Monero is a project from the cypherpunk community, completely decentralized, without any central authority behind it. It is impossible to censor it,
|
||||
just like Bitcoin. The difference is that people who use Bitcoin can still be censored, while those who use Monero can't, since no one is able to know who is using it.
|
||||
</p>
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fa fa-balance-scale"></i></div>
|
||||
<h4 class="title"><a href="">Afraid the government will ban it? Think twice</a></h4>
|
||||
<p class="description">Since Monero is anonymous, it actually serves as an off-shore account without the hassle to open an account in a bank. Government officials won't have
|
||||
success in banning it, first because it is impossible to shutdown a decentralized network, and second because they also would be benefited from using it to hide funds.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fa fa-thermometer"></i></div>
|
||||
<h4 class="title"><a href="">Banning Monero would make it even more expensive</a></h4>
|
||||
<p class="description">Monero is scarce money tweaked with full privacy. There is huge demand for an asset like that, just like physical gold. Because there is utility
|
||||
in it, demand won't disapear with a ban. In fact, it would only create more scarcity, making the price rise. Monero is anti-fragile. Think about it: Monero protects
|
||||
your wealth against inflation and protects your privacy. If the governments ban citizens from protecting their wealth against inflation, and
|
||||
from having privacy, do you think it would become cheaper to get those things? Not at all. It would be expensive as hell.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
|
||||
<h4>Learn. Adapt. Evolve.</h4>
|
||||
<h3>Monero might be just what your investment portfolio needs</h3>
|
||||
<p>Monero is a cryptocurrency like no other. It has low correlation to Bitcoin, which makes it a good addition for your investments, since
|
||||
it will help diversify and might increase your future return. Remember: Monero is an infant of 2B dollars that will eventually swallow 32T off-shore accounts.
|
||||
If money became 100% digital, how come people still think you will have to physically open an account in another country to hide money?
|
||||
</p>
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-chess-king"></i></div>
|
||||
<h4 class="title"><a href="https://markets.businessinsider.com/currencies/news/why-the-dark-nets-most-active-market-ditched-bitcoin-for-monero-9698092?op=1" target="_blank">It has dethroned Bitcoin where privacy is a must</a></h4>
|
||||
<p class="description">Although the vast majority of illegal activities are done using the dollar, Bitcoin has also been used for that purpose in the past. Because
|
||||
Bitcoin has a transparent blockchain, these transactions can be retroactively identified and marked as "tainted". Since without expensive software you can't tell the
|
||||
difference, many innocents became accused of wrongdoing. Monero is unquestionably the most advanced money available, and its full privacy protects innocents from
|
||||
false accusations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fab fa-monero"></i></div>
|
||||
<h4 class="title"><a href="https://analyticsindiamag.com/monero-cryptocurrency-hackers/" target="_blank">Hackers prefer Monero over Bitcoin</a></h4>
|
||||
<p class="description">Monero is the tip of the spear in privacy. Its cutting edge technology made it the optimal choice for most hackers. There is an economics law that states
|
||||
people prefer to get rid of bad money and hold the best money. That's what we are witnessing, Bitcoin is being abandoned in favour of Monero,
|
||||
the only true privacy option.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-5 col-lg-6 video-box2 d-flex justify-content-center align-items-stretch">
|
||||
<a href="https://www.youtube.com/watch?v=REC5V7d3pqM" class="venobox play-btn mb-4" data-vbtype="video" data-autoplay="true"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End About Section -->
|
||||
|
||||
|
||||
<!-- ======= Services Section ======= -->
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>How to invest in Monero?</h2>
|
||||
<p>Interested? Just open an account in a trusted exchange, send a wire transfer, buy and withdraw it to your wallet. Remember to always hold your own keys, otherwise
|
||||
your coins can be stolen from the exchange. If you care about privacy, we really recommend using a decentralized exchange, or non-KYC (know-your-customer) exchange, but only advanced users might be able to do it.
|
||||
For more information go to <a href="https://localmonero.co/?language=en" target="_blank">Localmonero.co</a> or even try <a href="https://bisq.network/" target="_blank">Bisq.</a></p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-check"></i></div>
|
||||
<h4 class="title"><a href="https://www.kraken.com/en-us/learn/buy-monero-xmr" target="_blank">Open an Exchange account</a></h4>
|
||||
<p class="description">For US users, buy on <a href="https://www.kraken.com/en-us/learn/buy-monero-xmr">Kraken.com</a>, and other countries on <a href="https://www.binance.com/en">Binance.com</a>, or a non-KYC exchange*. Send the exchange a wire transfer and convert your funds into Monero.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-wallet"></i></div>
|
||||
<h4 class="title"><a href="https://www.getmonero.org/downloads/" target="_blank">Install or buy a wallet</a></h4>
|
||||
<p class="description">Use <a href="https://www.getmonero.org/downloads/">the official software wallet</a> on PC, <a href="https://cakewallet.com/">Cake wallet</a> or <a href="https://www.monerujo.io/">Monerujo</a> on your cellphone (or any other open-source wallet).
|
||||
You can also buy a <a href="https://www.ledger.com/">hardware wallet</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-sign-out-alt"></i></div>
|
||||
<h4 class="title"><a href="https://www.getmonero.org/resources/user-guides/securely_purchase.html" target="_blank">Withdraw to your wallet</a></h4>
|
||||
<p class="description">Access your account on the exchange and ask them to send your Monero to your wallet address. Never leave your coins on the exchange! Official <a href="https://www.getmonero.org/resources/user-guides/securely_purchase.html">Guide.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Services Section -->
|
||||
|
||||
<!-- ======= F.A.Q Section ======= -->
|
||||
<section id="faq" class="faq section-bg">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>F.A.Q.</h2>
|
||||
<p>Still in doubt about how to buy and store it? Read the basics here.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-list">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" class="collapse" href="#faq-list-1">What exactly is Monero?<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-1" class="collapse show" data-parent=".faq-list">
|
||||
<p>
|
||||
Monero is a cryptocurrency, just like Bitcoin. Monero is an open-source software project that runs on its own blockchain and it serves as a currency, just like the dollar.
|
||||
Many people leave their computers "mining" it, which means they lend their PC's processing power in order to validate all transactions on the network.
|
||||
By doing this, all this processing power is used to guarantee fair emission of new coins (which causes the decreasing annual inflation of {{ now_inflation }}) and to protect your money
|
||||
from hackers. Monero has a decreasing inflation that will eventually tend to zero, and because low inflation leads to scarcity, it works as a store of value, just like Gold or Bitcoin.
|
||||
Differently from Bitcoin, though, Monero has full privacy, which means it hides your balance and your transactions from being visible on the network for others.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-2" class="collapsed">How does Monero hide my money? How does it gives me privacy?<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-2" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Monero has cutting edge privacy tech, such as RingCTs, Stealth Addresses, Bulletproofs and Dandelion++. Ring Confidential Transactions (RingCTs) are used to obfuscate the sender of a transaction and the amount,
|
||||
while one-time stealth addresses are used to hide the address of the recipient using a method known as DKSAP. Bulletproofs is a protocol that improved RingCTs, reducing
|
||||
the size of the transactions, resulting in faster verification times and lower fees. Dandelion++ on the other hand was developed to obscure the IP address of the sender device.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-3" class="collapsed">Why do people say Monero is unstoppable?<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-3" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Monero developers have already tested the concept of atomic swaps between it and Bitcoin, which will happen directly from Monero's wallet and will be processed
|
||||
through Bitcoin's blockchain. Users in the near future will be able to swap easily one asset to the other, without having to rely on central authorities, such as
|
||||
exchanges, making it the best possible privacy solution for Bitcoin. In other words, to ban Monero, governments would first have to censor the whole Bitcoin
|
||||
blockchain, which won't happen, because Bitcoin is already rooted in society. So nobody will be able to prevent people from having privacy.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-4" class="collapsed">How does its inflation work? How are new coins created?<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-4" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
There was never a premine on Monero. This means no one controls vast amounts of coins, since all coins ever generated have always been distributed for the miners. The miners
|
||||
receive coins based on how much work they put into validating and defending the network, so it is a form of financial revenue they get for their service. Since at the
|
||||
beginning (2014) there were no coins in circulation, inflation was high. Now that there are {{ now_units}} units in circulation, the annual inflation is just {{ now_inflation }}.
|
||||
The payout per block decreases over time, and so will the the annual inflation rate slowly decrease towards zero. The demand for fungible, digital, privacy-oriented hard money will likely skyrocket
|
||||
in the next few years and outpace its inflation, so investors expect a considerable rise in prices.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-5" class="collapsed">Which is better, Bitcoin or Monero? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-5" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Bitcoin's price is way higher than Monero's since the former was introduced in 2009, while the latter only in 2014. When Bitcoin was created, the technology
|
||||
behind Monero didn't even exist. Bitcoin's methods were themselves a huge leap in tech. Now Bitcoin has a legion of investors, is an established cryptocurrency,
|
||||
and have a 1T USD marketcap. However Bitcoin has many flaws, such as transaction cost and time, and mostly lack of privacy. Bitcoin has no privacy at all.
|
||||
All transactions and balances are stored in a chain of blocks, and are totally visible for all internet users. In this sense, Bitcoin can't work as money,
|
||||
because one of the main atributes of a good money is fungibility, which is ability for all units being indistinguishble from the others. Since all Bitcoins' transactions
|
||||
are visible, you can differentiate one from the other. For example, you can choose to accept transactions from one address, but choose to forbid people from accepting
|
||||
another. This will inevitably allow governments to censor certain addresses based on what their owners are doing. Therefore, the lack of fungibility isn't a desired
|
||||
feature for good money. In this sense, Monero is much better money than Bitcoin. Monero is faster, cheaper to transact and completely fungible. You can't see differences
|
||||
between different Moneroj (Moneroj is plural from Monero), so you also can't censor people. With Monero people are free, while with Bitcoin people
|
||||
are at the mercy of their governments leaders.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-6" class="collapsed">Is Monero a good investment? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-6" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
While nobody can predict exactly what will happen in the future, Monero's community expect that there will be huge demand for privacy in the next few years. With
|
||||
our society relying more on digital processes, it is plausible that such type of tech will eventually find its niche in our daily lives. Monero is a bet
|
||||
on the digitalization of money, a bet in the need for privacy and also a bet that governments will lose the monopoly over money. In term of returns, while BTC took 900
|
||||
days to achieve 37x in its first bull market cycle, Monero took 1279 days to give 95x return. However you must not take this as financial advice, and you should
|
||||
invest at your own risk.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-7" class="collapsed">What's the first step if I want to invest in Monero? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-7" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Simply put, open an account on a trusted exchange, such as Kraken (US) or Binance (world). You just need to write your data in their form. After that, complete
|
||||
the whole registration process, which may include KYC procedures, like sending them a picture of your document and face. Also remember to enable two-factor
|
||||
authentication, which prevents hackers from stealing your funds and also allow withdrawals. Then send a wire transfer to the exchange and in a few hours they will
|
||||
update your balance. When this happens, buy your Monero and proceed for withdrawals.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-8" class="collapsed">If I already have an account, what next? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-8" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Now download a software wallet for Monero on your phone (such as Cake Wallet or Monerujo), or for your computer (the official wallet). You can also buy
|
||||
a hardware wallet such as the Ledger. When you complete this step, you can login on your exchange account and ask for a withdrawal of funds. This means
|
||||
you are going to ask the exchange to send all your Moneroj from your account into the address of your wallet. After that, you already have full control of your
|
||||
funds.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End F.A.Q Section -->
|
||||
|
||||
</main>
|
||||
<!-- End #main -->
|
||||
|
||||
<!-- ======= Footer ======= -->
|
||||
<footer id="footer">
|
||||
|
||||
<div class="footer-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6 col-md-6 footer-contact">
|
||||
<h3>Moneroj.net</h3>
|
||||
<p>
|
||||
Developed by <br>
|
||||
Morpheus<br>
|
||||
<strong>Email:</strong> morpheus.anonymous@protonmail.com<br>
|
||||
<strong>Twitter:</strong> CryptoMorpheus_<br>
|
||||
<strong>Github:</strong> cryptomorpheuss<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 footer-links">
|
||||
<h4>Useful Links</h4>
|
||||
<ul>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:index' %}">Home</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:sfmodel' %}">Charts</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:about' %}">About</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.getmonero.org/">Getmonero.org</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.reddit.com/r/Monero/">Reddit/Monero</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container d-lg-flex py-4">
|
||||
<div class="mr-lg-auto text-center text-lg-left">
|
||||
<div class="copyright a">
|
||||
<strong>© Copyright <span>Moneroj.net</span></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-links text-center text-lg-right pt-3 pt-lg-0">
|
||||
<a href="https://twitter.com/CryptoMorpheus_" class="twitter"><i class="bx bxl-twitter"></i></a>
|
||||
<a href="https://github.com/cryptomorpheuss/moneropro" class="github"><i class="bx bxl-github"></i></a>
|
||||
<a href="mailto:morpheus.anonymous@protonmail.com" class="github"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<!-- End Footer -->
|
||||
|
||||
<!-- Vendor JS Files -->
|
||||
<script src="{% static 'vendor/jquery/jquery2.min.js' %}"></script>
|
||||
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
395
monerojnet/templates/monerojnet/inflation.html
Normal file
395
monerojnet/templates/monerojnet/inflation.html
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Annualized Inflation for both Monero and Bitcoin</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Monero Annualized Inflation (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Bitcoin Annualized Inflation (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows a comparison between the anual inflation rate of Monero and Bitcoin. The lower the
|
||||
inflation, the better, since lower inflation rates
|
||||
protect better the purchasing power of its holders. Monero is by far the best privacy coin you hold,
|
||||
since its inflation is way lower than its competitors. Another thing
|
||||
evident from this chart is that even Bitcoin has a higher inflation than Monero. Cool!<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ inflationxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Future Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ finflationbtc|safe }},
|
||||
line: {
|
||||
color: '#aab311'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Future Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ finflationbtc|safe }},
|
||||
line: {
|
||||
color: '#aab311'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Future Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ finflationxmr|safe }},
|
||||
line: {
|
||||
color: '#bd0d0d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Future Inflation',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ finflationxmr|safe }},
|
||||
line: {
|
||||
color: '#bd0d0d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2, data1, data4];
|
||||
var data_mobile = [data3_mobile, data2_mobile, data1_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 1,
|
||||
xanchor: 'auto',
|
||||
y: 0.6,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.95,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Inflation (%)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2009-01-01', '2026-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-01-01', '2026-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
351
monerojnet/templates/monerojnet/inflationfractal.html
Normal file
351
monerojnet/templates/monerojnet/inflationfractal.html
Normal file
|
|
@ -0,0 +1,351 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Inflation-Adjusted Fractal
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Multiple (considering inflation)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_multiple }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Multiple</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This is a very simple chart that displays Monero's two cycles, one above the other, as fractals one from
|
||||
the other. This shows the past and current returns
|
||||
as a multiple from the previous cycle top, considering the inflation variation since the current cycle
|
||||
started. Formula is sqrt(inflation/inflationattop)*price.
|
||||
The X axis is scaled and reffers to the percentage of the cycle that is completed (judging by the
|
||||
price-action pattern). This adjustment was necessary because
|
||||
the blue line seems to be doing exactly what the red line did, but since there is so much difference in
|
||||
the inflation from the last local top to current price (10% to 1%),
|
||||
the current price is way higher than it was supposed to be. This is because a lower inflation rate means
|
||||
less sell pressure, and therefore higher prices. If
|
||||
this logic is true, then, since inflation will fall to 0.8% soon enough, we should expect even higher
|
||||
prices.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'First Cycle',
|
||||
x: {{ dates1|safe }},
|
||||
y: {{ cycle1|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'First Cycle',
|
||||
x: {{ dates1|safe }},
|
||||
y: {{ cycle1|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Second Cycle',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ cycle2|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Second Cycle',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ cycle1|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data3];
|
||||
var data_mobile = [data2_mobile, data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.80,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Multiple from previous top',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.2f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['0', '100']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: ",.2f",
|
||||
showgrid: true,
|
||||
type: 'number',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['0', '100']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
511
monerojnet/templates/monerojnet/inflationreturn.html
Normal file
511
monerojnet/templates/monerojnet/inflationreturn.html
Normal file
|
|
@ -0,0 +1,511 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Return vs. Inflation
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero's Return on capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Dash's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Grin's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_grin }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Zcash's Return on Capital</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_zcash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the return on capital since inception for each privacy coin, plotted against its own
|
||||
reverse from inflation (x100). The x axis value means the number of years
|
||||
it would take to double the supply of the coin based on current inflation. This shows how Monero is a
|
||||
beast, having higher return at the same time as very low inflation. Both values
|
||||
are correlated and inversely proportional.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Return On Capital',
|
||||
y: {{ dash|safe }},
|
||||
x: {{ inflation_dash|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#2f21f7'},
|
||||
marker: {
|
||||
color: '#2f21f7',
|
||||
sizemode: 'area',
|
||||
size: 4,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Return On Capital',
|
||||
y: {{ dash|safe }},
|
||||
x: {{ inflation_dash|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#2f21f7'},
|
||||
marker: {
|
||||
color: '#2f21f7',
|
||||
sizemode: 'area',
|
||||
size: 2,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Return On Capital',
|
||||
y: {{ grin|safe }},
|
||||
x: {{ inflation_grin|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#dcdf30'},
|
||||
marker: {
|
||||
color: '#dcdf30',
|
||||
sizemode: 'area',
|
||||
size: 4,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Return On Capital',
|
||||
y: {{ grin|safe }},
|
||||
x: {{ inflation_grin|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#dcdf30'},
|
||||
marker: {
|
||||
color: '#dcdf30',
|
||||
sizemode: 'area',
|
||||
size: 2,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Return On Capital',
|
||||
y: {{ zcash|safe }},
|
||||
x: {{ inflation_zcash|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#ffb6a0'},
|
||||
marker: {
|
||||
color: '#ffb6a0',
|
||||
sizemode: 'area',
|
||||
size: 4,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Return On Capital',
|
||||
y: {{ zcash|safe }},
|
||||
x: {{ inflation_zcash|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#ffb6a0'},
|
||||
marker: {
|
||||
color: '#ffb6a0',
|
||||
sizemode: 'area',
|
||||
size: 2,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return On Capital',
|
||||
y: {{ xmr|safe }},
|
||||
x: {{ inflation_xmr|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#dd1d1d'},
|
||||
marker: {
|
||||
color: '#dd1d1d',
|
||||
sizemode: 'area',
|
||||
size: 4,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Return On Capital',
|
||||
y: {{ xmr|safe }},
|
||||
x: {{ inflation_xmr|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#dd1d1d'},
|
||||
marker: {
|
||||
color: '#dd1d1d',
|
||||
sizemode: 'area',
|
||||
size: 2,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Return On Capital',
|
||||
y: {{ btc|safe }},
|
||||
x: {{ inflation_btc|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#ff9d1d'},
|
||||
marker: {
|
||||
color: '#ff9d1d',
|
||||
sizemode: 'area',
|
||||
size: 4,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Return On Capital',
|
||||
y: {{ btc|safe }},
|
||||
x: {{ inflation_btc|safe }},
|
||||
mode: "markers",
|
||||
line: {color: '#ff9d1d'},
|
||||
marker: {
|
||||
color: '#ff9d1d',
|
||||
sizemode: 'area',
|
||||
size: 2,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2, data1, data4];
|
||||
var data_mobile = [data3_mobile, data2_mobile, data1_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Return on Capital',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Number of years to double the supply',
|
||||
font: {
|
||||
family: 'Nunito, monospace',
|
||||
size: 15,
|
||||
color: '#dddddd'
|
||||
}
|
||||
},
|
||||
nticks: 10,
|
||||
showgrid: true,
|
||||
gridcolor: "#444444",
|
||||
tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
},
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 50,
|
||||
b: 60,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Number of years to double the supply',
|
||||
font: {
|
||||
family: 'Nunito, monospace',
|
||||
size: 10,
|
||||
color: '#dddddd'
|
||||
}
|
||||
},
|
||||
nticks: 10,
|
||||
showgrid: true,
|
||||
gridcolor: "#444444",
|
||||
tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
},
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
6
monerojnet/templates/monerojnet/maintenance.html
Normal file
6
monerojnet/templates/monerojnet/maintenance.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
{{ message }}
|
||||
|
||||
{% endblock %}
|
||||
422
monerojnet/templates/monerojnet/marketcap.html
Normal file
422
monerojnet/templates/monerojnet/marketcap.html
Normal file
|
|
@ -0,0 +1,422 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Marketcap (USD)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero's Marketcap</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Dash's Marketcap</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_dash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Grin's Marketcap</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_grin }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Zcash's Marketcap</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_zcash }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-bomb fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the comparison between Monero's most important competitors. It shows their total marketcap value over time.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Marketcap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ dash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash Marketcap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ dash|safe }},
|
||||
line: {
|
||||
color: '#2f21f7'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Marketcap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ grin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Grin Marketcap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ grin|safe }},
|
||||
line: {
|
||||
color: '#dcdf30'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Marketcap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ zcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Zcash Marketcap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ zcash|safe }},
|
||||
line: {
|
||||
color: '#ffb6a0'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Marketcap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Marketcap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2, data1, data4];
|
||||
var data_mobile = [data3_mobile, data2_mobile, data1_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Marketcap (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-04-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-04-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
479
monerojnet/templates/monerojnet/merchants.html
Normal file
479
monerojnet/templates/monerojnet/merchants.html
Normal file
|
|
@ -0,0 +1,479 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Merchants accepting cryptocurrency (absolute numbers)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Ethereum</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_eth }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-ethereum fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Merchants accepting a coin.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 5
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 5
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ethereum',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data3|safe }},
|
||||
line: {
|
||||
color: '#0044ff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ethereum',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data3|safe }},
|
||||
line: {
|
||||
color: '#0044ff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'BitcoinCash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data4|safe }},
|
||||
line: {
|
||||
color: '#aaaaaa'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'BitcoinCash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data4|safe }},
|
||||
line: {
|
||||
color: '#aaaaaa'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Litecoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data5|safe }},
|
||||
line: {
|
||||
color: '#888888'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Litecoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data5|safe }},
|
||||
line: {
|
||||
color: '#888888'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data6 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ripple',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data6|safe }},
|
||||
line: {
|
||||
color: '#666666'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data6_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ripple',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data6|safe }},
|
||||
line: {
|
||||
color: '#666666'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data7 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data7|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data7_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data7|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1 , data3, data4, data5, data6, data7, data2];
|
||||
var data_mobile = [data1_mobile, data3_mobile, data4_mobile, data5_mobile, data6_mobile, data7_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Merchants',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2020-08-01', '2022-11-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2020-08-01', '2022-11-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
479
monerojnet/templates/monerojnet/merchants_increase.html
Normal file
479
monerojnet/templates/monerojnet/merchants_increase.html
Normal file
|
|
@ -0,0 +1,479 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Monthly increase in number of merchants accepting cryptocurrency (absolute numbers)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Increase</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Increase</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Ethereum Increase</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_eth }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-ethereum fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Increase in the number of merchants accepting a coin.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 5
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 5
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ethereum',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data3|safe }},
|
||||
line: {
|
||||
color: '#0044ff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ethereum',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data3|safe }},
|
||||
line: {
|
||||
color: '#0044ff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'BitcoinCash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data4|safe }},
|
||||
line: {
|
||||
color: '#aaaaaa'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'BitcoinCash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data4|safe }},
|
||||
line: {
|
||||
color: '#aaaaaa'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Litecoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data5|safe }},
|
||||
line: {
|
||||
color: '#888888'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Litecoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data5|safe }},
|
||||
line: {
|
||||
color: '#888888'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data6 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ripple',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data6|safe }},
|
||||
line: {
|
||||
color: '#666666'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data6_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ripple',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data6|safe }},
|
||||
line: {
|
||||
color: '#666666'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data7 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data7|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data7_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data7|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1 , data3, data4, data5, data6, data7, data2];
|
||||
var data_mobile = [data1_mobile, data3_mobile, data4_mobile, data5_mobile, data6_mobile, data7_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Increase (new merchants per month)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2020-08-01', '2022-11-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2020-08-01', '2022-11-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
479
monerojnet/templates/monerojnet/merchants_percentage.html
Normal file
479
monerojnet/templates/monerojnet/merchants_percentage.html
Normal file
|
|
@ -0,0 +1,479 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Increase in number of merchants accepting cryptocurrency (percentage)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Ethereum</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_eth }}%</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-ethereum fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Increase in percentage of the number of merchants accepting a coin.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data1|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 5
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data2|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 5
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ethereum',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data3|safe }},
|
||||
line: {
|
||||
color: '#0044ff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ethereum',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data3|safe }},
|
||||
line: {
|
||||
color: '#0044ff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'BitcoinCash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data4|safe }},
|
||||
line: {
|
||||
color: '#aaaaaa'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'BitcoinCash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data4|safe }},
|
||||
line: {
|
||||
color: '#aaaaaa'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Litecoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data5|safe }},
|
||||
line: {
|
||||
color: '#888888'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Litecoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data5|safe }},
|
||||
line: {
|
||||
color: '#888888'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data6 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ripple',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data6|safe }},
|
||||
line: {
|
||||
color: '#666666'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data6_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Ripple',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data6|safe }},
|
||||
line: {
|
||||
color: '#666666'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data7 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data7|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data7_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Dash',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ data7|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1 , data3, data4, data5, data6, data7, data2];
|
||||
var data_mobile = [data1_mobile, data3_mobile, data4_mobile, data5_mobile, data6_mobile, data7_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Increase (%)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2020-08-01', '2022-11-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2020-08-01', '2022-11-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
396
monerojnet/templates/monerojnet/metcalfesats.html
Normal file
396
monerojnet/templates/monerojnet/metcalfesats.html
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Metcalfe's Law (BTC)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Estimate</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_metcalfe }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Top Estimate</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the Monero's supposed fair price, judging by the number of transactions it has each day
|
||||
on. Higher transaction count means the coin is being increasingly
|
||||
used, and since Metcalfe's Law proposes that more information being exchanged in a network means the
|
||||
network itself should be worth more, it also means the coin should
|
||||
increase in price. This was calculated as "how much Monero should be worth if it was a part of Bitcoin's
|
||||
network?" The answear is that Monero should be worth as much
|
||||
as its transactions represent as a percentage of Bitcoin's own transactions, but considering both coins'
|
||||
supplies. The formula is XMR-Supply*XMR-Tx/(BTC-Tx*BTC-Supply);<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fair price (XMR-Tx/BTC-Tx)',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ metcalfe|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fair price (XMR-Tx/BTC-Tx)',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ metcalfe|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ prices|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ prices|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data4];
|
||||
var data_mobile = [data3_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (BTC)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.4f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.4f"
|
||||
,nticks: 5
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
397
monerojnet/templates/monerojnet/metcalfeusd.html
Normal file
397
monerojnet/templates/monerojnet/metcalfeusd.html
Normal file
|
|
@ -0,0 +1,397 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Metcalfe's Law (USD)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-money-bill fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Estimate</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_metcalfe }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Top Estimate</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the Monero's supposed fair price, judging by the number of transactions it has each day
|
||||
on. Higher transaction count means the coin is being increasingly
|
||||
used, and since Metcalfe's Law proposes that more information being exchanged in a network means the
|
||||
network itself should be worth more, it also means the coin should
|
||||
increase in price. This was calculated as "how much Monero should be worth if it was a part of Bitcoin's
|
||||
network?" The answear is that Monero should be worth as much
|
||||
as its transactions represent as a percentage of Bitcoin's own transactions, but considering both coins'
|
||||
supplies. The formula is BTC-PriceUSD*XMR-Supply*XMR-Tx/(BTC-Tx*BTC-Supply);<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fair price (XMR-Tx/BTC-Tx)',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ metcalfe|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fair price (XMR-Tx/BTC-Tx)',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ metcalfe|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ prices|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ prices|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data4];
|
||||
var data_mobile = [data3_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
342
monerojnet/templates/monerojnet/minerfees.html
Normal file
342
monerojnet/templates/monerojnet/minerfees.html
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Daily Miner Fees (Fees excluded new coins, Dollars)
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
XMR Miner Fees (USD)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">${{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
BTC Miner Fees (USD)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">${{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total fees charged by miners daily.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Fees',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Fees',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Fees',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Fees',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Miner Fees (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
342
monerojnet/templates/monerojnet/minerfeesntv.html
Normal file
342
monerojnet/templates/monerojnet/minerfeesntv.html
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Daily Miner Fees (Fees excluded new coins, Native Units)
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
XMR Miner Fees (XMR)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
BTC Miner Fees (BTC)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total fees charged by miners daily.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Fees',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Fees',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Fees',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Fees',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Miner Fees (Native Units)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
341
monerojnet/templates/monerojnet/minerrev.html
Normal file
341
monerojnet/templates/monerojnet/minerrev.html
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Average Daily Miner Revenue (Dollars)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current XMR Miner Revenue (USD)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current BTC Miner Revenue (USD)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows average daily miner revenue (fees plus new coins) for both Bitcoin and Monero.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Daily Miner Revenue (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
343
monerojnet/templates/monerojnet/minerrevcap.html
Normal file
343
monerojnet/templates/monerojnet/minerrevcap.html
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Annualized Miner Revenue / Marketcap (Fees plus new coins,
|
||||
percentage)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
XMR Miner Revenue (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
BTC Miner Revenue (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows average daily miner revenue for both Bitcoin and Monero calculated as percentage of
|
||||
their marketcaps.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Annualized Miner Revenue (%)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.4f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2008-11-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.4f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2008-11-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
343
monerojnet/templates/monerojnet/minerrevntv.html
Normal file
343
monerojnet/templates/monerojnet/minerrevntv.html
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Total Daily Miner Revenue (Fees plus new coins, Native Units)
|
||||
</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
XMR Miner Revenue (XMR)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
BTC Miner Revenue (BTC)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows average daily miner revenue for both Bitcoin and Monero calculated in terms of the own
|
||||
coin.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Miner Revenue',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Miner Revenue (Native Units)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-06-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
437
monerojnet/templates/monerojnet/movingaverage.html
Normal file
437
monerojnet/templates/monerojnet/movingaverage.html
Normal file
|
|
@ -0,0 +1,437 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Price in log scale (USD)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price (USD)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-money-bill fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Stock-to-flow Price (USD)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Price To Date (USD)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Annual Inflation (%)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-percentage fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the price of the coin on a log scale. The color of the points indicate their position
|
||||
on the Bitcoin pair, being red as overbought and blue as cheap.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Resistance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ average2|safe }},
|
||||
line: {
|
||||
color: '#662222'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Resistance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ average2|safe }},
|
||||
line: {
|
||||
color: '#662222'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy line',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ average1|safe }},
|
||||
line: {
|
||||
color: '#225522'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy line',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ average1|safe }},
|
||||
line: {
|
||||
color: '#225522'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data = [data3, data4, data2];
|
||||
var data_mobile = [data4_mobile, data2_mobile, data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.80,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'USD',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-12-20', '2026-01-10']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
317
monerojnet/templates/monerojnet/percentage.html
Normal file
317
monerojnet/templates/monerojnet/percentage.html
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Transaction Percentage (XMR's tx / BTC's tx)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Percentage</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Percentage</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total transactions Monero has daily as a percentage of Bitcoin's transactions,
|
||||
which we might call "Monero's Transaction Dominance" over Bitcoin.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fractal of past price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fractal of past price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3];
|
||||
var data_mobile = [data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.8,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Percentage (%)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
470
monerojnet/templates/monerojnet/powerlaw.html
Normal file
470
monerojnet/templates/monerojnet/powerlaw.html
Normal file
|
|
@ -0,0 +1,470 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Power Law</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-money-bill fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Stock-to-flow Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Daily Close</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Annual Inflation</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-percentage fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the current support, resistance and best fit for buying using Bitcoin's Power Law
|
||||
Model, ported to Monero. To see more about this, check Christopher's <a
|
||||
href="https://medium.com/quantodian-publications/bitcoins-natural-long-term-power-law-corridor-of-growth-649d0e9b3c94"
|
||||
target="_blank">article.</a><br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Support',
|
||||
x: {{ counter|safe }},
|
||||
y: {{ line1|safe }},
|
||||
line: {
|
||||
color: '#225522'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Support',
|
||||
x: {{ counter|safe }},
|
||||
y: {{ line1|safe }},
|
||||
line: {
|
||||
color: '#225522'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy Zone',
|
||||
x: {{ counter|safe }},
|
||||
y: {{ line2|safe }},
|
||||
line: {
|
||||
color: '#224422',
|
||||
width: 1,
|
||||
},
|
||||
fill: 'tonexty'
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy Zone',
|
||||
x: {{ counter|safe }},
|
||||
y: {{ line2|safe }},
|
||||
line: {
|
||||
color: '#224422'
|
||||
,width: 1
|
||||
},
|
||||
fill: 'tonexty'
|
||||
};
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Resistance',
|
||||
x: {{ counter|safe }},
|
||||
y: {{ line3|safe }},
|
||||
line: {
|
||||
color: '#552222'
|
||||
,width: 1
|
||||
},
|
||||
fill: 'tonexty'
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Resistance',
|
||||
x: {{ counter|safe }},
|
||||
y: {{ line3|safe }},
|
||||
line: {
|
||||
color: '#552222'
|
||||
,width: 1
|
||||
},
|
||||
fill: 'tonexty'
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ counter|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ counter|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data2, data3, data4];
|
||||
var data_mobile = [data1_mobile, data2_mobile, data3_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Year',
|
||||
font: {
|
||||
family: 'Nunito, monospace',
|
||||
size: 14,
|
||||
color: '#7f7f7f'
|
||||
}
|
||||
},
|
||||
nticks: 20,
|
||||
tickvals: {{ dates|safe }},
|
||||
ticktext: {{ years|safe }},
|
||||
showgrid: true,
|
||||
gridcolor: "#444444",
|
||||
tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
},
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 60,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-12-20', '2026-01-10']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
387
monerojnet/templates/monerojnet/pricelin.html
Normal file
387
monerojnet/templates/monerojnet/pricelin.html
Normal file
|
|
@ -0,0 +1,387 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Price (USD)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-money-bill fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Stock-to-flow Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Daily Close</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Annual Inflation</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-percentage fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the price of the coin on a linear scale. The color of the points indicate their
|
||||
position on the Bitcoin pair, being red as overbought and blue as cheap.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data4];
|
||||
var data_mobile = [data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.80,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-12-20', '2026-01-10']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
387
monerojnet/templates/monerojnet/pricelog.html
Normal file
387
monerojnet/templates/monerojnet/pricelog.html
Normal file
|
|
@ -0,0 +1,387 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Price (USD)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-money-bill fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Stock-to-flow Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Daily Close</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-3 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Annual Inflation</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-percentage fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the price of the coin on a log scale. The color of the points indicate their position
|
||||
on the Bitcoin pair, being red as overbought and blue as cheap.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data4];
|
||||
var data_mobile = [data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.80,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2009-12-20', '2026-01-10']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
368
monerojnet/templates/monerojnet/pricesats.html
Normal file
368
monerojnet/templates/monerojnet/pricesats.html
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Price (BTC)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bottom</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ bottom }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-angle-double-down fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Top</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the price of the coin on the BTC pair on a linear scale. The color of the points
|
||||
indicate their position on the Bitcoin pair, being red as overbought and blue as cheap.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data4];
|
||||
var data_mobile = [data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.5,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.5,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Price (BTC)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.4f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.4f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
488
monerojnet/templates/monerojnet/pt.html
Normal file
488
monerojnet/templates/monerojnet/pt.html
Normal file
|
|
@ -0,0 +1,488 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% load static %}
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<title>Moneroj.net</title>
|
||||
<meta content="" name="description">
|
||||
<meta content="" name="keywords">
|
||||
|
||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'img/favicon.png' %}" rel="icon">
|
||||
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
|
||||
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
|
||||
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
div.a {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.color-orange {
|
||||
color: #ff6b3b;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{% url 'monerojnet:index' %}"><i class="fab fa-monero"></i> Monero<text class="color-orange">j</text></a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">Inicial <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:sfmodel' %}">Gráficos</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:artigos' %}">Artigos</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'monerojnet:about' %}">Sobre</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown" >
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Idiomas
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="nav-link" href="{% url 'monerojnet:index' %}">Inglês</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:fr' %}">Francês</a>
|
||||
<a class="nav-link" href="{% url 'monerojnet:pt' %}">Português</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
|
||||
<div class="container">
|
||||
<h1>Você sabia que todos os seus dados são expostos quando você usa Bitcoin?</h1>
|
||||
<h2>Monero é o que as pessoas pensam que estão comprando quando investem em Bitcoins.</h2>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Hero -->
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- ======= Why Us Section ======= -->
|
||||
<section id="why-us" class="why-us">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-lg-5">
|
||||
<div class="content">
|
||||
<h3>O Monero protege sua privacidade, o Bitcoin não.</h3>
|
||||
<p>
|
||||
A maioria das pessoas pensa que o Bitcoin é "anônimo". Elas não poderiam estar mais longe da verdade. O Bitcoin é um livro contábil transparente e
|
||||
todos os dados das transações ficam visíveis publicamente para sempre na Internet, como a quantidade, endereços do remetente e do destinatário, IPs,
|
||||
histórico e assim por diante. Bitcoin é na verdade um pesadelo de privacidade. É por isso que inventaram o Monero!
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a href="https://www.fintechweekly.com/magazine/articles/an-untraceable-currency-bitcoin-privacy-concerns" class="more-btn" target="_blank">
|
||||
Saiba mais sobre os problemas do Bitcoin aqui<i class="bx bx-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-8 col-lg-7 d-flex">
|
||||
<div class="icon-boxes d-flex flex-column justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="far fa-eye-slash"></i>
|
||||
<h4>Monero é anônimo</h4>
|
||||
<p>Nenhuma empresa, governo ou terceiro pode ver o conteúdo das transações. Ninguém, exceto o remetente e o destinatário, podem ver o quanto foi enviado.
|
||||
Ninguém pode ver seu saldo. Até o seu IP fica oculto por padrão.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="bx bx-cube-alt"></i>
|
||||
<h4>Monero protege seus dados e seus fundos</h4>
|
||||
<p>Monero é um software de código aberto, auditado de forma independente que garante o mais alto padrão de segurança.
|
||||
O desenvolvimento é financiado por Financiamento Comunitário, protegendo contra pessoas mal-intencionadas. Suas moedas são suas e ninguém pode pegá-las.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<h4>Monero devolve sua liberdade</h4>
|
||||
<p>A privacidade por padrão evita vigilância e censura em massa, garantindo a liberdade pessoal de seus usuários.
|
||||
Monero também tem transparência opcional como um recurso, ajudando as organizações a comprovar seus saldos, se necessário.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-8 col-lg-7 d-flex">
|
||||
<div class="icon-boxes d-flex flex-column justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-percent"></i>
|
||||
<h4>Monero tem inflação baixa</h4>
|
||||
<p>A inflação anual atual é de apenas {{ now_inflation }} e está diminuindo constantemente até que a emissão "residual" comece por volta de 2022.
|
||||
Não houve moedas mineradas de maneira desleal em seu início, sendo todas mineradas de forma justa desde 2014.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-coins"></i>
|
||||
<h4>Monero é escasso</h4>
|
||||
<p>Há menos Monero em circulação do que Bitcoin, e isso permanecerá um fato até 2040.
|
||||
Até essa data, prevê-se que Monero assumirá o mercado de contas offshore, que atualmente é pelo menos 16.000 vezes maior do que toda a sua capitalização.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="icon-box mt-4 mt-xl-0">
|
||||
<i class="fas fa-rocket"></i>
|
||||
<h4>Extremamente rápido e barato de usar</h4>
|
||||
<p>As transações aparecem instantaneamente em sua carteira e levam apenas alguns minutos até que os fundos sejam desbloqueados e possam ser gastos novamente.
|
||||
A transmissão da maioria das transações custa menos de um centavo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-5"><br>
|
||||
<div class="content">
|
||||
<h3>As pessoas fingem que o Bitcoin resolve todos nossos problemas. Essa é uma mentira terrível.</h3>
|
||||
<p>
|
||||
Bitcoin é um bom projeto que fará os governos competirem com o dinheiro privado, mas não podemos fingir que resolverá os problemas de privacidade.
|
||||
Embora o Bitcoin seja bom para instituições que precisam ser auditadas (já que a auditoria é mais fácil por causa da transparência), a maioria das pessoas
|
||||
prefere usar dinheiro anônimo para fazer negócios, já que você não quer expor todos os seus dados a todos com quem você lida.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Why Us Section -->
|
||||
|
||||
<!-- ======= About Section ======= -->
|
||||
<section id="about" class="about section-bg">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center align-items-stretch">
|
||||
<a href="https://www.youtube.com/watch?v=8quGD9W7B2I" class="venobox play-btn mb-4" data-vbtype="video" data-autoplay="true"></a>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
|
||||
<h4>Veja este vídeo sobre Monero</h4>
|
||||
<h3>Monero é dinheiro imparável para empreendedores imparáveis</h3>
|
||||
<p>Monero é um projeto da comunidade cypherpunk, totalmente descentralizado, sem nenhuma autoridade central por trás dele.
|
||||
É impossível censurar suas transações, assim como o Bitcoin. A diferença é que quem usa Bitcoin ainda pode ser censurado, enquanto quem usa Monero não,
|
||||
já que ninguém sabe quem está usando.
|
||||
</p>
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fa fa-balance-scale"></i></div>
|
||||
<h4 class="title"><a href="">Tem medo de que o governo o proíba? Pense novamente.</a></h4>
|
||||
<p class="description">Como o Monero é anônimo, ele na verdade serve como uma conta off-shore sem o incômodo de abrir uma conta em um banco.
|
||||
Funcionários do governo não terão sucesso em bani-lo, primeiro porque é impossível encerrar uma rede descentralizada e, segundo, porque eles também seriam
|
||||
beneficiados por usá-la para ocultar fundos.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fa fa-thermometer"></i></div>
|
||||
<h4 class="title"><a href="">Banir Monero tornaria ele ainda mais caro</a></h4>
|
||||
<p class="description">Monero é dinheiro escasso aprimorado com total privacidade. Há uma grande demanda por um ativo como esse,
|
||||
assim pelo ouro físico. Como há utilidade nesse ativo, a demanda não desaparecerá com uma proibição. Na verdade, isso apenas criaria mais escassez,
|
||||
fazendo o preço subir. Monero é anti-frágil. Pense nisso: Monero protege sua riqueza contra a inflação e protege sua privacidade. Se os governos proibirem
|
||||
os cidadãos de proteger sua riqueza contra a inflação e de ter privacidade, você acha que ficaria mais barato conseguir essas coisas? De jeito nenhum.
|
||||
Seria muito caro.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
|
||||
<h4>Aprender. Adaptar. Evoluir.</h4>
|
||||
<h3>Monero pode ser exatamente o que sua carteira de investimentos precisa</h3>
|
||||
<p>Monero é uma criptomoeda como nenhuma outra. Possui baixa correlação com o Bitcoin, o que o torna um bom complemento para seus
|
||||
investimentos, pois ajudará a diversificar e poderá aumentar seu retorno futuro. Lembre-se: Monero é uma criança de 2 bilhões de dólares que acabará
|
||||
engolindo contas off-shore de 32 trilhões de dólares. Se o dinheiro se tornar 100% digital, como as pessoas ainda pensam que será necessário abrir fisicamente
|
||||
uma conta em outro país para esconder dinheiro?
|
||||
</p>
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-chess-king"></i></div>
|
||||
<h4 class="title"><a href="https://markets.businessinsider.com/currencies/news/why-the-dark-nets-most-active-market-ditched-bitcoin-for-monero-9698092?op=1" target="_blank">Ele destronou o Bitcoin onde é necessário privacidade</a></h4>
|
||||
<p class="description">Embora a grande maioria das atividades ilegais seja realizada com o uso do dólar, o Bitcoin também foi usado para esse fim no passado.
|
||||
Como o Bitcoin tem um blockchain transparente, essas transações podem ser identificadas retroativamente e marcadas como "contaminadas".
|
||||
Visto que sem um software caro você não pode dizer a diferença, muitos inocentes foram acusados de transgressão.
|
||||
Monero é, sem dúvida, o dinheiro mais avançado disponível, e sua total privacidade protege inocentes de falsas acusações.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fab fa-monero"></i></div>
|
||||
<h4 class="title"><a href="https://analyticsindiamag.com/monero-cryptocurrency-hackers/" target="_blank">Hackers preferem Monero a Bitcoin</a></h4>
|
||||
<p class="description">Monero é a ponta da lança em privacidade. Sua tecnologia de o tornou a escolha ideal para a maioria dos hackers.
|
||||
Existe uma lei econômica que diz que as pessoas preferem se livrar do dinheiro ruim e ficar com o melhor dinheiro.
|
||||
Isso é o que estamos testemunhando, o Bitcoin está sendo abandonado em favor do Monero, a única opção de privacidade verdadeira.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-5 col-lg-6 video-box2 d-flex justify-content-center align-items-stretch">
|
||||
<a href="https://www.youtube.com/watch?v=REC5V7d3pqM" class="venobox play-btn mb-4" data-vbtype="video" data-autoplay="true"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End About Section -->
|
||||
|
||||
|
||||
<!-- ======= Services Section ======= -->
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>Como investir no Monero?</h2>
|
||||
<p>Interessado? Basta abrir uma conta em uma corretora confiável, enviar uma transferência eletrônica, comprar e sacar para sua carteira.
|
||||
Lembre-se de sempre ter sua própria carteira de Monero, caso contrário suas moedas podem ser roubadas da corretora.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-check"></i></div>
|
||||
<h4 class="title"><a href="https://www.kraken.com/en-us/learn/buy-monero-xmr" target="_blank">Abrir uma conta numa corretora</a></h4>
|
||||
<p class="description">Abra uma conta na <a href="https://www.binance.com/pt-BR">Binance.com</a>. Envie uma transferência bancária para a troca e converta seus fundos em Monero.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-wallet"></i></div>
|
||||
<h4 class="title"><a href="https://www.getmonero.org/downloads/" target="_blank">INSTALE OU COMPRE UMA CARTEIRA</a></h4>
|
||||
<p class="description">Use <a href="https://www.getmonero.org/downloads/">a carteira oficial</a> no PC, <a href="https://cakewallet.com/">Cake wallet</a> ou <a href="https://www.monerujo.io/">Monerujo</a> no celular.
|
||||
Você também pode comprar um <a href="https://www.ledger.com/">Ledger</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fas fa-sign-out-alt"></i></div>
|
||||
<h4 class="title"><a href="https://www.getmonero.org/resources/user-guides/securely_purchase.html" target="_blank">Saque PARA SUA CARTEIRA</a></h4>
|
||||
<p class="description">Entre na corretora e peça que enviem o seu Monero para a sua carteira. Nunca deixe suas moedas na bolsa! Siga o <a href="https://www.getmonero.org/resources/user-guides/securely_purchase.html">Guia oficial.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Services Section -->
|
||||
|
||||
<!-- ======= F.A.Q Section ======= -->
|
||||
<section id="faq" class="faq section-bg">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>Perguntas frequentes</h2>
|
||||
<p>Ainda não sabe como comprar e armazenar? Leia o básico aqui.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-list">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" class="collapse" href="#faq-list-1">O que exatamente é o Monero?<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-1" class="collapse show" data-parent=".faq-list">
|
||||
<p>
|
||||
Monero é uma criptomoeda, assim como o Bitcoin. Monero é um projeto de software de código aberto que roda em sua própria blockchain e serve como moeda,
|
||||
assim como o dólar. Muitas pessoas deixam seus computadores "minerando", o que significa que emprestam o poder de processamento de seus PCs para validar
|
||||
todas as transações na rede. Com isso, todo esse poder de processamento é usado para garantir a emissão justa de novas moedas (o que causa a inflação anual)
|
||||
e para proteger seu dinheiro de hackers. Monero tem uma inflação decrescente que eventualmente tenderá a zero e, como a inflação baixa leva à escassez,
|
||||
ela funciona como reserva de valor para o seu patrimônio, assim como o ouro ou o Bitcoin. Diferentemente do Bitcoin, porém, Monero tem total privacidade.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-2" class="collapsed">Como funciona a privacidade do Monero?<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-2" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Monero tem tecnologia de privacidade de ponta, como RingCTs, Stealth Addresses, Bulletproofs e Dandelion++. Ring Confidential Transactions (RingCTs) são usados para
|
||||
ofuscar o remetente de uma transação e o valor, enquanto Stealth Addresses únicos são usados para ocultar o endereço do destinatário usando um método conhecido como DKSAP.
|
||||
Bulletproofs é um protocolo que melhorou os RingCTs, reduzindo o tamanho das transações, resultando em tempos de verificação mais rápidos e taxas mais baixas.
|
||||
Por outro lado, o Dandelion++ foi desenvolvido para ocultar o endereço IP do dispositivo remetente.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-3" class="collapsed">Por que as pessoas dizem que o Monero é imparável?<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-3" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Os desenvolvedores do Monero já testaram o conceito de trocas atômicas entre ele e o Bitcoin, que acontecerão diretamente da carteira do Monero e serão processadas
|
||||
através do blockchain do Bitcoin. Os usuários em um futuro próximo poderão trocar facilmente um ativo por outro, sem ter que depender de autoridades centrais, como as
|
||||
corretoras, tornando-se a melhor solução de privacidade possível para Bitcoin. Em outras palavras, para banir o Monero, os governos teriam primeiro que censurar todo
|
||||
o blockchain do Bitcoin, o que não acontecerá, porque o Bitcoin já está enraizado na sociedade. Portanto, ninguém poderá impedir que as pessoas tenham privacidade.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-4" class="collapsed">Como funciona a inflação do Monero?<i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-4" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Nunca houve uma pré-mineração em Monero. Isso significa que ninguém controla grandes quantidades de moedas, uma vez que todas as moedas geradas
|
||||
sempre foram distribuídas para os mineradores que trabalhassem honestamente. Os mineradores recebem moedas com base em quanto trabalho eles colocam
|
||||
em validar e defender a rede, portanto, é uma forma de receita financeira que eles obtêm por seus serviços. No início (2014) não havia moedas em
|
||||
circulação, a inflação era elevada. Hoje existem {{ now_units }} unidades em circulação, a inflação anual é de apenas {{ now_inflation}}.
|
||||
O pagamento por bloco diminui ao longo do tempo, e também a taxa de inflação anual diminuirá lentamente até chegar a zero.
|
||||
A demanda por dinheiro fungível, digital e voltado para a privacidade provavelmente disparará nos próximos anos e ultrapassará a inflação, fazendo com que
|
||||
provavelmente haja uma apreciação desse ativo.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-5" class="collapsed">O que é melhor, Bitcoin ou Monero? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-5" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
O preço do Bitcoin é muito mais alto que o do Monero já que o primeiro foi lançado em 2009, enquanto o último apenas em 2014.
|
||||
Quando o Bitcoin foi criado, a tecnologia por trás do Monero nem existia. Os métodos do Bitcoin foram em si um grande salto em tecnologia.
|
||||
Agora, o Bitcoin tem uma legião de investidores, é uma criptomoeda estabelecida e tem um valor de mercado de 1Tri USD. No entanto, o Bitcoin tem muitas
|
||||
falhas, como custo e tempo de transação, e principalmente falta de privacidade. Bitcoin não tem privacidade alguma. Todas as transações e saldos são armazenados
|
||||
em uma cadeia de blocos, e são totalmente visíveis para todos os internautas. Nesse sentido, Bitcoin não pode funcionar como dinheiro, pois um dos principais
|
||||
atributos de um bom dinheiro é a fungibilidade, que é a capacidade de todas as unidades serem indistinguíveis das demais.
|
||||
Como todas as transações de Bitcoins são visíveis, você pode diferenciar uma da outra. Por exemplo, você pode escolher aceitar transações de um endereço,
|
||||
mas pode proibir as pessoas de aceitarem outro. Isso inevitavelmente permitirá que os governos censurem determinados endereços com base no que seus proprietários
|
||||
estão fazendo. Portanto, a falta de fungibilidade não é um recurso desejado para um bom dinheiro. Nesse sentido, Monero é muito melhor
|
||||
dinheiro do que Bitcoin. Monero é mais rápido, mais barato de operar e completamente fungível. Você não pode ver diferenças entre diferentes Moneroj
|
||||
(Moneroj é plural de Monero), então você também não pode censurar as pessoas. Com Monero, as pessoas são livres, enquanto com Bitcoin as pessoas estão à
|
||||
mercê dos líderes de seus governos.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-6" class="collapsed">O Monero é um bom investimento? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-6" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Embora ninguém possa prever exatamente o que acontecerá no futuro, a comunidade do Monero espera que haja uma grande demanda por privacidade nos
|
||||
próximos anos. Com nossa sociedade dependendo mais dos processos digitais, é plausível que esse tipo de tecnologia acabe encontrando seu nicho em nosso
|
||||
dia a dia. Monero é uma aposta na digitalização do dinheiro, uma aposta na necessidade de privacidade e também uma aposta que os governos vão perder o
|
||||
monopólio do dinheiro. Em termos de retorno, enquanto o BTC levou 900 dias para atingir 37x em seu primeiro ciclo de mercado em alta, Monero levou 1279
|
||||
dias para dar 95x retorno. No entanto, você não deve tomar isso como um conselho financeiro e deve investir por sua própria conta e risco.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-7" class="collapsed">Qual é o primeiro passo para investir em Monero? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-7" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Simplificando, abra uma conta em uma corretora confiável, como Kraken (EUA) ou Binance (Brasil). Você só precisa escrever seus dados em seu formulário.
|
||||
Depois disso, conclua todo o processo de registro, que pode incluir procedimentos KYC, como o envio de uma foto do seu documento e rosto.
|
||||
Lembre-se também de habilitar autenticação de dois fatores, que evita que hackers roubem seus fundos e também permite retiradas. Em seguida,
|
||||
envie uma transferência eletrônica para a corretora e, em algumas horas, eles atualizarão seu saldo. Quando isso acontecer, compre o seu Monero e
|
||||
proceda para sacá-lo.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i class="bx bx-help-circle icon-help"></i> <a data-toggle="collapse" href="#faq-list-8" class="collapsed">Abri a conta na corretora, e agora? Qual o próximo passo? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
|
||||
<div id="faq-list-8" class="collapse" data-parent=".faq-list">
|
||||
<p>
|
||||
Agora baixe uma carteira de software para Monero em seu telefone (como a Cake Wallet ou a Monerujo) ou para seu computador (a carteira oficial). Você também pode comprar
|
||||
uma carteira de hardware, como o Ledger. Ao concluir esta etapa, você pode fazer o login em sua conta na corretora e solicitar um saque de fundos.
|
||||
Isso significa pedir à corretora para enviar todos os seus Moneroj de sua conta para o endereço de sua carteira. Depois disso, você já tem controle
|
||||
total de seus fundos. Parabéns.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- End F.A.Q Section -->
|
||||
|
||||
</main>
|
||||
<!-- End #main -->
|
||||
|
||||
<!-- ======= Footer ======= -->
|
||||
<footer id="footer">
|
||||
|
||||
<div class="footer-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6 col-md-6 footer-contact">
|
||||
<h3>Moneroj.net</h3>
|
||||
<p>
|
||||
Desenvolvido por<br>
|
||||
Morpheus<br>
|
||||
<strong>Email:</strong> morpheus.anonymous@protonmail.com<br>
|
||||
<strong>Twitter:</strong> CryptoMorpheus_<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 footer-links">
|
||||
<h4>Links úteis</h4>
|
||||
<ul>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:pt' %}">Página Inicial</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:sfmodel' %}">Gráficos</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="{% url 'monerojnet:about' %}">Sobre</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.getmonero.org/">Getmonero.org</a></li>
|
||||
<li><i class="bx bx-chevron-right"></i> <a href="https://www.reddit.com/r/Monero/">Reddit/Monero</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container d-lg-flex py-4">
|
||||
|
||||
<div class="mr-lg-auto text-center text-lg-left">
|
||||
<div class="copyright a">
|
||||
<strong>© Copyright <span>Moneroj.net</span></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-links text-center text-lg-right pt-3 pt-lg-0">
|
||||
<a href="https://twitter.com/CryptoMorpheus_" class="twitter"><i class="bx bxl-twitter"></i></a>
|
||||
<a href="https://github.com/cryptomorpheuss/moneropro" class="github"><i class="bx bxl-github"></i></a>
|
||||
<a href="mailto:morpheus.anonymous@protonmail.com" class="github"><i class="fas fa-envelope"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- End Footer -->
|
||||
|
||||
<!-- Vendor JS Files -->
|
||||
<script src="{% static 'vendor/jquery/jquery2.min.js' %}"></script>
|
||||
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
373
monerojnet/templates/monerojnet/rank.html
Normal file
373
monerojnet/templates/monerojnet/rank.html
Normal file
|
|
@ -0,0 +1,373 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Coinmarketcap Rank</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Rank</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_value }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Rank</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows Monero's rank over the whole cryptocurrency market, judging by Coinmarketcap rankings.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Rank',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Rank',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ pricexmr|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ pricexmr|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data1];
|
||||
var data_mobile = [data3_mobile, data1_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.5,
|
||||
xanchor: 'auto',
|
||||
y: 0,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Rank (reversed axis)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
,autorange: 'reversed'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-08-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 120,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.5,
|
||||
y: 0,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-08-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 100,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
6
monerojnet/templates/monerojnet/reset.html
Normal file
6
monerojnet/templates/monerojnet/reset.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
{{ deleted }} entradas deletadas e {{ added }} novas entradas adicionadas
|
||||
|
||||
{% endblock %}
|
||||
428
monerojnet/templates/monerojnet/sfmodel.html
Normal file
428
monerojnet/templates/monerojnet/sfmodel.html
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="alert alert-danger" role="alert">
|
||||
Warning: the price described by the gray line is just a suggestion of future behavior based on
|
||||
past price-action pattern (adjusted for variable inflation).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Stock-to-flow Model (log scale)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-money-bill fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Stock-to-flow Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Annual Inflation</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-percentage fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the price of the coin on each date, coloring the points indicating their position on
|
||||
the Bitcoin pair, being red as overbought and blue as cheap.
|
||||
This chart is plotted on a log scale. The formula is Stocktoflow = (100/Inflation)^Multiplier,
|
||||
Multiplier is 1.65 for Monero (it's higher for Bitcoin's stock-to-flow
|
||||
model, for example).<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Stock-to-flow',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ stock_to_flow|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Stock-to-flow',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ stock_to_flow|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fractal of past price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ projection|safe }},
|
||||
line: {
|
||||
color: '#656565'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fractal of past price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ projection|safe }},
|
||||
line: {
|
||||
color: '#656565'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data3, data4];
|
||||
var data_mobile = [data2_mobile, data3_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-07-31']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-07-31']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
396
monerojnet/templates/monerojnet/sfmodellin.html
Normal file
396
monerojnet/templates/monerojnet/sfmodellin.html
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Stock-to-flow Model (linear scale)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Last Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_price }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-money-bill fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Stock-to-flow Price</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Annual Inflation</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_inflation }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-percentage fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the price of the coin on each date, coloring the points indicating their position on
|
||||
the Bitcoin pair, being red as overbought and blue as cheap.
|
||||
This chart is plotted on a log scale. The formula is Stocktoflow = (100/Inflation)^Multiplier,
|
||||
Multiplier is 1.65 for Monero (it's higher for Bitcoin's stock-to-flow
|
||||
model, for example).<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Stock-to-flow',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ stock_to_flow|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Stock-to-flow',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ stock_to_flow|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data4];
|
||||
var data_mobile = [data2_mobile, data4_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.98,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
402
monerojnet/templates/monerojnet/sfmultiple.html
Normal file
402
monerojnet/templates/monerojnet/sfmultiple.html
Normal file
|
|
@ -0,0 +1,402 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Stock-to-flow Multiple (Price / SF Model)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Stock-to-flow Multiple</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_sf }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Top Stock-to-flow Multiple Last Cycle</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the Stock-to-flow Multiple, which is the comparison between its current price against
|
||||
its supposed value. When the indicator reaches 100, it suggests
|
||||
the coin is at the end of its cycle and will now begin a bear market. This indicator is my own
|
||||
aprimoration of PlanB's model, since for this one I also considered
|
||||
the coin's supply. The formula is XMR-Supply*Price/(SF-Value*1.500.000);<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ buy|safe }},
|
||||
line: {
|
||||
color: '#00ff00'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ buy|safe }},
|
||||
line: {
|
||||
color: '#00ff00'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Sell',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ sell|safe }},
|
||||
line: {
|
||||
color: '#ff0000'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Sell',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ sell|safe }},
|
||||
line: {
|
||||
color: '#ff0000'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ stock_to_flow|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
title: {
|
||||
text: 'Cycle on the Bitcoin pair (%)',
|
||||
side: 'right'
|
||||
,font: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
}
|
||||
,thickness: 10
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 14
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ stock_to_flow|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorbar: {
|
||||
thickness: 4
|
||||
,tickfont: {
|
||||
color: 'white'
|
||||
,size: 6
|
||||
}
|
||||
,borderwidth: 0
|
||||
},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data2, data3];
|
||||
var data_mobile = [data1_mobile, data2_mobile, data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.98,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price / Stock-to-flow',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-02-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-02-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
346
monerojnet/templates/monerojnet/sharpe.html
Normal file
346
monerojnet/templates/monerojnet/sharpe.html
Normal file
|
|
@ -0,0 +1,346 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Sharpe Ratio</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This is the Sharpe Ratio for Monero, which is an indicator that calculates the return over the risk of
|
||||
the investment. For more information
|
||||
access <a href="https://web.stanford.edu/~wfsharpe/art/sr/SR.htm" target="_blank">this webpage.</a> This
|
||||
is a rolling 52 week Sharpe Ratio,
|
||||
calculated by Ratio = Yearly Moving Average(Weekly R.O.C.)/ Yearly StDev(Weekly R.O.C.))*Sqrt(52).<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Sharpe Ratio',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ sharpe|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Sharpe Ratio',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ sharpe|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data2];
|
||||
var data_mobile = [data1_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.50,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Sharpe Ratio',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-02-01', '2023-12-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 120,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "linear",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-02-01', '2023-12-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 100,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="800px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
400
monerojnet/templates/monerojnet/social.html
Normal file
400
monerojnet/templates/monerojnet/social.html
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Total Number of Reddit Subscribers for Bitcoin and CryptoCurrency
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph_2">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Total Number of Reddit Subscribers for Monero</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph2" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Subscribers</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Subscribers</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
CryptoCurrency Subscribers</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
These charts show the total number of users for Subreddits: Monero, CryptoCurrency and Bitcoin. The more
|
||||
users the subreddit has, more likely it is to
|
||||
achieve mass adoption. So, sudden spikes in total number of users indicate there's a new wave of people
|
||||
getting into cryptocurrencies. Also, a sudden increase in
|
||||
/CryptoCurrency indicates others coins are getting into relevance, not only Bitcoin.</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Cryptocurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Cryptocurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data2];
|
||||
var data_2 = [data3];
|
||||
var data_mobile = [data1_mobile, data2_mobile];
|
||||
var data_mobile_2 = [data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 1,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.40,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Reddit Subscribers',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-10-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-10-01', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
document.getElementById("graph_2").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
document.getElementById("graph_2").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
343
monerojnet/templates/monerojnet/social2.html
Normal file
343
monerojnet/templates/monerojnet/social2.html
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Marketcap Divided by Number of Reddit Subscribers</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Marketcap / Redditors for Monero</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Marketcap / Redditors for Bitcoin</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
These charts show the total marketcap divided by the total number of users in /Bitcoin and /Monero
|
||||
subreddits. It makes sense to obeserve this metric,
|
||||
since a price too high in dollars/user might indicate a bubble. Similarly, a low marketcap/user might
|
||||
indicate a bottom.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin, Dollars / Subscriber',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin, Dollars / Subscriber',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero, Dollars / Subscriber',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero, Dollars / Subscriber',
|
||||
x: {{ dates2|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2, data1];
|
||||
var data_mobile = [data2_mobile, data1_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Dollars / Subscriber',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2012-10-01', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2012-10-01', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
364
monerojnet/templates/monerojnet/social3.html
Normal file
364
monerojnet/templates/monerojnet/social3.html
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Reddit Subscribers of /CryptoCurrency as a Percentage of /Bitcoin
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph12">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Reddit Subscribers of /Monero as a Percentage of /Bitcoin</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph2" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Monero Subscribers</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-64 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current CryptoCurrency Subscribers</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
These charts show the total number of users for subreddits /Monero ang /CryptoCurrency as a percentage
|
||||
of the total users of /Bitcoin subreddit.
|
||||
Sudden spikes in total percentage indicate there's a new wave of people getting into other
|
||||
cryptocurrencies, not only in Bitcoin. When /CryptoCurrency dominance increase,
|
||||
it makes sense to expect that such projects will appreciate against the BTC pair. However, this is just
|
||||
and idea to observe.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero as % of /Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero as % of /Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/CryptoCurrency as % of /Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/CryptoCurrency as % of /Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data2];
|
||||
var data_mobile = [data2_mobile];
|
||||
var data_2 = [data1];
|
||||
var data_mobile_2 = [data1_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 1,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.85,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Subscribers Percentage',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: false,
|
||||
type: 'date',
|
||||
nticks: 3
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
|
||||
document.getElementById("graph12").style.height="350px";
|
||||
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="750px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
|
||||
document.getElementById("graph12").style.height="750px";
|
||||
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
603
monerojnet/templates/monerojnet/social4.html
Normal file
603
monerojnet/templates/monerojnet/social4.html
Normal file
|
|
@ -0,0 +1,603 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">/Bitcoin, /CryptoCurrency and /Monero Monthly New Subscribers
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph12">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">/Bitcoin, /CryptoCurrency and /Monero Monthly Percentage Increase
|
||||
in Subscribers</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph2" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
New Monero Subscribers (Last 30 days)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
New Bitcoin Subscribers (Last 30 days)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
New CryptoCurrency Subscribers (Last 30 days)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
These charts show the total number of users for Subreddits: Monero, CryptoCurrency and Bitcoin. The more
|
||||
users the subreddit has, more likely it is to
|
||||
achieve mass adoption. So, sudden spikes in total number of users indicate there's a new wave of people
|
||||
getting into cryptocurrencies. Also, a sudden increase in
|
||||
/CryptoCurrency indicates others coins are getting into relevance, not only Bitcoin.</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ newcomers_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ newcomers_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ speed_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ speed_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/CryptoCurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ speed_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/CryptoCurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ speed_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/CryptoCurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ newcomers_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/CryptoCurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ newcomers_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ newcomers_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ newcomers_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
var data6 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ speed_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data6_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ speed_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data4, data5];
|
||||
var data_2 = [data2, data3, data6];
|
||||
var data_mobile = [data1_mobile, data4_mobile, data5_mobile];
|
||||
var data_mobile_2 = [data2_mobile, data3_mobile, data6_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'New Subscribers (units)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2012-10-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2012-10-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
var layout_2 = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'New Subscribers (%)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2012-10-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile_2 = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2012-10-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
|
||||
document.getElementById("graph12").style.height="350px";
|
||||
Plotly.newPlot('graph2', data_mobile_2, layout_mobile_2, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
|
||||
document.getElementById("graph12").style.height="700px";
|
||||
Plotly.newPlot('graph2', data_2, layout_2, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
372
monerojnet/templates/monerojnet/social5.html
Normal file
372
monerojnet/templates/monerojnet/social5.html
Normal file
|
|
@ -0,0 +1,372 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Total Number of Reddit Subscribers for Monero and Number of Transactions</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph2" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Subscribers</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Daily Transactions</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
These charts show the total number of users for Monero subreddit plotted compared to the number of daily transactions the coin has.</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Daily Transactions',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Daily Transactions',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Subreddit',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#ffffff'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Subreddit',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#ffffff'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var data_2 = [data2, data3];
|
||||
var data_mobile_2 = [data2_mobile, data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.98,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Reddit Subscribers',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Transactions/day',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 8
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-04-23', '2023-06-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 120,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2012-10-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
398
monerojnet/templates/monerojnet/social6.html
Normal file
398
monerojnet/templates/monerojnet/social6.html
Normal file
|
|
@ -0,0 +1,398 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Comments per day on Subreddits /Bitcoin and /CryptoCurrency
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph_2">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Comments per day on Subreddit /Monero</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph2" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Daily Comments</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Daily Comments</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
CryptoCurrency Daily Comments</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
These charts show the total number of daily comments for Subreddits: Monero, CryptoCurrency and Bitcoin. The more
|
||||
users the subreddit has, more likely it is to
|
||||
achieve mass adoption.</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Cryptocurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Cryptocurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data2];
|
||||
var data_2 = [data3];
|
||||
var data_mobile = [data1_mobile, data2_mobile];
|
||||
var data_mobile_2 = [data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 1,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.40,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: ' Comments Per Day',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2018-11-07', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2018-11-07', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
document.getElementById("graph_2").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
document.getElementById("graph_2").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
397
monerojnet/templates/monerojnet/social7.html
Normal file
397
monerojnet/templates/monerojnet/social7.html
Normal file
|
|
@ -0,0 +1,397 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Posts per day on Subreddits /Bitcoin and /CryptoCurrency
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph_2">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Posts per day on Reddit /Monero</h6>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph2" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero Posts (24h)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin Posts (24h)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-4 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
CryptoCurrency Posts (24h)</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ last_crypto }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
These charts show the total number of daily posts for Subreddits: Monero, CryptoCurrency and Bitcoin. The more
|
||||
users the subreddit has, more likely it is to
|
||||
achieve mass adoption.</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Cryptocurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Cryptocurrency',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_crypto|safe }},
|
||||
line: {
|
||||
color: '#00ffff'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Bitcoin',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_btc|safe }},
|
||||
line: {
|
||||
color: '#ffff00'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: '/Monero',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ social_xmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 3
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data2];
|
||||
var data_2 = [data3];
|
||||
var data_mobile = [data1_mobile, data2_mobile];
|
||||
var data_mobile_2 = [data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 1,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 1,
|
||||
y: 0.40,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: ' Posts Per Day',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2018-11-07', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2018-11-07', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
document.getElementById("graph_2").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
Plotly.newPlot('graph2', data_mobile_2, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
document.getElementById("graph_2").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
Plotly.newPlot('graph2', data_2, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
424
monerojnet/templates/monerojnet/thermocap.html
Normal file
424
monerojnet/templates/monerojnet/thermocap.html
Normal file
|
|
@ -0,0 +1,424 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Thermocap Multiple</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Thermocap multiple is the ratio obtained between dividing the current price of the coin by the
|
||||
accumulated price of each mined coin.
|
||||
It is often used to indicate end of a bull market. The formula is XMR-price/(SUM(Daily Reward * Price at
|
||||
current date)). The Thermocap Bands are calculated
|
||||
by the current sum of all mined coins multiplied to its price at that current date. You can learn more
|
||||
about this <a
|
||||
href="https://geertjancap.medium.com/modeling-bitcoin-price-dynamics-with-systems-dynamics-theory-c028d788fd0e"
|
||||
target="_blank">here.</a><br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Accumulated Thermocap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ calories|safe }},
|
||||
line: {
|
||||
color: '#225522'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Accumulated Thermocap',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ calories|safe }},
|
||||
line: {
|
||||
color: '#225522'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy line',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ calories2|safe }},
|
||||
line: {
|
||||
color: '#225522'
|
||||
,width: 1
|
||||
},
|
||||
fill: 'tonexty'
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Buy line',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ calories2|safe }},
|
||||
line: {
|
||||
color: '#225522'
|
||||
,width: 1
|
||||
},
|
||||
fill: 'tonexty'
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Resistance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ calories3|safe }},
|
||||
line: {
|
||||
color: '#662222'
|
||||
,width: 1
|
||||
},
|
||||
fill: 'tonexty'
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Resistance',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ calories3|safe }},
|
||||
line: {
|
||||
color: '#662222'
|
||||
,width: 1
|
||||
},
|
||||
fill: 'tonexty'
|
||||
};
|
||||
|
||||
var data4 = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 5,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data4_mobile = {
|
||||
type: "scatter",
|
||||
mode: "markers",
|
||||
name: 'Average price on date',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ values|safe }},
|
||||
line: {color: '#7f421d'},
|
||||
marker: {
|
||||
color: {{ color|safe }},
|
||||
colorscale: [['0', '#0000ff'], ['0.33', '#00ff00'], ['0.66', '#ffff00'], ['1', '#ff0000']],
|
||||
sizemode: 'area',
|
||||
size: 3,
|
||||
cmax: 100,
|
||||
cmin: 0
|
||||
}
|
||||
};
|
||||
|
||||
var data5 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Thermocap Multiple',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ thermocap|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data5_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Thermocap Multiple',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ thermocap|safe }},
|
||||
line: {
|
||||
color: '#1dddcd'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data = [data1, data2, data3, data4, data5];
|
||||
var data_mobile = [data1_mobile, data2_mobile, data3_mobile, data4_mobile, data5_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.05,
|
||||
xanchor: 'auto',
|
||||
y: 0.75,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.05,
|
||||
y: 1,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Thermocap Multiple',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.7f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-02-01', '2023-02-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 120,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.1f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "linear",
|
||||
tickformat :",.7f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-02-01', '2023-12-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 100,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="800px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
320
monerojnet/templates/monerojnet/transbitcoin.html
Normal file
320
monerojnet/templates/monerojnet/transbitcoin.html
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Monero's Daily Transaction Count in Log Scale</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Current Daily Transactions</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Number of Daily Transactions</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total transactions Monero has each day on a log scale. Higher transaction count
|
||||
means the coin is being increasingly used, and since Metcalfe's Law
|
||||
proposes that more information being exchanged in a network means the network itself should be worth
|
||||
more, it also means the coin should increase in price.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fractal of past price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Fractal of past price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3];
|
||||
var data_mobile = [data3_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.98,
|
||||
xanchor: 'auto',
|
||||
y: 0.05,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.8,
|
||||
y: 0.05,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Transactions/day',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2022-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.05,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2022-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
364
monerojnet/templates/monerojnet/transcost.html
Normal file
364
monerojnet/templates/monerojnet/transcost.html
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Average Transaction Cost</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pb-0 pt-0 pl-0 pr-0" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero's Transaction Cost</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin's Transaction Cost</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows average daily transaction cost for both Bitcoin and Monero.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Simulation: Monero Tx Cost at BTC prices',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr2|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Simulation: Monero Tx Cost at BTC prices',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr2|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Tx Cost',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Tx Cost',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Tx Cost',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Tx Cost',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data1, data3, data2];
|
||||
var data_mobile = [data1_mobile, data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Transaction Cost (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.6f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-11-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.6f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-11-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
342
monerojnet/templates/monerojnet/transcostntv.html
Normal file
342
monerojnet/templates/monerojnet/transcostntv.html
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Average Transaction Cost (Native Units)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Monero's Transaction Cost</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_xmr }} XMR</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-monero fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Bitcoin's Transaction Cost</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_btc }} BTC</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fab fa-bitcoin fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows average daily transaction cost for both Bitcoin and Monero calculated in terms of the
|
||||
own coin.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data2 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Tx Cost',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data2_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Monero Tx Cost',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costxmr|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Tx Cost',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Bitcoin Tx Cost',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ costbtc|safe }},
|
||||
line: {
|
||||
color: '#ffd311'
|
||||
,width: 2
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data2];
|
||||
var data_mobile = [data3_mobile, data2_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Transaction Cost (Native Units)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.7f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2010-11-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 60,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 4
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.98,
|
||||
y: 0.02,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.7f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2010-11-14', '2024-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 0,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 0
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
375
monerojnet/templates/monerojnet/translin.html
Normal file
375
monerojnet/templates/monerojnet/translin.html
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Transaction Count (linear)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Daily Transactions</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Number of Transactions</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total transactions Monero has each day on a linear scale. Higher transaction count
|
||||
means the coin is being increasingly used, and since Metcalfe's Law
|
||||
proposes that more information being exchanged in a network means the network itself should be worth
|
||||
more, it also means the coin should increase in price.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Transactions',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Transactions',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ pricexmr|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ pricexmr|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data1];
|
||||
var data_mobile = [data3_mobile, data1_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.02,
|
||||
xanchor: 'auto',
|
||||
y: 0.50,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "linear",
|
||||
title: {
|
||||
text: 'Transactions',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 120,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "linear",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "linear",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 100,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
375
monerojnet/templates/monerojnet/translog.html
Normal file
375
monerojnet/templates/monerojnet/translog.html
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
{% extends 'monerojnet/base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<!-- Content Wrapper -->
|
||||
<div id="content-wrapper" style="background-color:rgb(48, 44, 41)">
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="content">
|
||||
|
||||
<!-- Begin Page Content -->
|
||||
<div class="container-fluid"><br>
|
||||
<div class="row">
|
||||
<div class="col-xl-12 col-lg-12">
|
||||
<div class="card" id="graph1">
|
||||
<div
|
||||
class="card-header py-3 d-flex flex-row align-items-center justify-content-between text-white">
|
||||
<h6 class="m-0 text-light">Transaction Count (log scale)</h6>
|
||||
<div class="dropdown no-arrow">
|
||||
<a class="dropdown-toggle" href="#" role="button"
|
||||
onclick="$('#graph1').toggleClass('fullscreen');window.dispatchEvent(new Event('resize'));">
|
||||
<i class="fas fa-arrows-alt fa-sm fa-fw text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="height: 100px;">
|
||||
<div id="graph" style="height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Daily Transactions</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ now_transactions }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fas fa-check fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Earnings (Monthly) Card Example -->
|
||||
<div class="col-xl-6 col-md-6 mb-4">
|
||||
<div class="card border-left-new h-100 py-2">
|
||||
<div class="card-body">
|
||||
<div class="row no-gutters align-items-center">
|
||||
<div class="col mr-2">
|
||||
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
||||
Highest Number Transactions</div>
|
||||
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ maximum }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-rocket fa-2x text-gray-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Content Row -->
|
||||
<div class="row">
|
||||
<div class="col-xl-11 col-md-6 mb-4">
|
||||
<div class="alert alert-dark" role="alert">
|
||||
Not financial advice.
|
||||
For information about the chart, click the button >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-1">
|
||||
<button type="button" class="btn btn-dark btn-block" data-toggle="modal" href="#"
|
||||
data-target="#id_Modal">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-info-circle fa-2x "></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- End of Main Content -->
|
||||
|
||||
</div>
|
||||
<!-- End of Content Wrapper -->
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="id_Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="Modal">Help about the chart</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Cancelar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This chart shows the total transactions Monero has each day on a log scale. Higher transaction count
|
||||
means the coin is being increasingly used, and since Metcalfe's Law
|
||||
proposes that more information being exchanged in a network means the network itself should be worth
|
||||
more, it also means the coin should increase in price.<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fim do Modal -->
|
||||
|
||||
|
||||
<!-- Page level plugins -->
|
||||
<script>
|
||||
var data3 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Transactions',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
|
||||
var data3_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Transactions',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ transactions|safe }},
|
||||
line: {
|
||||
color: '#dd1d1d'
|
||||
,width: 2
|
||||
},
|
||||
yaxis: "y2"
|
||||
};
|
||||
var data1 = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ pricexmr|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data1_mobile = {
|
||||
type: "scatter",
|
||||
mode: "lines",
|
||||
name: 'Price',
|
||||
x: {{ dates|safe }},
|
||||
y: {{ pricexmr|safe }},
|
||||
line: {
|
||||
color: '#444444'
|
||||
,width: 1
|
||||
}
|
||||
};
|
||||
|
||||
var data = [data3, data1];
|
||||
var data_mobile = [data3_mobile, data1_mobile];
|
||||
|
||||
var layout = {
|
||||
plot_bgcolor:"#252221",
|
||||
paper_bgcolor:"#252221",
|
||||
annotations: [
|
||||
{
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
x: 0.50,
|
||||
xanchor: 'auto',
|
||||
y: 0.02,
|
||||
yanchor: 'auto',
|
||||
text: 'Moneroj<br>https://www.moneroj.net',
|
||||
showarrow: false,
|
||||
borderwidth: 1,
|
||||
bordercolor: '#5f5f5f',
|
||||
bgcolor: '#333333',
|
||||
borderpad: 5,
|
||||
align: 'center',
|
||||
font: {
|
||||
color: "white",
|
||||
size: 12
|
||||
}
|
||||
}],
|
||||
separators: ",.",
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#333333',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 12
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
yaxis: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Price (USD)',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "log",
|
||||
title: {
|
||||
text: 'Transactions',
|
||||
font: {
|
||||
size: 20,
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 12
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y-%m-%d",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 13
|
||||
}
|
||||
,gridcolor: "#333333"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 120,
|
||||
r: 120,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
var layout_mobile = {
|
||||
plot_bgcolor:"black",
|
||||
paper_bgcolor:"black",
|
||||
separators: ",.",
|
||||
hoverlabel: {
|
||||
namelength: -1
|
||||
},
|
||||
legend: {
|
||||
x: 0.02,
|
||||
y: 0.98,
|
||||
bgcolor: '#000000',
|
||||
bordercolor: '#5f5f5f',
|
||||
borderwidth: 1,
|
||||
font: {
|
||||
color: 'white',
|
||||
size: 5
|
||||
},
|
||||
traceorder: 'normal',
|
||||
xanchor: 'auto',
|
||||
yanchor: 'auto'
|
||||
},
|
||||
showlegend: false,
|
||||
yaxis: {
|
||||
type: "log",
|
||||
tickformat :",.0f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "#ffffff"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
},
|
||||
yaxis2: {
|
||||
type: "log",
|
||||
tickformat :",.2f"
|
||||
,nticks: 10
|
||||
,tickfont: {
|
||||
color: "white"
|
||||
}
|
||||
,gridcolor: "#252221"
|
||||
,side: "right"
|
||||
,overlaying: 'y'
|
||||
},
|
||||
xaxis: {
|
||||
hoverformat: "%Y",
|
||||
showgrid: true,
|
||||
type: 'date',
|
||||
nticks: 10
|
||||
,tickfont: {
|
||||
color: "#dddddd"
|
||||
,size: 7
|
||||
}
|
||||
,gridcolor: "#444444"
|
||||
,range: ['2014-05-01', '2023-01-01']
|
||||
,zeroline: true
|
||||
},
|
||||
margin: {
|
||||
l: 40,
|
||||
r: 100,
|
||||
b: 35,
|
||||
t: 10,
|
||||
pad: 10
|
||||
}
|
||||
};
|
||||
|
||||
function findBootstrapEnvironment() {
|
||||
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
|
||||
|
||||
let el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
let curEnv = envs.shift();
|
||||
|
||||
for (let env of envs.reverse()) {
|
||||
el.classList.add(`d-${env}-none`);
|
||||
|
||||
if (window.getComputedStyle(el).display === 'none') {
|
||||
curEnv = env;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.body.removeChild(el);
|
||||
return curEnv;
|
||||
|
||||
}
|
||||
env_size = findBootstrapEnvironment();
|
||||
if (env_size == "xs") {
|
||||
document.getElementById("graph1").style.height="350px";
|
||||
Plotly.newPlot('graph', data_mobile, layout_mobile, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
else {
|
||||
document.getElementById("graph1").style.height="700px";
|
||||
Plotly.newPlot('graph', data, layout, {responsive: true, modeBarButtonsToRemove: ['toImage', 'hoverCompareCartesian', 'hoverClosest2d', 'toggleSpikelines', 'lasso2d', 'select2d', 'hoverClosestCartesian'], displaylogo: false});
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
3
monerojnet/tests.py
Normal file
3
monerojnet/tests.py
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
from django.test import TestCase
|
||||
|
||||
# Create your tests here.
|
||||
75
monerojnet/urls.py
Normal file
75
monerojnet/urls.py
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
from django.conf.urls import url
|
||||
from django.urls import path
|
||||
from . import views
|
||||
|
||||
urlpatterns = [
|
||||
# Página inicial
|
||||
url(r'^$', views.index, name='index'),
|
||||
path('pricelog/', views.pricelog, name='pricelog'),
|
||||
path('movingaverage/', views.movingaverage, name='movingaverage'),
|
||||
path('pricelin/', views.pricelin, name='pricelin'),
|
||||
path('powerlaw/', views.powerlaw, name='powerlaw'),
|
||||
path('pricesats/', views.pricesats, name='pricesats'),
|
||||
path('fractal/', views.fractal, name='fractal'),
|
||||
path('golden/', views.golden, name='golden'),
|
||||
path('competitors/', views.competitors, name='competitors'),
|
||||
path('competitorssats/', views.competitorssats, name='competitorssats'),
|
||||
path('competitorssatslin/', views.competitorssatslin, name='competitorssatslin'),
|
||||
path('translin/', views.translin, name='translin'),
|
||||
path('percentage/', views.percentage, name='percentage'),
|
||||
path('translog/', views.translog, name='translog'),
|
||||
path('metcalfesats/', views.metcalfesats, name='metcalfesats'),
|
||||
path('metcalfeusd/', views.metcalfeusd, name='metcalfeusd'),
|
||||
path('coins/', views.coins, name='coins'),
|
||||
path('extracoins/', views.extracoins, name='extracoins'),
|
||||
path('inflation/', views.inflation, name='inflation'),
|
||||
path('compinflation/', views.compinflation, name='compinflation'),
|
||||
path('sfmodel/', views.sfmodel, name='sfmodel'),
|
||||
path('sfmodellin/', views.sfmodellin, name='sfmodellin'),
|
||||
path('sfmodel/', views.sfmodel, name='sfmodel'),
|
||||
path('sfmultiple/', views.sfmultiple, name='sfmultiple'),
|
||||
path('about/', views.about, name='about'),
|
||||
path('bitcoin/', views.bitcoin, name='bitcoin'),
|
||||
path('reset/<str:symbol>/', views.reset, name='reset'),
|
||||
path('pt/', views.pt, name='pt'),
|
||||
path('fr/', views.fr, name='fr'),
|
||||
path('index_pt/', views.pt, name='index_pt'),
|
||||
path('importer/', views.importer, name='importer'),
|
||||
path('thermocap/', views.thermocap, name='thermocap'),
|
||||
path('sharpe/', views.sharpe, name='sharpe'),
|
||||
path('social/', views.social, name='social'),
|
||||
path('social2/', views.social2, name='social2'),
|
||||
path('social3/', views.social3, name='social3'),
|
||||
path('social4/', views.social4, name='social4'),
|
||||
path('social5/', views.social5, name='social5'),
|
||||
path('social6/', views.social6, name='social6'),
|
||||
path('social7/', views.social7, name='social7'),
|
||||
path('hashrate/', views.hashrate, name='hashrate'),
|
||||
path('hashprice/', views.hashprice, name='hashprice'),
|
||||
path('hashvsprice/', views.hashvsprice, name='hashvsprice'),
|
||||
path('inflationfractal/', views.inflationfractal, name='inflationfractal'),
|
||||
path('dailyemission/', views.dailyemission, name='dailyemission'),
|
||||
path('dailyemissionntv/', views.dailyemissionntv, name='dailyemissionntv'),
|
||||
path('transcost/', views.transcost, name='transcost'),
|
||||
path('transcostntv/', views.transcostntv, name='transcostntv'),
|
||||
path('minerrevcap/', views.minerrevcap, name='minerrevcap'),
|
||||
path('minerrev/', views.minerrev, name='minerrev'),
|
||||
path('minerrevntv/', views.minerrevntv, name='minerrevntv'),
|
||||
path('minerfees/', views.minerfees, name='minerfees'),
|
||||
path('minerfeesntv/', views.minerfeesntv, name='minerfeesntv'),
|
||||
path('commit/', views.commit, name='commit'),
|
||||
path('commitntv/', views.commitntv, name='commitntv'),
|
||||
path('inflationreturn/', views.inflationreturn, name='inflationreturn'),
|
||||
path('dread_subscribers/', views.dread_subscribers, name='dread_subscribers'),
|
||||
path('coincards/', views.coincards, name='coincards'),
|
||||
path('merchants/', views.merchants, name='merchants'),
|
||||
path('merchants_increase/', views.merchants_increase, name='merchants_increase'),
|
||||
path('merchants_percentage/', views.merchants_percentage, name='merchants_percentage'),
|
||||
path('dominance/', views.dominance, name='dominance'),
|
||||
path('rank/', views.rank, name='rank'),
|
||||
path('marketcap/', views.marketcap, name='marketcap'),
|
||||
|
||||
path('artigos/', views.artigos, name='artigos'),
|
||||
path('articles/', views.articles, name='articles'),
|
||||
|
||||
]
|
||||
3562
monerojnet/views.py
Normal file
3562
monerojnet/views.py
Normal file
File diff suppressed because it is too large
Load diff
16
moneropro/asgi.py
Normal file
16
moneropro/asgi.py
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
"""
|
||||
ASGI config for moneropro project.
|
||||
|
||||
It exposes the ASGI callable as a module-level variable named ``application``.
|
||||
|
||||
For more information on this file, see
|
||||
https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/
|
||||
"""
|
||||
|
||||
import os
|
||||
|
||||
from django.core.asgi import get_asgi_application
|
||||
|
||||
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'moneropro.settings')
|
||||
|
||||
application = get_asgi_application()
|
||||
127
moneropro/settings.py
Normal file
127
moneropro/settings.py
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
"""
|
||||
Django settings for moneropro project.
|
||||
|
||||
Generated by 'django-admin startproject' using Django 3.1.7.
|
||||
|
||||
For more information on this file, see
|
||||
https://docs.djangoproject.com/en/3.1/topics/settings/
|
||||
|
||||
For the full list of settings and their values, see
|
||||
https://docs.djangoproject.com/en/3.1/ref/settings/
|
||||
"""
|
||||
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
# Build paths inside the project like this: BASE_DIR / 'subdir'.
|
||||
|
||||
# Static files (CSS, JavaScript, Images)
|
||||
# https://docs.djangoproject.com/en/3.1/howto/static-files/
|
||||
|
||||
STATIC_URL = '/static/'
|
||||
BASE_DIR = Path(__file__).resolve().parent.parent
|
||||
STATICFILES_DIRS = [
|
||||
os.path.join(BASE_DIR, "static"),
|
||||
]
|
||||
|
||||
|
||||
# Quick-start development settings - unsuitable for production
|
||||
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
|
||||
|
||||
# SECURITY WARNING: keep the secret key used in production secret!
|
||||
SECRET_KEY = ''
|
||||
|
||||
# SECURITY WARNING: don't run with debug turned on in production!
|
||||
#DEBUG = True
|
||||
DEBUG = False
|
||||
STATIC_ROOT = "/var/www/moneropro/static/"
|
||||
|
||||
ALLOWED_HOSTS = ['www.moneroj.net', 'localhost', '127.0.0.1', 'moneroj.net']
|
||||
|
||||
|
||||
# Application definition
|
||||
|
||||
INSTALLED_APPS = [
|
||||
'django.contrib.admin',
|
||||
'django.contrib.auth',
|
||||
'django.contrib.contenttypes',
|
||||
'django.contrib.sessions',
|
||||
'django.contrib.messages',
|
||||
'django.contrib.staticfiles',
|
||||
'monerojnet',
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
'django.middleware.security.SecurityMiddleware',
|
||||
'django.contrib.sessions.middleware.SessionMiddleware',
|
||||
'django.middleware.common.CommonMiddleware',
|
||||
'django.middleware.csrf.CsrfViewMiddleware',
|
||||
'django.contrib.auth.middleware.AuthenticationMiddleware',
|
||||
'django.contrib.messages.middleware.MessageMiddleware',
|
||||
'django.middleware.clickjacking.XFrameOptionsMiddleware',
|
||||
]
|
||||
|
||||
ROOT_URLCONF = 'moneropro.urls'
|
||||
|
||||
TEMPLATES = [
|
||||
{
|
||||
'BACKEND': 'django.template.backends.django.DjangoTemplates',
|
||||
'DIRS': [],
|
||||
'APP_DIRS': True,
|
||||
'OPTIONS': {
|
||||
'context_processors': [
|
||||
'django.template.context_processors.debug',
|
||||
'django.template.context_processors.request',
|
||||
'django.contrib.auth.context_processors.auth',
|
||||
'django.contrib.messages.context_processors.messages',
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
WSGI_APPLICATION = 'moneropro.wsgi.application'
|
||||
|
||||
|
||||
# Database
|
||||
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
|
||||
|
||||
DATABASES = {
|
||||
'default': {
|
||||
'ENGINE': 'django.db.backends.sqlite3',
|
||||
'NAME': BASE_DIR / 'db.sqlite3',
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
# Password validation
|
||||
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
|
||||
|
||||
AUTH_PASSWORD_VALIDATORS = [
|
||||
{
|
||||
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
|
||||
},
|
||||
{
|
||||
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
|
||||
},
|
||||
{
|
||||
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
|
||||
},
|
||||
{
|
||||
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
# Internationalization
|
||||
# https://docs.djangoproject.com/en/3.1/topics/i18n/
|
||||
|
||||
LANGUAGE_CODE = 'en-us'
|
||||
|
||||
TIME_ZONE = 'UTC'
|
||||
|
||||
USE_I18N = True
|
||||
|
||||
USE_L10N = True
|
||||
|
||||
USE_TZ = True
|
||||
|
||||
24
moneropro/urls.py
Normal file
24
moneropro/urls.py
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
"""moneropro URL Configuration
|
||||
|
||||
The `urlpatterns` list routes URLs to views. For more information please see:
|
||||
https://docs.djangoproject.com/en/3.1/topics/http/urls/
|
||||
Examples:
|
||||
Function views
|
||||
1. Add an import: from my_app import views
|
||||
2. Add a URL to urlpatterns: path('', views.home, name='home')
|
||||
Class-based views
|
||||
1. Add an import: from other_app.views import Home
|
||||
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
|
||||
Including another URLconf
|
||||
1. Import the include() function: from django.urls import include, path
|
||||
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
|
||||
"""
|
||||
from django.conf.urls import include, url
|
||||
from django.contrib import admin
|
||||
from django.urls import path
|
||||
|
||||
app_name = 'monerojnet'
|
||||
urlpatterns = [
|
||||
path('admin/', admin.site.urls),
|
||||
url(r'', include(('monerojnet.urls', 'monerojnet'), namespace='monerojnet')),
|
||||
]
|
||||
16
moneropro/wsgi.py
Normal file
16
moneropro/wsgi.py
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
"""
|
||||
WSGI config for moneropro project.
|
||||
|
||||
It exposes the WSGI callable as a module-level variable named ``application``.
|
||||
|
||||
For more information on this file, see
|
||||
https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/
|
||||
"""
|
||||
|
||||
import os
|
||||
|
||||
from django.core.wsgi import get_wsgi_application
|
||||
|
||||
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'moneropro.settings')
|
||||
|
||||
application = get_wsgi_application()
|
||||
21
requirements.txt
Normal file
21
requirements.txt
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
asgiref==3.3.1
|
||||
beautifulsoup4==4.9.3
|
||||
certifi==2020.12.5
|
||||
chardet==4.0.0
|
||||
dj-database-url==0.5.0
|
||||
dj-static==0.0.6
|
||||
Django==3.1.7
|
||||
django-bootstrap4==2.3.1
|
||||
gunicorn==20.0.4
|
||||
idna==2.10
|
||||
numpy==1.20.1
|
||||
pandas==1.2.3
|
||||
psycopg2-binary==2.8.6
|
||||
python-dateutil==2.8.1
|
||||
pytz==2021.1
|
||||
requests==2.25.1
|
||||
six==1.15.0
|
||||
soupsieve==2.2
|
||||
sqlparse==0.4.1
|
||||
static3==0.7.0
|
||||
urllib3==1.26.3
|
||||
1
runtime.txt
Normal file
1
runtime.txt
Normal file
|
|
@ -0,0 +1 @@
|
|||
python-3.8.5
|
||||
0
static/assets/css/sb-admin-2.css
Normal file
0
static/assets/css/sb-admin-2.css
Normal file
0
static/assets/css/sb-admin-2.min.css
vendored
Normal file
0
static/assets/css/sb-admin-2.min.css
vendored
Normal file
190
static/assets/css/style.css
Normal file
190
static/assets/css/style.css
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
|
||||
/*--------------------------------------------------------------
|
||||
# Navigation Menu
|
||||
--------------------------------------------------------------*/
|
||||
/**
|
||||
* Desktop Navigation
|
||||
*/
|
||||
.navbar {
|
||||
padding: 0;
|
||||
}
|
||||
.navbar ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar li {
|
||||
position: relative;
|
||||
}
|
||||
.navbar a, .navbar a:focus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0 10px 30px;
|
||||
font-size: 15px;
|
||||
color: #4e4039;
|
||||
white-space: nowrap;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.navbar a i, .navbar a:focus i {
|
||||
font-size: 12px;
|
||||
line-height: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
|
||||
color: #ff4d21;
|
||||
}
|
||||
.navbar .getstarted, .navbar .getstarted:focus {
|
||||
background: #ff4d21;
|
||||
color: #fff;
|
||||
padding: 10px 25px;
|
||||
margin-left: 30px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.navbar .getstarted:hover, .navbar .getstarted:focus:hover {
|
||||
color: #fff;
|
||||
background: #ee7843;
|
||||
}
|
||||
.navbar .dropdown ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: calc(100% + 30px);
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.navbar .dropdown ul li {
|
||||
min-width: 200px;
|
||||
}
|
||||
.navbar .dropdown ul a {
|
||||
padding: 10px 20px;
|
||||
font-size: 15px;
|
||||
text-transform: none;
|
||||
}
|
||||
.navbar .dropdown ul a i {
|
||||
font-size: 12px;
|
||||
}
|
||||
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
|
||||
color: #ff4d21;
|
||||
}
|
||||
.navbar .dropdown:hover > ul {
|
||||
opacity: 1;
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
.navbar .dropdown .dropdown ul {
|
||||
top: 0;
|
||||
left: calc(100% - 30px);
|
||||
visibility: hidden;
|
||||
}
|
||||
.navbar .dropdown .dropdown:hover > ul {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
@media (max-width: 1800px) {
|
||||
.navbar .dropdown .dropdown ul {
|
||||
left: -90%;
|
||||
}
|
||||
.navbar .dropdown .dropdown:hover > ul {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mobile Navigation
|
||||
*/
|
||||
.mobile-nav-toggle {
|
||||
color: #7a6960;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
line-height: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.mobile-nav-toggle.bi-x {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.mobile-nav-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navbar-mobile {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(78, 64, 57, 0.9);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.navbar-mobile .mobile-nav-toggle {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
.navbar-mobile ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
padding: 10px 0;
|
||||
background-color: #fff;
|
||||
overflow-y: auto;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.navbar-mobile a, .navbar-mobile a:focus {
|
||||
padding: 10px 20px;
|
||||
font-size: 15px;
|
||||
color: #7a6960;
|
||||
}
|
||||
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
|
||||
color: #ff4d21;
|
||||
}
|
||||
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
|
||||
margin: 15px;
|
||||
}
|
||||
.navbar-mobile .dropdown ul {
|
||||
position: static;
|
||||
display: none;
|
||||
margin: 10px 20px;
|
||||
padding: 10px 0;
|
||||
z-index: 99;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||
}
|
||||
.navbar-mobile .dropdown ul li {
|
||||
min-width: 200px;
|
||||
}
|
||||
.navbar-mobile .dropdown ul a {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.navbar-mobile .dropdown ul a i {
|
||||
font-size: 12px;
|
||||
}
|
||||
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
|
||||
color: #ff4d21;
|
||||
}
|
||||
.navbar-mobile .dropdown > .dropdown-active {
|
||||
display: block;
|
||||
}
|
||||
7
static/assets/js/Chart.min.js
vendored
Executable file
7
static/assets/js/Chart.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
81
static/assets/js/main.js
Normal file
81
static/assets/js/main.js
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/**
|
||||
* Developed by: Ben Hur Gonçalves
|
||||
* Contact: benhur.goncalves@protonmail.com
|
||||
*/
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Easy selector helper function
|
||||
*/
|
||||
const select = (el, all = false) => {
|
||||
el = el.trim()
|
||||
if (all) {
|
||||
return [...document.querySelectorAll(el)]
|
||||
} else {
|
||||
return document.querySelector(el)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Easy event listener function
|
||||
*/
|
||||
const on = (type, el, listener, all = false) => {
|
||||
let selectEl = select(el, all)
|
||||
if (selectEl) {
|
||||
if (all) {
|
||||
selectEl.forEach(e => e.addEventListener(type, listener))
|
||||
} else {
|
||||
selectEl.addEventListener(type, listener)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Easy on scroll event listener
|
||||
*/
|
||||
const onscroll = (el, listener) => {
|
||||
el.addEventListener('scroll', listener)
|
||||
}
|
||||
|
||||
/**
|
||||
* Navbar links active state on scroll
|
||||
*/
|
||||
let navbarlinks = select('#navbar .scrollto', true)
|
||||
const navbarlinksActive = () => {
|
||||
let position = window.scrollY + 200
|
||||
navbarlinks.forEach(navbarlink => {
|
||||
if (!navbarlink.hash) return
|
||||
let section = select(navbarlink.hash)
|
||||
if (!section) return
|
||||
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
|
||||
navbarlink.classList.add('active')
|
||||
} else {
|
||||
navbarlink.classList.remove('active')
|
||||
}
|
||||
})
|
||||
}
|
||||
window.addEventListener('load', navbarlinksActive)
|
||||
onscroll(document, navbarlinksActive)
|
||||
|
||||
/**
|
||||
* Mobile nav toggle
|
||||
*/
|
||||
on('click', '.mobile-nav-toggle', function(e) {
|
||||
select('#navbar').classList.toggle('navbar-mobile')
|
||||
this.classList.toggle('bi-list')
|
||||
this.classList.toggle('bi-x')
|
||||
})
|
||||
|
||||
/**
|
||||
* Mobile nav dropdowns activate
|
||||
*/
|
||||
on('click', '.navbar .dropdown > a', function(e) {
|
||||
if (select('#navbar').classList.contains('navbar-mobile')) {
|
||||
e.preventDefault()
|
||||
this.nextElementSibling.classList.toggle('dropdown-active')
|
||||
}
|
||||
}, true)
|
||||
|
||||
})()
|
||||
10
static/css/sb-admin-2.min.css
vendored
Normal file
10
static/css/sb-admin-2.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2160
static/css/style.css
Normal file
2160
static/css/style.css
Normal file
File diff suppressed because it is too large
Load diff
BIN
static/img/about-img.jpg
Normal file
BIN
static/img/about-img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
static/img/about-img2.jpg
Normal file
BIN
static/img/about-img2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
static/img/apple-touch-icon.png
Normal file
BIN
static/img/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
static/img/favicon.png
Normal file
BIN
static/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
static/img/hero-bg-2.jpg
Normal file
BIN
static/img/hero-bg-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 556 KiB |
BIN
static/img/hero-bg.jpg
Normal file
BIN
static/img/hero-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 347 KiB |
BIN
static/img/img.png
Normal file
BIN
static/img/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
static/img/incognito.png
Normal file
BIN
static/img/incognito.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
static/img/morpheus.jpeg
Normal file
BIN
static/img/morpheus.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue