Changes to wordwise1.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+
+

WordWise

+

Revolutionize Your Vocabulary Learning

+
+ Explore Features
+ Try Demo
+
+
+
+
+
+
+

Key Features

+
+
+
📚
+

Smart Word Cards

+

Interactive 3D cards with auto-pronunciation and bilingual display.

+
+
+
👥
+

Multi-player Mode

+

Learn with friends, track progress, and enjoy fair rotation.

+
+
+
📊
+

Detailed Analytics

+

Track your learning progress and performance metrics.

+
+
+
+
+
+
+
+

Interactive Demo

+
+
+
+

Serendipity

+

noun

+
+
+

The occurrence of events by chance in a happy or beneficial way.

+
+
+
+
+
+
+
+
+
+
+
+
+

WordWise - Your partner in language mastery

+
+ Features
+ Demo
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://wordwise.scroll.pub
+ metaTags
+ editButton /edit.html
+ title WordWise - Modern Word Learning System
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "fdf77b9b-b1b5-4cd5-894b-5afe1946748e",
+ "object": "chat.completion",
+ "created": 1735384880,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nwordwise.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://wordwise.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WordWise - Modern Word Learning System\nstyle.css\nbody.html\nscript.js\n---body.html---\n
\n
\n

WordWise

\n

Revolutionize Your Vocabulary Learning

\n
\n Explore Features\n Try Demo\n
\n
\n
\n\n
\n
\n

Key Features

\n
\n
\n
📚
\n

Smart Word Cards

\n

Interactive 3D cards with auto-pronunciation and bilingual display.

\n
\n
\n
👥
\n

Multi-player Mode

\n

Learn with friends, track progress, and enjoy fair rotation.

\n
\n
\n
📊
\n

Detailed Analytics

\n

Track your learning progress and performance metrics.

\n
\n
\n
\n
\n\n
\n
\n

Interactive Demo

\n
\n
\n
\n

Serendipity

\n

noun

\n
\n
\n

The occurrence of events by chance in a happy or beneficial way.

\n
\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n

WordWise - Your partner in language mastery

