Spaces:

doomsday6
/

freebie-web-toolkit

Running

App Files Files Community

doomsday6 commited on Oct 4, 2025

Commit

8ba2d5d

verified ·

1 Parent(s): 8745ed1

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Website Builders & Coding Tools</title>
<style>
:root {
--primary: #4361ee;
--secondary: #3a0ca3;
--accent: #f72585;
--light: #f8f9fa;
--dark: #212529;
--success: #4cc9f0;
--bg-color: #f5f7ff;
--text-color: #212529;
--card-bg: white;
--header-bg: linear-gradient(135deg, #4361ee, #3a0ca3);
}

[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f8f9fa;
--card-bg: #2d2d2d;
--header-bg: linear-gradient(135deg, #2d1b69, #1a0d3a);
--light: #2d2d2d;
--dark: #f8f9fa;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transition: background-color 0.3s, color 0.3s;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
min-height: 100vh;
}

.browser-warning {
background: #ff6b6b;
color: white;
padding: 1rem;
text-align: center;
font-weight: bold;
border-bottom: 3px solid #e63946;
}

.controls {
background: var(--card-bg);
padding: 1rem;
border-radius: 10px;
margin: 1rem 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}

.search-box {
flex: 1;
min-width: 200px;
padding: 0.75rem;
border: 2px solid #e9ecef;
border-radius: 5px;
font-size: 1rem;
background: var(--card-bg);
color: var(--text-color);
}

.search-box:focus {
outline: none;
border-color: var(--primary);
}

.filter-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.filter-btn {
padding: 0.5rem 1rem;
border: 2px solid var(--primary);
background: transparent;
color: var(--primary);
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
}

.filter-btn.active, .filter-btn:hover {
background: var(--primary);
color: white;
}

.theme-toggle {
background: var(--accent);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}

header {
background: var(--header-bg);
color: white;
padding: 2rem 0;
text-align: center;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 2rem 0;
}

h1, h2, h3 {
margin-bottom: 1rem;
}

h1 {
font-size: 2.5rem;
}

h2 {
color: var(--secondary);
border-bottom: 2px solid var(--accent);
padding-bottom: 0.5rem;
margin-top: 2rem;
}

.instructions {
background: var(--card-bg);
border-left: 4px solid var(--success);
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 0 8px 8px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.instructions ol {
margin-left: 1.5rem;
}

.instructions li {
margin-bottom: 0.5rem;
}

.intro {
background: var(--card-bg);
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.card {
background: var(--card-bg);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 1;
transform: scale(1);
}

.card.hidden {
display: none;
}

.card.filtered-out {
opacity: 0.3;
transform: scale(0.95);
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
background: var(--primary);
color: white;
padding: 1.5rem;
}

.card-body {
padding: 1.5rem;
}

.card-footer {
background: var(--light);
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
}

.btn {
display: inline-block;
background: var(--accent);
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: opacity 0.3s;
border: none;
cursor: pointer;
}

.btn:hover {
opacity: 0.9;
}

.tag {
background: #e9ecef;
padding: 0.3rem 0.7rem;
border-radius: 20px;
font-size: 0.8rem;
color: var(--dark);
}

.feature-list {
list-style: none;
margin: 1rem 0;
}

.feature-list li {
padding: 0.5rem 0;
border-bottom: 1px solid #eee;
}

.feature-list li:before {
content: "✓ ";
color: var(--success);
font-weight: bold;
}

.no-results {
text-align: center;
padding: 2rem;
color: #666;
display: none;
}

footer {
background: var(--dark);
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
}

.hosting-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin: 2rem 0;
}

.hosting-card {
background: var(--card-bg);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
}

@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}

h1 {
font-size: 2rem;
}

.controls {
flex-direction: column;
align-items: stretch;
}

.filter-buttons {
justify-content: center;
}
}
</style>
</head>
<body>
<div class="browser-warning">
⚠️ Double-click didn't work? <strong>Right-click this file</strong> → "Open with" → Choose your browser
</div>

<header>
<div class="container">
<h1>Free Tools for Building Websites & Code</h1>
<p>Powerful, free alternatives to premium website builders and coding assistants</p>
</div>
</header>

<div class="container">
<div class="controls">
<input type="text" class="search-box" placeholder="Search tools... (try 'free' or 'developer')" id="searchInput">
<div class="filter-buttons">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="website">Website Builders</button>
<button class="filter-btn" data-filter="code">Code Tools</button>
<button class="filter-btn" data-filter="beginner">Beginner Friendly</button>
</div>
<button class="theme-toggle" id="themeToggle">
<span>🌙 Dark Mode</span>
</button>
</div>

<section class="instructions">
<h2>How to Open This File Correctly</h2>
<ol>
<li><strong>Right-click</strong> the HTML file on your computer</li>
<li>Select <strong>"Open with"</strong></li>
<li>Choose your web browser (Chrome, Firefox, Edge, Safari)</li>
<li>Alternatively, <strong>drag the file</strong> into an open browser tab</li>
</ol>
</section>

<section class="intro">
<h2>Build Websites Without Coding Experience</h2>
<p>These free website builders offer drag-and-drop interfaces, templates, and hosting to get your site online quickly without needing to write code.</p>
</section>

<h2>Free Website Builders</h2>
<div class="card-grid" id="toolsGrid">

</div>

<div class="no-results" id="noResults">
<h3>No tools found matching your search</h3>
<p>Try adjusting your search terms or filters</p>
</div>

<section class="instructions">
<h2>🚀 How to Host This Website

Files changed (2) hide show

README.md +8 -5
index.html +342 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Freebie Web Toolkit
-emoji: 😻
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Freebie Web Toolkit 🛠️
+colorFrom: gray
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,343 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Website Builders & Coding Tools</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛠️</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4361ee',
+                        secondary: '#3a0ca3',
+                        accent: '#f72585',
+                        success: '#4cc9f0',
+                        dark: '#1a1a1a',
+                        light: '#f8f9fa'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f5f7ff;
+        }
+        [data-theme="dark"] {
+            background-color: #1a1a1a;
+            color: #f8f9fa;
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .filter-active {
+            background-color: #4361ee;
+            color: white;
+        }
+        .theme-transition * {
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #4361ee, #3a0ca3);
+        }
+        [data-theme="dark"] .gradient-bg {
+            background: linear-gradient(135deg, #2d1b69, #1a0d3a);
+        }
+        .tag {
+            transition: all 0.2s ease;
+        }
+        .search-box:focus {
+            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3);
+        }
+    </style>
+</head>
+<body class="theme-transition bg-gray-50" data-theme="light">
+    <div class="bg-red-500 text-white p-4 text-center font-bold hidden md:block">
+        ⚠️ Double-click didn't work? <strong>Right-click this file</strong> → "Open with" → Choose your browser
+    </div>
+    <header class="gradient-bg text-white py-12">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">Free Tools for Building Websites & Code</h1>
+            <p class="text-xl max-w-2xl mx-auto">Powerful, free alternatives to premium website builders and coding assistants</p>
+        </div>
+    </header>
+    <div class="container mx-auto px-4 py-8">
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8 flex flex-col md:flex-row gap-4 items-center">
+            <div class="flex-grow w-full">
+                <input
+                    type="text"
+                    id="searchInput"
+                    class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white search-box"
+                    placeholder="Search tools... (try 'free' or 'developer')"
+                >
+            </div>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <button class="filter-btn px-4 py-2 border-2 border-primary rounded-full text-primary filter-active" data-filter="all">All</button>
+                <button class="filter-btn px-4 py-2 border-2 border-primary rounded-full text-primary" data-filter="website">Website Builders</button>
+                <button class="filter-btn px-4 py-2 border-2 border-primary rounded-full text-primary" data-filter="code">Code Tools</button>
+                <button class="filter-btn px-4 py-2 border-2 border-primary rounded-full text-primary" data-filter="beginner">Beginner Friendly</button>
+            </div>
+            <button id="themeToggle" class="bg-accent text-white px-4 py-2 rounded-lg flex items-center gap-2">
+                <i data-feather="moon"></i>
+                <span>Dark Mode</span>
+            </button>
+        </div>
+        <section class="bg-green-50 dark:bg-green-900/20 border-l-4 border-success p-6 rounded-r-lg mb-10">
+            <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">How to Open This File Correctly</h2>
+            <ol class="list-decimal pl-5 space-y-2 text-gray-700 dark:text-gray-200">
+                <li><strong>Right-click</strong> the HTML file on your computer</li>
+                <li>Select <strong>"Open with"</strong></li>
+                <li>Choose your web browser (Chrome, Firefox, Edge, Safari)</li>
+                <li>Alternatively, <strong>drag the file</strong> into an open browser tab</li>
+            </ol>
+        </section>
+        <section class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-8 mb-12">
+            <h2 class="text-3xl font-bold mb-4 text-secondary dark:text-primary">Build Websites Without Coding Experience</h2>
+            <p class="text-lg text-gray-600 dark:text-gray-300">These free website builders offer drag-and-drop interfaces, templates, and hosting to get your site online quickly without needing to write code.</p>
+        </section>
+        <h2 class="text-3xl font-bold mb-6 text-secondary dark:text-primary">Free Website Builders</h2>
+        <div id="toolsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Cards will be populated by JavaScript -->
+        </div>
+        <div id="noResults" class="hidden text-center py-12">
+            <h3 class="text-2xl font-bold mb-2">No tools found matching your search</h3>
+            <p class="text-gray-600 dark:text-gray-400">Try adjusting your search terms or filters</p>
+        </div>
+        <section class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-8 mt-12">
+            <h2 class="text-3xl font-bold mb-6 text-secondary dark:text-primary">🚀 How to Host This Website Online (FREE)</h2>
+            <p class="text-lg mb-8 text-gray-600 dark:text-gray-300">Want to share this with others? Here are free hosting options:</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg text-center shadow-sm">
+                    <h3 class="text-xl font-bold mb-2">GitHub Pages</h3>
+                    <p class="mb-4 text-gray-600 dark:text-gray-300">Perfect for developers</p>
+                    <a href="https://pages.github.com/" target="_blank" class="inline-block bg-accent text-white px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition">Deploy</a>
+                </div>
+                <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg text-center shadow-sm">
+                    <h3 class="text-xl font-bold mb-2">Netlify</h3>
+                    <p class="mb-4 text-gray-600 dark:text-gray-300">Drag & drop deployment</p>
+                    <a href="https://netlify.com/" target="_blank" class="inline-block bg-accent text-white px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition">Deploy</a>
+                </div>
+                <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg text-center shadow-sm">
+                    <h3 class="text-xl font-bold mb-2">Vercel</h3>
+                    <p class="mb-4 text-gray-600 dark:text-gray-300">Great for web apps</p>
+                    <a href="https://vercel.com/" target="_blank" class="inline-block bg-accent text-white px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition">Deploy</a>
+                </div>
+            </div>
+        </section>
+    </div>
+    <footer class="bg-dark text-white py-12 mt-16">
+        <div class="container mx-auto px-4 text-center">
+            <p class="mb-2">This resource page showcases free alternatives to premium website builders and coding tools.</p>
+            <p>All mentioned tools have free tiers available.</p>
+        </div>
+    </footer>
+    <script>
+        // Tool data
+        const tools = [
+            {
+                name: "Wix",
+                category: "website",
+                tags: ["beginner", "drag-drop"],
+                description: "Drag-and-drop website builder with hundreds of templates. Great for beginners and small businesses.",
+                features: ["500MB storage & bandwidth", "Wix ads displayed", "Mobile-optimized", "100s of templates"],
+                link: "https://www.wix.com/",
+                tag: "Beginner Friendly"
+            },
+            {
+                name: "WordPress.com",
+                category: "website",
+                tags: ["beginner", "blogging"],
+                description: "The popular blogging platform that powers over 40% of all websites. Extensive plugin ecosystem.",
+                features: ["3GB storage", "Free subdomain", "Basic customization", "Blogging focused"],
+                link: "https://wordpress.com/",
+                tag: "Blogging"
+            },
+            {
+                name: "GitHub Pages",
+                category: "website",
+                tags: ["developer", "hosting"],
+                description: "Host static websites directly from your GitHub repository. Perfect for portfolios and project pages.",
+                features: ["Free hosting", "Custom domain support", "Jekyll integration", "Developer friendly"],
+                link: "https://pages.github.com/",
+                tag: "Developers"
+            },
+            {
+                name: "CodePen",
+                category: "code",
+                tags: ["developer", "frontend"],
+                description: "Online community for testing and showcasing HTML, CSS, and JavaScript code snippets.",
+                features: ["Full code editor", "Public 'pens'", "Frontend focus", "Community sharing"],
+                link: "https://codepen.io/",
+                tag: "Frontend"
+            },
+            {
+                name: "Replit",
+                category: "code",
+                tags: ["developer", "multi-language"],
+                description: "Browser-based IDE that supports over 50 programming languages. Collaborate in real-time.",
+                features: ["Public projects", "Basic compute power", "Multiplayer editing", "50+ languages"],
+                link: "https://replit.com/",
+                tag: "Multi-language"
+            },
+            {
+                name: "VS Code Online",
+                category: "code",
+                tags: ["developer", "ide"],
+                description: "The full Visual Studio Code experience running in your browser. No installation required.",
+                features: ["Full editor experience", "Extensions support", "Git integration", "Terminal access"],
+                link: "https://vscode.dev/",
+                tag: "Full IDE"
+            },
+            {
+                name: "Netlify",
+                category: "website",
+                tags: ["developer", "hosting"],
+                description: "Deploy modern web projects with continuous deployment from Git. Perfect for JAMstack sites.",
+                features: ["100GB bandwidth", "Auto deployments", "HTTPS included", "Form handling"],
+                link: "https://netlify.com/",
+                tag: "Hosting"
+            },
+            {
+                name: "Glitch",
+                category: "code",
+                tags: ["beginner", "developer"],
+                description: "Friendly community where you'll build the app of your dreams with help from others.",
+                features: ["Full stack apps", "Instant hosting", "Remix projects", "Community support"],
+                link: "https://glitch.com/",
+                tag: "Full Stack"
+            }
+        ];
+        // DOM Elements
+        const toolsGrid = document.getElementById('toolsGrid');
+        const searchInput = document.getElementById('searchInput');
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        const themeToggle = document.getElementById('themeToggle');
+        const noResults = document.getElementById('noResults');
+        // Initialize
+        function init() {
+            renderTools(tools);
+            setupEventListeners();
+            loadTheme();
+            feather.replace();
+        }
+        // Render tools to grid
+        function renderTools(toolsToRender) {
+            toolsGrid.innerHTML = '';
+            if (toolsToRender.length === 0) {
+                noResults.classList.remove('hidden');
+                return;
+            }
+            noResults.classList.add('hidden');
+            toolsToRender.forEach(tool => {
+                const card = document.createElement('div');
+                card.className = 'bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden card-hover';
+                card.dataset.category = tool.category;
+                card.dataset.tags = tool.tags.join(' ');
+                card.innerHTML = `
+                    <div class="bg-primary p-6">
+                        <h3 class="text-xl font-bold text-white">${tool.name}</h3>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-600 dark:text-gray-300 mb-4">${tool.description}</p>
+                        <ul class="space-y-2 mb-6">
+                            ${tool.features.map(feature => `<li class="flex items-start"><i data-feather="check-circle" class="text-success mr-2 mt-1 flex-shrink-0"></i><span>${feature}</span></li>`).join('')}
+                        </ul>
+                    </div>
+                    <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 flex justify-between items-center">
+                        <span class="bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm tag">${tool.tag}</span>
+                        <a href="${tool.link}" target="_blank" class="bg-accent text-white px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition">Visit</a>
+                    </div>
+                `;
+                toolsGrid.appendChild(card);
+            });
+            feather.replace();
+        }
+        // Filter and search tools
+        function filterTools() {
+            const searchTerm = searchInput.value.toLowerCase();
+            const activeFilter = document.querySelector('.filter-btn.filter-active').dataset.filter;
+            const filteredTools = tools.filter(tool => {
+                const matchesSearch = tool.name.toLowerCase().includes(searchTerm) ||
+                                    tool.description.toLowerCase().includes(searchTerm) ||
+                                    tool.tags.some(tag => tag.includes(searchTerm));
+                const matchesFilter = activeFilter === 'all' ||
+                                   (activeFilter === 'website' && tool.category === 'website') ||
+                                   (activeFilter === 'code' && tool.category === 'code') ||
+                                   (activeFilter === 'beginner' && tool.tags.includes('beginner'));
+                return matchesSearch && matchesFilter;
+            });
+            renderTools(filteredTools);
+        }
+        // Theme functionality
+        function toggleTheme() {
+            const isDark = document.body.getAttribute('data-theme') === 'dark';
+            document.body.setAttribute('data-theme', isDark ? 'light' : 'dark');
+            themeToggle.innerHTML = isDark ?
+                '<i data-feather="sun"></i><span>Light Mode</span>' :
+                '<i data-feather="moon"></i><span>Dark Mode</span>';
+            feather.replace();
+            localStorage.setItem('theme', isDark ? 'light' : 'dark');
+        }
+        function loadTheme() {
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.body.setAttribute('data-theme', savedTheme);
+            themeToggle.innerHTML = savedTheme === 'dark' ?
+                '<i data-feather="sun"></i><span>Light Mode</span>' :
+                '<i data-feather="moon"></i><span>Dark Mode</span>';
+        }
+        // Event listeners
+        function setupEventListeners() {
+            searchInput.addEventListener('input', filterTools);
+            filterButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    filterButtons.forEach(btn => btn.classList.remove('filter-active'));
+                    button.classList.add('filter-active');
+                    filterTools();
+                });
+            });
+            themeToggle.addEventListener('click', toggleTheme);
+        }
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+</body>
 </html>