Home: Difference between revisions

From BigID Developer Portal
No edit summary
No edit summary
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap');
    /* Light Mode Styles (Default) */
    :root {
        --bg-color: #ffffff;
        --text-primary: #1a202c;
        --text-secondary: #4a5568;
        --section-bg: #f7fafc;
        --input-bg: #fff;
        --input-border: #e2e8f0;
        --input-text: #2d3748;
        --highlight-bg: #bee3f8;
        --highlight-text: #2c5282;
        --card-bg: #ffffff;
        --card-text-primary: #1a202c;
        --card-text-secondary: #4a5568;
        --grid-line-color: rgba(0, 0, 0, 0.04);
        --watermark-opacity: 0.05;
    }
     .info {
     .info {
         background: #f091ca;
         background-color: var(--highlight-bg);
         padding: 3px;
        color: var(--highlight-text);
         font-weight: 600;
         padding: 3px 5px;
         color: #ffff;
         font-weight: 500;
        border-radius: 4px;
         opacity: 0;
        animation: fadeIn 0.5s ease forwards;
     }
     }


Line 13: Line 38:


     #bodyContent.citizen-body {
     #bodyContent.citizen-body {
         min-width:0px !important;
         min-width: 0px !important;
         max-width:80vw;
         max-width: 80vw;
    }
 
    .mw-body-header {
        display: none !important
     }
     }


     #contentSub {
     .mw-body-header, #contentSub {
         display: none
         display: none !important;
     }
     }


     #bodyContent {
     #bodyContent {
         min-width: 80vw !important;
         min-width: 80vw !important;
    }
    #why h2 {
        margin: 0px;
     }
     }


     main {
     main {
         font-family: 'Archivo', sans-serif;
         font-family: 'Inter', sans-serif;
         -moz-osx-font-smoothing: grayscale;
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         -webkit-font-smoothing: antialiased;
Line 42: Line 59:
         align-content: center;
         align-content: center;
         flex-direction: column;
         flex-direction: column;
        background-color: var(--bg-color);
        color: var(--text-secondary);
     }
     }


     #mega {
     #mega {
         margin: 0px;
        position: relative;
         align-items: center;
        padding: 15vh 2vw;
         justify-content: space-between;
        text-align: center;
         padding-top: 5vh;
        border-radius: 12px;
         margin-top: 2rem;
        background: linear-gradient(315deg, rgba(45, 55, 72, 0.9), rgba(74, 85, 104, 0.9), rgba(43, 108, 176, 0.9));
        background-size: 400% 400%;
        animation: gradient-animation 20s ease infinite;
        overflow: hidden;
    }
   
    #code-background {
         position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }
   
    .code-snippet {
        position: absolute;
        color: rgba(255, 255, 255, 0.15);
        font-family: 'Fira Code', monospace;
         font-size: 14px;
        white-space: nowrap;
        animation: slide-code linear infinite;
        user-select: none;
    }
 
    @keyframes slide-code {
        from { transform: translateY(100vh); }
        to { transform: translateY(-20vh); }
    }
 
 
    #mega .title {
         position: relative;
        z-index: 1;
     }
     }


     #mega h1 {
     #mega h1 {
         font-size: 5em;
         font-size: 4.5em;
        font-weight: 700;
         margin-top: 0px;
         margin-top: 0px;
         margin-bottom: 3vh;
         margin-bottom: 2vh;
        color: #fff;
     }
     }


     main h1 {
     main h1 {
         font-size: 2.5em;
         font-size: 2.5em;
        font-weight: 700;
     }
     }


     #mega h2 {
     #mega h2 {
         font-weight: 300;
         font-weight: 300;
         font-size: 1.20em;
         font-size: 1.5em;
        color: rgba(255, 255, 255, 0.85);
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
     }
     }


     #mega>.title {
     #mega>.title {
         padding-right: 2vw;
         padding-right: 0;
         flex: .4
         flex: 1;
     }
     }


     main section a:link {
     main #mega .links a {
        padding: 12px 28px;
        border-radius: 8px;
        background: linear-gradient(90deg, #4a90e2, #50e3c2);
        box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39);
         text-decoration: none;
         text-decoration: none;
         color: #fff;
         color: #fff;
         font-weight: 600;
         font-weight: 600;
         display: inline-block;
         display: inline-block;
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
     }
     }


     main section a:visited {
     main #mega .links a:hover {
         color: inherit;
         transform: translateY(-2px);
    }
         opacity: .85;
 
    main section a:hover {
         opacity: .7;
     }
     }


     main #mega .links {
     main #mega .links {
         display: flex;
         display: flex;
         margin-top: 4vh;
         margin-top: 5vh;
        width: 80%;
         margin-bottom: 0;
         margin-bottom: 8vh;
         justify-content: center;
    }
 
    main #mega .links a {
        padding: 10px 20px;
        border-radius: 10px;
         background: #4bb6e8;
 
    }
 
    main #headerimg {
        width: 100%;
    }
 
    main #why svg {
        width: 7vw;
        margin: 2vh 2vw;
    }
 
    main #why {
        font-size: 18px;
     }
     }


