commit 5a2f2e1d60565f50e543d1ac2d75e5a019c627c2
Author: root <root@hub.scroll.pub>
Date: 2024-12-30 13:13:17 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..5c0d3fe
--- /dev/null
+++ b/body.html
@@ -0,0 +1,119 @@
+<header>
+ <nav>
+ <div class="logo">ForexScalp</div>
+ <button class="menu-toggle" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#overview">Overview</a></li>
+ <li><a href="#strategy">Strategy</a></li>
+ <li><a href="#signals">Signals</a></li>
+ <li><a href="#technical">Technical</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="hero">
+ <h1>Forex Scalping Signal Algorithm</h1>
+ <p>Advanced automated trading signals for the Forex market</p>
+ </section>
+
+ <section id="overview">
+ <h2>Overview</h2>
+ <div class="card-container">
+ <div class="card">
+ <h3>Data Analysis</h3>
+ <p>34-hour historical data with 1-minute candles (M1)</p>
+ </div>
+ <div class="card">
+ <h3>Real-time Updates</h3>
+ <p>Live ask/bid prices and candle closures</p>
+ </div>
+ <div class="card">
+ <h3>Autonomous Operation</h3>
+ <p>Self-sufficient signal generation system</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="strategy">
+ <h2>Trading Strategy</h2>
+ <div class="strategy-grid">
+ <div class="indicator">
+ <h3>Moving Averages</h3>
+ <ul>
+ <li>5-period short-term MA</li>
+ <li>15-period medium-term MA</li>
+ </ul>
+ </div>
+ <div class="indicator">
+ <h3>RSI</h3>
+ <div class="meter">
+ <div class="overbought">70+</div>
+ <div class="neutral">30-70</div>
+ <div class="oversold">30-</div>
+ </div>
+ </div>
+ <div class="indicator">
+ <h3>MACD</h3>
+ <div id="macd-visual" class="chart-placeholder"></div>
+ </div>
+ </div>
+ </section>
+
+ <section id="signals">
+ <h2>Signal Generation</h2>
+ <div class="signals-container">
+ <div class="signal-box buy">
+ <h3>Buy Signals</h3>
+ <ul>
+ <li>MA5 crosses MA15 upward</li>
+ <li>RSI below 30</li>
+ <li>MACD bullish crossover</li>
+ </ul>
+ </div>
+ <div class="signal-box sell">
+ <h3>Sell Signals</h3>
+ <ul>
+ <li>MA5 crosses MA15 downward</li>
+ <li>RSI above 70</li>
+ <li>MACD bearish crossover</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <section id="technical">
+ <h2>Technical Implementation</h2>
+ <div class="tech-features">
+ <div class="feature">
+ <h3>Real-time Processing</h3>
+ <div class="progress-bar">
+ <div class="progress"></div>
+ </div>
+ </div>
+ <div class="feature">
+ <h3>Risk Management</h3>
+ <div class="risk-meter"></div>
+ </div>
+ <div class="feature">
+ <h3>Performance Monitoring</h3>
+ <div id="performance-chart" class="chart-placeholder"></div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>ForexScalp</h4>
+ <p>Advanced Forex trading signals</p>
+ </div>
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <p>support@forexscalp.scroll.pub</p>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..90f3168
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://forexscalp.scroll.pub
+metaTags
+editButton /edit.html
+title Forex Scalping Signal Algorithm
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..1477f08
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_013kNGE4hvCN5tREWSRBVLd7",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me suggest a domain and create the website files.\n\n---domain---\nforexscalp.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://forexscalp.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Forex Scalping Signal Algorithm\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">ForexScalp</div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#overview\">Overview</a></li>\n <li><a href=\"#strategy\">Strategy</a></li>\n <li><a href=\"#signals\">Signals</a></li>\n <li><a href=\"#technical\">Technical</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>Forex Scalping Signal Algorithm</h1>\n <p>Advanced automated trading signals for the Forex market</p>\n </section>\n\n <section id=\"overview\">\n <h2>Overview</h2>\n <div class=\"card-container\">\n <div class=\"card\">\n <h3>Data Analysis</h3>\n <p>34-hour historical data with 1-minute candles (M1)</p>\n </div>\n <div class=\"card\">\n <h3>Real-time Updates</h3>\n <p>Live ask/bid prices and candle closures</p>\n </div>\n <div class=\"card\">\n <h3>Autonomous Operation</h3>\n <p>Self-sufficient signal generation system</p>\n </div>\n </div>\n </section>\n\n <section id=\"strategy\">\n <h2>Trading Strategy</h2>\n <div class=\"strategy-grid\">\n <div class=\"indicator\">\n <h3>Moving Averages</h3>\n <ul>\n <li>5-period short-term MA</li>\n <li>15-period medium-term MA</li>\n </ul>\n </div>\n <div class=\"indicator\">\n <h3>RSI</h3>\n <div class=\"meter\">\n <div class=\"overbought\">70+</div>\n <div class=\"neutral\">30-70</div>\n <div class=\"oversold\">30-</div>\n </div>\n </div>\n <div class=\"indicator\">\n <h3>MACD</h3>\n <div id=\"macd-visual\" class=\"chart-placeholder\"></div>\n </div>\n </div>\n </section>\n\n <section id=\"signals\">\n <h2>Signal Generation</h2>\n <div class=\"signals-container\">\n <div class=\"signal-box buy\">\n <h3>Buy Signals</h3>\n <ul>\n <li>MA5 crosses MA15 upward</li>\n <li>RSI below 30</li>\n <li>MACD bullish crossover</li>\n </ul>\n </div>\n <div class=\"signal-box sell\">\n <h3>Sell Signals</h3>\n <ul>\n <li>MA5 crosses MA15 downward</li>\n <li>RSI above 70</li>\n <li>MACD bearish crossover</li>\n </ul>\n </div>\n </div>\n </section>\n\n <section id=\"technical\">\n <h2>Technical Implementation</h2>\n <div class=\"tech-features\">\n <div class=\"feature\">\n <h3>Real-time Processing</h3>\n <div class=\"progress-bar\">\n <div class=\"progress\"></div>\n </div>\n </div>\n <div class=\"feature\">\n <h3>Risk Management</h3>\n <div class=\"risk-meter\"></div>\n </div>\n <div class=\"feature\">\n <h3>Performance Monitoring</h3>\n <div id=\"performance-chart\" class=\"chart-placeholder\"></div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>ForexScalp</h4>\n <p>Advanced Forex trading signals</p>\n </div>\n <div class=\"footer-section\">\n <h4>Contact</h4>\n <p>support@forexscalp.scroll.pub</p>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a3b4c;\n --secondary: #4a90e2;\n --accent: #50e3c2;\n --background: #f8f9fa;\n --text: #333;\n --success: #28a745;\n --danger: #dc3545;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n padding: 0.5rem 1rem;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--accent);\n}\n\nmain {\n margin-top: 4rem;\n}\n\nsection {\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n#hero {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n text-align: center;\n padding: 6rem 2rem;\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.card-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.strategy-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.indicator {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.meter {\n height: 200px;\n background: linear-gradient(to bottom, var(--danger), var(--accent), var(--success));\n border-radius: 5px;\n margin: 1rem 0;\n position: relative;\n}\n\n.signals-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.signal-box {\n padding: 2rem;\n border-radius: 10px;\n color: white;\n}\n\n.buy {\n background: var(--success);\n}\n\n.sell {\n background: var(--danger);\n}\n\n.tech-features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.feature {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.progress-bar {\n height: 20px;\n background: #eee;\n border-radius: 10px;\n overflow: hidden;\n}\n\n.progress {\n width: 75%;\n height: 100%;\n background: var(--secondary);\n animation: progress 2s ease-in-out infinite;\n}\n\nfooter {\n background: var(--primary);\n color: white;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n@keyframes progress {\n 0% { width: 0; }\n 100% { width: 75%; }\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n \n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: white;\n margin: 5px 0;\n }\n \n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary);\n flex-direction: column;\n padding: 1rem;\n }\n \n .nav-links.active {\n display: flex;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n target.scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Intersection Observer for animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('animate');\n }\n });\n }, observerOptions);\n\n // Observe all sections\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n\n // Simple chart visualization (placeholder)\n const drawChart = () => {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n canvas.width = 300;\n canvas.height = 150;\n \n ctx.strokeStyle = '#4a90e2';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(0, 75);\n \n for(let i = 0; i < 300; i++) {\n ctx.lineTo(i, 75 + Math.sin(i/20) * 30);\n }\n \n ctx.stroke();\n \n const charts = document.querySelectorAll('.chart-placeholder');\n charts.forEach(chart => {\n chart.appendChild(canvas.cloneNode(true));\n });\n };\n\n drawChart();\n});\n\n---end---\n\nThis implementation creates a modern, responsive website for the Forex Scalping Signal Algorithm. It features:\n\n1. Clean, semantic HTML5 structure\n2. Responsive design with mobile menu\n3. Modern CSS with variables and grid layouts\n4. Smooth animations and transitions\n5. Interactive elements and visualizations\n6. Proper section organization\n7. Accessibility features\n8. Performance optimizations\n9. SEO-friendly structure\n\nThe design uses a professional color scheme with a dark blue primary color, complemented by accent colors for various indicators and signals. The layout is clean and organized, making it easy to understand the complex trading concepts."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 1507,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3326
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..df6ee03
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# forexscalp.scroll.pub
+Website generated by Claude from prompt: # Algoritmo de Sinais para Scalping no Mercado Forex ## Cenário Estamos operando no mercado Forex com as seguintes condições: 1. **Histórico de Dados**: Temos um histórico inicial de 34 horas em candles de 1 minuto (M1). 2. **Atualizações em Tempo Real**: - Recebemos atualizações em tempo real dos valores **ask** e **bid** para o par de moedas. - Recebemos o fechamento de cada candle a cada 1 minuto. ## Objetivo Desenvolver um algoritmo para gerar sinais de **compra** e **venda** baseado nos dados de candles M1. O objetivo é implementar uma estratégia de **scalping** eficiente que maximize os lucros com movimentos rápidos de preços. O algoritmo deve identificar sinais de entrada e saída de forma autônoma a partir dos dados fornecidos, sem a necessidade de intervenção manual. ### Requisitos 1. **Análise Técnica**: - **Médias Móveis**: - Média móvel de **5 períodos** (curto prazo). - Média móvel de **15 períodos** (médio prazo). - **RSI (Índice de Força Relativa)**: - O RSI deve ser utilizado para detectar condições de **sobrecompra** (RSI > 70) e **sobrevenda** (RSI < 30). - **MACD (Moving Average Convergence Divergence)**: - Utilize o MACD para identificar **convergência** e **divergência** no preço, indicando potenciais pontos de reversão ou continuidade da tendência. 2. **Sinal de Compra (Long)**: - A compra deve ser realizada quando a média móvel de 5 períodos cruzar a média móvel de 15 períodos de **baixo para cima** e o RSI estiver abaixo de 30, indicando uma condição de sobrevenda. - O MACD deve mostrar um sinal de **compra** (linha MACD cruzando acima da linha de sinal). 3. **Sinal de Venda (Short)**: - A venda deve ser realizada quando a média móvel de 5 períodos cruzar a média móvel de 15 períodos de **cima para baixo** e o RSI estiver acima de 70, indicando uma condição de sobrecompra. - O MACD deve mostrar um sinal de **venda** (linha MACD cruzando abaixo da linha de sinal). 4. **Filtros Adicionais**: - O algoritmo deve verificar **suporte e resistência** utilizando o histórico de candles M1, a fim de evitar operações em regiões de preço sem uma tendência clara. - Utilizar um **Trailing Stop** para proteger os lucros conforme o preço se move a favor da operação. ### Exigências do Algoritmo - O algoritmo deve ser capaz de **analisar os dados de cada novo candle** de 1 minuto. - O código precisa **interpretar os sinais de entrada** e **saída** com base na estratégia de médias móveis, RSI e MACD. - O **código** deve ser eficiente para operar em tempo real, com execução rápida para aproveitar movimentos rápidos do mercado. - Considerar um filtro de **alta volatilidade** para não entrar em operações durante períodos de alta oscilação de preços, que podem resultar em perdas rápidas. ### Aspectos Técnicos - O algoritmo deve ser implementado de forma modular e escalável, com funções para cada parte da análise técnica (médias móveis, RSI, MACD, suporte e resistência). - A integração com a **API de mercado** deve ser feita de forma eficiente para receber os dados de preços em tempo real. - A execução de ordens de compra e venda deve ser feita com precisão e rapidez, evitando **slippage**. ### Observações A parte de **Stop Loss** e **Take Profit** já está implementada, então o algoritmo deve se concentrar apenas na **geração dos sinais de entrada** e **saída** com base nos critérios de análise técnica descritos. ## Resultado Esperado Um algoritmo que: - Gera sinais de **compra** e **venda** com base na análise de médias móveis, RSI e MACD. - Realiza operações de forma autônoma, reagindo rapidamente às mudanças de preço. - Protege os lucros com **Trailing Stop** e minimiza riscos com **gestão de risco** eficiente. Este documento serve como base para o desenvolvimento de uma estratégia de scalping automatizada para o mercado Forex, com foco em gerar lucros rápidos enquanto se mantém seguro em um ambiente altamente volátil.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..bc6e970
--- /dev/null
+++ b/script.js
@@ -0,0 +1,65 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Intersection Observer for animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('animate');
+ }
+ });
+ }, observerOptions);
+
+ // Observe all sections
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+
+ // Simple chart visualization (placeholder)
+ const drawChart = () => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = 300;
+ canvas.height = 150;
+
+ ctx.strokeStyle = '#4a90e2';
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ ctx.moveTo(0, 75);
+
+ for(let i = 0; i < 300; i++) {
+ ctx.lineTo(i, 75 + Math.sin(i/20) * 30);
+ }
+
+ ctx.stroke();
+
+ const charts = document.querySelectorAll('.chart-placeholder');
+ charts.forEach(chart => {
+ chart.appendChild(canvas.cloneNode(true));
+ });
+ };
+
+ drawChart();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..140dfcf
--- /dev/null
+++ b/style.css
@@ -0,0 +1,223 @@
+:root {
+ --primary: #2a3b4c;
+ --secondary: #4a90e2;
+ --accent: #50e3c2;
+ --background: #f8f9fa;
+ --text: #333;
+ --success: #28a745;
+ --danger: #dc3545;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Inter', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+}
+
+header {
+ background: var(--primary);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--accent);
+}
+
+main {
+ margin-top: 4rem;
+}
+
+section {
+ padding: 4rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+#hero {
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+ text-align: center;
+ padding: 6rem 2rem;
+}
+
+h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.card-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: transform 0.3s;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+.strategy-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.indicator {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.meter {
+ height: 200px;
+ background: linear-gradient(to bottom, var(--danger), var(--accent), var(--success));
+ border-radius: 5px;
+ margin: 1rem 0;
+ position: relative;
+}
+
+.signals-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.signal-box {
+ padding: 2rem;
+ border-radius: 10px;
+ color: white;
+}
+
+.buy {
+ background: var(--success);
+}
+
+.sell {
+ background: var(--danger);
+}
+
+.tech-features {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.feature {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.progress-bar {
+ height: 20px;
+ background: #eee;
+ border-radius: 10px;
+ overflow: hidden;
+}
+
+.progress {
+ width: 75%;
+ height: 100%;
+ background: var(--secondary);
+ animation: progress 2s ease-in-out infinite;
+}
+
+footer {
+ background: var(--primary);
+ color: white;
+ padding: 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+@keyframes progress {
+ 0% { width: 0; }
+ 100% { width: 75%; }
+}
+
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .menu-toggle span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: white;
+ margin: 5px 0;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--primary);
+ flex-direction: column;
+ padding: 1rem;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+}