Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SocialScale | Professional FB Marketing Solutions</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- Load Transformers.js from CDN --> | |
| <script type="module"> | |
| import { env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0'; | |
| // Configure environment for local testing if needed, though default is usually fine | |
| env.allowLocalModels = false; | |
| </script> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="logo">SocialScale<span class="dot">.</span></div> | |
| <nav> | |
| <a href="#services">Services</a> | |
| <a href="#ai-tool">AI Generator</a> | |
| <a href="#contact">Contact</a> | |
| </nav> | |
| <div class="attribution"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <h1>Amplify Your Brand on Facebook</h1> | |
| <p>Professional marketing projects and high-converting ad campaigns tailored for your business.</p> | |
| <a href="#contact" class="btn primary">Start Your Project</a> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="services"> | |
| <div class="container"> | |
| <h2>Our Expertise</h2> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>🎯 Targeted Ads</h3> | |
| <p>Precision targeting strategies to reach your ideal customers on Facebook & Instagram.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>📈 Analytics & ROI</h3> | |
| <p>Data-driven optimization to maximize your return on investment.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>🎨 Creative Design</h3> | |
| <p>Scroll-stopping visuals and copy that converts viewers into buyers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Tool Section --> | |
| <section id="ai-tool" class="ai-tool"> | |
| <div class="container"> | |
| <div class="tool-header"> | |
| <h2>✨ AI Marketing Copy Generator</h2> | |
| <p>Instantly generate viral Facebook ad copy using our local AI model.</p> | |
| </div> | |
| <div class="tool-interface"> | |
| <div class="input-group"> | |
| <label for="product">Product / Service Name</label> | |
| <input type="text" id="product" placeholder="e.g., Organic Coffee Beans"> | |
| <label for="audience">Target Audience</label> | |
| <input type="text" id="audience" placeholder="e.g., Busy moms looking for healthy energy"> | |
| <label for="feature">Key Feature</label> | |
| <input type="text" id="feature" placeholder="e.g., 100% Arabica, fair trade"> | |
| </div> | |
| <button id="generate-btn" class="btn primary">Generate Copy</button> | |
| <button id="stop-btn" class="btn secondary" style="display:none;">Stop</button> | |
| <div class="status-bar"> | |
| <span id="status-text">Ready</span> | |
| <div id="progress-bar" class="progress"></div> | |
| </div> | |
| <div class="output-area"> | |
| <h3>Generated Ad Copy:</h3> | |
| <div id="output" class="output-content"> | |
| <!-- AI Output will appear here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="contact"> | |
| <div class="container"> | |
| <h2>Ready to Scale?</h2> | |
| <p>Let's discuss your next marketing project.</p> | |
| <form class="contact-form"> | |
| <input type="email" placeholder="Your Email" required> | |
| <button type="submit" class="btn primary">Get a Quote</button> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <p>© 2024 SocialScale Marketing. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script type="module" src="index.js"></script> | |
| </body> |