Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akshay-gits
Akshay-gits committed Sep 1, 2024
0 parents commit 29d2104
Show file tree
Hide file tree
Showing 3 changed files with 390 additions and 0 deletions.
65 changes: 65 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sharecode</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Source+Code+Pro&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>sharecode</h1>
<h4>"sharing is caring"</h4>
<nav>
<ul>
<li><a href="#" id="homeTab">Home</a></li>
<li><a href="#" id="aboutTab">About</a></li>
</ul>
</nav>
<button id="themeToggle">🌙 Dark Mode</button>
</header>

<main>
<!-- Home Section -->
<section id="homeSection">
<form id="codeForm">
<textarea id="codeInput" placeholder="Paste your code here..."></textarea>
<div class="form-actions">
<button type="submit">Share Code</button>
<button type="button" id="clearButton">Clear All</button>
<button type="button" id="sqlFilterButton">SQL Filter</button>
</div>
</form>

<section id="sharedCodeSection" class="hidden">
<h2>Shared Code</h2>
<pre id="sharedCode" class="line-numbers"><code></code></pre>
<button id="copyButton">Copy Code</button>
</section>

<section id="sqlOutputSection" class="hidden">
<h2>SQL Queries</h2>
<pre id="sqlOutput" class="line-numbers"><code></code></pre>
</section>
</section>

<!-- About Section -->
<section id="aboutSection" class="hidden">
<h2>About the Developer</h2>
<p>Hello, I'm turbo_kuttappan, the developer of this platform. </p>
<p>Disclaimer: This website does not support any kind of udaip activities. This was purely meant for entertainment purpose💩. Copy adich pokkiyal i am not responsible.</p>
<p>Copy adi nirthu Thaniye cheyyu or else naatukaar will say:</p>
<p>"Ninak enthenkilum kazhiv ondoda...ninne naalu peru ariyuvoda na**i"</p>
</section>
</main>

<footer>
<p>&copy; 2024 Code Sharing Platform</p>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-javascript.min.js"></script>
<script src="script.js"></script>
</body>
</html>
118 changes: 118 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
document.addEventListener('DOMContentLoaded', () => {
const codeForm = document.getElementById('codeForm');
const codeInput = document.getElementById('codeInput');
const sharedCodeSection = document.getElementById('sharedCodeSection');
const sharedCode = document.getElementById('sharedCode').querySelector('code');
const copyButton = document.getElementById('copyButton');
const clearButton = document.getElementById('clearButton');
const themeToggle = document.getElementById('themeToggle');
const homeTab = document.getElementById('homeTab');
const aboutTab = document.getElementById('aboutTab');
const homeSection = document.getElementById('homeSection');
const aboutSection = document.getElementById('aboutSection');
const sqlFilterButton = document.getElementById('sqlFilterButton');
const sqlOutputSection = document.getElementById('sqlOutputSection');
const sqlOutput = document.getElementById('sqlOutput').querySelector('code');

const apiUrl = 'http://localhost:3000/api/shared-code'; // Update with your backend URL

// Load code from backend
fetch(apiUrl)
.then(response => response.json())
.then(data => {
if (data.code) {
sharedCode.textContent = data.code;
sharedCodeSection.classList.remove('hidden');
Prism.highlightAll();
}
})
.catch(err => console.error('Error loading shared code:', err));

// Load theme from localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.classList.add(savedTheme);
themeToggle.textContent = savedTheme === 'dark-mode' ? '🌞 Light Mode' : '🌙 Dark Mode';
}

// Theme toggle functionality
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
const isDarkMode = document.body.classList.contains('dark-mode');
themeToggle.textContent = isDarkMode ? '🌞 Light Mode' : '🌙 Dark Mode';
localStorage.setItem('theme', isDarkMode ? 'dark-mode' : '');
});

// Form submit functionality
codeForm.addEventListener('submit', (e) => {
e.preventDefault();
const code = codeInput.value.trim();
if (code) {
fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code })
})
.then(response => response.text())
.then(() => {
sharedCode.textContent = code;
sharedCodeSection.classList.remove('hidden');
Prism.highlightAll();
codeInput.value = '';
})
.catch(err => console.error('Error sharing code:', err));
}
});