Line 116: Line 159:
         flex-direction: row;
         flex-direction: row;
         display: flex;
         display: flex;
         align-items: center;
         align-items: stretch;
         padding-top: 2vh;
         padding-top: 2vh;
     }
     }
 
   
     main .column {
     @keyframes gradient-animation {
        flex-direction: column;
         0% { background-position: 0% 50%; }
        display: flex;
        50% { background-position: 100% 50%; }
    }
        100% { background-position: 0% 50%; }
 
    main #getStarted>h1 {
         text-align: center;
    }
 
    main .card.purple {
        background-image: linear-gradient(124deg, rgb(215, 10, 132), rgb(81, 18, 127));
    }
 
    main .card.red {
        background-image: linear-gradient(124deg, rgb(200, 56, 53), rgb(155, 35, 85));
    }
 
    main .card.orange {
        background-image: linear-gradient(124deg, rgb(255, 163, 55), rgb(188, 67, 34));
    }
 
    main .card.blue {
        background-image: linear-gradient(124deg, rgb(78, 194, 135), rgb(41, 151, 239));
     }
     }


     main .card {
     main .card {
        position: relative;
         flex-direction: column;
         flex-direction: column;
         border-radius: 10px;
         border-radius: 14px;
         box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18);
         box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
        color: #fff;
         font-size: 18px;
         font-size: 18px;
         overflow: hidden;
         overflow: hidden;
         margin: 1.5vw;
         margin: 1vw;
         flex: 1;
         flex: 1;
        display: flex;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: var(--card-bg);
        padding: 2px;
        text-decoration: none;
    }
   
    main .card::before {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 0;
        margin: -2px;
        border-radius: inherit;
        background-size: 200% 200%;
        animation: gradient-animation 10s ease infinite;
    }
   
    .card.purple::before { background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .card.red::before { background-image: linear-gradient(135deg, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%); }
    .card.orange::before { background-image: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
    .card.blue::before { background-image: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); }
   
    main .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 30px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.1);
     }
     }


     main .card p {
     main .card p {
         color: #fff
         color: var(--card-text-secondary);
        line-height: 1.6;
     }
     }


     main .card h1 {
     main .card h1 {
         margin: 0px;
         margin: 0 0 1rem 0;
         font-size: 2em;
         font-size: 2em;
         color: #fff;
        font-weight: 600;
         color: var(--card-text-primary);
     }
     }
 
   
     main .card a:link {
     .card-footer {
        display: block;
         text-align: center;
         text-align: center;
         padding: 2vh;
         padding: 1.5vh;
         background-color: rgba(0, 0, 0, .4);
         background-color: rgba(0, 0, 0, .05);
         font-weight: 600;
         font-weight: 600;
        margin-top: auto;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        color: var(--card-text-primary);
     }
     }
 
   
     main .card a:hover {
     main .card-inner-content {
         opacity: .8;
        position: relative;
        z-index: 1;
        background-color: var(--card-bg);
        border-radius: 12px;
        height: 100%;
        display: flex;
        flex-direction: column;
         overflow: hidden;
     }
     }
 
   
     main .card>.content {
     main .card-inner-content::after {
         padding: 1.5vw;
         content: '';
         padding-bottom: 0px;
        position: absolute;
         min-height: 280px;
        bottom: 20px;
        right: 20px;
        width: 90px;
        height: 90px;
        z-index: 0;
        background-repeat: no-repeat;
        background-position: center;
         background-size: contain;
         opacity: var(--watermark-opacity);
        transition: opacity 0.3s ease;
     }
     }
   
    .card.purple .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a202c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z' /%3E%3C/svg%3E"); }
    .card.red .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a202c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' /%3E%3C/svg%3E"); }
    .card.blue .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a202c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6 18.233m10.56-4.404L18 18.233m-12-4.404h12m-12 0a9 9 0 019-9h.096c.5 0 .905.405.905.905 0 .714-.211 1.412-.608 2.006L7.394 13.83c-.397.594-.908 1.05-1.482 1.342a9.058 9.058 0 01-1.212.323' /%3E%3C/svg%3E"); }
    .card.orange .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a202c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' /%3E%3C/svg%3E"); }


    @media only screen and (max-width: 600px) {
        #mega {
            text-align: center;
            flex-direction: column-reverse;
        }


        #mega .links {
    main .card>.card-inner-content>.content {
            margin: auto;
         position: relative;
            text-align: center;
         z-index: 1;
            align-content: center;
         padding: 2vw;
            justify-content: space-evenly;
         padding-bottom: 0px;
            padding-bottom: 20px
         min-height: 250px;
        }
         display: flex;
 
         flex-direction: column;
        #mega .title {
         text-align: left;
            padding: 0px;
        }
 
        main {
            width: auto;
            text-align: center;
        }
 
        main .row {
            flex-direction: column;
        }
 
        main .chevron {
            display: none;
        }
 
        main .card>.content {
            padding: 20px;
            min-height: 0px;
        }
 
        main .card {
            margin: 10px 0px;
            box-shadow: none;
        }
 
        main #why svg {
            width: 30vw;
        }
        #classify .try { padding-left:0px !important;}
        #classify {margin:0px !important;}
    }
 
    ol.special {
         list-style: none;
         margin-left: 0px;
    }
 
    ol li {
         display: inline-block;
         padding: 10px;
        background-color: #334450;
         border-radius: 10px;
         margin-right: 10px;
         margin-bottom: 10px;
    }
 
    .skin-citizen-light ol li {
         background-color: #e3e3e3;
     }
     }


     #classify {
     #classify {
        position: relative;
         display: flex;
         display: flex;
         justify-content: space-between;
         justify-content: center;
         align-items: center;
         align-items: center;
         margin-top: 2.4rem;
        margin: 4rem 0;
         padding: 25px;
        padding: 40px;
        background-color: var(--section-bg);
        border-radius: 12px;
        gap: 5vw;
        border: 1px solid var(--input-border);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }
   
    #classify h1 {
        color: var(--text-primary);
         margin-top: 0;
    }
   
    #classify p {
        color: var(--text-secondary);
         line-height: 1.7;
     }
     }


