Dashboard Temp Share Shortlinks Frames API

HTMLify

settings.html
Views: 6 | Author: karbonsites 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1 class="logo">ViralSight</h1>
            <nav>
                <a href="index.html" class="nav-link">Dashboard</a>
                <a href="analysis.html" class="nav-link">Report</a>
                <a href="automation.html" class="nav-link">Automation</a>
                <a href="settings.html" class="nav-link active">Settings</a>
            </nav>
        </div>
    </header>

    <main class="settings-main">
        <div class="container">
            <h2 class="section-title">Preferences</h2>
            <div class="settings-layout">
                <aside class="settings-nav">
                    <ul>
                        <li><a href="#account" class="active-setting">Account</a></li>
                        <li><a href="#api">API</a></li>
                        <li><a href="#automation-setup">Automation</a></li>
                        <li><a href="#preferences">Analysis</a></li>
                    </ul>
                </aside>
                <div class="settings-content card">
                    <section id="account">
                        <h3>Account</h3>
                        <form class="settings-form">
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" id="username" value="CreatorPro99" readonly>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" id="email" value="pro@example.com">
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" id="password" value="********">
                                <button type="button" class="secondary-button">Change Password</button>
                            </div>
                            <button type="submit" class="cta-button">Save</button>
                        </form>
                    </section>

                    <section id="api" style="display:none;">
                        <h3>API</h3>
                        <p>Connect YouTube Studio for tracking.</p>
                        <button class="cta-button secondary-button">Connect YouTube</button>
                    </section>

                    <section id="automation-setup" style="display:none;">
                        <h3>Automation Setup</h3>
                        <div class="form-group">
                            <label for="webhookUrl">Webhook URL</label>
                            <input type="text" id="webhookUrl" placeholder="https://your-service.com/hook/xyz123">
                        </div>
                        <div class="form-group">
                            <label for="triggerEvents">Trigger Analysis On:</label>
                            <div style="display:flex; gap: 15px;">
                                <label><input type="checkbox" name="triggerEvents" value="new_upload" checked> Upload</label>
                                <label><input type="checkbox" name="triggerEvents" value="metric_update" checked> Metrics Update</label>
                            </div>
                        </div>
                        <button type="button" class="cta-button">Save Webhook</button>
                        <p style="margin-top: 15px; font-size: 0.9rem; color: var(--color-success);">Status: Active</p>
                    </section>

                    <section id="preferences" style="display:none;">
                        <h3>Analysis Preferences</h3>
                        <div class="pref-group">
                            <h4>Targets</h4>
                            <div class="form-group">
                                <label for="targetRetention">Target Retention (%)</label>
                                <input type="number" id="targetRetention" value="68" min="50" max="95"> 
                            </div>
                            <div class="form-group">
                                <label for="hookWeight">Hook Weighting</label>
                                <input type="range" id="hookWeight" min="0" max="100" value="40">
                                <span id="hookValueDisplay">40%</span>
                            </div>
                        </div>
                        <button type="submit" class="cta-button">Update</button>
                    </section>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 ViralSight.</p>
        </div>
    </footer>

    <script src="script.js"></script>

  <a href="https://karbonsites.space/home" target="_blank" id="karbon-promo-banner">
      <span>✨</span>
      <div>Built with <b>Karbon Sites</b></div>
  </a>
</body>
</html>

Share this file: