Non Fungible Vaults

by smombartz

HTML

<style>
  .nfv-container {
    display: flex;
    justify-content: space-between; /* Distribute items evenly with equal space between */
    align-items: center; /* Center items vertically */
    width: 100%; /* Ensure the container spans the available width */
    max-width: 800px; /* Optional: Limit the width for better layout */
    margin: 0 auto; /* Center the container horizontally on the page */
    gap: 40px;
  }

  svg {
    border-radius: 8px; /* Adds rounded corners */
    min-width: 420px;
  }

  .controls {
    flex: 1; /* Allow buttons to take equal space */
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    color: white;
    background-color: #00587E;
    transition: background-color 0.3s ease, opacity 0.5s ease; /* Added opacity transition */
  }

  button:hover {
    background-color: #1499DA;
  }

  button:disabled {
    opacity: 0.5;
    cursor: not-allowed; /* Optional: Changes cursor to indicate the button is not clickable */
  }

  button.active {
    background-color: #1499DA; /* Same as hover state */
    opacity: 1; /* Ensure it is fully visible */
    cursor: not-allowed; /* Indicates it's not clickable */
  }

  .graph.animate {
    animation: updateStroke 1s ease-out forwards;
  }

  /* Chart Color */
  .chart-green {
    stroke: #5DBA14;
    opacity: 40%;
  }

  .chart-yellow {
    stroke: #FCBF3B;
    opacity: 40%;
  }

  .chart-red {
    stroke: #E45200;
    opacity: 40%;
  }

  .chart-liquidation .graph-bg {
    stroke: #E45200;
    opacity: 40%;
  }

  .chart-liquidation .graph {
    stroke: #E45200;
    opacity: 80%;
    animation: liquidation 2s infinite;
  }

  /* Risk Ratio Color */
  .risk-ratio-green {
    fill: #459d00;
  }

  .risk-ratio-yellow {
    fill: #f4ab00;
  }

  .risk-ratio-red {
    fill: #e45200;
  }
  /* Media Queries for Responsive Design */
@media (max-width: 768px) {
 ...