dbdoc_engine 0.1.0

data/app/assets/stylesheets/dbdoc_engine/loading_spinner.css

@@ -0,0 +1,127 @@
+.loading-spinner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.95);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+  }
+  
+  .loading-spinner[data-loading-spinner-visible="true"] {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  .loading-spinner[data-loading-spinner-visible="false"] {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  
+  .spinner-content {
+    text-align: center;
+  }
+  
+  .spinner {
+    width: 60px;
+    height: 60px;
+    border: 6px solid #f3f3f3;
+    border-top: 6px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 15px;
+  }
+  
+  .spinner-content p {
+    font-size: 18px;
+    color: #333;
+    font-weight: 500;
+    margin-top: 15px;
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  .sidebar-tooltip {
+    pointer-events: none !important;
+  }
+  .spinner-content {
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+  /* SVG Loader Styles */
+.pl {
+  width: 5em;
+  height: 5em;
+  margin-bottom: 15px;
+}
+
+.pl circle {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+}
+
+.pl__ring1 { animation: ring1 4s 0s ease-in-out infinite; }
+.pl__ring2 { animation: ring2 4s 0.04s ease-in-out infinite; }
+.pl__ring3 { animation: ring3 4s 0.08s ease-in-out infinite; }
+.pl__ring4 { animation: ring4 4s 0.12s ease-in-out infinite; }
+.pl__ring5 { animation: ring5 4s 0.16s ease-in-out infinite; }
+.pl__ring6 { animation: ring6 4s 0.2s ease-in-out infinite; }
+
+/* Animations for each ring */
+@keyframes ring1 {
+  from { stroke-dashoffset: -376.237; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
+  23% { stroke-dashoffset: -94.2478; transform: rotate(1turn); animation-timing-function: ease-out; }
+  46%, 50% { stroke-dashoffset: -376.237; transform: rotate(2.25turn); animation-timing-function: ease-in; }
+  73% { stroke-dashoffset: -94.2478; transform: rotate(3.5turn); animation-timing-function: ease-out; }
+  96%, to { stroke-dashoffset: -376.237; transform: rotate(4.75turn);}
+}
+@keyframes ring2 {
+  from { stroke-dashoffset: -329.207; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
+  23% { stroke-dashoffset: -82.4668; transform: rotate(1turn); animation-timing-function: ease-out; }
+  46%, 50% { stroke-dashoffset: -329.207; transform: rotate(2.25turn); animation-timing-function: ease-in; }
+  73% { stroke-dashoffset: -82.4668; transform: rotate(3.5turn); animation-timing-function: ease-out; }
+  96%, to { stroke-dashoffset: -329.207; transform: rotate(4.75turn);}
+}
+@keyframes ring3 {
+  from { stroke-dashoffset: -288.448; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
+  23% { stroke-dashoffset: -72.2566; transform: rotate(1turn); animation-timing-function: ease-out; }
+  46%, 50% { stroke-dashoffset: -288.448; transform: rotate(2.25turn); animation-timing-function: ease-in; }
+  73% { stroke-dashoffset: -72.2566; transform: rotate(3.5turn); animation-timing-function: ease-out; }
+  96%, to { stroke-dashoffset: -288.448; transform: rotate(4.75turn);}
+}
+@keyframes ring4 {
+  from { stroke-dashoffset: -253.960; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
+  23% { stroke-dashoffset: -63.6173; transform: rotate(1turn); animation-timing-function: ease-out; }
+  46%, 50% { stroke-dashoffset: -253.960; transform: rotate(2.25turn); animation-timing-function: ease-in; }
+  73% { stroke-dashoffset: -63.6173; transform: rotate(3.5turn); animation-timing-function: ease-out; }
+  96%, to { stroke-dashoffset: -253.960; transform: rotate(4.75turn);}
+}
+@keyframes ring5 {
+  from { stroke-dashoffset: -225.742; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
+  23% { stroke-dashoffset: -56.5487; transform: rotate(1turn); animation-timing-function: ease-out; }
+  46%, 50% { stroke-dashoffset: -225.742; transform: rotate(2.25turn); animation-timing-function: ease-in; }
+  73% { stroke-dashoffset: -56.5487; transform: rotate(3.5turn); animation-timing-function: ease-out; }
+  96%, to { stroke-dashoffset: -225.742; transform: rotate(4.75turn);}
+}
+@keyframes ring6 {
+  from { stroke-dashoffset: -203.795; transform: rotate(-0.25turn); animation-timing-function: ease-in; }
+  23% { stroke-dashoffset: -51.0509; transform: rotate(1turn); animation-timing-function: ease-out; }
+  46%, 50% { stroke-dashoffset: -203.795; transform: rotate(2.25turn); animation-timing-function: ease-in; }
+  73% { stroke-dashoffset: -51.0509; transform: rotate(3.5turn); animation-timing-function: ease-out; }
+  96%, to { stroke-dashoffset: -203.795; transform: rotate(4.75turn);}
+}
+.spinner {
+  display: none !important;
+}

data/app/assets/stylesheets/dbdoc_engine/login.css

@@ -0,0 +1,213 @@
+body {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .login-bg {
+    min-height: 100vh;
+    width: 100vw;
+    background: url('/dbdoc_engine_assets/images/login-bg.svg') no-repeat center center fixed;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .login-card-container {
+    width: 900px;
+    height: 520px;
+    display: flex;
+    border-radius: 32px;
+    overflow: hidden;
+    box-shadow: 0 8px 40px rgba(54, 67, 128, 0.15);
+    background: transparent;
+  }
+  
+  .login-left {
+    width: 50%;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 24px 40px 24px;
+    border-top-left-radius: 32px;
+    border-bottom-left-radius: 32px;
+  }
+  
+  .login-illustration {
+    width: 210px;
+    margin-bottom: 24px;
+  }
+  
+  .login-title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #5366A0;
+    margin-bottom: 10px;
+    letter-spacing: 1px;
+    text-align: center;
+  }
+  
+  .login-desc {
+    color: #666C79;
+    font-size: 14px;
+    text-align: center;
+    font-weight: 500;
+  }
+  
+  .login-right {
+    width: 50%;
+    background: rgb(246 248 252 / 83%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-top-right-radius: 32px;
+    border-bottom-right-radius: 32px;
+    padding: 40px 36px;
+  }
+  
+  .login-logo-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 32px;
+  }
+  
+  .login-logo {
+    width: 38px;
+    height: 38px;
+    margin-right: 12px;
+    vertical-align: middle;
+  }
+  
+  .login-logo-text {
+    font-size: 24px;
+    font-weight: bold;
+    color: #5366A0;
+    letter-spacing: 1px;
+  }
+  
+  .login-form {
+    width: 100%;
+    max-width: 320px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+  
+  .login-field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  
+  .login-label {
+    color: #666C79;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  
+  .login-input {
+    border: 1.5px solid #E7E8EA;
+    border-radius: 8px;
+    padding: 9px 14px;
+    font-size: 15px;
+    color: #5366A0;
+    background: #fff;
+    outline: none;
+    transition: border 0.2s;
+  }
+  
+  .login-input:focus {
+    border-color: #5366A0;
+  }
+  
+  .login-btn-row {
+    margin-top: 10px;
+  }
+  
+  .login-btn {
+    width: 100%;
+    padding: 11px 0;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    background: linear-gradient(90deg, #5366A0 0%, #364380 100%);
+    box-shadow: 0 2px 10px rgba(54, 67, 128, 0.10);
+    cursor: pointer;
+    transition: background 0.2s, box-shadow 0.2s;
+  }
+  
+  .login-btn:hover {
+    background: linear-gradient(90deg, #364380 0%, #5366A0 100%);
+    box-shadow: 0 4px 16px rgba(54, 67, 128, 0.16);
+  }
+  .login-form-lang-btn {
+    position: absolute;
+    top: 18px;
+    right: 24px;
+    z-index: 10;
+  }
+  
+  .login-right {
+    position: relative;
+  }  
+  
+  .login-form-btn-row {
+    position: absolute;
+    top: 18px;
+    right: 24px;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .back-main-btn {
+    height: 28px;
+    padding: 0 18px;
+    background: #E7E8EA;
+    color: #364380;
+    border-radius: 14px;
+    font-size: 13px;
+    transition: background 0.2s, color 0.2s;
+    text-decoration: none;
+    box-shadow: 0 1px 4px rgba(54, 67, 128, 0.07);
+    letter-spacing: 0.02em;
+    border: none;
+    margin-right: 8px;
+  }
+  .back-main-btn:hover {
+    background: #364380;
+    color: #fff;
+    text-decoration: none;
+  }
+  
+  @media (max-width: 990px) {
+    .login-card-container {
+      flex-direction: column;
+      width: 95vw;
+      height: auto;
+      min-height: 600px;
+    }
+    .login-left, .login-right {
+      width: 100%;
+      border-radius: 0;
+      border-top-left-radius: 32px;
+      border-top-right-radius: 32px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 32px;
+      min-height: 320px;
+    }
+    .login-right {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 32px;
+      border-bottom-right-radius: 32px;
+    }
+  }
+  

data/app/assets/stylesheets/dbdoc_engine/schema_diagram.css

@@ -0,0 +1,149 @@
+/* app/assets/stylesheets/dbdoc_engine/schema_diagram.css */
+
+.mermaid-diagram-container {
+    width: 100%;
+    min-height: 500px;
+    background: white;
+  }
+  
+  .mermaid-diagram-container svg {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+    height: auto;
+  }
+  
+  .er.entityLabel {
+    font-size: 10px !important;
+    fill: #474444 !important;
+  }
+  
+  /* Tooltip Styling */
+  #column-tooltip {
+    background: white !important;
+    color: #5366A0 !important;
+    border: 1px solid #5366A0 !important;
+    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.2) !important;
+    border-radius: 6px !important;
+    font-size: 12px !important;
+    line-height: 1.4 !important;
+    max-width: 300px !important;
+    z-index: 1000 !important;
+    pointer-events: none !important;
+  }
+  
+  /* Style the tooltip content */
+  #column-tooltip .fw-bold {
+    color: #004499 !important;
+    border-bottom: 1px solid #e6f2ff;
+    padding-bottom: 4px;
+    margin-bottom: 8px;
+  }
+  
+  #column-tooltip strong {
+    color: #004499 !important;
+  }
+  
+  #column-tooltip .fst-italic {
+    color: #5366A0 !important;
+    opacity: 0.8;
+  }
+  .head-schema{
+    background-color: transparent;
+    border-bottom: none;
+    font-size: 16px;
+    color: #5366A0;
+  }
+  .dropdown-schema{
+    font-size: 13px !important;
+    color: #666C79 !important;
+    width: 61%;
+  }
+  .lable-schema{
+    font-size: 14px;
+    color: #5366A0;
+    font-weight: bold;
+  }
+  .bottom-schema{
+    background-color: transparent;
+    border-bottom: none;
+    font-size: 14px;
+    color: #666C79;
+  }
+  .diagram-btn {
+    background-color: #E7E8EA;
+    color: #5366A0;
+    border: none;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.15s, color 0.15s;
+  }
+  
+  .diagram-btn:hover {
+    background-color: #5366A0;
+    color: white;
+  }
+  
+  /* Highlight edge and arrow on hover */
+  .edge.highlighted path,
+  .edge.highlighted polygon,
+  .edge.highlighted polyline {
+    stroke-width: 2.5 !important;
+    filter: url(#glow);
+  }
+  
+  /* Animate "blood vessel" effect on the edge */
+  .animated path,
+  .animated polyline {
+    stroke-dasharray: 12 8;
+    stroke-dashoffset: 0;
+    animation: blood-flow 2.2s linear infinite;
+  }
+  
+  @keyframes blood-flow {
+    to {
+      stroke-dashoffset: -40;
+    }
+  }
+  
+  /* Highlight column row */
+  .column-highlight {
+    transition: fill 0.2s, filter 0.2s;
+    fill: #e6f2ff !important;
+    filter: drop-shadow(0 0 6px #6ec6ff);
+  }
+  /* Bold border for hovered table */
+  .table-hover-highlight > table {
+    border-width: 4px !important;
+    border-style: solid !important;
+    box-shadow: none !important;
+  }
+  /* Table hover highlighting - bold border with same color */
+  .table-hover-highlight > rect,
+  .table-hover-highlight > polygon {
+    stroke-width: 3px !important;
+    transition: stroke-width 0.2s ease !important;
+  }
+  
+  /* For HTML table elements within SVG */
+  .table-hover-highlight table {
+    border-width: 3px !important;
+    transition: border-width 0.2s ease !important;
+  }
+  
+  /* Alternative approach - target the main table border specifically */
+  g.node.table-hover-highlight > polygon,
+  g.node.table-hover-highlight > rect {
+    stroke-width: 4px !important;
+    transition: stroke-width 0.2s ease !important;
+  }
+  #schema-diagram svg {
+    width: 100%;
+    max-height: 75vh; /* or whatever max height you want */
+    height: auto;
+    overflow: visible;
+  }
+