Line 261: Line 299:
         display: flex;
         display: flex;
         flex-direction: column;
         flex-direction: column;
        padding-left: 10vw;
         min-width: 350px;
         min-width: 300px;
     }
     }


     #classify .try #tryData {
     #classify .try #tryData {
         background-color: #fff;
         background-color: var(--input-bg);
         padding: 10px;
         padding: 18px;
         border-radius: 10px;
         border-radius: 8px;
         overflow: scroll;
        height: 130px;
         height: 90px;
         color: var(--input-text);
         color: #54595d;
         border: 1px solid var(--input-border);
        box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);
        font-size: 1.05em;
         line-height: 1.6;
     }
     }


     #classify .try button {
     #classify .try button {
         padding: 10px 20px;
         padding: 12px 24px;
         border-radius: 10px;
         border-radius: 8px;
         background: #4bbf8f;
         background: #2b6cb0;
        box-shadow: 0 4px 14px 0 rgba(43, 108, 176, 0.39);
         font-weight: 600;
         font-weight: 600;
         color: #fff;
         color: #fff;
         border: 0px;
         border: 0px;
         width: 100%;
         width: 100%;
         margin-top: 1vh;
         margin-top: 1.5vh;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }
   
    #classify .try button:hover {
        transform: translateY(-2px);
        background: #2c5282;
    }
   
    #classify .try button.processing {
        background: #2c5282;
        cursor: not-allowed;
    }
   
    /* Dark Mode Styles */
    .skin-citizen-dark {
        --bg-color: #1a202c;
        --text-primary: #f7fafc;
        --text-secondary: #a0aec0;
        --section-bg: #2d3748;
        --input-bg: #4a5568;
        --input-border: #4a5568;
        --input-text: #f7fafc;
        --highlight-bg: #2b6cb0;
        --highlight-text: #bee3f8;
        --card-bg: #1A202C;
        --card-text-primary: #ffffff;
        --card-text-secondary: rgba(255, 255, 255, 0.8);
        --grid-line-color: rgba(255, 255, 255, 0.06);
        --watermark-opacity: 0.1;
    }
   
    .skin-citizen-dark #classify {
        background-image: none;
        border: 1px solid var(--input-border);
        box-shadow: none;
    }
   
    .skin-citizen-dark main .card {
        box-shadow: 0 10px 20px rgba(0,0,0,0.4), 0 6px 6px rgba(0,0,0,0.4);
    }
 
    .skin-citizen-dark main .card .card-footer {
        background-color: rgba(255, 255, 255, .1);
    }
 
    .skin-citizen-dark main .card p,
    .skin-citizen-dark main .card h1 {
        text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
   
    .skin-citizen-dark .card.purple .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z' /%3E%3C/svg%3E"); }
    .skin-citizen-dark .card.red .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' /%3E%3C/svg%3E"); }
    .skin-citizen-dark .card.blue .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6 18.233m10.56-4.404L18 18.233m-12-4.404h12m-12 0a9 9 0 019-9h.096c.5 0 .905.405.905.905 0 .714-.211 1.412-.608 2.006L7.394 13.83c-.397.594-.908 1.05-1.482 1.342a9.058 9.058 0 01-1.212.323' /%3E%3C/svg%3E"); }
    .skin-citizen-dark .card.orange .card-inner-content::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' /%3E%3C/svg%3E"); }
 
 
    /* Scroll Animations */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
 
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
     }
     }
   
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @media only screen and (max-width: 768px) {
        #mega, #classify.row {
            text-align: center;
            flex-direction: column;
        }
        #getStarted .row {
            flex-direction: column;
            align-items: center;
        }
       
        #mega .title, #classify .try {
            padding: 0;
        }
        #mega h2 {
            margin-left: auto;
            margin-right: auto;
        }
       
        #mega .links {
            justify-content: center;
        }
        main .card {
            margin: 15px 0;
            width: 95%;
            max-width: 450px;
        }


    #classify h1 {
        main .card>.card-inner-content>.content {
        margin: 0px;
            padding: 24px;
            min-height: auto;
        }
     }
     }
