Skip to content

Added Templates #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yashhash2 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Added Templates #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1d71bbf
first commit
yashhash2 Jan 10, 2025
6d703ee
pull
yashhash2 Jan 19, 2025
cd49781
fix auth user model
yashhash2 Jan 19, 2025
812578e
Merge branch 'main' of github.com:IEEE-NITK/ContainerOps into yash
yashhash2 Jan 19, 2025
6f1562f
Merge branch 'main' of github.com:IEEE-NITK/ContainerOps into yash
yashhash2 Feb 1, 2025
dfe7406
added templates in frontend
yashhash2 Feb 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions buildServer/api/templates/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <!-- For icons -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.login-container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
}

.login-container h2 {
text-align: center;
margin-bottom: 20px;
}

.input-group {
margin-bottom: 15px;
}

.input-group label {
display: block;
margin-bottom: 5px;
}

.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

.input-group input:focus {
border-color: #66afe9;
outline: none;
}

.button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
border: none;
border-radius: 4px;
color: white;
font-size: 16px;
}

.button:hover {
background-color: #45a049;
}

.error-message {
color: red;
text-align: center;
margin-bottom: 10px;
}


</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
{% if error_message %}
<div class="error-message">{{ error_message }}</div>
{% endif %}
<form method="POST">
{% csrf_token %}
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="button">Login</button>
</form>

</div>
</body>
</html>
16 changes: 16 additions & 0 deletions buildServer/api/templates/register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="{% url 'login' %}">Login here</a>.</p>
</body>
</html>
2 changes: 1 addition & 1 deletion buildServer/api/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,4 +154,4 @@ def run(request):

@login_required
def fetch_giturl(request):
return render(request, 'fetch_giturl.html')
return render(request, 'fetch_giturl.html')
3 changes: 3 additions & 0 deletions buildServer/buildServer/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,7 @@
path('admin/', admin.site.urls),
path('', views.home_page),
path('api/', include('api.urls')),
path('deployments/', views.deploy_page),
path('deployments/new-deploy/',views.new_deploy),

]
4 changes: 4 additions & 0 deletions buildServer/buildServer/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,8 @@
def home_page(request):
return render(request, 'home.html')

def deploy_page(request):
return render(request, 'Deployments.html')