// Copy code to clipboard
copyButton.addEventListener('click', () => {
const codeText = sharedCode.textContent;
navigator.clipboard.writeText(codeText).then(() => {
alert('Code copied to clipboard!');
});
});

// Clear shared code and SQL queries
clearButton.addEventListener('click', () => {
if (confirm('Are you sure you want to clear all shared code and SQL queries?')) {
fetch(apiUrl, { method: 'DELETE' })
.then(response => response.text())
.then(() => {
sharedCode.textContent = '';
sharedCodeSection.classList.add('hidden');
sqlOutput.textContent = '';
sqlOutputSection.classList.add('hidden');
})
.catch(err => console.error('Error clearing code:', err));
}
});

// SQL filter functionality
sqlFilterButton.addEventListener('click', () => {
const code = codeInput.value.trim();
let sqlQueries = '';

code.split('\n').forEach(line => {
if (line.startsWith('mysql>')) {
if (sqlQueries) {
sqlQueries += '\n'; // Add a new line before adding new SQL query
}
sqlQueries += line.substring(6).trim(); // Append the SQL query without 'mysql>'
}
});

sqlOutput.textContent = sqlQueries.trim();
sqlOutputSection.classList.remove('hidden');
});

// Tab switching functionality
homeTab.addEventListener('click', () => {
homeSection.classList.remove('hidden');
aboutSection.classList.add('hidden');
});

aboutTab.addEventListener('click', () => {
homeSection.classList.add('hidden');
aboutSection.classList.remove('hidden');
});
});
207 changes: 207 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
::selection {
color: black;
background: #bb86fc;
}
/* General Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Roboto', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 100vh;
}

/* Color Variables */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #6200ea;
--secondary-color: #3700b3;
--button-text-color: #ffffff;
--input-bg-color: #f5f5f5;
--code-bg-color: #f0f0f0;
}

body.dark-mode {
--bg-color: #1e1e1e;
--text-color: #ffffff;
--primary-color: #bb86fc;
--secondary-color: #3700b3;
--input-bg-color: #2d2d2d;
--code-bg-color: #2d2d2d;
}

header, footer {
text-align: center;
padding: 10px 0;
}

h1 {
font-size: 2rem;
margin-bottom: 10px;
}

/* Navigation Styles */
nav ul {
list-style: none;
display: flex;
justify-content: center;
margin-bottom: 20px;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: var(--primary-color);
font-weight: bold;
transition: color 0.3s;
}

nav ul li a:hover {
color: var(--secondary-color);
}

#themeToggle {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--primary-color);
transition: color 0.3s;
}

main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}

#homeSection, #aboutSection {
width: 100%;
max-width: 800px;
margin-bottom: 20px;
}

#codeForm {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}

#codeInput {
width: 100%;
min-height: 150px;
padding: 15px;
font-size: 1rem;
font-family: 'Source Code Pro', monospace;
background-color: var(--input-bg-color);
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
margin-bottom: 10px;
color: var(--text-color);
}

.form-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}

button {
padding: 10px 20px;
font-size: 1rem;
font-weight: bold;
color: var(--button-text-color);
background-color: var(--primary-color);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
flex: 1;
min-width: 120px;
}

button:hover {
background-color: var(--secondary-color);
}

#sharedCodeSection, #sqlOutputSection {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
}

#sharedCode, #sqlOutput {
background-color: var(--code-bg-color);
padding: 15px;
border-radius: 5px;
overflow-x: auto;
max-height: 400px;
font-size: 0.9rem;
}

.hidden {
display: none;
}

/* Responsive Design */
@media (max-width: 600px) {
h1 {
font-size: 1.5rem;
}

nav ul {
flex-direction: column;
margin-bottom: 10px;
}

nav ul li {
margin: 10px 0;
}

#codeInput {
min-height: 120px;
}

button {
font-size: 0.9rem;
padding: 8px 16px;
}
}

footer {
margin-top: 20px;
font-size: 0.8rem;
color: #777777;
}

/* About Section */
#aboutSection {
width: 100%;
max-width: 800px;
margin-bottom: 20px;
padding: 20px;
line-height: 1.6;
}

#aboutSection p {
margin-bottom: 15px;
}

0 comments on commit 29d2104

Please sign in to comment.