</style>
</style>
<main>
<main>
     <section id="mega" class="row">
     <section id="mega">
        <div id="code-background"></div>
         <div class="title">
         <div class="title">
             <h1>Discover</h1>
             <h1>Discover</h1>
             <h2>Bring enterprise-scale data intelligence to your application</h2>
             <h2>Bring enterprise-scale data intelligence to your application</h2>
             <p class="links"><a href="Get_Started" style="color:#fff;">Get Started</a></p>
             <p class="links"><a href="Get_Started">Get Started</a></p>
         </div>
         </div>
        <div style="flex:1"><img id="headerimg" src="https://wiki-images.bigid.tools/cdn/main.svg" /></div>
     </section>
     </section>
     <section id="classify" class="row custom_bigid_notes">
     <section id="classify" class="row custom_bigid_notes">
Line 308: Line 455:
             <div contenteditable="true" id="tryData">Hello! Can you please process payment for [email protected] to
             <div contenteditable="true" id="tryData">Hello! Can you please process payment for [email protected] to
                 4199006507426062? Thank you!</div>
                 4199006507426062? Thank you!</div>
             <button onclick="discover()">Discover</button>
             <button id="discoverBtn" onclick="discover()">Discover</button>
         </div>
         </div>
     </section>
     </section>
     <section id="getStarted">
     <section id="getStarted">
        <h1>Start Developing</h1>
         <div class="row">
         <div class="row">
             <div class="card purple " style="margin-left:0px;">
             <a href="Apps" class="card purple animate-on-scroll">
                <div class="content ">
                <div class="card-inner-content">
                    <h1>Apps</h1>
                    <div class="content">
                    <p>Add custom logic and screens to your BigID system.</p>
                        <h1>Apps</h1>
                        <p>Add custom logic and screens to your BigID system.</p>
                    </div>
                    <div class="card-footer">
                        Learn more
                    </div>
                 </div>
                 </div>
                <a href="Apps">Learn more</a>
            </a>
             </div>
             <a href="BigID_API" class="card red animate-on-scroll">
            <div class="card red ">
                <div class="card-inner-content">
                <div class="content ">
                    <div class="content">
                    <h1>REST API</h1>
                        <h1>REST API</h1>
                    <p>Manage BigID programmatically. Scan data, run SARs, and more through code.</p>
                        <p>Manage BigID programmatically. Scan data, run SARs, and more through code.</p>
                    </div>
                    <div class="card-footer">
                        Learn more
                    </div>
                 </div>
                 </div>
                <a href="BigID_API">Learn More</a>
            </a>
             </div>
             <a href="Connectors" class="card blue animate-on-scroll">
            <div class="card blue ">
                <div class="card-inner-content">
                <div class="content ">
                    <div class="content">
                    <h1>Connectors</h1>
                        <h1>Connectors</h1>
                    <p>Scan any system, anywhere. Write your own connector in any programming language.</p>
                        <p>Scan any system, anywhere. Write your own connector in any programming language.</p>
                    </div>
                    <div class="card-footer">
                        Learn more
                    </div>
                 </div>
                 </div>
                <a href="Connectors">Learn More</a>
            </a>
            </div>
             <a href="LLMs" class="card orange animate-on-scroll">
             <div class="card orange" style="margin-right:0px;">
                <div class="card-inner-content">
                <div class="content ">
                    <div class="content">
                    <h1>LLMs</h1>
                        <h1>LLMs</h1>
                    <p>Interacting with BigID using MCP.</p>
                        <p>Interacting with BigID using MCP.</p>
                    </div>
                    <div class="card-footer">
                        Learn more
                    </div>
                 </div>
                 </div>
                <a href="LLMs">Learn More</a>
            </a>
            </div>
         </div>
         </div>
    </section>
    <section>
        <h1>Popular Articles:</h1>
        {{Special:TopTenPages/1/10}}
     </section>
     </section>
