android-studio-webapp / index.html
SSeek's picture
Add 3 files
6b58deb verified
Raw History Blame Contribute Delete
30.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AndroCode - Collaborative Android IDE</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>
.editor-container {
grid-template-columns: 250px 1fr 300px;
}
.code-editor {
font-family: 'Fira Code', monospace;
}
.android-studio-theme {
background-color: #2b2b2b;
color: #a9b7c6;
}
.android-green {
background-color: #3ddc84;
}
.android-blue {
background-color: #4285f4;
}
.xml-tag {
color: #e8bf6a;
}
.xml-attr {
color: #a5c261;
}
.kotlin-keyword {
color: #cc7832;
}
.kotlin-function {
color: #ffc66d;
}
.preview-container {
background: linear-gradient(45deg, #2b2b2b 25%, #3c3f41 25%, #3c3f41 50%, #2b2b2b 50%, #2b2b2b 75%, #3c3f41 75%, #3c3f41 100%);
background-size: 10px 10px;
}
.device-frame {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="600" viewBox="0 0 300 600"><rect x="10" y="10" width="280" height="580" rx="20" fill="none" stroke="%23ffffff20" stroke-width="2"/></svg>');
background-repeat: no-repeat;
background-position: center;
}
.tab-active {
border-bottom: 2px solid #3ddc84;
}
.cm-scroller {
overflow: auto;
height: 100%;
}
.chat-message.ai {
background-color: #2d3748;
}
.chat-message.user {
background-color: #3c3f41;
}
.gradient-border {
border: 1px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(#2b2b2b, #2b2b2b), linear-gradient(to right, #3ddc84, #4285f4);
}
</style>
</head>
<body class="bg-gray-900 text-gray-200 h-screen overflow-hidden">
<div class="flex flex-col h-full">
<!-- Top Navigation -->
<header class="bg-gray-800 py-2 px-4 flex items-center justify-between border-b border-gray-700">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<i class="fab fa-android text-2xl text-green-400 mr-2"></i>
<h1 class="text-xl font-bold">AndroCode</h1>
</div>
<nav class="hidden md:flex space-x-4">
<button class="hover:text-green-400">File</button>
<button class="hover:text-green-400">Edit</button>
<button class="hover:text-green-400">View</button>
<button class="hover:text-green-400">Build</button>
<button class="hover:text-green-400">Run</button>
<button class="hover:text-green-400">Tools</button>
<button class="hover:text-green-400">Help</button>
</nav>
</div>
<div class="flex items-center space-x-3">
<div class="relative">
<input type="text" placeholder="Search (Ctrl+P)" class="bg-gray-700 px-3 py-1 rounded text-sm w-64 focus:outline-none focus:ring-1 focus:ring-green-400">
<i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<button class="bg-green-500 hover:bg-green-600 px-3 py-1 rounded text-sm flex items-center">
<i class="fas fa-play mr-1"></i> Run
</button>
<button class="bg-blue-500 hover:bg-blue-600 px-3 py-1 rounded text-sm flex items-center">
<i class="fas fa-share-alt mr-1"></i> Share
</button>
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
<i class="fas fa-user"></i>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="flex flex-1 overflow-hidden">
<!-- Left Sidebar - Project Files -->
<div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
<div class="p-3 border-b border-gray-700 flex justify-between items-center">
<h2 class="font-medium">PROJECT</h2>
<div class="flex space-x-2">
<button class="text-gray-400 hover:text-white">
<i class="fas fa-ellipsis-h"></i>
</button>
<button class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="flex-1 overflow-y-auto">
<div class="p-2">
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-700 rounded cursor-pointer">
<div class="flex items-center">
<i class="fas fa-folder text-yellow-400 mr-2"></i>
<span>app</span>
</div>
<i class="fas fa-chevron-down text-xs text-gray-400"></i>
</div>
<div class="pl-6">
<div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer">
<i class="fas fa-folder text-yellow-400 mr-2"></i>
<span>src</span>
</div>
<div class="pl-6">
<div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer">
<i class="fas fa-folder text-yellow-400 mr-2"></i>
<span>main</span>
</div>
<div class="pl-6">
<div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer">
<i class="fas fa-folder text-yellow-400 mr-2"></i>
<span>java</span>
</div>
<div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer">
<i class="fas fa-folder text-yellow-400 mr-2"></i>
<span>res</span>
</div>
<div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer bg-gray-700">
<i class="fab fa-android text-green-400 mr-2"></i>
<span>AndroidManifest.xml</span>
</div>
</div>
</div>
</div>
<div class="flex items-center py-1 px-2 hover:bg-gray-700 rounded cursor-pointer">
<i class="fas fa-file-code text-blue-400 mr-2"></i>
<span>build.gradle</span>
</div>
</div>
</div>
<div class="p-3 border-t border-gray-700">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium">ANDROID STUDIO</h3>
<i class="fas fa-plug text-green-400"></i>
</div>
<div class="text-xs text-gray-400 mb-2">Connected to: Local Studio</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 py-1 rounded text-sm flex items-center justify-center">
<i class="fas fa-sync-alt mr-2"></i> Sync Now
</button>
</div>
</div>
<!-- Main Editor Area -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Editor Tabs -->
<div class="bg-gray-800 border-b border-gray-700 flex items-center overflow-x-auto">
<div class="flex">
<div class="px-3 py-2 flex items-center border-r border-gray-700 tab-active">
<i class="fab fa-android text-green-400 mr-2"></i>
<span>MainActivity.kt</span>
<button class="ml-2 text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="px-3 py-2 flex items-center border-r border-gray-700">
<i class="fas fa-file-code text-blue-400 mr-2"></i>
<span>activity_main.xml</span>
<button class="ml-2 text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="px-3 py-2 flex items-center border-r border-gray-700">
<i class="fas fa-file-alt text-purple-400 mr-2"></i>
<span>build.gradle</span>
<button class="ml-2 text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>
<!-- Code Editor and Preview -->
<div class="flex-1 flex overflow-hidden">
<!-- Code Editor -->
<div class="flex-1 overflow-hidden flex flex-col android-studio-theme">
<div class="code-editor flex-1 overflow-auto p-4">
<div class="text-sm">
<div><span class="kotlin-keyword">package</span> com.example.myapplication</div>
<br>
<div><span class="kotlin-keyword">import</span> androidx.appcompat.app.AppCompatActivity</div>
<div><span class="kotlin-keyword">import</span> android.os.Bundle</div>
<div><span class="kotlin-keyword">import</span> androidx.lifecycle.ViewModelProvider</div>
<div><span class="kotlin-keyword">import</span> com.example.myapplication.databinding.ActivityMainBinding</div>
<br>
<div><span class="kotlin-keyword">class</span> <span class="text-white">MainActivity</span> : <span class="text-blue-400">AppCompatActivity</span>() {</div>
<div class="ml-4"><span class="kotlin-keyword">private</span> <span class="kotlin-keyword">lateinit</span> <span class="kotlin-keyword">var</span> binding: ActivityMainBinding</div>
<div class="ml-4"><span class="kotlin-keyword">private</span> <span class="kotlin-keyword">lateinit</span> <span class="kotlin-keyword">var</span> viewModel: MainViewModel</div>
<br>
<div class="ml-4"><span class="kotlin-keyword">override</span> <span class="kotlin-keyword">fun</span> <span class="kotlin-function">onCreate</span>(savedInstanceState: Bundle?) {</div>
<div class="ml-8"><span class="kotlin-keyword">super</span>.<span class="kotlin-function">onCreate</span>(savedInstanceState)</div>
<div class="ml-8">binding = ActivityMainBinding.<span class="kotlin-function">inflate</span>(layoutInflater)</div>
<div class="ml-8"><span class="kotlin-function">setContentView</span>(binding.root)</div>
<br>
<div class="ml-8">viewModel = ViewModelProvider(<span class="kotlin-keyword">this</span>).<span class="kotlin-function">get</span>(MainViewModel::<span class="kotlin-keyword">class</span>.java)</div>
<br>
<div class="ml-8"><span class="kotlin-function">setupRecyclerView</span>()</div>
<div class="ml-8"><span class="kotlin-function">observeViewModel</span>()</div>
<div class="ml-4">}</div>
<br>
<div class="ml-4"><span class="kotlin-keyword">private</span> <span class="kotlin-keyword">fun</span> <span class="kotlin-function">setupRecyclerView</span>() {</div>
<div class="ml-8"><span class="kotlin-keyword">val</span> adapter = ItemAdapter { item -></div>
<div class="ml-12"><span class="kotlin-function">showItemDetails</span>(item)</div>
<div class="ml-8">}</div>
<div class="ml-8">binding.recyclerView.adapter = adapter</div>
<div class="ml-8">binding.recyclerView.layoutManager = LinearLayoutManager(<span class="kotlin-keyword">this</span>)</div>
<div class="ml-4">}</div>
<br>
<div class="ml-4"><span class="kotlin-keyword">private</span> <span class="kotlin-keyword">fun</span> <span class="kotlin-function">observeViewModel</span>() {</div>
<div class="ml-8">viewModel.items.observe(<span class="kotlin-keyword">this</span>) { items -></div>
<div class="ml-12">(binding.recyclerView.adapter <span class="kotlin-keyword">as</span> ItemAdapter).<span class="kotlin-function">submitList</span>(items)</div>
<div class="ml-8">}</div>
<div class="ml-4">}</div>
<div>}</div>
</div>
</div>
<div class="bg-gray-800 border-t border-gray-700 p-2 flex justify-between items-center">
<div class="text-xs text-gray-400">
<span>UTF-8</span>
<span class="mx-2">|</span>
<span>Kotlin</span>
<span class="mx-2">|</span>
<span>Android</span>
</div>
<div class="flex items-center space-x-4">
<div class="text-xs text-gray-400">
<span>Ln 24, Col 12</span>
</div>
<button class="text-gray-400 hover:text-white">
<i class="fas fa-terminal"></i>
</button>
<button class="text-gray-400 hover:text-white">
<i class="fas fa-bug"></i>
</button>
</div>
</div>
</div>
<!-- Right Sidebar - Preview and Chat -->
<div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col">
<!-- Preview Tabs -->
<div class="flex border-b border-gray-700">
<button class="flex-1 py-2 text-center border-b-2 border-green-400">
<i class="fas fa-mobile-screen mr-1"></i> Preview
</button>
<button class="flex-1 py-2 text-center text-gray-400 hover:text-white">
<i class="fas fa-comment-dots mr-1"></i> Chat
</button>
<button class="flex-1 py-2 text-center text-gray-400 hover:text-white">
<i class="fas fa-users mr-1"></i> Collab
</button>
</div>
<!-- Preview Content -->
<div class="flex-1 overflow-auto preview-container p-4">
<div class="bg-gray-900 rounded-lg p-4 mb-4">
<h3 class="text-sm font-medium mb-2">XML Preview</h3>
<div class="text-xs bg-gray-800 p-2 rounded overflow-x-auto">
<div><span class="xml-tag">&lt;<span class="text-white">androidx.constraintlayout.widget.ConstraintLayout</span></span></div>
<div class="ml-4"><span class="xml-attr">xmlns:android</span>=<span class="text-blue-300">"http://schemas.android.com/apk/res/android"</span></div>
<div class="ml-4"><span class="xml-attr">xmlns:app</span>=<span class="text-blue-300">"http://schemas.android.com/apk/res-auto"</span></div>
<div class="ml-4"><span class="xml-attr">android:layout_width</span>=<span class="text-blue-300">"match_parent"</span></div>
<div class="ml-4"><span class="xml-attr">android:layout_height</span>=<span class="text-blue-300">"match_parent"</span><span class="xml-tag">&gt;</span></div>
<br>
<div class="ml-4"><span class="xml-tag">&lt;<span class="text-white">androidx.recyclerview.widget.RecyclerView</span></span></div>
<div class="ml-8"><span class="xml-attr">android:id</span>=<span class="text-blue-300">"@+id/recyclerView"</span></div>
<div class="ml-8"><span class="xml-attr">android:layout_width</span>=<span class="text-blue-300">"match_parent"</span></div>
<div class="ml-8"><span class="xml-attr">android:layout_height</span>=<span class="text-blue-300">"match_parent"</span></div>
<div class="ml-8"><span class="xml-attr">app:layoutManager</span>=<span class="text-blue-300">"androidx.recyclerview.widget.LinearLayoutManager"</span></div>
<div class="ml-8"><span class="xml-attr">app:layout_constraintBottom_toBottomOf</span>=<span class="text-blue-300">"parent"</span></div>
<div class="ml-8"><span class="xml-attr">app:layout_constraintLeft_toLeftOf</span>=<span class="text-blue-300">"parent"</span></div>
<div class="ml-8"><span class="xml-attr">app:layout_constraintRight_toRightOf</span>=<span class="text-blue-300">"parent"</span></div>
<div class="ml-8"><span class="xml-attr">app:layout_constraintTop_toTopOf</span>=<span class="text-blue-300">"parent"</span> <span class="xml-tag">/&gt;</span></div>
<br>
<div><span class="xml-tag">&lt;/<span class="text-white">androidx.constraintlayout.widget.ConstraintLayout</span>&gt;</span></div>
</div>
</div>
<div class="bg-gray-900 rounded-lg p-4">
<h3 class="text-sm font-medium mb-2">Device Preview</h3>
<div class="device-frame h-64 flex items-center justify-center relative">
<div class="bg-gray-800 rounded-lg w-48 h-80 p-2">
<div class="bg-gray-700 rounded h-full flex flex-col">
<div class="p-2 bg-gray-600 rounded-t flex justify-between items-center">
<span class="text-xs font-medium">My App</span>
<i class="fas fa-ellipsis-v text-xs"></i>
</div>
<div class="flex-1 overflow-auto p-2">
<div class="bg-gray-800 rounded p-2 mb-2">
<div class="text-sm font-medium">Item 1</div>
<div class="text-xs text-gray-400">Description for item 1</div>
</div>
<div class="bg-gray-800 rounded p-2 mb-2">
<div class="text-sm font-medium">Item 2</div>
<div class="text-xs text-gray-400">Description for item 2</div>
</div>
<div class="bg-gray-800 rounded p-2">
<div class="text-sm font-medium">Item 3</div>
<div class="text-xs text-gray-400">Description for item 3</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Chat Input -->
<div class="border-t border-gray-700 p-3">
<div class="relative">
<input type="text" placeholder="Ask AndroCode to generate code..." class="w-full bg-gray-700 rounded py-2 px-3 pr-10 focus:outline-none focus:ring-1 focus:ring-green-400">
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-green-400">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Status Bar -->
<footer class="bg-gray-800 py-1 px-3 text-xs flex justify-between items-center border-t border-gray-700">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<i class="fas fa-branch text-gray-400 mr-1"></i>
<span>main</span>
</div>
<div class="flex items-center">
<i class="fas fa-plug text-green-400 mr-1"></i>
<span>Android Studio Connected</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-400 mr-1"></i>
<span>No errors</span>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center">
<i class="fas fa-mobile-alt text-blue-400 mr-1"></i>
<span>Pixel 5 API 33</span>
</div>
<div class="flex items-center">
<i class="fas fa-code text-purple-400 mr-1"></i>
<span>Kotlin 1.8.0</span>
</div>
<div class="flex items-center">
<i class="fas fa-terminal text-yellow-400 mr-1"></i>
<span>Gradle 7.4</span>
</div>
</div>
</footer>
</div>
<script>
// Simulate Android Studio connection
document.querySelector('.fa-plug').addEventListener('click', function() {
const status = document.querySelector('footer span:nth-child(2)');
if (status.textContent === 'Android Studio Connected') {
status.textContent = 'Android Studio Disconnected';
this.classList.remove('text-green-400');
this.classList.add('text-red-400');
} else {
status.textContent = 'Android Studio Connected';
this.classList.remove('text-red-400');
this.classList.add('text-green-400');
}
});
// Simulate chat functionality
const chatInput = document.querySelector('input[placeholder="Ask AndroCode to generate code..."]');
chatInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const message = this.value;
if (message.trim() !== '') {
// In a real app, this would call the DeepSeek API
simulateAIResponse(message);
this.value = '';
}
}
});
function simulateAIResponse(message) {
const previewContainer = document.querySelector('.preview-container');
// Create user message
const userMsg = document.createElement('div');
userMsg.className = 'chat-message user p-3 mb-2 rounded';
userMsg.innerHTML = `<div class="flex items-start">
<div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center mr-2">
<i class="fas fa-user text-xs"></i>
</div>
<div>${message}</div>
</div>`;
previewContainer.insertBefore(userMsg, previewContainer.lastElementChild);
// Simulate AI thinking
const thinking = document.createElement('div');
thinking.className = 'chat-message ai p-3 mb-2 rounded text-gray-400 italic';
thinking.textContent = 'AndroCode is thinking...';
previewContainer.insertBefore(thinking, previewContainer.lastElementChild);
// Scroll to bottom
previewContainer.scrollTop = previewContainer.scrollHeight;
// After delay, show response
setTimeout(() => {
previewContainer.removeChild(thinking);
const aiMsg = document.createElement('div');
aiMsg.className = 'chat-message ai p-3 mb-2 rounded';
let response = '';
if (message.toLowerCase().includes('recyclerview')) {
response = `Here's how to improve your RecyclerView setup:<br><br>
<div class="bg-gray-700 p-2 rounded text-sm font-mono">
// Add this to your ViewModel<br>
private val _items = MutableLiveData&lt;List&lt;Item&gt;&gt;()<br>
val items: LiveData&lt;List&lt;Item&gt;&gt; = _items<br><br>
// Then in your Activity<br>
binding.recyclerView.addItemDecoration(DividerItemDecoration(this, LinearLayoutManager.VERTICAL))<br>
binding.recyclerView.setHasFixedSize(true)<br>
</div>`;
} else if (message.toLowerCase().includes('viewmodel')) {
response = `For better ViewModel implementation, consider using Kotlin property delegation:<br><br>
<div class="bg-gray-700 p-2 rounded text-sm font-mono">
// Add this to your Activity<br>
private val viewModel: MainViewModel by viewModels()<br><br>
// Requires this dependency in build.gradle:<br>
implementation "androidx.activity:activity-ktx:1.6.1"<br>
</div>`;
} else {
response = `I can help you with Android development tasks. Try asking about:<br>
- Creating a new Activity<br>
- Setting up Retrofit for API calls<br>
- Implementing Room database<br>
- Jetpack Compose layouts`;
}
aiMsg.innerHTML = `<div class="flex items-start">
<div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center mr-2">
<i class="fab fa-android text-xs"></i>
</div>
<div>${response}</div>
</div>`;
previewContainer.insertBefore(aiMsg, previewContainer.lastElementChild);
previewContainer.scrollTop = previewContainer.scrollHeight;
}, 1500);
}
// Simulate tab switching
const tabs = document.querySelectorAll('.flex-1.py-2.text-center');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
tabs.forEach(t => t.classList.remove('border-green-400', 'text-white'));
tabs.forEach(t => t.classList.add('text-gray-400'));
this.classList.remove('text-gray-400');
this.classList.add('border-green-400', 'text-white');
});
});
</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=SSeek/android-studio-webapp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>