Replicates Mathful search interface with AI capabilities
目前為
// ==UserScript==
// @name Mathful Interface Clone
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Replicates Mathful search interface with AI capabilities
// @author PrimeMinisteModiji1111111111
// @match https://*.mathful.com/*
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
// Add required styles
const styles = `
.mathful-container {
min-height: 100vh;
background-color: #F4F9FA;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.mathful-header {
position: sticky;
top: 0;
z-index: 10;
width: 100%;
background-color: white;
box-shadow: 0 2px 8px 0 rgba(28,39,49,0.1);
}
.mathful-header-content {
max-width: 1632px;
margin: 0 auto;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
}
.mathful-logo {
height: 24px;
width: 122px;
background-size: contain;
background-repeat: no-repeat;
}
.mathful-search-container {
display: flex;
align-items: center;
width: 740px;
}
.mathful-search-form {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 40px;
background: white;
border: 1px solid #E5E7EB;
border-radius: 9999px;
padding: 8px 75px 8px 16px;
}
.mathful-search-input {
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 14px;
}
.mathful-search-input::placeholder {
font-size: 16px;
font-weight: normal;
}
.shadow-card3 {
position: absolute;
left: 0;
top: calc(100% + 8px);
z-index: 100;
width: 100%;
transform-origin: top;
transform: scaleY(0);
border-radius: 18px;
background: white;
padding: 0.75rem;
text-align: left;
transition: all 0.3s ease-in-out;
opacity: 0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.upload-wrapper {
display: flex;
height: 254px;
align-items: center;
justify-content: center;
padding: 0;
}
.upload-drag {
width: 100%;
height: 100%;
border: 2px dashed #E5E7EB;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.upload-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px;
}
.upload-icon {
height: 64px;
width: 64px;
background-color: #F3F4F6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.shortcut-key {
display: inline-block;
border: 1px solid #94A2AE;
border-opacity: 0.3;
padding: 0 2px;
border-radius: 4px;
}
.nav-links {
display: flex;
gap: 24px;
align-items: center;
}
.nav-link {
color: #12000873;
text-decoration: none;
font-weight: 500;
}
.nav-link:hover {
color: #12957D;
}
.calculator-icon {
position: absolute;
right: 50px;
z-index: 3;
height: 24px;
width: 24px;
cursor: pointer;
color: rgba(18, 0, 8, 0.45);
}
.calculator-icon:hover {
color: #12957D;
}
.submit-button {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #E5E7EB;
padding-left: 12px;
background: none;
border: none;
cursor: pointer;
color: rgba(18, 0, 8, 0.5);
}
.submit-button:hover {
color: #12957D;
}
`;
GM_addStyle(styles);
// Create and inject the main interface
function createInterface() {
const container = document.createElement('div');
container.className = 'mathful-container';
container.innerHTML = `
<header class="mathful-header">
<div class="mathful-header-content">
<a href="/" class="mathful-logo"></a>
<div class="mathful-search-container">
<form class="mathful-search-form">
<input type="text"
class="mathful-search-input"
placeholder="Type or upload your question"
required />
<div class="shadow-card3">
<div class="upload-wrapper">
<div class="upload-drag">
<div class="upload-container">
<div class="upload-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<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"/>
<path d="M7 10l5-5 5 5M12 15V5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p>Drag image here or click to upload</p>
<div>
Or press <span class="shortcut-key">Ctrl</span> +
<span class="shortcut-key">V</span> to paste
</div>
</div>
</div>
</div>
</div>
<div class="calculator-icon">
<svg viewBox="0 0 24 24" width="24" height="24">
<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"/>
</svg>
</div>
<button type="submit" class="submit-button">
<svg viewBox="0 0 24 24" width="20" height="20">
<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"/>
</svg>
</button>
</form>
</div>
<nav class="nav-links">
<a href="/photomath" class="nav-link">Photomath</a>
<a href="/mathgpt" class="nav-link">MathGPT</a>
<a href="/hub" class="nav-link">Resources</a>
<a href="/pricing" class="nav-link">Pricing</a>
<a href="/login" class="nav-link">Login</a>
</nav>
</div>
</header>
<main>
<div id="mathful-content"></div>
</main>
`;
document.body.innerHTML = '';
document.body.appendChild(container);
}
// Initialize drag and drop functionality
function initializeUpload() {
const dropZone = document.querySelector('.upload-drag');
const searchInput = document.querySelector('.mathful-search-input');
searchInput.addEventListener('focus', () => {
const uploadZone = document.querySelector('.shadow-card3');
uploadZone.style.transform = 'scaleY(1)';
uploadZone.style.opacity = '1';
});
document.addEventListener('click', (e) => {
if (!e.target.closest('.mathful-search-form')) {
const uploadZone = document.querySelector('.shadow-card3');
uploadZone.style.transform = 'scaleY(0)';
uploadZone.style.opacity = '0';
}
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.style.borderColor = '#12957D';
});
dropZone.addEventListener('dragleave', (e) => {
e.preventDefault();
dropZone.style.borderColor = '#E5E7EB';
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
if (files.length > 0) {
handleFileUpload(files[0]);
}
});
document.addEventListener('paste', (e) => {
const items = e.clipboardData.items;
for (let item of items) {
if (item.type.indexOf('image') !== -1) {
const file = item.getAsFile();
handleFileUpload(file);
break;
}
}
});
}
// Handle file upload
function handleFileUpload(file) {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
console.log('Image uploaded:', e.target.result);
// TODO: Implement image processing and math recognition
};
reader.readAsDataURL(file);
}
}
// Initialize search functionality
function initializeSearch() {
const searchForm = document.querySelector('.mathful-search-form');
const searchInput = document.querySelector('.mathful-search-input');
searchForm.addEventListener('submit', async (e) => {
e.preventDefault();
const query = searchInput.value.trim();
if (query) {
console.log('Search query:', query);
// TODO: Implement search API call
}
});
}
// Wait for page load then initialize
window.addEventListener('load', () => {
createInterface();
initializeSearch();
initializeUpload();
});
})();