Last 10 Commits for dividendfolio1.scroll.pub

commit 00a3df82bd5b94c819f03ebde8033817f434066e Author: root <root@hub.scroll.pub> Date: 2024-12-27 14:49:03 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..a3eab02 --- /dev/null +++ b/body.html @@ -0,0 +1,75 @@ +<header> + <h1>DividendFolio</h1> + <p>智能红利投资组合分析与回测</p> +</header> + +<main> + <section class="portfolio-section"> + <h2>预设投资组合</h2> + <div class="portfolio-grid"> + <div class="portfolio-card"> + <h3>高红利组合</h3> + <p>年化收益率: 8.5%</p> + <button class="view-details">查看详情</button> + </div> + <div class="portfolio-card"> + <h3>低波动组合</h3> + <p>年化收益率: 7.2%</p> + <button class="view-details">查看详情</button> + </div> + <div class="portfolio-card"> + <h3>高质量公司组合</h3> + <p>年化收益率: 9.1%</p> + <button class="view-details">查看详情</button> + </div> + </div> + </section> + + <section class="custom-portfolio"> + <h2>自定义投资组合</h2> + <div class="filter-controls"> + <label> + <input type="checkbox" id="dividend-filter"> 高红利 + </label> + <label> + <input type="checkbox" id="low-volatility-filter"> 低波动 + </label> + <label> + <input type="checkbox" id="high-quality-filter"> 高质量公司 + </label> + </div> + <div class="stock-grid" id="stock-grid"> +  + </div> + <button class="analyze-button" id="analyze-button">分析组合</button> + </section> + + <section class="analysis-results" id="analysis-results"> + <h2>组合分析结果</h2> + <div class="results-grid"> + <div class="metric-card"> + <h3>年化收益率</h3> + <p id="annual-return">-</p> + </div> + <div class="metric-card"> + <h3>最大回撤</h3> + <p id="max-drawdown">-</p> + </div> + <div class="metric-card"> + <h3>夏普比率</h3> + <p id="sharpe-ratio">-</p> + </div> + </div> + <div class="chart-container"> + <canvas id="performance-chart"></canvas> + </div> + </section> +</main> + +<footer> + <nav> + <a href="/about">关于我们</a> + <a href="/contact">联系我们</a> + <a href="/privacy">隐私政策</a> + </nav> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..ee615c8 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://dividendfolio.scroll.pub +metaTags +editButton /edit.html +title DividendFolio - 红利投资组合分析 +style.css +body.html +script.js \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..9d820dc --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# dividendfolio1.scroll.pub +Website generated by DeepSeek from prompt: 做一个网站，网站是给投资人用于挑选红利组合的一个投资网站，网站上显示几个常见的投资组合的过往表现。投资人可以选择标的池的股票，标的池的股票有三个维度是否是红利、是否低波、是否高质量公司。投资人可以选择自己股票组成想要的组合，看回测数据。 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..10a7c77 --- /dev/null +++ b/script.js @@ -0,0 +1,75 @@ +// Sample stock data +const stocks = [ + { name: 'AAPL', dividend: true, lowVolatility: false, highQuality: true }, + { name: 'MSFT', dividend: true, lowVolatility: true, highQuality: true }, + { name: 'TSLA', dividend: false, lowVolatility: false, highQuality: false }, + { name: 'JNJ', dividend: true, lowVolatility: true, highQuality: true }, + { name: 'XOM', dividend: true, lowVolatility: false, highQuality: false }, + { name: 'PG', dividend: true, lowVolatility: true, highQuality: true } +]; + +// DOM Elements +const stockGrid = document.getElementById('stock-grid'); +const analyzeButton = document.getElementById('analyze-button'); +const resultsSection = document.getElementById('analysis-results'); +const annualReturn = document.getElementById('annual-return'); +const maxDrawdown = document.getElementById('max-drawdown'); +const sharpeRatio = document.getElementById('sharpe-ratio'); +const performanceChart = document.getElementById('performance-chart'); + +// Initialize stock grid +function renderStocks() { + stockGrid.innerHTML = ''; + stocks.forEach(stock => { + const stockCard = document.createElement('div'); + stockCard.className = 'stock-card'; + stockCard.innerHTML = ` + <h3>${stock.name}</h3> + <div class="attributes"> + <span class="${stock.dividend ? 'active' : ''}">红利</span> + <span class="${stock.lowVolatility ? 'active' : ''}">低波</span> + <span class="${stock.highQuality ? 'active' : ''}">高质量</span> + </div> + <button class="select-stock">选择</button> + `; + stockGrid.appendChild(stockCard); + }); +} + +// Analyze portfolio +function analyzePortfolio() { + // Simulate analysis results + annualReturn.textContent = '7.8%'; + maxDrawdown.textContent = '-12.3%'; + sharpeRatio.textContent = '1.2'; + + // Show results section + resultsSection.style.display = 'block'; + + // Chart data + const chartData = { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], + datasets: [{ + label: '组合表现', + data: [100, 105, 102, 110, 115, 120], + borderColor: '#3498db', + fill: false + }] + }; + + // Render chart + new Chart(performanceChart, { + type: 'line', + data: chartData, + options: { + responsive: true, + maintainAspectRatio: false + } + }); +} + +// Event listeners +analyzeButton.addEventListener('click', analyzePortfolio); + +// Initial render +renderStocks(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5322d75 --- /dev/null +++ b/style.css @@ -0,0 +1,114 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --accent-color: #e74c3c; + --background-color: #f5f6fa; + --text-color: #2c3e50; + --card-bg: #ffffff; + --shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); + margin: 0; + padding: 0; +} + +header { + background: var(--primary-color); + color: white; + padding: 2rem; + text-align: center; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.portfolio-grid, .stock-grid, .results-grid { + display: grid; + gap: 1.5rem; + padding: 2rem; +} + +.portfolio-grid { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +} + +.stock-grid { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); +} + +.results-grid { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + +.portfolio-card, .metric-card { + background: var(--card-bg); + padding: 1.5rem; + border-radius: 8px; + box-shadow: var(--shadow); + transition: transform 0.3s ease; +} + +.portfolio-card:hover { + transform: translateY(-5px); +} + +button { + background: var(--secondary-color); + color: white; + border: none; + padding: 0.8rem 1.5rem; + border-radius: 4px; + cursor: pointer; + transition: background 0.3s ease; +} + +button:hover { + background: #2980b9; +} + +.chart-container { + max-width: 800px; + margin: 2rem auto; +} + +.filter-controls { + display: flex; + gap: 1rem; + justify-content: center; + margin: 1rem 0; +} + +footer { + background: var(--primary-color); + color: white; + padding: 1rem; + text-align: center; +} + +footer nav { + display: flex; + justify-content: center; + gap: 1rem; +} + +footer a { + color: white; + text-decoration: none; +} + +@media (max-width: 768px) { + h1 { + font-size: 2rem; + } + + .portfolio-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file