|
|
@@ -3,82 +3,147 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>Mietubl Marketing System</title>
|
|
|
+ <title>Mietubl Marketing System - Multi-platform Content Sync Solution</title>
|
|
|
<style>
|
|
|
:root {
|
|
|
- --primary: #2c3e50;
|
|
|
- --accent: #3498db;
|
|
|
+ --primary-color: #2A5CAA;
|
|
|
+ --secondary-color: #F0F4F8;
|
|
|
}
|
|
|
+
|
|
|
body {
|
|
|
+ font-family: 'Segoe UI', system-ui, sans-serif;
|
|
|
+ line-height: 1.6;
|
|
|
margin: 0;
|
|
|
- font-family: system-ui, -apple-system, sans-serif;
|
|
|
- background: #f8f9fa;
|
|
|
+ padding: 0;
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ header {
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: white;
|
|
|
+ padding: 2rem;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-nav {
|
|
|
+ position: absolute;
|
|
|
+ top: 1rem;
|
|
|
+ right: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-nav a {
|
|
|
+ color: white;
|
|
|
+ text-decoration: none;
|
|
|
+ margin-left: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 2rem;
|
|
|
}
|
|
|
- nav {
|
|
|
- padding: 1rem 5vw;
|
|
|
+
|
|
|
+ .brand-section {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
|
+ gap: 2rem;
|
|
|
+ margin-bottom: 3rem;
|
|
|
}
|
|
|
- main {
|
|
|
- padding: 2rem 5vw;
|
|
|
+
|
|
|
+ .brand-logo {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ border-radius: 16px;
|
|
|
}
|
|
|
- .grid {
|
|
|
- display: grid;
|
|
|
- gap: 1.5rem;
|
|
|
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
|
- margin-top: 3rem;
|
|
|
+
|
|
|
+ .feature-section {
|
|
|
+ background-color: white;
|
|
|
+ padding: 2rem;
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
|
+ margin: 2rem 0;
|
|
|
}
|
|
|
- .card {
|
|
|
- background: #fff;
|
|
|
+
|
|
|
+ .data-privacy {
|
|
|
+ background-color: #fff3cd;
|
|
|
padding: 1.5rem;
|
|
|
border-radius: 8px;
|
|
|
- box-shadow: 0 2px 6px rgba(0,0,0,0.06);
|
|
|
+ margin: 2rem 0;
|
|
|
}
|
|
|
- h2, h3 { color: var(--primary); }
|
|
|
- .nav-links a {
|
|
|
- color: var(--accent);
|
|
|
- text-decoration: none;
|
|
|
- margin-left: 1.5rem;
|
|
|
- font-weight: 500;
|
|
|
+
|
|
|
+ .platform-list {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
+ gap: 1rem;
|
|
|
+ margin: 2rem 0;
|
|
|
}
|
|
|
- .icon {
|
|
|
- font-size: 1.8rem;
|
|
|
- margin-bottom: 0.5rem;
|
|
|
+
|
|
|
+ .cta-button {
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: white;
|
|
|
+ padding: 1rem 2rem;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cta-button:hover {
|
|
|
+ opacity: 0.9;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<nav>
|
|
|
- <h2>Mietubl Marketing System</h2>
|
|
|
- <div class="nav-links">
|
|
|
+<header>
|
|
|
+ <nav class="header-nav">
|
|
|
<a href="/dist">Login</a>
|
|
|
<a href="privacy_policy.html" target="_blank">Privacy</a>
|
|
|
- </div>
|
|
|
-</nav>
|
|
|
-
|
|
|
-<main>
|
|
|
- <div class="grid">
|
|
|
- <div class="card">
|
|
|
- <div class="icon">📈</div>
|
|
|
- <h3>Analytics</h3>
|
|
|
- <p>Real-time in-depth data analysis.</p>
|
|
|
- </div>
|
|
|
+ </nav>
|
|
|
+ <h1>Mietubl Marketing System</h1>
|
|
|
+ <p>Intelligent Content Distribution System</p>
|
|
|
+</header>
|
|
|
|
|
|
- <div class="card">
|
|
|
- <div class="icon">🎯</div>
|
|
|
- <h3>AI Content</h3>
|
|
|
- <p>Generate marketing materials with AI.</p>
|
|
|
+<main class="container">
|
|
|
+ <section class="brand-section">
|
|
|
+ <div>
|
|
|
+ <h2>About Mietubl</h2>
|
|
|
+ <p>An intelligent solution for modern digital marketing, empowering customer service teams with efficient content management</p>
|
|
|
</div>
|
|
|
+ </section>
|
|
|
|
|
|
- <div class="card">
|
|
|
- <div class="icon">🛠️</div>
|
|
|
- <h3>Platform</h3>
|
|
|
- <p>Unified advertising across all channels and social media platforms.</p>
|
|
|
+ <section class="feature-section">
|
|
|
+ <h3>Core Features</h3>
|
|
|
+ <ul>
|
|
|
+ <li>📌 One-click publishing to major social platforms (Facebook, Twitter, Instagram, Yutube.)</li>
|
|
|
+ <li>⏱️ Scheduled posting & automated queue management</li>
|
|
|
+ <li>📊 Cross-platform analytics & performance tracking</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div class="platform-list">
|
|
|
+ <div>📱 Facebook</div>
|
|
|
+ <div>🐦 Twitter</div>
|
|
|
+ <div>📸 Instagram</div>
|
|
|
+ <div>💼 Yutube</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="data-privacy">
|
|
|
+ <h3>Data Usage Declaration</h3>
|
|
|
+ <p>To deliver core services, we require:</p>
|
|
|
+ <ul>
|
|
|
+ <li>🔑 Social media access: For content publishing and analytics</li>
|
|
|
+ <li>📝 Basic user info: For personalized service configuration</li>
|
|
|
+ <li>📈 Engagement data: To optimize recommendation algorithms</li>
|
|
|
+ </ul>
|
|
|
+ <p>All data is encrypted with AES-256 and stored in compliance with GDPR regulations. We never use your data for undisclosed purposes.</p>
|
|
|
+ </section>
|
|
|
</main>
|
|
|
+
|
|
|
+<footer style="background-color: var(--primary-color); color: white; text-align: center; padding: 1rem; margin-top: 3rem;">
|
|
|
+ <p>© 2025 Mietubl Marketing System</p>
|
|
|
+</footer>
|
|
|
</body>
|
|
|
</html>
|
