Updated UI in index.html

TransmitSecurity · Nov 14, 2024 · 7e01675 · 7e01675
1 parent 58ff433
commit 7e01675
Showing 1 changed file with 155 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -3,13 +3,162 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>IDO RASP Demo App</title>
+<title>Transmit Security</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+        padding: 20px;
+        max-width: 800px;
+        margin: auto;
+    }
+    .tabs {
+        display: flex;
+        margin-bottom: 20px;
+        cursor: pointer;
+    }
+    .tab {
+        flex: 1;
+        padding: 10px;
+        text-align: center;
+        background-color: #007bf4;
+        color: #fff;
+        border-radius: 5px 5px 0 0;
+        margin-right: 2px;
+        transition: background-color 0.2s;
+    }
+    .tab:hover {
+        background-color: #0056b3;
+    }
+    .tab.active {
+        background-color: #0056b3;
+    }
+    .tab-content {
+        display: none;
+        background-color: #fff;
+        padding: 15px;
+        border-radius: 0 5px 5px 5px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .tab-content.active {
+        display: block;
+    }
+    .app-container {
+        margin-bottom: 20px;
+    }
+    .app-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .app-title {
+        font-size: 1.2em;
+        font-weight: bold;
+    }
+    .app-version {
+        color: #666;
+        font-size: 0.9em;
+    }
+    .app-description {
+        margin: 10px 0;
+        color: #333;
+    }
+    .download-button {
+        display: inline-block;
+        padding: 10px 20px;
+        background-color: #007bff;
+        color: #fff;
+        text-decoration: none;
+        border-radius: 5px;
+        transition: background-color 0.2s;
+    }
+    .download-button:hover {
+        background-color: #0056b3;
+    }
+</style>
 </head>
 <body>
-<h1>Install IDO RASP Demo App</h1>
-<p>Click the button below to install the app:</p>
-<a href="itms-services://?action=download-manifest&url=https://transmitsecurity.github.io/ios-demo-apps/Apps/IDO/RASP/manifest.plist">
-    <button>Install App</button>
-</a>
+
+<h1>Transmit Security</h1>
+<h2>iOS Demo Apps</h2>
+
+<!-- Tabs -->
+<div class="tabs">
+    <div class="tab active" onclick="openTab(event, 'ido')">IDO</div>
+    <div class="tab" onclick="openTab(event, 'idv')">IDV</div>
+    <div class="tab" onclick="openTab(event, 'drs')">DRS</div>
+    <div class="tab" onclick="openTab(event, 'authentication')">Authentication</div>
+</div>
+
+<!-- IDO Tab Content -->
+<div id="ido" class="tab-content active">
+    <div class="app-container">
+        <div class="app-header">
+            <span class="app-title">IDO RASP Demo App</span>
+            <span class="app-version">Version: 1.0.0</span>
+        </div>
+        <p class="app-description">Showcases the capabilities of Runtime Application Self-Protection (RASP) for iOS applications.</p>
+        <a href="itms-services://?action=download-manifest&url=https://transmitsecurity.github.io/ios-demo-apps/Apps/IDO/RASP/manifest.plist">
+        <button>Install App</button>
+    </div>
+</div>
+
+<!-- IDV Tab Content -->
+<div id="idv" class="tab-content">
+    <div class="app-container">
+        <div class="app-header">
+            <span class="app-title">IDV Demo App</span>
+            <span class="app-version">Version: 1.0.0</span>
+        </div>
+        <p class="app-description">Showcases the capabilities of IDV SDK.</p>
+        <a href="itms-services://?action=download-manifest&url=https://transmitsecurity.github.io/ios-demo-apps/Apps/IDO/RASP/manifest.plist">
+        <button>Install App</button>
+    </div>
+</div>
+
+<!-- DRS Tab Content -->
+<div id="drs" class="tab-content">
+    <div class="app-container">
+        <div class="app-header">
+            <span class="app-title">DRS Demo App</span>
+            <span class="app-version">Version: 1.0.0</span>
+        </div>
+        <p class="app-description">Showcases the capabilities of DRS SDK.</p>
+        <a href="itms-services://?action=download-manifest&url=https://transmitsecurity.github.io/ios-demo-apps/Apps/IDO/RASP/manifest.plist">
+        <button>Install App</button>
+    </div>
+</div>
+
+<!-- Authentication Tab Content -->
+<div id="authentication" class="tab-content">
+    <div class="app-container">
+        <div class="app-header">
+            <span class="app-title">Authentication Demo App</span>
+            <span class="app-version">Version: 1.0.0</span>
+        </div>
+        <p class="app-description">Showcases the capabilities of Authentication SDK.</p>
+        <a href="itms-services://?action=download-manifest&url=https://transmitsecurity.github.io/ios-demo-apps/Apps/IDO/RASP/manifest.plist">
+        <button>Install App</button>
+    </div>
+</div>
+
+<script>
+    function openTab(event, tabName) {
+        // Hide all tab content
+        const tabContents = document.querySelectorAll('.tab-content');
+        tabContents.forEach(content => content.classList.remove('active'));
+
+        // Remove active class from all tabs
+        const tabs = document.querySelectorAll('.tab');
+        tabs.forEach(tab => tab.classList.remove('active'));
+
+        // Show the clicked tab's content and set the tab as active
+        document.getElementById(tabName).classList.add('active');
+        event.currentTarget.classList.add('active');
+    }
+</script>
+
 </body>
 </html>
+
+