tweak config section layout
This commit is contained in:
parent
491dbacda4
commit
e4ba1378b6
SSH key fingerprint:
SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
3 changed files with 394 additions and 115 deletions
|
|
@ -127,117 +127,152 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
<!-- Main Configuration Section -->
|
||||
<div class="py-4">
|
||||
<!-- Investment & Timeframe Row -->
|
||||
<div class="row mb-4">
|
||||
<!-- Investment Amount -->
|
||||
<div class="col-lg-4 col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold mb-2">Initial Investment</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">CHF</span>
|
||||
<input type="text" class="form-control" id="investment-amount"
|
||||
data-value="500000" value="500,000"
|
||||
oninput="handleInvestmentAmountInput(this)"
|
||||
onchange="updateCalculations()">
|
||||
</div>
|
||||
<input type="range" class="form-range mt-2" id="investment-slider"
|
||||
min="100000" max="2000000" step="50000" value="500000"
|
||||
onchange="updateInvestmentAmount(this.value)">
|
||||
<div class="d-flex justify-content-between">
|
||||
<small class="text-muted">CHF 100K</small>
|
||||
<small class="text-muted">CHF 2M</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeframe -->
|
||||
<div class="col-lg-2 col-md-3 mb-3">
|
||||
<label class="form-label fw-semibold mb-2">Analysis Period</label>
|
||||
<select class="form-select" id="timeframe" onchange="updateCalculations()">
|
||||
<option value="1">1 Year</option>
|
||||
<option value="2">2 Years</option>
|
||||
<option value="3" selected>3 Years</option>
|
||||
<option value="4">4 Years</option>
|
||||
<option value="5">5 Years</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Service Revenue -->
|
||||
<div class="col-lg-3 col-md-6 mb-3">
|
||||
<label class="form-label fw-semibold mb-2">Service Revenue per Instance</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="revenue-per-instance"
|
||||
min="20" max="200" step="5" value="50" onchange="updateCalculations()">
|
||||
<span class="input-group-text">CHF/month</span>
|
||||
</div>
|
||||
<input type="range" class="form-range mt-2" id="revenue-slider"
|
||||
min="20" max="200" step="5" value="50"
|
||||
onchange="updateRevenuePerInstance(this.value)">
|
||||
<div class="d-flex justify-content-between">
|
||||
<small class="text-muted">CHF 20</small>
|
||||
<small class="text-muted">CHF 200</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="col-lg-3 col-md-3 mb-3 d-flex align-items-end">
|
||||
<div class="d-flex gap-2 w-100">
|
||||
<button class="btn btn-outline-info" type="button" onclick="toggleAdvancedControls()" id="advancedToggleBtn">
|
||||
<i class="bi bi-gear"></i> Advanced Settings
|
||||
</button>
|
||||
<a href="{% url 'services:roi_calculator_help' %}" class="btn btn-outline-secondary" target="_blank">
|
||||
<i class="bi bi-question-circle"></i> Help
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scenarios & Results Row -->
|
||||
<div class="row">
|
||||
<!-- Growth Scenarios -->
|
||||
<div class="col-lg-6 mb-3">
|
||||
<label class="form-label fw-semibold mb-2">Growth Scenarios</label>
|
||||
<div class="d-flex gap-4 flex-wrap">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="conservative-enabled" checked onchange="toggleScenario('conservative')">
|
||||
<label class="form-check-label fw-medium" for="conservative-enabled" data-bs-toggle="tooltip" title="Conservative: 2% churn, steady growth">
|
||||
<span class="text-success fs-5">●</span> Conservative
|
||||
</label>
|
||||
<!-- Left Column: Configuration Fields -->
|
||||
<div class="col-lg-8 col-xl-7">
|
||||
<div class="main-config-fields">
|
||||
<!-- Investment Amount -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label fw-semibold mb-2">Initial Investment</label>
|
||||
<div class="input-group input-group-lg">
|
||||
<span class="input-group-text">CHF</span>
|
||||
<input type="text" class="form-control" id="investment-amount"
|
||||
data-value="500000" value="500,000"
|
||||
oninput="handleInvestmentAmountInput(this)"
|
||||
onchange="updateCalculations()">
|
||||
</div>
|
||||
<input type="range" class="form-range mt-3" id="investment-slider"
|
||||
min="100000" max="2000000" step="50000" value="500000"
|
||||
onchange="updateInvestmentAmount(this.value)">
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<small class="text-muted">CHF 100K</small>
|
||||
<small class="text-muted">CHF 2M</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="moderate-enabled" checked onchange="toggleScenario('moderate')">
|
||||
<label class="form-check-label fw-medium" for="moderate-enabled" data-bs-toggle="tooltip" title="Moderate: 3% churn, balanced growth">
|
||||
<span class="text-warning fs-5">●</span> Moderate
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="aggressive-enabled" checked onchange="toggleScenario('aggressive')">
|
||||
<label class="form-check-label fw-medium" for="aggressive-enabled" data-bs-toggle="tooltip" title="Aggressive: 5% churn, rapid growth">
|
||||
<span class="text-danger fs-5">●</span> Aggressive
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Results -->
|
||||
<div class="col-lg-6 mb-3">
|
||||
<label class="form-label fw-semibold mb-2">Real-Time Results</label>
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center p-3">
|
||||
<div class="text-success fw-bold mb-2">Direct Investment</div>
|
||||
<div class="h5 mb-1" id="net-position-direct">CHF 0</div>
|
||||
<div class="text-primary fw-bold" id="roi-percentage-direct">0%</div>
|
||||
<small class="text-muted">Net Profit / ROI</small>
|
||||
|
||||
<!-- Analysis Period & Service Revenue Row -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-semibold mb-2">Analysis Period</label>
|
||||
<select class="form-select form-select-lg" id="timeframe" onchange="updateCalculations()">
|
||||
<option value="1">1 Year</option>
|
||||
<option value="2">2 Years</option>
|
||||
<option value="3" selected>3 Years</option>
|
||||
<option value="4">4 Years</option>
|
||||
<option value="5">5 Years</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-semibold mb-2">Service Revenue per Instance</label>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="number" class="form-control" id="revenue-per-instance"
|
||||
min="20" max="200" step="5" value="50" onchange="updateCalculations()">
|
||||
<span class="input-group-text">CHF/month</span>
|
||||
</div>
|
||||
<input type="range" class="form-range mt-3" id="revenue-slider"
|
||||
min="20" max="200" step="5" value="50"
|
||||
onchange="updateRevenuePerInstance(this.value)">
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<small class="text-muted">CHF 20</small>
|
||||
<small class="text-muted">CHF 200</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body text-center p-3">
|
||||
<div class="text-warning fw-bold mb-2">Loan Model</div>
|
||||
<div class="h5 mb-1" id="net-position-loan">CHF 0</div>
|
||||
<div class="text-primary fw-bold" id="roi-percentage-loan">0%</div>
|
||||
<small class="text-muted">Net Profit / ROI</small>
|
||||
|
||||
<!-- Growth Scenarios -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label fw-semibold mb-3">Growth Scenarios</label>
|
||||
<div class="d-flex gap-4 flex-wrap">
|
||||
<div class="form-check form-check-lg">
|
||||
<input class="form-check-input" type="checkbox" id="conservative-enabled" checked onchange="toggleScenario('conservative')">
|
||||
<label class="form-check-label fw-medium" for="conservative-enabled" data-bs-toggle="tooltip" title="Conservative: 2% churn, steady growth">
|
||||
<span class="text-success fs-4">●</span> Conservative
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-lg">
|
||||
<input class="form-check-input" type="checkbox" id="moderate-enabled" checked onchange="toggleScenario('moderate')">
|
||||
<label class="form-check-label fw-medium" for="moderate-enabled" data-bs-toggle="tooltip" title="Moderate: 3% churn, balanced growth">
|
||||
<span class="text-warning fs-4">●</span> Moderate
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-lg">
|
||||
<input class="form-check-input" type="checkbox" id="aggressive-enabled" checked onchange="toggleScenario('aggressive')">
|
||||
<label class="form-check-label fw-medium" for="aggressive-enabled" data-bs-toggle="tooltip" title="Aggressive: 5% churn, rapid growth">
|
||||
<span class="text-danger fs-4">●</span> Aggressive
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="d-flex gap-3 flex-wrap">
|
||||
<button class="btn btn-outline-info btn-lg" type="button" onclick="toggleAdvancedControls()" id="advancedToggleBtn">
|
||||
<i class="bi bi-gear"></i> Advanced Settings
|
||||
</button>
|
||||
<a href="{% url 'services:roi_calculator_help' %}" class="btn btn-outline-secondary btn-lg" target="_blank">
|
||||
<i class="bi bi-question-circle"></i> Help
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Real-Time Results -->
|
||||
<div class="col-lg-4 col-xl-5">
|
||||
<div class="results-panel h-100">
|
||||
<div class="card h-100 border-0 shadow">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0"><i class="bi bi-graph-up"></i> Real-Time Results</h5>
|
||||
<small class="opacity-75">Live calculations based on your parameters</small>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column justify-content-center">
|
||||
<!-- Direct Investment Results -->
|
||||
<div class="result-item mb-4">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="result-icon bg-success text-white rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
|
||||
<i class="bi bi-rocket"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0 text-success fw-bold">Direct Investment</h6>
|
||||
<small class="text-muted">Performance-based returns</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-metrics bg-light rounded p-3">
|
||||
<div class="row text-center">
|
||||
<div class="col-6">
|
||||
<div class="h4 mb-1 text-success fw-bold" id="net-position-direct">CHF 0</div>
|
||||
<small class="text-muted">Net Profit</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="h4 mb-1 text-primary fw-bold" id="roi-percentage-direct">0%</div>
|
||||
<small class="text-muted">Total ROI</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loan Model Results -->
|
||||
<div class="result-item">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="result-icon bg-warning text-dark rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
|
||||
<i class="bi bi-bank"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0 text-warning fw-bold">Loan Model</h6>
|
||||
<small class="text-muted">Fixed guaranteed returns</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-metrics bg-light rounded p-3">
|
||||
<div class="row text-center">
|
||||
<div class="col-6">
|
||||
<div class="h4 mb-1 text-success fw-bold" id="net-position-loan">CHF 0</div>
|
||||
<small class="text-muted">Net Profit</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="h4 mb-1 text-primary fw-bold" id="roi-percentage-loan">0%</div>
|
||||
<small class="text-muted">Total ROI</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue