☰

Mathful Interface Clone

Replicates Mathful search interface with AI capabilities

目前為 2025-02-17 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Mathful Interface Clone
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Replicates Mathful search interface with AI capabilities
  6. // @author       PrimeMinisteModiji1111111111
  7. // @match        https://*.mathful.com/*
  8. // @grant        GM_addStyle
  9. // @grant        GM_xmlhttpRequest
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // ==/UserScript==
  13.  
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.  
  19.     // Add required styles
  20.     const styles = `
  21.         .mathful-container {
  22.             min-height: 100vh;
  23.             background-color: #F4F9FA;
  24.             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  25.         }
  26.  
  27.  
  28.         .mathful-header {
  29.             position: sticky;
  30.             top: 0;
  31.             z-index: 10;
  32.             width: 100%;
  33.             background-color: white;
  34.             box-shadow: 0 2px 8px 0 rgba(28,39,49,0.1);
  35.         }
  36.  
  37.  
  38.         .mathful-header-content {
  39.             max-width: 1632px;
  40.             margin: 0 auto;
  41.             height: 64px;
  42.             display: flex;
  43.             align-items: center;
  44.             justify-content: space-between;
  45.             padding: 0 1rem;
  46.         }
  47.  
  48.  
  49.         .mathful-logo {
  50.             height: 24px;
  51.             width: 122px;
  52.             background-size: contain;
  53.             background-repeat: no-repeat;
  54.         }
  55.  
  56.  
  57.         .mathful-search-container {
  58.             display: flex;
  59.             align-items: center;
  60.             width: 740px;
  61.         }
  62.  
  63.  
  64.         .mathful-search-form {
  65.             position: relative;
  66.             display: flex;
  67.             align-items: center;
  68.             width: 100%;
  69.             height: 40px;
  70.             background: white;
  71.             border: 1px solid #E5E7EB;
  72.             border-radius: 9999px;
  73.             padding: 8px 75px 8px 16px;
  74.         }
  75.  
  76.  
  77.         .mathful-search-input {
  78.             width: 100%;
  79.             height: 100%;
  80.             border: none;
  81.             outline: none;
  82.             font-size: 14px;
  83.         }
  84.  
  85.  
  86.         .mathful-search-input::placeholder {
  87.             font-size: 16px;
  88.             font-weight: normal;
  89.         }
  90.  
  91.  
  92.         .shadow-card3 {
  93.             position: absolute;
  94.             left: 0;
  95.             top: calc(100% + 8px);
  96.             z-index: 100;
  97.             width: 100%;
  98.             transform-origin: top;
  99.             transform: scaleY(0);
  100.             border-radius: 18px;
  101.             background: white;
  102.             padding: 0.75rem;
  103.             text-align: left;
  104.             transition: all 0.3s ease-in-out;
  105.             opacity: 0;
  106.             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  107.         }
  108.  
  109.  
  110.         .upload-wrapper {
  111.             display: flex;
  112.             height: 254px;
  113.             align-items: center;
  114.             justify-content: center;
  115.             padding: 0;
  116.         }
  117.  
  118.  
  119.         .upload-drag {
  120.             width: 100%;
  121.             height: 100%;
  122.             border: 2px dashed #E5E7EB;
  123.             border-radius: 16px;
  124.             display: flex;
  125.             align-items: center;
  126.             justify-content: center;
  127.             cursor: pointer;
  128.         }
  129.  
  130.  
  131.         .upload-container {
  132.             display: flex;
  133.             flex-direction: column;
  134.             align-items: center;
  135.             justify-content: center;
  136.             gap: 12px;
  137.             padding: 12px;
  138.         }
  139.  
  140.  
  141.         .upload-icon {
  142.             height: 64px;
  143.             width: 64px;
  144.             background-color: #F3F4F6;
  145.             border-radius: 50%;
  146.             display: flex;
  147.             align-items: center;
  148.             justify-content: center;
  149.         }
  150.  
  151.  
  152.         .shortcut-key {
  153.             display: inline-block;
  154.             border: 1px solid #94A2AE;
  155.             border-opacity: 0.3;
  156.             padding: 0 2px;
  157.             border-radius: 4px;
  158.         }
  159.  
  160.  
  161.         .nav-links {
  162.             display: flex;
  163.             gap: 24px;
  164.             align-items: center;
  165.         }
  166.  
  167.  
  168.         .nav-link {
  169.             color: #12000873;
  170.             text-decoration: none;
  171.             font-weight: 500;
  172.         }
  173.  
  174.  
  175.         .nav-link:hover {
  176.             color: #12957D;
  177.         }
  178.  
  179.  
  180.         .calculator-icon {
  181.             position: absolute;
  182.             right: 50px;
  183.             z-index: 3;
  184.             height: 24px;
  185.             width: 24px;
  186.             cursor: pointer;
  187.             color: rgba(18, 0, 8, 0.45);
  188.         }
  189.  
  190.  
  191.         .calculator-icon:hover {
  192.             color: #12957D;
  193.         }
  194.  
  195.  
  196.         .submit-button {
  197.             position: absolute;
  198.             right: 8px;
  199.             top: 50%;
  200.             transform: translateY(-50%);
  201.             z-index: 10;
  202.             display: flex;
  203.             align-items: center;
  204.             justify-content: center;
  205.             border-left: 1px solid #E5E7EB;
  206.             padding-left: 12px;
  207.             background: none;
  208.             border: none;
  209.             cursor: pointer;
  210.             color: rgba(18, 0, 8, 0.5);
  211.         }
  212.  
  213.  
  214.         .submit-button:hover {
  215.             color: #12957D;
  216.         }
  217.     `;
  218.  
  219.  
  220.     GM_addStyle(styles);
  221.  
  222.  
  223.     // Create and inject the main interface
  224.     function createInterface() {
  225.         const container = document.createElement('div');
  226.         container.className = 'mathful-container';
  227.         container.innerHTML = `
  228.             <header class="mathful-header">
  229.                 <div class="mathful-header-content">
  230.                     <a href="/" class="mathful-logo"></a>
  231.                     <div class="mathful-search-container">
  232.                         <form class="mathful-search-form">
  233.                             <input type="text" 
  234.                                    class="mathful-search-input" 
  235.                                    placeholder="Type or upload your question" 
  236.                                    required />
  237.                             <div class="shadow-card3">
  238.                                 <div class="upload-wrapper">
  239.                                     <div class="upload-drag">
  240.                                         <div class="upload-container">
  241.                                             <div class="upload-icon">
  242.                                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
  243.                                                     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  244.                                                     <path d="M7 10l5-5 5 5M12 15V5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  245.                                                 </svg>
  246.                                             </div>
  247.                                             <p>Drag image here or click to upload</p>
  248.                                             <div>
  249.                                                 Or press <span class="shortcut-key">Ctrl</span> + 
  250.                                                 <span class="shortcut-key">V</span> to paste
  251.                                             </div>
  252.                                         </div>
  253.                                     </div>
  254.                                 </div>
  255.                             </div>
  256.                             <div class="calculator-icon">
  257.                                 <svg viewBox="0 0 24 24" width="24" height="24">
  258.                                     <path fill="currentColor" d="M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v16h16V4H4zm2 2h12v4H6V6zm0 6h4v2H6v-2zm0 4h4v2H6v-2zm6-4h6v2h-6v-2zm0 4h6v2h-6v-2z"/>
  259.                                 </svg>
  260.                             </div>
  261.                             <button type="submit" class="submit-button">
  262.                                 <svg viewBox="0 0 24 24" width="20" height="20">
  263.                                     <path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
  264.                                 </svg>
  265.                             </button>
  266.                         </form>
  267.                     </div>
  268.                     <nav class="nav-links">
  269.                         <a href="/photomath" class="nav-link">Photomath</a>
  270.                         <a href="/mathgpt" class="nav-link">MathGPT</a>
  271.                         <a href="/hub" class="nav-link">Resources</a>
  272.                         <a href="/pricing" class="nav-link">Pricing</a>
  273.                         <a href="/login" class="nav-link">Login</a>
  274.                     </nav>
  275.                 </div>
  276.             </header>
  277.             <main>
  278.                 <div id="mathful-content"></div>
  279.             </main>
  280.         `;
  281.  
  282.  
  283.         document.body.innerHTML = '';
  284.         document.body.appendChild(container);
  285.     }
  286.  
  287.  
  288.     // Initialize drag and drop functionality
  289.     function initializeUpload() {
  290.         const dropZone = document.querySelector('.upload-drag');
  291.         const searchInput = document.querySelector('.mathful-search-input');
  292.  
  293.  
  294.         searchInput.addEventListener('focus', () => {
  295.             const uploadZone = document.querySelector('.shadow-card3');
  296.             uploadZone.style.transform = 'scaleY(1)';
  297.             uploadZone.style.opacity = '1';
  298.         });
  299.  
  300.  
  301.         document.addEventListener('click', (e) => {
  302.             if (!e.target.closest('.mathful-search-form')) {
  303.                 const uploadZone = document.querySelector('.shadow-card3');
  304.                 uploadZone.style.transform = 'scaleY(0)';
  305.                 uploadZone.style.opacity = '0';
  306.             }
  307.         });
  308.  
  309.  
  310.         dropZone.addEventListener('dragover', (e) => {
  311.             e.preventDefault();
  312.             dropZone.style.borderColor = '#12957D';
  313.         });
  314.  
  315.  
  316.         dropZone.addEventListener('dragleave', (e) => {
  317.             e.preventDefault();
  318.             dropZone.style.borderColor = '#E5E7EB';
  319.         });
  320.  
  321.  
  322.         dropZone.addEventListener('drop', (e) => {
  323.             e.preventDefault();
  324.             const files = e.dataTransfer.files;
  325.             if (files.length > 0) {
  326.                 handleFileUpload(files[0]);
  327.             }
  328.         });
  329.  
  330.  
  331.         document.addEventListener('paste', (e) => {
  332.             const items = e.clipboardData.items;
  333.             for (let item of items) {
  334.                 if (item.type.indexOf('image') !== -1) {
  335.                     const file = item.getAsFile();
  336.                     handleFileUpload(file);
  337.                     break;
  338.                 }
  339.             }
  340.         });
  341.     }
  342.  
  343.  
  344.     // Handle file upload
  345.     function handleFileUpload(file) {
  346.         if (file.type.startsWith('image/')) {
  347.             const reader = new FileReader();
  348.             reader.onload = (e) => {
  349.                 console.log('Image uploaded:', e.target.result);
  350.                 // TODO: Implement image processing and math recognition
  351.             };
  352.             reader.readAsDataURL(file);
  353.         }
  354.     }
  355.  
  356.  
  357.     // Initialize search functionality
  358.     function initializeSearch() {
  359.         const searchForm = document.querySelector('.mathful-search-form');
  360.         const searchInput = document.querySelector('.mathful-search-input');
  361.  
  362.  
  363.         searchForm.addEventListener('submit', async (e) => {
  364.             e.preventDefault();
  365.             const query = searchInput.value.trim();
  366.             if (query) {
  367.                 console.log('Search query:', query);
  368.                 // TODO: Implement search API call
  369.             }
  370.         });
  371.     }
  372.  
  373.  
  374.     // Wait for page load then initialize
  375.     window.addEventListener('load', () => {
  376.         createInterface();
  377.         initializeSearch();
  378.         initializeUpload();
  379.     });
  380.  
  381.  
  382. })();
  383.  
  384.  
  385.