codenct.html - NCT - A modern, Material You-inspire...

codenct.html (36392B)
      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <link rel="canonical" href="https://amit.is-a.dev/codenct.html" />
      5     <meta charset="UTF-8">
      6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7     <title>NCT Code</title>
      8     <!-- Link to Cascadia Code font from CDN -->
      9     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/cascadia-code.min.css">
     10     <style>
     11         /* Base styling for the entire page */
     12         body {
     13             background-color: black; /* Black background for the entire page */
     14             margin: 0;
     15             padding: 20px;
     16             /* Prioritize Cascadia Code, fall back to other monospaced fonts */
     17             font-family: 'Cascadia Code', 'Fira Code', 'Roboto Mono', monospace;
     18             color: white; /* Default text color for the page */
     19             display: flex;
     20             flex-direction: column;
     21             align-items: center;
     22             min-height: 100vh;
     23         }
     24 
     25         h1 {
     26             color: #f0f0f0; /* White for the main heading */
     27             text-align: center;
     28             margin-bottom: 20px;
     29         }
     30 
     31         /* Container for the tabs */
     32         .tab-container {
     33             background-color: #1a1a1a;
     34             color: #f0f0f0;
     35             padding: 15px;
     36             border-radius: 8px;
     37             width: 100%;
     38             max-width: 900px;
     39             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     40             position: relative;
     41             overflow: hidden;
     42         }
     43 
     44         /* Tab buttons styling */
     45         .tabs {
     46             display: flex;
     47             justify-content: center;
     48             margin-bottom: 20px;
     49             border-bottom: 1px solid #333;
     50         }
     51 
     52         .tab-button {
     53             background-color: transparent;
     54             border: none;
     55             padding: 10px 20px;
     56             font-size: 1.2em;
     57             color: #f0f0f0;
     58             cursor: pointer;
     59             transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
     60             position: relative;
     61             overflow: hidden;
     62             border-radius: 5px 5px 0 0;
     63             margin: 0 5px;
     64         }
     65 
     66         .tab-button:hover {
     67             color: #1abc9c;
     68             transform: translateY(-2px);
     69         }
     70 
     71         .tab-button.active {
     72             color: #1abc9c;
     73             font-weight: bold;
     74             background-color: #333;
     75             transform: translateY(-2px);
     76         }
     77 
     78         .tab-button.active::after {
     79             content: '';
     80             position: absolute;
     81             bottom: 0;
     82             left: 0;
     83             width: 100%;
     84             height: 3px;
     85             background-color: #1abc9c;
     86             animation: tabUnderline 0.3s forwards;
     87         }
     88 
     89         @keyframes tabUnderline {
     90             from { width: 0; }
     91             to { width: 100%; }
     92         }
     93 
     94         /* Tab content styling */
     95         .tab-content {
     96             display: none;
     97             padding: 15px 0;
     98             animation: fadeIn 0.5s ease-in-out;
     99         }
    100 
    101         .tab-content.active {
    102             display: block;
    103         }
    104 
    105         @keyframes fadeIn {
    106             from { opacity: 0; transform: translateY(10px); }
    107             to { opacity: 1; transform: translateY(0); }
    108         }
    109 
    110         /* Styling for the code block container */
    111         .code-block {
    112             background-color: #1a1a1a; /* Slightly lighter black for the code block background */
    113             color: #f0f0f0; /* Off-white for general code text */
    114             padding: 15px;
    115             border-radius: 8px;
    116             overflow-x: auto; /* Enable horizontal scrolling for long lines */
    117             font-size: 0.95em;
    118             line-height: 1.5;
    119             tab-size: 4; /* Adjust tab width */
    120             -moz-tab-size: 4; /* Firefox specific */
    121             white-space: pre-wrap; /* Preserve whitespace and wrap long lines */
    122             word-wrap: break-word; /* Break long words */
    123             border: 1px solid #333; /* Subtle border */
    124         }
    125 
    126         /* Download section styling */
    127         .download-item {
    128             background-color: #2a2a2a;
    129             padding: 15px;
    130             border-radius: 8px;
    131             margin-bottom: 15px;
    132             display: flex;
    133             flex-direction: column;
    134             align-items: flex-start;
    135             border: 1px solid #333;
    136         }
    137 
    138         .download-item h3 {
    139             color: #1abc9c;
    140             margin-bottom: 5px;
    141         }
    142 
    143         .download-item p {
    144             font-size: 0.9em;
    145             color: #ccc;
    146             margin-bottom: 10px;
    147         }
    148 
    149         .download-button {
    150             background-color: #007bff;
    151             color: white;
    152             border: none;
    153             padding: 10px 15px;
    154             border-radius: 5px;
    155             cursor: pointer;
    156             transition: background-color 0.3s ease, transform 0.2s ease;
    157         }
    158 
    159         .download-button:hover {
    160             background-color: #0056b3;
    161             transform: translateY(-1px);
    162         }
    163 
    164         .download-button.thank-you {
    165             background-color: #28a745;
    166             cursor: default;
    167         }
    168 
    169         /* Syntax Highlighting Styles (from original code) */
    170         .tag { color: #569cd6; }
    171         .attribute { color: #9cd656; }
    172         .string { color: #d69d66; }
    173         .selector { color: #dcdcaa; }
    174         .property { color: #4ec9b0; }
    175         .value { color: #ce9178; }
    176         .comment { color: #6a9955; font-style: italic; }
    177         .keyword { color: #c586c0; }
    178         .js-identifier { color: #9cdcfe; }
    179         .number { color: #b5cea8; }
    180         .operator { color: #ff80ed; }
    181         .punctuation { color: #f0f0f0; }
    182         .highlight-h1 { color: #e65555; font-weight: bold; }
    183         .highlight-u { color: #e6e655; font-weight: bold; text-decoration: underline; }
    184 
    185         /* Original NCT app styles (modified to fit new structure) */
    186         .logo {
    187             font-size: 3em;
    188             font-family: 'Roboto';
    189             color: #fff;
    190             text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    191             margin-bottom: 10px;
    192             animation: logoColorChange 3s ease infinite;
    193         }
    194 
    195         @keyframes logoColorChange {
    196             0% { color: #FF416C; }
    197             33% { color: #4285F4; }
    198             66% { color: #34A853; }
    199             100% { color: #FF416C; }
    200         }
    201 
    202         .container { /* This will now be the main content area for the NCT app, not the whole page */
    203             background: #fff;
    204             width: 100%;
    205             max-width: 900px;
    206             padding: 20px;
    207             border-radius: 12px;
    208             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    209             text-align: center;
    210             position: relative;
    211             overflow: hidden;
    212             margin-top: 20px; /* Added margin to separate from tabs */
    213         }
    214 
    215         /* Other NCT app styles from original code */
    216         .popup-overlay {
    217             position: fixed;
    218             top: 0;
    219             left: 0;
    220             width: 100%;
    221             height: 100%;
    222             background: rgba(0, 0, 0, 0.8);
    223             color: white;
    224             display: flex;
    225             align-items: center;
    226             justify-content: center;
    227             z-index: 1000;
    228         }
    229 
    230         .popup-box {
    231             text-align: center;
    232             background: #333;
    233             padding: 20px;
    234             border-radius: 10px;
    235             max-width: 90%;
    236             width: 400px;
    237             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    238         }
    239 
    240         .popup-box h2 { margin-bottom: 15px; }
    241         .popup-box button {
    242             margin-top: 15px;
    243             padding: 10px 20px;
    244             border: none;
    245             background-color: #007bff;
    246             color: white;
    247             border-radius: 5px;
    248             cursor: pointer;
    249         }
    250         .popup-box button:hover { background-color: #0056b3; }
    251 
    252         .menu {
    253             margin-bottom: 20px;
    254             overflow-x: auto;
    255             white-space: nowrap;
    256             -webkit-overflow-scrolling: touch;
    257         }
    258 
    259         .menu ul {
    260             list-style: none;
    261             display: flex;
    262             padding: 0;
    263             gap: 10px;
    264         }
    265 
    266         .menu li {
    267             font-size: 1.2em;
    268             padding: 10px 15px;
    269             background: linear-gradient(135deg, #34495e, #2c3e50);
    270             color: #fff;
    271             cursor: pointer;
    272             border-radius: 8px;
    273             transition: transform 0.3s ease, background 0.3s ease;
    274         }
    275 
    276         .menu li:hover {
    277             background: linear-gradient(135deg, #1abc9c, #16a085);
    278             transform: scale(1.05);
    279         }
    280 
    281         .input-section { margin-bottom: 20px; }
    282         .input-section label {
    283             font-size: 1.1em;
    284             margin-bottom: 10px;
    285             display: block;
    286             color: #34495e;
    287         }
    288 
    289         .input-section input {
    290             width: 100%;
    291             padding: 12px;
    292             font-size: 1.2em;
    293             border: 1px solid #ccc;
    294             border-radius: 8px;
    295             margin-bottom: 20px;
    296             box-sizing: border-box;
    297             transition: box-shadow 0.3s ease;
    298         }
    299 
    300         .input-section input:focus {
    301             outline: none;
    302             border-color: #1abc9c;
    303             box-shadow: 0 4px 8px rgba(26, 188, 156, 0.4);
    304         }
    305 
    306         .actions button {
    307             padding: 12px 20px;
    308             font-size: 1.2em;
    309             background: linear-gradient(135deg, #1abc9c, #16a085);
    310             color: white;
    311             border: none;
    312             border-radius: 8px;
    313             cursor: pointer;
    314             transition: background 0.3s ease, transform 0.2s ease;
    315         }
    316 
    317         .actions button:hover {
    318             background: linear-gradient(135deg, #16a085, #1abc9c);
    319             transform: scale(1.05);
    320         }
    321         .support button {
    322             padding: 12px 20px;
    323             font-size: 1.2em;
    324             background: linear-gradient(135deg, #1abc9c, #16a100);
    325             color: white;
    326             border: none;
    327             border-radius: 8px;
    328             cursor: pointer;
    329             transition: background 0.3s ease, transform 0.2s ease;
    330         }
    331 
    332         .support button:hover {
    333             background: linear-gradient(135deg, #16a100, #1abc9c);
    334             transform: scale(1.05);
    335         }
    336 
    337         .output {
    338             margin-top: 30px;
    339             text-align: left;
    340         }
    341 
    342         .output h3 {
    343             font-size: 1.3em;
    344             color: #34495e;
    345             margin-bottom: 10px;
    346         }
    347 
    348         #stepsOutput {
    349             background: #ecf0f1;
    350             padding: 15px;
    351             border-radius: 8px;
    352             font-family: 'Courier New', Courier, monospace;
    353             color: #7f8c8d;
    354             white-space: pre-wrap;
    355             word-wrap: break-word;
    356             overflow-x: auto;
    357             box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    358             margin-bottom: 20px;
    359         }
    360 
    361         #resultOutput {
    362             font-size: 1.4em;
    363             font-weight: bold;
    364             color: #34495e;
    365             background: #f9fafb;
    366             padding: 15px;
    367             border-radius: 8px;
    368             border: 1px solid #ddd;
    369             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    370         }
    371         #otp-modal {
    372           display: none;
    373           position: fixed;
    374           top: 0;
    375           left: 0;
    376           width: 100%;
    377           height: 100%;
    378           background: rgba(0, 0, 0, 0.7);
    379           z-index: 1000;
    380         }
    381         #otp-modal div {
    382           margin: 10% auto;
    383           padding: 20px;
    384           background: white;
    385           width: 80%;
    386           max-width: 400px;
    387           text-align: center;
    388           border-radius: 8px;
    389         }
    390 
    391     </style>
    392 </head>
    393 <body>
    394 
    395     <h1>--- Code NCT  ---</h1>
    396 
    397     <div class="tab-container">
    398         <div class="tabs">
    399             <button class="tab-button active" data-tab="code">Code</button>
    400             <button class="tab-button" data-tab="download">Download</button>
    401         </div>
    402 
    403         <div id="code-tab-content" class="tab-content active">
    404 
    405     <br><center>This code might have error. Please download the perfect code from the download tab</center><br>
    406             
    407             <pre class="code-block">
    408 &lt;!DOCTYPE html&gt;
    409 &lt;html lang="en"&gt;
    410 &lt;head&gt;
    411     &lt;meta charset="UTF-8"&gt;
    412     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    413     &lt;title&gt;Conversion Tool&lt;/title&gt;
    414     &lt;style&gt;
    415         /* Full-screen popup overlay styling */
    416         .popup-overlay {
    417             position: fixed;
    418             top: 0;
    419             left: 0;
    420             width: 100%;
    421             height: 100%;
    422             background: rgba(0, 0, 0, 0.8);
    423             color: white;
    424             display: flex;
    425             align-items: center;
    426             justify-content: center;
    427             z-index: 1000;
    428         }
    429 
    430         .popup-box {
    431             text-align: center;
    432             background: #333;
    433             padding: 20px;
    434             border-radius: 10px;
    435             max-width: 90%;
    436             width: 400px;
    437             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    438         }
    439 
    440         .popup-box h2 {
    441             margin-bottom: 15px;
    442         }
    443 
    444         .popup-box button {
    445             margin-top: 15px;
    446             padding: 10px 20px;
    447             border: none;
    448             background-color: #007bff;
    449             color: white;
    450             border-radius: 5px;
    451             cursor: pointer;
    452         }
    453 
    454         .popup-box button:hover {
    455             background-color: #0056b3;
    456         }
    457         /* Global reset for all elements */
    458         * {
    459             margin: 0;
    460             padding: 0;
    461             box-sizing: border-box;
    462         }
    463 
    464         /* Body styling */
    465         body {
    466             font-family: 'Arial', sans-serif;
    467             background: linear-gradient(45deg, #FF416C, #FF4B2B, #4285F4, #34A853, #FBBC05, #FF416C, #FF416C, #FF4B2B, #4285F4, #34A853, #FBBC05, #FF416C);
    468             background-size: 300% 300%;
    469             /* Larger background to enable smooth transition */
    470             animation: gradientAnimation 15s infinite;
    471             color: #333;
    472             display: flex;
    473             justify-content: center;
    474             align-items: flex-start;
    475             min-height: 100vh;
    476             flex-direction: column;
    477             padding: 10px;
    478         }
    479         @keyframes gradientAnimation {
    480             0% {
    481                 background-position: 0% 50%;
    482             }
    483             50% {
    484                 background-position: 100% 50%;
    485             }
    486             100% {
    487                 background-position: 0% 50%;
    488             }
    489         }
    490         /* Main container */
    491         .container {
    492             background: #fff;
    493             width: 100%;
    494             max-width: 900px;
    495             padding: 20px;
    496             border-radius: 12px;
    497             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    498             text-align: center;
    499             position: relative;
    500             overflow: hidden;
    501         }
    502 
    503         /* Header styling */
    504         h1 {
    505             font-size: 2.5em;
    506             color: #34495e;
    507             margin-bottom: 20px;
    508             font-weight: bold;
    509             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    510         }
    511 
    512         /* Swiping menu */
    513         .menu {
    514             margin-bottom: 20px;
    515             overflow-x: auto;
    516             white-space: nowrap;
    517             -webkit-overflow-scrolling: touch;
    518         }
    519 
    520         .menu ul {
    521             list-style: none;
    522             display: flex;
    523             padding: 0;
    524             gap: 10px;
    525         }
    526 
    527         .menu li {
    528             font-size: 1.2em;
    529             padding: 10px 15px;
    530             background: linear-gradient(135deg, #34495e, #2c3e50);
    531             color: #fff;
    532             cursor: pointer;
    533             border-radius: 8px;
    534             transition: transform 0.3s ease, background 0.3s ease;
    535         }
    536 
    537         .menu li:hover {
    538             background: linear-gradient(135deg, #1abc9c, #16a085);
    539             transform: scale(1.05);
    540         }
    541 
    542         /* Input section */
    543         .input-section {
    544             margin-bottom: 20px;
    545         }
    546 
    547         .input-section label {
    548             font-size: 1.1em;
    549             margin-bottom: 10px;
    550             display: block;
    551             color: #34495e;
    552         }
    553 
    554         .input-section input {
    555             width: 100%;
    556             padding: 12px;
    557             font-size: 1.2em;
    558             border: 1px solid #ccc;
    559             border-radius: 8px;
    560             margin-bottom: 20px;
    561             box-sizing: border-box;
    562             transition: box-shadow 0.3s ease;
    563         }
    564 
    565         .input-section input:focus {
    566             outline: none;
    567             border-color: #1abc9c;
    568             box-shadow: 0 4px 8px rgba(26, 188, 156, 0.4);
    569         }
    570 
    571         /* Buttons */
    572         .actions button {
    573             padding: 12px 20px;
    574             font-size: 1.2em;
    575             background: linear-gradient(135deg, #1abc9c, #16a085);
    576             color: white;
    577             border: none;
    578             border-radius: 8px;
    579             cursor: pointer;
    580             transition: background 0.3s ease, transform 0.2s ease;
    581         }
    582 
    583         .actions button:hover {
    584             background: linear-gradient(135deg, #16a085, #1abc9c);
    585             transform: scale(1.05);
    586         }
    587         .support button {
    588             padding: 12px 20px;
    589             font-size: 1.2em;
    590             background: linear-gradient(135deg, #1abc9c, #16a100);
    591             color: white;
    592             border: none;
    593             border-radius: 8px;
    594             cursor: pointer;
    595             transition: background 0.3s ease, transform 0.2s ease;
    596         }
    597 
    598         .support button:hover {
    599             background: linear-gradient(135deg, #16a100, #1abc9c);
    600             transform: scale(1.05);
    601         }
    602 
    603         /* Output sections */
    604         .output {
    605             margin-top: 30px;
    606             text-align: left;
    607         }
    608 
    609         .output h3 {
    610             font-size: 1.3em;
    611             color: #34495e;
    612             margin-bottom: 10px;
    613         }
    614 
    615         #stepsOutput {
    616             background: #ecf0f1;
    617             padding: 15px;
    618             border-radius: 8px;
    619             font-family: 'Courier New', Courier, monospace;
    620             color: #7f8c8d;
    621             white-space: pre-wrap;
    622             word-wrap: break-word;
    623             overflow-x: auto;
    624             box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    625             margin-bottom: 20px;
    626         }
    627 
    628         #resultOutput {
    629             font-size: 1.4em;
    630             font-weight: bold;
    631             color: #34495e;
    632             background: #f9fafb;
    633             padding: 15px;
    634             border-radius: 8px;
    635             border: 1px solid #ddd;
    636             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    637         }
    638         #otp-modal {
    639           display: none;
    640           position: fixed;
    641           top: 0;
    642           left: 0;
    643           width: 100%;
    644           height: 100%;
    645           background: rgba(0, 0, 0, 0.7);
    646           z-index: 1000;
    647         }
    648         #otp-modal div {
    649           margin: 10% auto;
    650           padding: 20px;
    651           background: white;
    652           width: 80%;
    653           max-width: 400px;
    654           text-align: center;
    655           border-radius: 8px;
    656         }
    657 
    658     &lt;/style&gt;
    659 &lt;/head&gt;
    660 &lt;body&gt;
    661     &lt;!-- Popup --&gt;
    662     &lt;div class="popup-overlay" id="paymentPopup"&gt;
    663         &lt;div class="popup-box"&gt;
    664             &lt;h2&gt;Support Us&lt;/h2&gt;
    665             &lt;p&gt;This app is free to use.
    666             Consider supporting us to help improve and maintain it.&lt;/p&gt;
    667             &lt;button id="payNowButton"&gt;Pay Now&lt;/button&gt;
    668             &lt;button id="loginButton"&gt;Continue Without Paying&lt;/button&gt;
    669         	&lt;button id="closePopup"&gt;Logged in&lt;/button&gt;
    670         &lt;/div&gt;
    671     &lt;/div&gt;
    672 
    673     &lt;div class="container"&gt;
    674         &lt;h1 class="logo"&gt;&lt;u&gt;Number Conversion Tool&lt;/u&gt;&lt;/h1&gt;
    675 
    676         &lt;div class="menu"&gt;
    677             &lt;ul id="conversionList"&gt;
    678                 &lt;li data-type="binary-to-decimal"&gt;Binary to Decimal&lt;/li&gt;
    679                 &lt;li data-type="decimal-to-binary"&gt;Decimal to Binary&lt;/li&gt;
    680                 &lt;li data-type="binary-to-octal"&gt;Binary to Octal&lt;/li&gt;
    681                 &lt;li data-type="octal-to-binary"&gt;Octal to Binary&lt;/li&gt;
    682                 &lt;li data-type="binary-to-hex"&gt;Binary to Hex&lt;/li&gt;
    683                 &lt;li data-type="hex-to-binary"&gt;Hex to Binary&lt;/li&gt;
    684                 &lt;li data-type="decimal-to-octal"&gt;Decimal to Octal&lt;/li&gt;
    685                 &lt;li data-type="octal-to-decimal"&gt;Octal to Decimal&lt;/li&gt;
    686                 &lt;li data-type="decimal-to-hex"&gt;Decimal to Hex&lt;/li&gt;
    687                 &lt;li data-type="hex-to-decimal"&gt;Hex to Decimal&lt;/li&gt;
    688                 &lt;li data-type="octal-to-hex"&gt;Octal to Hex&lt;/li&gt;
    689                 &lt;li data-type="hex-to-octal"&gt;Hex to Octal&lt;/li&gt;
    690             &lt;/ul&gt;
    691         &lt;/div&gt;
    692 
    693         &lt;div class="input-section"&gt;
    694             &lt;label for="inputNumber"&gt;Enter Number:&lt;/label&gt;
    695             &lt;input type="text" id="inputNumber" placeholder="Enter number"&gt;
    696         &lt;/div&gt;
    697 
    698         &lt;div class="actions"&gt;
    699             &lt;button id="convertButton"&gt;Convert&lt;/button&gt;
    700         &lt;/div&gt;
    701 
    702         &lt;div class="output"&gt;
    703             &lt;h3&gt;Steps:&lt;/h3&gt;
    704             &lt;pre id="stepsOutput"&gt;&lt;/pre&gt;
    705             &lt;h3&gt;Result:&lt;/h3&gt;
    706             &lt;p id="resultOutput"&gt;&lt;/p&gt;
    707         &lt;/div&gt;
    708     &lt;/div&gt;
    709 &lt;br&gt;&lt;div class="container" align="center"&gt;
    710             &lt;p&gt;&lt;u&gt;Made by Amit Dutta, NBCBHS (HS : 2024-25)&lt;/u&gt;&lt;/p&gt;&lt;br&gt;
    711 	&lt;div class="support"&gt;
    712           &lt;button id="payNowButton"&gt;Support&lt;/button&gt;
    713           &lt;span style="margin: 0 5px;"&gt;&nbsp;&lt;/span&gt;
    714           &lt;a href="https://forms.gle/Y2AWZhQFNVvApxq67"&gt;&lt;button&gt;Give Feedback&lt;/button&gt;&lt;/a&gt;
    715         &lt;/div&gt;
    716 &lt;/div&gt;
    717 
    718     &lt;script&gt;
    719         // Razorpay payment link
    720         const razorpayLink = "https://rzp.io/rzp/MffwgmY";
    721     	const loginurl="https://script.google.com/macros/s/--- secret code is hidden ---/exec";
    722 
    723         // Get popup elements
    724         const paymentPopup = document.getElementById("paymentPopup");
    725         const payNowButton = document.getElementById("payNowButton");
    726         const closePopup = document.getElementById("closePopup");
    727     	const loginButton = document.getElementById("loginButton");
    728 
    729         // Redirect to Razorpay payment link
    730         payNowButton.addEventListener("click", () => {
    731             window.open(razorpayLink, "_blank");
    732         });
    733 
    734         // Close the popup
    735         closePopup.addEventListener("click", () => {
    736             paymentPopup.style.display = "none";
    737         });
    738     	loginButton.addEventListener("click", () => {
    739     	    window.open(loginurl, "_blank");
    740     	});
    741 
    742         // Show popup on page load
    743         window.onload = () => {
    744             paymentPopup.style.display = "flex";
    745         };
    746     &lt;/script&gt;
    747     &lt;script&gt;
    748 
    749     document.addEventListener('DOMContentLoaded', () => {
    750         const conversionList = document.getElementById('conversionList');
    751         const convertButton = document.getElementById('convertButton');
    752         const inputNumber = document.getElementById('inputNumber');
    753         const stepsOutput = document.getElementById('stepsOutput');
    754         const resultOutput = document.getElementById('resultOutput');
    755 
    756         let selectedConversion = 'binary-to-decimal';
    757 
    758         conversionList.addEventListener('click', (event) => {
    759             if (event.target.tagName === 'LI') {
    760                 selectedConversion = event.target.dataset.type;
    761                 clearOutput();
    762             }
    763         });
    764 
    765         convertButton.addEventListener('click', () => {
    766             const number = inputNumber.value.trim();
    767             if (!number) {
    768                 alert('Please enter a number!');
    769                 return;
    770             }
    771             performConversion(number, selectedConversion);
    772         });
    773 
    774         function performConversion(number, conversionType) {
    775             stepsOutput.textContent = '';
    776             resultOutput.textContent = '';
    777 
    778             try {
    779                 let result, steps;
    780                 switch (conversionType) {
    781                     case 'binary-to-decimal':
    782                         ({ result, steps } = binaryToDecimal(number));
    783                         break;
    784                     case 'decimal-to-binary':
    785                         ({ result, steps } = decimalToBinary(number));
    786                         break;
    787                     case 'binary-to-octal':
    788                         ({ result, steps } = binaryToOctal(number));
    789                         break;
    790                     case 'octal-to-binary':
    791                         ({ result, steps } = octalToBinary(number));
    792                         break;
    793                     case 'binary-to-hex':
    794                         ({ result, steps } = binaryToHex(number));
    795                         break;
    796                     case 'hex-to-binary':
    797                         ({ result, steps } = hexToBinary(number));
    798                         break;
    799                     case 'decimal-to-octal':
    800                         ({ result, steps } = decimalToOctal(number));
    801                         break;
    802                     case 'octal-to-decimal':
    803                         ({ result, steps } = octalToDecimal(number));
    804                         break;
    805                     case 'decimal-to-hex':
    806                         ({ result, steps } = decimalToHex(number));
    807                         break;
    808                     case 'hex-to-decimal':
    809                         ({ result, steps } = hexToDecimal(number));
    810                         break;
    811                     case 'octal-to-hex':
    812                         ({ result, steps } = octalToHex(number));
    813                         break;
    814                     case 'hex-to-octal':
    815                         ({ result, steps } = hexToOctal(number));
    816                         break;
    817                     default:
    818                         throw new Error('Conversion type not supported.');
    819                 }
    820 
    821                 stepsOutput.textContent = steps;
    822                 resultOutput.textContent = `Result: ${result}`;
    823             } catch (error) {
    824                 alert(error.message);
    825             }
    826         });
    827 
    828         // Utility Functions
    829         function binaryToDecimal(binary) {
    830             const [integerPart, fractionalPart] = binary.split('.');
    831             let result = 0;
    832             let steps = [];
    833 
    834             if (integerPart) {
    835                 integerPart.split('').reverse().forEach((digit, index) => {
    836                     const value = parseInt(digit, 10) * Math.pow(2, index);
    837                     steps.push(`${digit} * 2^${index} = ${value}`);
    838                     result += value;
    839                 });
    840             }
    841 
    842             if (fractionalPart) {
    843                 fractionalPart.split('').forEach((digit, index) => {
    844                     const value = parseInt(digit, 10) * Math.pow(2, -(index + 1));
    845                     steps.push(`${digit} * 2^-${index + 1} = ${value}`);
    846                     result += value;
    847                 });
    848             }
    849 
    850             return { result: result.toString(), steps: steps.join('\n') };
    851         }
    852 
    853         function decimalToBinary(decimal) {
    854             const [integerPart, fractionalPart] = decimal.split('.');
    855             let integerResult = '';
    856             let steps = [];
    857             let num = parseInt(integerPart, 10);
    858 
    859             while (num > 0) {
    860                 const remainder = num % 2;
    861                 integerResult = remainder + integerResult;
    862                 steps.push(`${num} / 2 = ${Math.floor(num / 2)}, remainder ${remainder}`);
    863                 num = Math.floor(num / 2);
    864             }
    865 
    866             let fractionalResult = '';
    867             if (fractionalPart) {
    868                 let fracPart = parseFloat('0.' + fractionalPart);
    869                 for (let i = 0; i < 4 && fracPart !== 0; i++) {
    870                     fracPart *= 2;
    871                     const bit = Math.floor(fracPart);
    872                     fractionalResult += bit.toString();
    873                     fracPart -= bit;
    874                     steps.push(`0.${fracPart.toFixed(4)} * 2 -> ${bit}`);
    875                 }
    876             }
    877 
    878             return { result: integerResult + (fractionalResult ? '.' + fractionalResult : ''), steps: steps.join('\n') };
    879         }
    880 
    881         function binaryToOctal(binary) {
    882             const decimal = binaryToDecimal(binary).result;
    883             return decimalToOctal(decimal);
    884         }
    885 
    886         function octalToBinary(octal) {
    887             const decimal = octalToDecimal(octal).result;
    888             return decimalToBinary(decimal);
    889         }
    890 
    891         function binaryToHex(binary) {
    892             const decimal = binaryToDecimal(binary).result;
    893             return decimalToHex(decimal);
    894         }
    895 
    896         function hexToBinary(hex) {
    897             const decimal = hexToDecimal(hex).result;
    898             return decimalToBinary(decimal);
    899         }
    900 
    901         function decimalToOctal(decimal) {
    902             const [integerPart, fractionalPart] = decimal.split('.');
    903             let integerResult = '';
    904             let steps = [];
    905             let num = parseInt(integerPart, 10);
    906 
    907             while (num > 0) {
    908                 const remainder = num % 8;
    909                 integerResult = remainder + integerResult;
    910                 steps.push(`${num} / 8 = ${Math.floor(num / 8)}, remainder ${remainder}`);
    911                 num = Math.floor(num / 8);
    912             }
    913 
    914             let fractionalResult = '';
    915             if (fractionalPart) {
    916                 let fracPart = parseFloat('0.' + fractionalPart);
    917                 for (let i = 0; i < 4 && fracPart !== 0; i++) {
    918                     fracPart *= 8;
    919                     const digit = Math.floor(fracPart);
    920                     fractionalResult += digit.toString();
    921                     fracPart -= digit;
    922                     steps.push(`0.${fracPart.toFixed(4)} * 8 -> ${digit}`);
    923                 }
    924             }
    925 
    926             return { result: integerResult + (fractionalResult ? '.' + fractionalResult : ''), steps: steps.join('\n') };
    927         }
    928 
    929         function octalToDecimal(octal) {
    930             const [integerPart, fractionalPart] = octal.split('.');
    931             let result = 0;
    932             let steps = [];
    933 
    934             if (integerPart) {
    935                 integerPart.split('').reverse().forEach((digit, index) => {
    936                     const value = parseInt(digit, 10) * Math.pow(8, index);
    937                     steps.push(`${digit} * 8^${index} = ${value}`);
    938                     result += value;
    939                 });
    940             }
    941 
    942             if (fractionalPart) {
    943                 fractionalPart.split('').forEach((digit, index) => {
    944                     const value = parseInt(digit, 10) * Math.pow(8, -(index + 1));
    945                     steps.push(`${digit} * 8^-${index + 1} = ${value}`);
    946                     result += value;
    947                 });
    948             }
    949 
    950             return { result: result.toString(), steps: steps.join('\n') };
    951         }
    952 
    953         function decimalToHex(decimal) {
    954             const [integerPart, fractionalPart] = decimal.split('.');
    955             let integerResult = '';
    956             let steps = [];
    957             let num = parseInt(integerPart, 10);
    958 
    959             while (num > 0) {
    960                 const remainder = num % 16;
    961                 const hexChar = remainder < 10 ? remainder : String.fromCharCode(remainder + 87);
    962                 integerResult = hexChar + integerResult;
    963                 steps.push(`${num} / 16 = ${Math.floor(num / 16)}, remainder ${hexChar}`);
    964                 num = Math.floor(num / 16);
    965             }
    966 
    967             let fractionalResult = '';
    968             if (fractionalPart) {
    969                 let fracPart = parseFloat('0.' + fractionalPart);
    970                 for (let i = 0; i < 4 && fracPart !== 0; i++) {
    971                     fracPart *= 16;
    972                     const digit = Math.floor(fracPart);
    973                     const hexChar = digit < 10 ? digit : String.fromCharCode(digit + 87);
    974                     fractionalResult += hexChar;
    975                     fracPart -= digit;
    976                     steps.push(`0.${fracPart.toFixed(4)} * 16 -> ${hexChar}`);
    977                 }
    978             }
    979 
    980             return { result: integerResult + (fractionalResult ? '.' + fractionalResult : ''), steps: steps.join('\n') };
    981         }
    982 
    983         function hexToDecimal(hex) {
    984             const [integerPart, fractionalPart] = hex.split('.');
    985             let result = 0;
    986             let steps = [];
    987 
    988             if (integerPart) {
    989                 integerPart.split('').reverse().forEach((digit, index) => {
    990                     const value = parseInt(digit, 16) * Math.pow(16, index);
    991                     steps.push(`${digit} * 16^${index} = ${value}`);
    992                     result += value;
    993                 });
    994             }
    995 
    996             if (fractionalPart) {
    997                 fractionalPart.split('').forEach((digit, index) => {
    998                     const value = parseInt(digit, 16) * Math.pow(16, -(index + 1));
    999                     steps.push(`${digit} * 16^-${index + 1} = ${value}`);
   1000                     result += value;
   1001                 });
   1002             }
   1003 
   1004             return { result: result.toString(), steps: steps.join('\n') };
   1005         }
   1006 
   1007         function octalToHex(octal) {
   1008             const decimal = octalToDecimal(octal).result;
   1009             return decimalToHex(decimal);
   1010         }
   1011 
   1012         function hexToOctal(hex) {
   1013             const decimal = hexToDecimal(hex).result;
   1014             return decimalToOctal(decimal);
   1015         }
   1016 
   1017         function clearOutput() {
   1018             stepsOutput.textContent = '';
   1019             resultOutput.textContent = '';
   1020             inputNumber.value = '';
   1021         }
   1022     });
   1023 
   1024     </script>
   1025 </body>
   1026 </html>
   1027 </pre>
   1028         </div>
   1029 
   1030         <div id="download-tab-content" class="tab-content">
   1031             <div class="download-item">
   1032                 <h3>NCT_App_Source_Code.txt</h3>
   1033                 <p>Full source code of the Number Conversion Tool web application.</p>
   1034                 <button class="download-button" data-file="/download/nct_app_source_code.txt">Download</button>
   1035             </div>
   1036             <div class="download-item">
   1037                 <h3>NCT App</h3>
   1038                 <p>Download the app here.</p>
   1039                 <button class="download-button" data-file="https://github.com/notamitgamer/app/releases/download/app/nct.apk">Download</button>
   1040             </div>
   1041         </div>
   1042     </div>
   1043 <script>
   1044     document.addEventListener('DOMContentLoaded', () => {
   1045         const tabButtons = document.querySelectorAll('.tab-button');
   1046         const tabContents = document.querySelectorAll('.tab-content');
   1047         const downloadButtons = document.querySelectorAll('.download-button');
   1048 
   1049         // Function to switch tabs
   1050         function switchTab(selectedTab) {
   1051             tabButtons.forEach(button => {
   1052                 button.classList.remove('active');
   1053             });
   1054             tabContents.forEach(content => {
   1055                 content.classList.remove('active');
   1056             });
   1057 
   1058             document.querySelector(`.tab-button[data-tab="${selectedTab}"]`).classList.add('active');
   1059             document.getElementById(`${selectedTab}-tab-content`).classList.add('active');
   1060         }
   1061 
   1062         // Event listeners for tab buttons
   1063         tabButtons.forEach(button => {
   1064             button.addEventListener('click', () => {
   1065                 const tab = button.dataset.tab;
   1066                 switchTab(tab);
   1067             });
   1068         });
   1069 
   1070         // Event listeners for download buttons
   1071         downloadButtons.forEach(button => {
   1072             button.addEventListener('click', () => {
   1073                 const fileUrl = button.dataset.file;
   1074 
   1075                 if (fileUrl) {
   1076                     const a = document.createElement('a');
   1077                     a.href = fileUrl;
   1078                     a.download = fileUrl.split('/').pop(); // Optional: force filename
   1079                     document.body.appendChild(a);
   1080                     a.click();
   1081                     document.body.removeChild(a);
   1082                 }
   1083 
   1084                 // UI feedback
   1085                 button.textContent = 'Thank You!';
   1086                 button.classList.add('thank-you');
   1087                 button.disabled = true;
   1088 
   1089                 setTimeout(() => {
   1090                     button.textContent = 'Download';
   1091                     button.classList.remove('thank-you');
   1092                     button.disabled = false;
   1093                 }, 3000);
   1094             });
   1095         });
   1096     });
   1097 </script>
   1098 
   1099 </body>
   1100 </html>
	NCT A modern, Material You-inspire...
	Log \| Files \| Refs \| Activity \| README \| LICENSE