Hugging Face's logo

Spaces:
HARISARAVANANM
/
Optimus
Running

App Files Community
HARISARAVANANM commited on
Commit
1f0c9e3
·
verified ·
1 Parent(s): 320cfac

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +66 -23
index.html CHANGED
@@ -3,43 +3,86 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Free AI Chatbot - No Keys Required</title>
7
  <link rel="stylesheet" href="style.css">
 
8
  </head>
9
  <body>
10
  <div class="container">
11
  <div class="header">
12
- <h1>🤖 Free AI Chatbot</h1>
13
- <p>No API Keys Required • 100% Free Models</p>
14
  </div>
15
 
16
- <div class="model-selector">
17
- <button class="model-btn active" data-model="mistral">Mistral</button>
18
- <button class="model-btn" data-model="zephyr">Zephyr</button>
19
- <button class="model-btn" data-model="neural">Neural Chat</button>
20
- <button class="model-btn" data-model="openchat">OpenChat</button>
21
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
 
23
- <div class="chat-container">
24
- <div class="chat-messages" id="chatMessages">
25
- <div class="message bot-message">
26
- <span>👋 Hi! I'm a free AI assistant. Choose a model and start chatting!</span>
27
  </div>
28
  </div>
29
  </div>
30
 
31
- <div class="input-area">
32
- <input
33
- type="text"
34
- id="userInput"
35
- placeholder="Type your message..."
36
- autocomplete="off"
37
- >
38
- <button id="sendBtn" class="send-btn">Send</button>
39
  </div>
40
 
41
- <div class="model-info" id="modelInfo">
42
- <small>Model: <strong id="selectedModel">Mistral 7B</strong> • Status: <span id="status">Ready</span></small>
43
  </div>
44
  </div>
45
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QR Code Generator</title>
7
  <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
9
  </head>
10
  <body>
11
  <div class="container">
12
  <div class="header">
13
+ <h1>📱 QR Code Generator</h1>
14
+ <p>Convert any text or URL into QR code</p>
15
  </div>
16
 
17
+ <div class="content">
18
+ <div class="input-section">
19
+ <label>Enter Text or URL:</label>
20
+ <textarea
21
+ id="inputText"
22
+ placeholder="Enter URL, text, email, or phone number..."
23
+ rows="4"
24
+ ></textarea>
25
+
26
+ <div class="button-group">
27
+ <button class="btn btn-primary" onclick="generateQR()">Generate QR Code</button>
28
+ <button class="btn btn-secondary" onclick="clearAll()">Clear</button>
29
+ </div>
30
+
31
+ <div class="options">
32
+ <div class="option-group">
33
+ <label>Size:</label>
34
+ <select id="sizeSelect">
35
+ <option value="150">Small (150x150)</option>
36
+ <option value="250" selected>Medium (250x250)</option>
37
+ <option value="350">Large (350x350)</option>
38
+ <option value="450">Extra Large (450x450)</option>
39
+ </select>
40
+ </div>
41
+
42
+ <div class="option-group">
43
+ <label>Error Correction:</label>
44
+ <select id="errorSelect">
45
+ <option value="L">Low (7%)</option>
46
+ <option value="M" selected>Medium (15%)</option>
47
+ <option value="Q">Quartile (25%)</option>
48
+ <option value="H">High (30%)</option>
49
+ </select>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <div class="output-section">
55
+ <div class="qr-preview">
56
+ <div id="qrcodeContainer"></div>
57
+ </div>
58
+
59
+ <div class="download-section">
60
+ <button class="btn btn-success" onclick="downloadQR('png')" id="downloadPNG" style="display:none;">
61
+ ⬇️ Download as PNG
62
+ </button>
63
+ <button class="btn btn-success" onclick="downloadQR('jpg')" id="downloadJPG" style="display:none;">
64
+ ⬇️ Download as JPG
65
+ </button>
66
+ </div>
67
 
68
+ <div class="info-section">
69
+ <p><strong>Text Length:</strong> <span id="textLength">0</span> characters</p>
70
+ <p><strong>QR Code Status:</strong> <span id="status">No QR generated yet</span></p>
 
71
  </div>
72
  </div>
73
  </div>
74
 
75
+ <div class="examples">
76
+ <h3>Quick Examples:</h3>
77
+ <button onclick="setExample('https://github.com')">GitHub Link</button>
78
+ <button onclick="setExample('mailto:hello@example.com')">Email</button>
79
+ <button onclick="setExample('tel:+1234567890')">Phone</button>
80
+ <button onclick="setExample('https://www.youtube.com')">YouTube</button>
81
+ <button onclick="setExample('Hello World!')">Text</button>
 
82
  </div>
83
 
84
+ <div class="footer">
85
+ <p>✅ 100% Free • No ads • Works offline • No data saved</p>
86
  </div>
87
  </div>
88