</main>
</main>
<script>
<script>
     async function discover() {
     async function discover() {
         let req = await window.fetch('https://classify.bigid.tools', {
         const button = document.getElementById('discoverBtn');
            method: 'POST',
        const originalText = button.innerText;
            headers: {
       
                'content-type': 'application/json'
        button.innerText = 'Processing...';
            },
        button.classList.add('processing');
            body: JSON.stringify({ text: document.getElementById('tryData').innerText })
        button.disabled = true;
 
        try {
            let req = await window.fetch('https://classify.bigid.tools', {
                method: 'POST',
                headers: {
                    'content-type': 'application/json'
                },
                body: JSON.stringify({ text: document.getElementById('tryData').innerText })
            });
            let json = await req.json();
            let highlighter = json.map((item) => {
                return { start: item.pos - 1, end: item.end - 1, word: item.word }
            });
            highlighter = highlighter.reduce(function (p, c) {
                if (!p.some(function (el) { return el.end === c.end; })) p.push(c);
                return p;
            }, []);
            highlighter = highlighter.reduce(function (p, c) {
                if (!p.some(function (el) { return el.start === c.start; })) p.push(c);
                return p;
            }, []);
            highlighter = highlighter.sort((a, b) => b.end - a.end);
           
            let text = document.getElementById('tryData').innerText;
            for (high of highlighter) {
                text = text.substring(0, high.start) + "<span class='info' title='" + high.word + "'>" + text.substring(high.start, high.end) + "</span>" + text.substring(high.end);
            }
            document.getElementById('tryData').innerHTML = text;
        } catch (error) {
            console.error("Discovery failed:", error);
        } finally {
            button.innerText = originalText;
            button.classList.remove('processing');
            button.disabled = false;
        }
    }
 
    const scrollElements = document.querySelectorAll(".animate-on-scroll");
 
    const elementInView = (el, dividend = 1) => {
        const elementTop = el.getBoundingClientRect().top;
        return (
            elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend
        );
    };
 
    const displayScrollElement = (element) => {
        element.classList.add("is-visible");
    };
 
    const hideScrollElement = (element) => {
        element.classList.remove("is-visible");
    };
 
    const handleScrollAnimation = () => {
        scrollElements.forEach((el) => {
            if (elementInView(el, 1.25)) {
                displayScrollElement(el);
            }
         });
         });
        let json = await req.json();
    }
        let highlighter = json.map((item) => {
 
            return { start: item.pos - 1, end: item.end - 1, word: item.word }
    window.addEventListener("scroll", () => {
        });
        handleScrollAnimation();
        highlighter = highlighter.reduce(function (p, c) {
    });
            if (!p.some(function (el) { return el.end === c.end; })) p.push(c);
   
            return p;
    // Trigger on load as well
         }, []);
    handleScrollAnimation();
        highlighter = highlighter.reduce(function (p, c) {
 
             if (!p.some(function (el) { return el.start === c.start; })) p.push(c);
    function createCodeBackground() {
             return p;
        const container = document.getElementById('code-background');
         }, []);
        if (!container) return;
         highlighter = highlighter.sort((a, b) => b.end - a.end);
          
        console.log(highlighter);
        const snippets = [
        let text = document.getElementById('tryData').innerText;
            "const classify = () => {}",
        for (high of highlighter) {
            "import { BigID } from 'bigid-sdk';",
             text = text.substring(0, high.start) + "<span class='info' title='" + high.word + "'>" + text.substring(high.start, high.end) + "</span>" + text.substring(high.end);
            "let api_token = '...';",
             "discover.scan({ target: 's3' });",
            "function onResult(data) { console.log(data); }",
            "new Connector('kafka');",
            "fetch('/api/v1/dsar')",
            "// Initialize the application",
            "const port = 3000;",
            "app.listen(port);",
            "main.card { display: flex; }",
             "opacity: 1; transform: translateY(0);"
         ];
 
         const snippetCount = 30;
 
        for (let i = 0; i < snippetCount; i++) {
            const snippetEl = document.createElement('div');
            snippetEl.classList.add('code-snippet');
            snippetEl.innerText = snippets[Math.floor(Math.random() * snippets.length)];
           
            snippetEl.style.left = `${Math.random() * 100}%`;
             snippetEl.style.top = `${Math.random() * 100}%`;
            snippetEl.style.animationDuration = `${10 + Math.random() * 15}s`;
            snippetEl.style.animationDelay = `${Math.random() * 10}s`;
           
            container.appendChild(snippetEl);
         }
         }
        document.getElementById('tryData').innerHTML = text;
     }
     }
    createCodeBackground();
</script>
</script>



Latest revision as of 20:11, 19 August 2025

Discover

Bring enterprise-scale data intelligence to your application

See into your data

BigID allows you to sort through large swaths of data to see what really matters. Using hundreds of machine learning, NLP and regex classifiers, you can classify any data, anywhere. Try it on the right.

Hello! Can you please process payment for [email protected] to 4199006507426062? Thank you!