Kvphanikumar/self-learning-synapse-surfer
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Automation | Synapse Surfer</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11</head>12<body class="bg-gray-900 text-white min-h-screen flex flex-col">13 <custom-navbar></custom-navbar>14 15 <main class="flex-grow container mx-auto px-4 py-8">16 <div class="max-w-6xl mx-auto">17 <h1 class="text-3xl font-bold mb-6 flex items-center gap-2">18 <i data-feather="terminal" class="text-purple-400"></i>19 Task Automation20 </h1>21 22 <div class="grid md:grid-cols-2 gap-8 mb-8">23 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700 mb-8">24<h2 class="text-xl font-semibold mb-4">Connected Devices</h2>25 <div class="space-y-3">26 <div class="flex items-center gap-3 p-3 bg-gray-700 rounded-lg">27 <i data-feather="monitor" class="text-blue-400"></i>28 <span>Workstation PC</span>29 <div class="ml-auto w-2 h-2 rounded-full bg-green-400"></div>30 </div>31 <div class="flex items-center gap-3 p-3 bg-gray-700 rounded-lg">32 <i data-feather="smartphone" class="text-purple-400"></i>33 <span>Android Phone</span>34 <div class="ml-auto w-2 h-2 rounded-full bg-green-400"></div>35 </div>36 <div class="flex items-center gap-3 p-3 bg-gray-700 rounded-lg">37 <i data-feather="home" class="text-green-400"></i>38 <span>Smart Home Hub</span>39 <div class="ml-auto w-2 h-2 rounded-full bg-yellow-400"></div>40 </div>41 </div>42 </div>43 44 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700">45 <h2 class="text-xl font-semibold mb-4">Automation Tasks</h2>46 <div class="space-y-3">47 <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">48 <div class="flex items-center gap-2">49 <i data-feather="clock" class="text-blue-400"></i>50 <span>Daily Stock Report</span>51 </div>52 <div class="flex gap-2">53 <button class="p-1 rounded hover:bg-gray-600" onclick="window.ai.triggerAutomation('daily_report')">54 <i data-feather="play" class="w-4 h-4"></i>55 </button>56<button class="p-1 rounded hover:bg-gray-600">57 <i data-feather="settings" class="w-4 h-4"></i>58 </button>59 </div>60 </div>61 <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">62 <div class="flex items-center gap-2">63 <i data-feather="cloud" class="text-purple-400"></i>64 <span>Backup System</span>65 </div>66 <div class="flex gap-2">67 <button class="p-1 rounded hover:bg-gray-600">68 <i data-feather="play" class="w-4 h-4"></i>69 </button>70 <button class="p-1 rounded hover:bg-gray-600">71 <i data-feather="settings" class="w-4 h-4"></i>72 </button>73 </div>74 </div>75 <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">76 <div class="flex items-center gap-2">77 <i data-feather="trending-up" class="text-green-400"></i>78 <span>Market Analysis</span>79 </div>80 <div class="flex gap-2">81 <button class="p-1 rounded hover:bg-gray-600">82 <i data-feather="play" class="w-4 h-4"></i>83 </button>84 <button class="p-1 rounded hover:bg-gray-600">85 <i data-feather="settings" class="w-4 h-4"></i>86 </button>87 </div>88 </div>89 </div>90 </div>91 </div>92 93 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 border border-gray-700">94 <h2 class="text-xl font-semibold mb-4">Create New Automation</h2>95 <div class="grid md:grid-cols-3 gap-4">96 <button class="p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition flex flex-col items-center gap-2">97 <i data-feather="code" class="w-8 h-8 text-blue-400"></i>98 <span>Code Script</span>99 </button>100 <button class="p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition flex flex-col items-center gap-2">101 <i data-feather="bar-chart-2" class="w-8 h-8 text-purple-400"></i>102 <span>Trading Bot</span>103 </button>104 <button class="p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition flex flex-col items-center gap-2">105 <i data-feather="home" class="w-8 h-8 text-green-400"></i>106 <span>Smart Home</span>107 </button>108 </div>109 </div>110 111 <automation-control></automation-control>112 </div>113 </main>114<custom-footer></custom-footer>115 116 <script src="components/navbar.js"></script>117 <script src="components/footer.js"></script>118 <script src="script.js"></script>119 <script>feather.replace();</script>120</body>121</html>