Hugging Face's logo

Spaces:
sudzdpn
/
wireframe
Running

App Files Community
wireframe / index.html
sudzdpn's picture
sudzdpn
Add 2 files
cbe8874 verified
raw
history blame contribute delete
36.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAML DocGen Wireframe</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.sidebar {
scrollbar-width: thin;
scrollbar-color: #4b5563 #1f2937;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: #1f2937;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: #4b5563;
border-radius: 3px;
}
.code-block {
font-family: 'Courier New', monospace;
background-color: #1e293b;
color: #f8fafc;
}
.tab-active {
border-bottom: 2px solid #3b82f6;
color: #3b82f6;
}
.diagram-placeholder {
background: linear-gradient(135deg, #f3f4f6 25%, #e5e7eb 25%, #e5e7eb 50%, #f3f4f6 50%, #f3f4f6 75%, #e5e7eb 75%);
background-size: 40px 40px;
}
.copy-success {
animation: copyPulse 0.5s ease-in-out;
}
@keyframes copyPulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.slider-container {
position: relative;
width: 100%;
margin: 20px 0;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: #d1d5db;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
transition: all 0.2s;
}
.slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}
.slider-labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
}
.slider-label {
font-size: 12px;
color: #6b7280;
}
.slider-value {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: #3b82f6;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
.slider-value:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #3b82f6 transparent transparent transparent;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar w-64 bg-gray-800 text-gray-200 flex flex-col h-full overflow-y-auto">
<div class="p-4 border-b border-gray-700">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
<i class="fas fa-lock text-white"></i>
</div>
<h1 class="text-xl font-bold">SAML DocGen</h1>
</div>
<p class="text-xs text-gray-400 mt-1">v2.4.1</p>
</div>
<div class="p-4">
<div class="relative">
<input type="text" placeholder="Search components..." class="w-full bg-gray-700 text-gray-200 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
</div>
</div>
<div class="flex-1 overflow-y-auto">
<div class="px-4 py-2">
<h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Authentication</h3>
<ul>
<li class="mb-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700 text-blue-400 bg-gray-700">
<i class="fas fa-key mr-2"></i> SAML Flow
</a>
</li>
<li class="mb-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
<i class="fas fa-fingerprint mr-2"></i> Single Sign-On
</a>
</li>
<li class="mb-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
<i class="fas fa-sign-out-alt mr-2"></i> Single Logout
</a>
</li>
</ul>
</div>
<div class="px-4 py-2 mt-4">
<h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Configuration</h3>
<ul>
<li class="mb-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
<i class="fas fa-id-card mr-2"></i> Identity Providers
</a>
</li>
<li class="mb-1">
<a href="#" class="block px极3 py-2 rounded-md hover:bg-gray-700">
<i class="fas fa-server mr-2"></i> Service Providers
</a>
</li>
<li class="mb-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
<i class="fas fa-certificate mr-2"></i> Certificates
</a>
</li>
</ul>
</div>
<div class="px-4 py-2 mt-4">
<h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Advanced</h3>
<ul>
<li class="mb-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
<i class="fas fa-code mr-2"></i> Custom Claims
</a>
</li>
<li class="mb-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
<i class="fas fa-shield-alt mr-2"></i> Security Policies
</a>
</li>
<li class="mb-1">
<a href="#" class="block px-3 py-2 rounded-md hover:bg-gray-700">
<i class="fas fa-plug mr-2"></i> Webhooks
</a>
</li>
</ul>
</div>
</div>
<div class="p-4 border-t border-gray-700">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-2">
<i class="fas fa-user"></i>
</div>
<div>
<p class="text-sm font-medium">Admin User</p>
<p class="text-xs text-gray-400">admin@saml.co.za</p>
</div>
<button class="ml-auto text-gray-400 hover:text-white">
<i class="fas fa-cog"></i>
</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Header -->
<header class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
<div>
<h2 class="text-xl font-semibold">SAML Authentication Flow</h2>
<p class="text-sm text-gray-500">Web Browser SSO Profile (SAML 2.0)</p>
</div>
<div class="flex space-x-3">
<div class="relative group">
<button class="px-4 py-2 bg-gray-100 rounded-md hover:bg-gray-200 flex items-center">
<i class="fas fa-code-branch mr-2 text-gray-600"></i>
<span>Version 2.4.1</span>
<i class="fas fa-chevron-down ml-2 text-xs text-gray-500"></i>
</button>
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 w-48 z-10 border border-gray-200">
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">Version 2.4.1 (current)</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">Version 2.3.0</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">Version 2.2.5</a>
</div>
</div>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center">
<i class="fas fa-download mr-2"></i>
<span>Export</span>
</button>
</div>
</header>
<!-- Content Area -->
<div class="flex-1 overflow-y-auto p-6">
<div class="max-w-5xl mx-auto">
<!-- Tabs -->
<div class="border-b border-gray-200 mb-6">
<nav class="flex space-x-8">
<button class="tab-active py-4 px-1 font-medium">Documentation</button>
<button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Examples</button>
<button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Configuration</button>
<button class="py-4 px-1 font-medium text-gray-500 hover:text-gray-700">Troubleshooting</button>
</nav>
</div>
<!-- Content -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">SAML Authentication Flow</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
<i class="fas fa-bookmark mr-1"></i> Bookmark
</button>
<button class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
<i class="fas fa-share-alt mr-1"></i> Share
</button>
</div>
</div>
<p class="text-gray-600 mb-6">
The SAML authentication flow allows users to authenticate using their identity provider (IdP) credentials.
This component implements the standard SAML 2.0 Web Browser SSO Profile with support for both SP-initiated and IdP-initiated flows.
</p>
<div class="mb-8">
<div class="flex items-center justify-between mb-3">
<h4 class="font-medium">Sequence Diagram</h4>
<button class="text-sm text-blue-600 hover:text-blue-800">
<i class="fas fa-expand mr-1"></i> Fullscreen
</button>
</div>
<div class="diagram-placeholder p-4 rounded-md border border-gray-200">
<div class="flex justify-center items-center h-64">
<div class="text-center">
<i class="fas fa-project-diagram text-4xl text-gray-300 mb-2"></i>
<p class="text-gray-400">SAML authentication sequence diagram</p>
<button class="mt极2 px-3 py-1 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700">
Generate Diagram
</button>
</div>
</div>
</div>
</div>
<!-- Slider Section -->
<div class="mb-8">
<h4 class="font-medium mb-3">Security Level Configuration</h4>
<div class="slider-container">
<div class="slider-value" id="slider-value">Medium</div>
<input type="range" min="0" max="2" value="1" class="slider" id="security-level" step="1">
<div class="slider-labels">
<span class="slider-label">Low</span>
<span class="slider-label">Medium</span>
<span class="slider-label">High</span>
</div>
</div>
<div class="mt-4 p-4 bg-gray-50 rounded-md">
<h5 class="font-medium mb-2">Current Security Settings:</h5>
<ul class="list-disc pl-5 text-sm text-gray-600" id="security-settings">
<li>256-bit encryption</li>
<li>Password-protected transport</li>
<li>Session timeout: 30 minutes</li>
</ul>
</div>
</div>
<div class="mb-8">
<h4 class="font-medium mb-3">Configuration Parameters</h4>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parameter</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">idpMetadataUrl</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
<td class="px-6 py-4 text-sm text-gray-500">URL to the IdP metadata XML</td>
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">spEntityId</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
<td class="px-6 py-4 text-sm text-gray-500">Service Provider entity ID</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">assertEndpoint</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
<td class="px-6 py-4 text-sm text-gray-500">Assertion consumer service URL</td>
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">nameIdFormat</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified</td>
<td class="px-6 py-4 text-sm text-gray-500">Format for NameID</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">authnContext</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport</td>
<td class="px-6 py-4 text-sm text-gray-500">Authentication context class</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-8">
<h4 class="font-medium mb-3">Example Implementation</h4>
<div class="mb-4">
<div class="flex justify-between items-center bg-gray-800 text-gray-200 px-4 py-2 rounded-t-md">
<div class="极flex items-center">
<i class="fab fa-js mr-2"></i>
<span>JavaScript</span>
</div>
<button class="text-gray-400 hover:text-white copy-btn">
<i class="far fa-copy"></i>
</button>
</div>
<pre class="code-block p-4 rounded-b-md overflow-x-auto"><code>const samlAuth = new SAMLAuthentication({
// Required configuration
idpMetadataUrl: 'https://idp.example.com/metadata.xml',
spEntityId: 'urn:example:sp',
assertEndpoint: 'https://your-app.com/saml/acs',
// Optional configuration
name极IdFormat: 'urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress',
authnContext: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport',
forceAuthn: false,
allowCreate: true,
requestBinding: 'HTTP-Redirect',
responseBinding: 'HTTP-POST'
});
// Initiate SP-initiated login
app.get('/login', (req, res) => {
samlAuth.login(req, res, {
// Optional parameters
RelayState: '/dashboard',
AuthnRequestExtensions: '&lt;my:CustomAttribute&gt;value&lt;/my:CustomAttribute&gt;'
});
});
// Handle assertion response
app.post('/saml/acs', (req, res) => {
samlAuth.handleAssertion(req, res)
.then(user => {
// User authenticated successfully
req.session.user = user;
res.redirect(req.body.RelayState || '/');
})
.catch(err => {
// Handle authentication failure
console.error('SAML authentication failed:', err);
res.status(401).render('error', {
message: 'Authentication failed',
details: err.message
});
});
});
// Metadata endpoint
app.get('/saml/metadata', (req, res) => {
res.type('application/xml');
res.send(samlAuth.generateMetadata());
});</code></pre>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<div class="flex justify-between items-center bg-gray-800 text-gray-200 px-4 py-2 rounded-t-md">
<div class="flex items-center">
<i class="fab fa-java mr-2"></i>
<span>Java</span>
</div>
<button class="text-gray-400 hover:text-white copy-btn">
<i class="far fa-copy"></i>
</button>
</div>
<pre class="code-block p-4 rounded-b-md overflow-x-auto"><code>@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Value("${saml.idp.metadata}")
private String idpMetadataUrl;
@Bean
public SAMLAuthenticationProvider samlAuthenticationProvider() {
return new SAMLAuthenticationProvider();
}
@Bean
public SAMLMetadataFilter metadataFilter() {
return new SAMLMetadataFilter();
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/saml/**").permitAll()
.anyRequest().authenticated()
.and()
.apply(new SAMLConfigurer())
.idpMetadataUrl(idpMetadataUrl)
.spEntityId("urn:example:sp")
.assertionConsumerServiceUrl("/saml/acs")
.and()
.addFilterBefore(metadataFilter(),
UsernamePasswordAuthenticationFilter.class);
}
}</code></pre>
</div>
<div>
<div class="flex justify-between items-center bg-gray-800 text-gray-200 px-4 py-2 rounded-t-md">
<div class="flex items-center">
<i class="fab fa-python mr-2"></i>
<span>Python</span>
</div>
<button class="text-gray-400 hover:text-white copy-btn">
<i class="far fa-copy"></i>
</button>
</div>
<pre class="code-block p-4 rounded-b-md overflow-x-auto"><code>from flask import Flask, request, redirect, session
from flask_saml import SAMLAuthentication
app = Flask(__name__)
app.secret_key = 'your-secret-key'
saml_auth = SAMLAuthentication(
app,
idp_metadata_url='https://idp.example.com/metadata.xml',
sp_entity_id='urn:example:sp',
acs_url='/saml/acs'
)
@app.route('/login')
def login():
return saml_auth.login(relay_state='/dashboard')
@app.route('/saml/acs', methods=['POST'])
def acs():
user = saml_auth.process_response()
session['user'] = user
return redirect(request.form.get('RelayState', '/'))
@app.route('/saml/metadata')
def metadata():
return saml_auth.generate_metadata()</code></pre>
</div>
</div>
</div>
<div>
<h4 class="font-medium mb-3">Related Components</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="border border-gray-200 rounded-md p-4 hover:border-blue-200 hover:bg-blue-50 transition-colors cursor-pointer">
<div class="flex items-center mb-2">
<div class="w-8 h-8 bg-blue-100 rounded-md flex items-center justify-center mr-2">
<i class="fas fa-sign-out-alt text-blue-600"></i>
</div>
<h5 class="font-medium">Single Logout</h5>
</div>
<p class="text-sm text-gray-600">Implement SAML Single Logout (SLO) for session termination</p>
</div>
<div class="border border-gray-200 rounded-md p-4 hover:border-purple-200 hover:bg-purple-50 transition-colors cursor-pointer">
<div class="flex items-center mb-2">
<div class="w-8 h-8 bg-purple-100 rounded-md flex items-center justify-center mr-2">
<i class="fas fa-id-badge text-purple-600"></i>
</div>
<h5 class="font-medium">Attribute Mapping</h5>
</div>
<p class="text-sm text-gray-600">Map SAML attributes to user profile fields</p>
</div>
<div class="border border-gray-200 rounded-md p-4 hover:border-green-200 hover:bg-green-50 transition-colors cursor-pointer">
<div class="flex items-center mb-2">
<div class="w-8 h-8 bg-green-100 rounded-md flex items-center justify-center mr-2">
<i class="fas fa-shield-alt text-green-600"></i>
</div>
<h5 class="font-medium">Security Policies</h5>
</div>
<p class="text-sm text-gray-600">Configure security policies for SAML assertions</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">Feedback</h3>
<div class="flex space-x-2">
<button id="helpful-btn" class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
<i class="far fa-thumbs-up mr-1"></i> Helpful
</button>
<button id="improve-btn" class="px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
<i class="far fa-thumbs-down mr-1"></i> Needs improvement
</button>
</div>
</div>
<textarea id="feedback-text" class="w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="Have feedback about this component? Let us know..."></textarea>
<div class="flex justify-end mt-3">
<button id="submit-feedback" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
Submit Feedback
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Tab switching functionality
const tabs = document.querySelectorAll('nav button');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => {
t.classList.remove('tab-active', 'text-blue-600');
t.classList.add('text-gray-500', 'hover:text-gray-700');
});
tab.classList.add('tab-active', 'text-blue-600');
tab.classList.remove('text-gray-500', 'hover:text-gray-700');
// In a real app, you would load different content here
console.log(`Switched to tab: ${tab.textContent.trim()}`);
});
});
// Copy code functionality
const copyButtons = document.querySelectorAll('.copy-btn');
copyButtons.forEach(button => {
button.addEventListener('click', () => {
const codeBlock = button.closest('div').nextElementSibling;
const code = codeBlock.querySelector('code').textContent;
navigator.clipboard.writeText(code).then(() => {
const icon = button.querySelector('i');
icon.className = 'fas fa-check text-green-400 copy-success';
setTimeout(() => {
icon.className = 'far fa-copy';
}, 2000);
});
});
});
// Feedback functionality
const helpfulBtn = document.getElementById('helpful-btn');
const improveBtn = document.getElementById('improve-btn');
const feedbackText = document.getElementById('feedback-text');
const submitFeedback = document.getElementById('submit-feedback');
let feedbackType = null;
helpfulBtn.addEventListener('click', () => {
feedbackType = 'helpful';
helpfulBtn.classList.add('bg-blue-100', 'text-blue-800');
improveBtn.classList.remove('bg-blue-100', 'text-blue-800');
});
improveBtn.addEventListener('click', () => {
feedbackType = 'needs_improvement';
improveBtn.classList.add('bg-blue-100', 'text-blue-800');
helpfulBtn.classList.remove('bg-blue-100', 'text-blue-800');
});
submitFeedback.addEventListener('click', () => {
if (!feedbackType) {
alert('Please select feedback type first');
return;
}
const feedback = feedbackText.value.trim();
if (!feedback && feedbackType === 'needs_improvement') {
alert('Please provide details about what needs improvement');
return;
}
// In a real app, you would send this to your backend
console.log('Feedback submitted:', {
type: feedbackType,
content: feedback,
component: 'SAML Authentication Flow',
timestamp: new Date().toISOString()
});
alert('Thank you for your feedback!');
feedbackText.value = '';
helpfulBtn.classList.remove('bg-blue-100', 'text-blue-800');
improveBtn.classList.remove('bg-blue-100', 'text-blue-800');
feedbackType = null;
});
// Version dropdown functionality
const versionBtn = document.querySelector('.group button');
versionBtn.addEventListener('click', (e) => {
e.stopPropagation();
const dropdown = document.querySelector('.group .absolute');
dropdown.classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', () => {
const dropdown = document.querySelector('.group .absolute');
if (dropdown && !dropdown.classList.contains('hidden')) {
dropdown.classList.add('hidden');
}
});
// Slider functionality - Fixed version
const securitySlider = document.getElementById('security-level');
const sliderValue = document.getElementById('slider-value');
const securitySettings = document.getElementById('security-settings');
// Initialize slider position
updateSliderValue(securitySlider.value);
securitySlider.addEventListener('input', function() {
updateSliderValue(this.value);
});
function updateSliderValue(value) {
const numericValue = parseInt(value);
let level = '';
let settings = [];
switch(numericValue) {
case 0:
level = 'Low';
settings = [
'128-bit encryption',
'Basic authentication',
'Session timeout: 60 minutes'
];
break;
case 1:
level = 'Medium';
settings = [
'256-bit encryption',
'Password-protected transport',
'Session timeout: 30 minutes'
];
break;
case 2:
level = 'High';
settings = [
'512-bit encryption',
'Multi-factor authentication',
'Session timeout: 15 minutes'
];
break;
}
sliderValue.textContent = level;
// Update security settings
securitySettings.innerHTML = '';
settings.forEach(setting => {
const li = document.createElement('li');
li.textContent = setting;
securitySettings.appendChild(li);
});
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sudzdpn/wireframe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>