\n \n
\n
\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --card-bg: #ffffff;\n --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 4rem 0;\n text-align: center;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.tagline {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.cta-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\n.btn {\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n text-decoration: none;\n font-weight: 500;\n transition: all 0.3s ease;\n}\n\n.btn.primary {\n background: white;\n color: var(--primary-color);\n}\n\n.btn.secondary {\n background: transparent;\n border: 2px solid white;\n color: white;\n}\n\n.btn:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow);\n}\n\n.features-section {\n padding: 4rem 0;\n}\n\n.features-section h2 {\n text-align: center;\n margin-bottom: 2rem;\n font-size: 2rem;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.feature-card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: var(--shadow);\n text-align: center;\n}\n\n.feature-card .icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.demo-section {\n padding: 4rem 0;\n background: var(--card-bg);\n}\n\n.demo-section h2 {\n text-align: center;\n margin-bottom: 2rem;\n font-size: 2rem;\n}\n\n.demo-container {\n max-width: 600px;\n margin: 0 auto;\n text-align: center;\n}\n\n.word-card {\n position: relative;\n width: 100%;\n height: 300px;\n perspective: 1000px;\n margin-bottom: 2rem;\n}\n\n.card-front, .card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n border-radius: 1rem;\n padding: 2rem;\n background: white;\n box-shadow: var(--shadow);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: transform 0.6s ease;\n}\n\n.card-back {\n transform: rotateY(180deg);\n}\n\n.word-card.flipped .card-front {\n transform: rotateY(180deg);\n}\n\n.word-card.flipped .card-back {\n transform: rotateY(0deg);\n}\n\nfooter {\n background: var(--text-color);\n color: white;\n padding: 2rem 0;\n text-align: center;\n}\n\nfooter nav {\n margin-top: 1rem;\n}\n\nfooter nav a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n}\n\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2rem;\n }\n \n .tagline {\n font-size: 1.25rem;\n }\n \n .cta-buttons {\n flex-direction: column;\n align-items: center;\n }\n \n .btn {\n width: 100%;\n max-width: 300px;\n margin-bottom: 1rem;\n }\n}\n---script.js---\nfunction flipCard() {\n const card = document.querySelector('.word-card');\n card.classList.toggle('flipped');\n}\n\nfunction nextCard() {\n const card = document.querySelector('.word-card');\n if (card.classList.contains('flipped')) {\n card.classList.remove('flipped');\n }\n // Here you would typically fetch and display a new word\n // For now, we'll just toggle the content\n const front = card.querySelector('.card-front h3');\n const back = card.querySelector('.card-back p');\n const words = [\n { word: \"Ephemeral\", definition: \"Lasting for a very short time\" },\n { word: \"Quintessential\", definition: \"Representing the most perfect or typical example of a quality or class\" },\n { word: \"Serendipity\", definition: \"The occurrence of events by chance in a happy or beneficial way\" }\n ];\n const randomWord = words[Math.floor(Math.random() * words.length)];\n front.textContent = randomWord.word;\n back.textContent = randomWord.definition;\n}\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 391,
+ "completion_tokens": 1812,
+ "total_tokens": 2203,
+ "prompt_cache_hit_tokens": 384,
+ "prompt_cache_miss_tokens": 7
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # wordwise1.scroll.pub
+ Website generated by DeepSeek from prompt: A modern word learning and practice system designed to enhance vocabulary and language learning efficiency. ### Features - 📚 Smart Word Card System - 3D interactive effects - Auto-pronunciation feature - Bilingual display toggle - 👥 Multi-player Learning Mode - Supports multiple students simultaneously - Real-time progress tracking - Fair rotation mechanism - 📊 Statistics and Analysis - Learning progress tracking - Accuracy statistics - Personal performance analysis - 👨‍🏫 Admin Features - Learning data export - System parameter configuration - User management ### Tech Stack - **Frontend** - Vue3 - TypeScript - Vite5 - Pinia - UnoCSS - **Backend** - Supabase
script.js
Changed around line 1
+ function flipCard() {
+ const card = document.querySelector('.word-card');
+ card.classList.toggle('flipped');
+ }
+
+ function nextCard() {
+ const card = document.querySelector('.word-card');
+ if (card.classList.contains('flipped')) {
+ card.classList.remove('flipped');
+ }
+ // Here you would typically fetch and display a new word
+ // For now, we'll just toggle the content
+ const front = card.querySelector('.card-front h3');
+ const back = card.querySelector('.card-back p');
+ const words = [
+ { word: "Ephemeral", definition: "Lasting for a very short time" },
+ { word: "Quintessential", definition: "Representing the most perfect or typical example of a quality or class" },
+ { word: "Serendipity", definition: "The occurrence of events by chance in a happy or beneficial way" }
+ ];
+ const randomWord = words[Math.floor(Math.random() * words.length)];
+ front.textContent = randomWord.word;
+ back.textContent = randomWord.definition;
+ }
style.css
Changed around line 1
+ :root {
+ --primary-color: #2563eb;
+ --secondary-color: #1e40af;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --card-bg: #ffffff;
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 4rem 0;
+ text-align: center;
+ }
+
+ .hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ }
+
+ .tagline {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ }
+
+ .cta-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ }
+
+ .btn {
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ text-decoration: none;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ }
+
+ .btn.primary {
+ background: white;
+ color: var(--primary-color);
+ }
+
+ .btn.secondary {
+ background: transparent;
+ border: 2px solid white;
+ color: white;
+ }
+
+ .btn:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow);
+ }
+
+ .features-section {
+ padding: 4rem 0;
+ }
+
+ .features-section h2 {
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ }
+
+ .feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ }
+
+ .feature-card {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: var(--shadow);
+ text-align: center;
+ }
+
+ .feature-card .icon {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+ }
+
+ .demo-section {
+ padding: 4rem 0;
+ background: var(--card-bg);
+ }
+
+ .demo-section h2 {
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ }
+
+ .demo-container {
+ max-width: 600px;
+ margin: 0 auto;
+ text-align: center;
+ }
+
+ .word-card {
+ position: relative;
+ width: 100%;
+ height: 300px;
+ perspective: 1000px;
+ margin-bottom: 2rem;
+ }
+
+ .card-front, .card-back {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ border-radius: 1rem;
+ padding: 2rem;
+ background: white;
+ box-shadow: var(--shadow);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ transition: transform 0.6s ease;
+ }
+
+ .card-back {
+ transform: rotateY(180deg);
+ }
+
+ .word-card.flipped .card-front {
+ transform: rotateY(180deg);
+ }
+
+ .word-card.flipped .card-back {
+ transform: rotateY(0deg);
+ }
+
+ footer {
+ background: var(--text-color);
+ color: white;
+ padding: 2rem 0;
+ text-align: center;
+ }
+
+ footer nav {
+ margin-top: 1rem;
+ }
+
+ footer nav a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+ }
+
+ @media (max-width: 768px) {
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .tagline {
+ font-size: 1.25rem;
+ }
+
+ .cta-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .btn {
+ width: 100%;
+ max-width: 300px;
+ margin-bottom: 1rem;
+ }
+ }