Hugging Face's logo

Spaces:
Ayeeee45
/
iportal-express-editor
Running

App Files Community
Ayeeee45 commited on
Commit
d0f4bc4
·
verified ·
1 Parent(s): 801797c

Use this and create app to deploy on my ipad fffiloni/expression-editor

Browse files
Files changed (6) hide show
  1. README.md +8 -5
  2. components/navbar.js +42 -0
  3. expression-editor.html +102 -0
  4. index.html +82 -19
  5. script.js +52 -0
  6. style.css +26 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Iportal Express Editor
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: iPortal Express Editor 🚀
3
+ colorFrom: green
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/navbar.js ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
8
+ color: white;
9
+ padding: 1rem;
10
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
11
+ }
12
+ .nav-container {
13
+ display: flex;
14
+ justify-content: space-between;
15
+ align-items: center;
16
+ max-width: 1200px;
17
+ margin: 0 auto;
18
+ }
19
+ .logo {
20
+ font-size: 1.5rem;
21
+ font-weight: bold;
22
+ display: flex;
23
+ align-items: center;
24
+ }
25
+ .logo i {
26
+ margin-right: 0.5rem;
27
+ }
28
+ .nav-links {
29
+ display: flex;
30
+ gap: 1.5rem;
31
+ }
32
+ .nav-links a {
33
+ color: white;
34
+ text-decoration: none;
35
+ font-weight: 500;
36
+ display: flex;
37
+ align-items: center;
38
+ }
39
+ .nav-links a i {
40
+ margin-right: 0.3rem;
41
+ }
42
+ @media (max
expression-editor.html ADDED
@@ -0,0 +1,102 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="apple-mobile-web-app-capable" content="yes">
7
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
+ <title>Expression Editor | iPortal</title>
9
+ <link rel="stylesheet" href="style.css">
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <link rel="apple-touch-icon" href="/static/favicon.ico">
13
+ </head>
14
+ <body class="bg-gray-100 min-h-screen">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden p-6">
19
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
20
+ <i data-feather="edit-2" class="mr-3 text-indigo-500"></i> Expression Editor
21
+ </h2>
22
+
23
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
24
+ <div>
25
+ <div class="mb-4">
26
+ <label class="block text-gray-700 font-medium mb-2">Expression Input</label>
27
+ <textarea id="expression-input" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="8" placeholder="Enter your expression here..."></textarea>
28
+ </div>
29
+
30
+ <div class="flex gap-3">
31
+ <button id="evaluate-btn" class="btn-tap bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg flex items-center">
32
+ <i data-feather="play" class="mr-2"></i> Evaluate
33
+ </button>
34
+ <button id="clear-btn" class="btn-tap bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center">
35
+ <i data-feather="trash-2" class="mr-2"></i> Clear
36
+ </button>
37
+ </div>
38
+ </div>
39
+
40
+ <div>
41
+ <label class="block text-gray-700 font-medium mb-2">Result</label>
42
+ <div id="result-container" class="w-full p-3 border border-gray-300 rounded-lg bg-gray-50 min-h-[200px]">
43
+ <p class="text-gray-500">Results will appear here...</p>
44
+ </div>
45
+
46
+ <div class="mt-4">
47
+ <label class="block text-gray-700 font-medium mb-2">Variables</label>
48
+ <div id="variables-container" class="grid grid-cols-2 gap-3">
49
+ <input type="text" placeholder="Variable" class="p-2 border rounded">
50
+ <input type="text" placeholder="Value" class="p-2 border rounded">
51
+ </div>
52
+ <button id="add-variable-btn" class="btn-tap mt-2 bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded text-sm flex items-center">
53
+ <i data-feather="plus" class="mr-1 w-4 h-4"></i> Add Variable
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </main>
60
+
61
+ <custom-footer></custom-footer>
62
+
63
+ <script src="components/navbar.js"></script>
64
+ <script src="components/footer.js"></script>
65
+ <script src="script.js"></script>
66
+ <script>
67
+ feather.replace();
68
+
69
+ document.getElementById('evaluate-btn').addEventListener('click', function() {
70
+ const expression = document.getElementById('expression-input').value;
71
+ try {
72
+ const result = eval(expression);
73
+ document.getElementById('result-container').innerHTML = `
74
+ <p class="text-green-600 font-medium">Success!</p>
75
+ <p class="text-gray-800 mt-2">${expression} = ${result}</p>
76
+ `;
77
+ } catch (error) {
78
+ document.getElementById('result-container').innerHTML = `
79
+ <p class="text-red-600 font-medium">Error!</p>
80
+ <p class="text-gray-800 mt-2">${error.message}</p>
81
+ `;
82
+ }
83
+ });
84
+
85
+ document.getElementById('clear-btn').addEventListener('click', function() {
86
+ document.getElementById('expression-input').value = '';
87
+ document.getElementById('result-container').innerHTML = '<p class="text-gray-500">Results will appear here...</p>';
88
+ });
89
+
90
+ document.getElementById('add-variable-btn').addEventListener('click', function() {
91
+ const container = document.getElementById('variables-container');
92
+ const newVar = document.createElement('div');
93
+ newVar.className = 'col-span-2 grid grid-cols-2 gap-3';
94
+ newVar.innerHTML = `
95
+ <input type="text" placeholder="Variable" class="p-2 border rounded">
96
+ <input type="text" placeholder="Value" class="p-2 border rounded">
97
+ `;
98
+ container.appendChild(newVar);
99
+ });
100
+ </script>
101
+ </body>
102
+ </html>
index.html CHANGED
@@ -1,19 +1,82 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="apple-mobile-web-app-capable" content="yes">
7
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
+ <title>iPad Magic Portal</title>
9
+ <link rel="stylesheet" href="style.css">
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <link rel="apple-touch-icon" href="/static/favicon.ico">
14
+ </head>
15
+ <body class="bg-gray-100 min-h-screen">
16
+ <custom-navbar></custom-navbar>
17
+
18
+ <main class="container mx-auto px-4 py-8">
19
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
20
+ <!-- App Cards -->
21
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition hover:scale-105">
22
+ <div class="p-6">
23
+ <div class="flex items-center mb-4">
24
+ <i data-feather="compass" class="text-indigo-500 mr-3"></i>
25
+ <h3 class="text-xl font-bold text-gray-800">Explorer</h3>
26
+ </div>
27
+ <p class="text-gray-600 mb-4">Discover new places and hidden gems around you.</p>
28
+ <a href="#" class="text-indigo-500 font-medium hover:text-indigo-700">Launch →</a>
29
+ </div>
30
+ </div>
31
+
32
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition hover:scale-105">
33
+ <div class="p-6">
34
+ <div class="flex items-center mb-4">
35
+ <i data-feather="book" class="text-green-500 mr-3"></i>
36
+ <h3 class="text-xl font-bold text-gray-800">Reader</h3>
37
+ </div>
38
+ <p class="text-gray-600 mb-4">Your personal library in the palm of your hand.</p>
39
+ <a href="#" class="text-green-500 font-medium hover:text-green-700">Launch →</a>
40
+ </div>
41
+ </div>
42
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition hover:scale-105">
43
+ <div class="p-6">
44
+ <div class="flex items-center mb-4">
45
+ <i data-feather="music" class="text-purple-500 mr-3"></i>
46
+ <h3 class="text-xl font-bold text-gray-800">Melody</h3>
47
+ </div>
48
+ <p class="text-gray-600 mb-4">Stream your favorite tunes anywhere.</p>
49
+ <a href="#" class="text-purple-500 font-medium hover:text-purple-700">Launch →</a>
50
+ </div>
51
+ </div>
52
+
53
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition hover:scale-105">
54
+ <div class="p-6">
55
+ <div class="flex items-center mb-4">
56
+ <i data-feather="edit-2" class="text-blue-500 mr-3"></i>
57
+ <h3 class="text-xl font-bold text-gray-800">Expression Editor</h3>
58
+ </div>
59
+ <p class="text-gray-600 mb-4">Evaluate and test mathematical expressions.</p>
60
+ <a href="expression-editor.html" class="text-blue-500 font-medium hover:text-blue-700">Launch →</a>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </main>
65
+
66
+ <custom-footer></custom-footer>
67
+
68
+ <script src="components/navbar.js"></script>
69
+ <script src="components/footer.js"></script>
70
+ <script src="script.js"></script>
71
+ <script>
72
+ feather.replace();
73
+ // Add to home screen prompt
74
+ if (window.navigator.standalone) {
75
+ console.log('Running in fullscreen mode');
76
+ } else {
77
+ console.log('Not in fullscreen mode');
78
+ }
79
+ </script>
80
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
81
+ </body>
82
+ </html>
script.js ADDED
@@ -0,0 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // iPad specific enhancements
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Prevent zooming
4
+ document.addEventListener('gesturestart', function(e) {
5
+ e.preventDefault();
6
+ });
7
+ // Add touch feedback to all buttons
8
+ const buttons = document.querySelectorAll('a, button');
9
+ buttons.forEach(button => {
10
+ button.classList.add('btn-tap');
11
+ });
12
+
13
+ // Safe evaluation function for expression editor
14
+ function safeEval(expression, variables = {}) {
15
+ try {
16
+ // Create safe context
17
+ const safeContext = {
18
+ Math: Math,
19
+ Number: Number,
20
+ Date: Date,
21
+ Array: Array,
22
+ Object: Object,
23
+ String: String,
24
+ Boolean: Boolean,
25
+ RegExp: RegExp,
26
+ JSON: JSON,
27
+ console: console,
28
+ ...variables
29
+ };
30
+
31
+ // Return evaluated expression
32
+ return Function('"use strict";return (' + expression + ')').call(safeContext);
33
+ } catch (e) {
34
+ throw e;
35
+ }
36
+ }
37
+ // Handle orientation changes
38
+ window.addEventListener('orientationchange', function() {
39
+ console.log('Orientation changed to ' + window.orientation);
40
+ });
41
+ });
42
+
43
+ // Service Worker registration for PWA
44
+ if ('serviceWorker' in navigator) {
45
+ window.addEventListener('load', () => {
46
+ navigator.serviceWorker.register('/sw.js').then(registration => {
47
+ console.log('ServiceWorker registration successful');
48
+ }).catch(err => {
49
+ console.log('ServiceWorker registration failed: ', err);
50
+ });
51
+ });
52
+ }
style.css CHANGED
@@ -1,28 +1,36 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
1
+ /* Custom styles for iPad app */
2
  body {
3
+ -webkit-touch-callout: none;
4
+ -webkit-user-select: none;
5
+ -khtml-user-select: none;
6
+ -moz-user-select: none;
7
+ -ms-user-select: none;
8
+ user-select: none;
9
+ touch-action: manipulation;
10
  }
11
 
12
+ /* Custom scrollbar for iPad */
13
+ ::-webkit-scrollbar {
14
+ width: 8px;
15
+ height: 8px;
16
  }
17
 
18
+ ::-webkit-scrollbar-track {
19
+ background: #f1f1f1;
20
+ border-radius: 10px;
 
 
21
  }
22
 
23
+ ::-webkit-scrollbar-thumb {
24
+ background: #c1c1c1;
25
+ border-radius: 10px;
 
 
 
26
  }
27
 
28
+ ::-webkit-scrollbar-thumb:hover {
29
+ background: #a8a8a8;
30
  }
31
+
32
+ /* Button tap effect */
33
+ .btn-tap:active {
34
+ transform: scale(0.95);
35
+ transition: transform 0.1s;
36
+ }