def new_deploy(request):
return render(request,'new_deploy.html')
73 changes: 73 additions & 0 deletions buildServer/templates/Deployments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ContainerOps</title>
<!-- Tailwind CSS CDN (v3.x) -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom Body Font */
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-[#090909] text-[#e0e0e0]">

<!-- Navbar -->
<header class="bg-[#1f1f1f] py-4 px-4 fixed top-0 left-0 w-full z-50 shadow-xl">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-semibold tracking-wide text-white">ContainerOps</h1>
<nav>
<ul class="flex space-x-8">
<li><a href="/" class="text-gray-400 hover:text-blue-500 transition duration-300">Home</a></li>
<li><a href="/logout" class="text-gray-400 hover:text-blue-500 transition duration-300">Logout</a></li>
</ul>
</nav>
</div>
</header>

<!-- Main Content -->
<main class="container mx-auto py-24 px-4 mt-28">
<h2 class="text-3xl font-bold mb-8 text-center text-gray-100">Your Deployments</h2>
<div id="deployments-container" class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-5"></div>
<a href="new-deploy/" class="bg-[#2c2c2c] hover:bg-[#3a3a3a] text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:scale-105">
Deploy new project
</a>
</main>

<!-- Footer -->
<footer class="bg-[#1f1f1f] py-4">
<div class="container mx-auto text-center">
<p class="text-gray-400">&copy; 2023 ContainerOps. All rights reserved.</p>
</div>
</footer>

<script>
const deployments = [
{ name: "Project A", containerId: "abc123", status: "Running", url: "https://project-a.containerops.dev" },
{ name: "Project B", containerId: "def456", status: "Running", url: "https://project-b.containerops.dev" },
{ name: "Project C", containerId: "ghi789", status: "Running", url: "https://project-c.containerops.dev" }
];

function createCard(deployment) {
return `
<div class="bg-[#1a1a1a] rounded-lg p-6 shadow-md hover:shadow-xl">
<h3 class="text-2xl font-bold mb-4 text-gray-100">${deployment.name}</h3>
<p class="mb-2 text-gray-300">Container ID: ${deployment.containerId}</p>
<p class="mb-2 text-gray-300">Status: ${deployment.status}</p>
<a href="${deployment.url}" class="text-blue-500 hover:text-blue-400 mb-4" target="_blank">URL: ${deployment.url}</a>
<button class="bg-[#2c2c2c] hover:bg-[#3a3a3a] text-white font-bold py-2 px-4 rounded-full mt-5">View Logs</button>
</div>
`;
}

const container = document.getElementById('deployments-container');
deployments.forEach(deployment => {
container.innerHTML += createCard(deployment);
});
</script>

</body>
</html>
100 changes: 52 additions & 48 deletions buildServer/templates/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,52 @@
{% extends 'layout.html'%}

{% block title%}
Hello
{%endblock%}

{% block navbar %}

{% comment %} Have the logout button only when you have logged in {% endcomment %}
{%if user.is_authenticated%}

<a href="{%url 'api:fetch_giturl'%}" class="no-underline">

<button type="submit" class="no-underline text-2xl text-[black] rounded-[5px] border-0">Deploy</button> |
</a>

<a href="{%url 'api:logout'%}" class="no-underline">

<button type="submit" class="no-underline text-2xl text-[black] rounded-[5px] border-0">Logout</button> |
</a>


{%else%}


<a href="{%url 'api:signup'%}" class="no-underline">

<button type="submit" class="no-underline text-2xl text-[black] rounded-[5px] border-0">Signup</button> |
</a>

<a href="{%url 'api:login'%}" class="no-underline" >

<button type="submit" class="no-underline text-2xl text-[black] rounded-[5px] border-0">Login</button> |
</a>

{%endif%}

{%endblock%}

{%block content%}
{%if user.is_authenticated%}

Hii {{user.username}}!

{%else%}
Hello
{%endif%}
{% endblock %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ContainerOps</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom Body Font */
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class=" bg-[#090909] text-[#e0e0e0]">

<!-- Navbar -->
<nav class="bg-[#1f1f1f] p-6 fixed top-0 left-0 w-full z-50 shadow-xl">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white text-2xl font-semibold tracking-wide">ContainerOps</div>
<ul class="flex space-x-8">
<li><a href="#" class="text-gray-400 hover:text-blue-500 transition duration-300">Home</a></li>
<li><a href="deployments/" class="text-gray-400 hover:text-blue-500 transition duration-300">Deployments</a></li>
<li><a href="#" class="text-gray-400 hover:text-blue-500 transition duration-300">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-blue-500 transition duration-300">Contact</a></li>
</ul>
</div>
</nav>

<!-- Main Content -->
<div class="mt-24 flex justify-center items-center min-h-screen px-4">
<div class=" bg-[#111111] p-10 rounded-2xl shadow-2xl max-w-md w-full">
<h1 class="text-4xl font-bold text-center text-gray-100 mb-8">Welcome to ContainerOps</h1>
<p class="text-center text-gray-300 mb-8">Deploy your GitHub projects with ease. Enter your GitHub URL below to get started.</p>

<input type="text" id="github-url" placeholder="Enter GitHub URL" class="w-full p-4 mb-6 border border-gray-600 rounded-lg bg-[#1a1a1a] text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

<button onclick="deploy()" class="w-full bg-[#2c2c2c] text-white p-4 rounded-lg mb-4 hover:bg-[#3a3a3a] transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500">Deploy</button>

</div>
</div>

<script>
function deploy() {
var githubUrl = document.getElementById('github-url').value;
console.log("Deploying project from:", githubUrl);
}
</script>

</body>
</html>
Loading