Hugging Face's logo

Spaces:
Wavetype
/
autoverse-exotics
Running

App Files Community
Wavetype commited on
Commit
67efaec
·
verified ·
1 Parent(s): 6359868

That looks like a design for a full-stack web application. Based on the uploaded diagrams, the app called https://www.Godsrods.online appears to use a client-server architecture to manage user logins, display a front-end interface, handle backend logic, and interact with a database.

Browse files

Here is an explanation of how the application would function, broken down by component.
💻 Application Functionality Overview
The app's function revolves around the interaction between the Front End (Client), the Back End (Server), and the SQL Database.
1. Front End (Client-Side)
The Front End is what the user sees and interacts with in their web browser (the pink box labeled "Front End"). It handles the user interface and presentation.
* HTML: Provides the basic structure and content of the web pages.
* Py (likely Python for the browser, or potentially a Python framework like Flask/Django that renders pages): While Python is typically a backend language, its inclusion here might suggest using a framework that helps render dynamic HTML or an advanced client-side library (though less common than JavaScript).
* Jsx (JavaScript XML): This is a syntax extension often used with React to describe the structure of the UI. It suggests the front end is a modern Single Page Application (SPA) that handles dynamic content updates.
* .glb (GLB File): This file type is a binary format for 3D models (GL Transmission Format). Its inclusion strongly suggests the app displays interactive 3D graphics (e.g., cars or models, given the domain name "Godsrods").
2. User Interaction and Data Flow
* Homepage Access: A user navigates to the URL. The browser requests the necessary HTML, Jsx, and Python/JS files from the server.
* User Login: The user enters credentials, which the front end sends to the Express.js (Backend).
* Data Request: The backend validates the credentials against the SQL Database information (which includes User Password).
* Session Establishment: Upon successful login, the backend sends session information back to the front end. The front end then displays the Username and uses the returned variables, such as GTR Tokens Balance and Cash Balance, to personalize the user's view.
3. Back End (Server-Side)
The Express.js (Backend) component (Orange box) acts as the brain, processing user requests and communicating with the database.
* API Endpoints: The front end sends requests (like login attempts, retrieving a listing, or using an admin control) to the Express.js server.
* Business Logic: Express.js contains the code to implement the app's features, such as:
* Authentication/Authorization: Checking the validity of user logins and determining if a user has Admin Privileges.
* Data Manipulation: Performing the actions requested by the user or admin, which often involves querying or modifying the database.
4. SQL Database
The SQL Database (Blue box) is the persistent data storage for the entire application.
* Variables Storage: Stores user-specific data like GTR Tokens Balance, Username, and User Password.
* Database Objects (admin): These objects define the structure and the available manipulation actions for the core data, likely related to a car marketplace. The listed actions include:
* Rename String to Car/User
* Add/Remove listing
* Marketplace table fields: listing.car.marketplace.price.date.sale.date, listing.car.marketplace.price.date.sale.price, etc.
* Admin Controls: The database is where the logic and permissions for Drag and Drop GUI and defining Admin Privileges are stored and managed, allowing administrators to modify the application's content or structure.
The overall function is to provide a dynamic marketplace experience, potentially involving 3D models (.glb), where users can log in and view listings managed by an administrator through a specific interface.
Would you like me to suggest specific technologies (like React, Node.js) that are commonly associated with this kind of design?

Files changed (9) hide show
  1. README.md +8 -5
  2. components/car-card.js +57 -0
  3. components/filter-sidebar.js +131 -0
  4. components/footer.js +76 -0
  5. components/navbar.js +124 -0
  6. index.html +98 -19
  7. marketplace.html +111 -0
  8. script.js +51 -0
  9. style.css +52 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Autoverse Exotics
3
- emoji: 🐢
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: AutoVerse Exotics 🚗💨
3
+ colorFrom: pink
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/car-card.js ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomCarCard extends HTMLElement {
2
+ connectedCallback() {
3
+ const title = this.getAttribute('title') || 'Classic Car';
4
+ const price = this.getAttribute('price') || '0';
5
+ const tokens = this.getAttribute('tokens') || '0';
6
+ const image = this.getAttribute('image') || 'http://static.photos/automotive/640x360/99';
7
+ const model = this.getAttribute('model') || '#';
8
+
9
+ this.attachShadow({ mode: 'open' });
10
+ this.shadowRoot.innerHTML = `
11
+ <style>
12
+ .card {
13
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
14
+ }
15
+ .card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
18
+ }
19
+ .price-tag {
20
+ background: linear-gradient(135deg, #3b82f6, #6366f1);
21
+ }
22
+ .token-tag {
23
+ background: linear-gradient(135deg, #10b981, #059669);
24
+ }
25
+ </style>
26
+ <a href="${model}" class="card block bg-white rounded-xl overflow-hidden shadow-md">
27
+ <!-- Image/Model Preview -->
28
+ <div class="relative h-48 bg-gray-100">
29
+ <img src="${image}" alt="${title}" class="w-full h-full object-cover">
30
+ <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition"></div>
31
+ </div>
32
+
33
+ <!-- Content -->
34
+ <div class="p-4">
35
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">${title}</h3>
36
+
37
+ <div class="flex justify-between items-center">
38
+ <div>
39
+ <div class="price-tag text-white text-sm font-medium px-3 py-1 rounded-full inline-block">
40
+ $${price}
41
+ </div>
42
+ <div class="token-tag text-white text-sm font-medium px-3 py-1 rounded-full inline-block ml-2">
43
+ ${tokens} GTR
44
+ </div>
45
+ </div>
46
+
47
+ <button class="text-blue-600 hover:text-blue-800 transition">
48
+ <i data-feather="eye"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </a>
53
+ `;
54
+ }
55
+ }
56
+
57
+ customElements.define('custom-car-card', CustomCarCard);
components/filter-sidebar.js ADDED
@@ -0,0 +1,131 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFilterSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ aside {
7
+ width: 280px;
8
+ background: white;
9
+ padding: 1.5rem;
10
+ border-radius: 0.5rem;
11
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
12
+ }
13
+ h3 {
14
+ font-size: 1.25rem;
15
+ font-weight: 600;
16
+ margin-bottom: 1.5rem;
17
+ color: #1f2937;
18
+ }
19
+ .filter-section {
20
+ margin-bottom: 1.5rem;
21
+ border-bottom: 1px solid #e5e7eb;
22
+ padding-bottom: 1.5rem;
23
+ }
24
+ .filter-section:last-child {
25
+ border-bottom: none;
26
+ }
27
+ .filter-title {
28
+ font-weight: 500;
29
+ margin-bottom: 0.75rem;
30
+ color: #374151;
31
+ }
32
+ .filter-option {
33
+ display: flex;
34
+ align-items: center;
35
+ margin-bottom: 0.5rem;
36
+ }
37
+ input[type="checkbox"], input[type="range"] {
38
+ margin-right: 0.5rem;
39
+ }
40
+ label {
41
+ color: #4b5563;
42
+ cursor: pointer;
43
+ }
44
+ .price-range {
45
+ width: 100%;
46
+ margin-top: 0.5rem;
47
+ }
48
+ .price-labels {
49
+ display: flex;
50
+ justify-content: space-between;
51
+ margin-top: 0.5rem;
52
+ font-size: 0.875rem;
53
+ color: #6b7280;
54
+ }
55
+ button {
56
+ width: 100%;
57
+ padding: 0.5rem;
58
+ background-color: #3b82f6;
59
+ color: white;
60
+ border: none;
61
+ border-radius: 0.375rem;
62
+ font-weight: 500;
63
+ cursor: pointer;
64
+ transition: background-color 0.2s;
65
+ }
66
+ button:hover {
67
+ background-color: #2563eb;
68
+ }
69
+ </style>
70
+ <aside>
71
+ <h3>Filters</h3>
72
+
73
+ <div class="filter-section">
74
+ <div class="filter-title">Price Range</div>
75
+ <input type="range" min="0" max="10000" value="5000" step="500" class="price-range">
76
+ <div class="price-labels">
77
+ <span>$0</span>
78
+ <span>$10,000</span>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="filter-section">
83
+ <div class="filter-title">Categories</div>
84
+ <div class="filter-option">
85
+ <input type="checkbox" id="classic" checked>
86
+ <label for="classic">Classic Cars</label>
87
+ </div>
88
+ <div class="filter-option">
89
+ <input type="checkbox" id="modern" checked>
90
+ <label for="modern">Modern Supercars</label>
91
+ </div>
92
+ <div class="filter-option">
93
+ <input type="checkbox" id="muscle" checked>
94
+ <label for="muscle">Muscle Cars</label>
95
+ </div>
96
+ <div class="filter-option">
97
+ <input type="checkbox" id="jdm" checked>
98
+ <label for="jdm">JDM</label>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="filter-section">
103
+ <div class="filter-title">Purchase Options</div>
104
+ <div class="filter-option">
105
+ <input type="checkbox" id="cash" checked>
106
+ <label for="cash">Cash Purchase</label>
107
+ </div>
108
+ <div class="filter-option">
109
+ <input type="checkbox" id="tokens" checked>
110
+ <label for="tokens">Token Purchase</label>
111
+ </div>
112
+ <div class="filter-option">
113
+ <input type="checkbox" id="auction">
114
+ <label for="auction">Auction</label>
115
+ </div>
116
+ </div>
117
+
118
+ <button id="apply-filters">Apply Filters</button>
119
+ </aside>
120
+ `;
121
+
122
+ // Add event listeners for filter application
123
+ const applyButton = this.shadowRoot.getElementById('apply-filters');
124
+ applyButton.addEventListener('click', () => {
125
+ // In a real app, this would trigger filtering of car listings
126
+ console.log('Filters applied');
127
+ });
128
+ }
129
+ }
130
+
131
+ customElements.define('custom-filter-sidebar', CustomFilterSidebar);
components/footer.js ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .footer-link {
7
+ transition: color 0.2s ease;
8
+ }
9
+ .footer-link:hover {
10
+ color: #3b82f6;
11
+ }
12
+ </style>
13
+ <footer class="bg-gray-800 text-white py-12">
14
+ <div class="container mx-auto px-4">
15
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
16
+ <!-- Column 1 -->
17
+ <div>
18
+ <h3 class="text-xl font-bold mb-4">GodsRods</h3>
19
+ <p class="text-gray-400 mb-4">The premium marketplace for 3D car models and automotive collectibles.</p>
20
+ <div class="flex space-x-4">
21
+ <a href="#" class="text-gray-400 hover:text-white">
22
+ <i data-feather="twitter"></i>
23
+ </a>
24
+ <a href="#" class="text-gray-400 hover:text-white">
25
+ <i data-feather="instagram"></i>
26
+ </a>
27
+ <a href="#" class="text-gray-400 hover:text-white">
28
+ <i data-feather="discord"></i>
29
+ </a>
30
+ </div>
31
+ </div>
32
+
33
+ <!-- Column 2 -->
34
+ <div>
35
+ <h4 class="font-semibold mb-4">Marketplace</h4>
36
+ <ul class="space-y-2">
37
+ <li><a href="/marketplace.html" class="footer-link text-gray-400">All Listings</a></li>
38
+ <li><a href="/featured" class="footer-link text-gray-400">Featured Models</a></li>
39
+ <li><a href="/new-releases" class="footer-link text-gray-400">New Releases</a></li>
40
+ <li><a href="/auctions" class="footer-link text-gray-400">Auctions</a></li>
41
+ </ul>
42
+ </div>
43
+
44
+ <!-- Column 3 -->
45
+ <div>
46
+ <h4 class="font-semibold mb-4">Company</h4>
47
+ <ul class="space-y-2">
48
+ <li><a href="/about" class="footer-link text-gray-400">About Us</a></li>
49
+ <li><a href="/careers" class="footer-link text-gray-400">Careers</a></li>
50
+ <li><a href="/blog" class="footer-link text-gray-400">Blog</a></li>
51
+ <li><a href="/press" class="footer-link text-gray-400">Press</a></li>
52
+ </ul>
53
+ </div>
54
+
55
+ <!-- Column 4 -->
56
+ <div>
57
+ <h4 class="font-semibold mb-4">Support</h4>
58
+ <ul class="space-y-2">
59
+ <li><a href="/help" class="footer-link text-gray-400">Help Center</a></li>
60
+ <li><a href="/terms" class="footer-link text-gray-400">Terms of Service</a></li>
61
+ <li><a href="/privacy" class="footer-link text-gray-400">Privacy Policy</a></li>
62
+ <li><a href="/contact" class="footer-link text-gray-400">Contact Us</a></li>
63
+ </ul>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
68
+ <p>© ${new Date().getFullYear()} GodsRods. All rights reserved.</p>
69
+ </div>
70
+ </div>
71
+ </footer>
72
+ `;
73
+ }
74
+ }
75
+
76
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .navbar {
7
+ background: rgba(255, 255, 255, 0.95);
8
+ backdrop-filter: blur(10px);
9
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
10
+ }
11
+ .nav-link {
12
+ transition: all 0.2s ease;
13
+ }
14
+ .nav-link:hover {
15
+ color: #3b82f6;
16
+ }
17
+ .user-menu {
18
+ transition: all 0.3s ease;
19
+ opacity: 0;
20
+ visibility: hidden;
21
+ transform: translateY(10px);
22
+ }
23
+ .user-menu.active {
24
+ opacity: 1;
25
+ visibility: visible;
26
+ transform: translateY(0);
27
+ }
28
+ </style>
29
+ <nav class="navbar sticky top-0 z-50 border-b border-gray-200">
30
+ <div class="container mx-auto px-4">
31
+ <div class="flex justify-between items-center py-4">
32
+ <!-- Logo -->
33
+ <a href="/" class="flex items-center">
34
+ <span class="text-2xl font-bold text-blue-600">GodsRods</span>
35
+ </a>
36
+
37
+ <!-- Desktop Navigation -->
38
+ <div class="hidden md:flex items-center space-x-8">
39
+ <a href="/marketplace.html" class="nav-link text-gray-700 font-medium">Marketplace</a>
40
+ <a href="/collections" class="nav-link text-gray-700 font-medium">Collections</a>
41
+ <a href="/about" class="nav-link text-gray-700 font-medium">About</a>
42
+
43
+ <!-- Auth Buttons -->
44
+ <div class="guest-only flex items-center space-x-4">
45
+ <a href="/login" class="text-gray-700 font-medium">Login</a>
46
+ <a href="/register" class="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition">Sign Up</a>
47
+ </div>
48
+
49
+ <!-- User Menu -->
50
+ <div class="auth-only relative">
51
+ <button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none">
52
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
53
+ <i data-feather="user" class="text-blue-600 w-4 h-4"></i>
54
+ </div>
55
+ <span class="text-gray-700 font-medium">Account</span>
56
+ </button>
57
+
58
+ <div id="user-menu" class="user-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
59
+ <a href="/profile" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Profile</a>
60
+ <a href="/wallet" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Wallet</a>
61
+ <a href="/settings" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Settings</a>
62
+ <div class="border-t border-gray-200 my-1"></div>
63
+ <a href="/logout" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Sign out</a>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Mobile Menu Button -->
69
+ <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none">
70
+ <i data-feather="menu"></i>
71
+ </button>
72
+ </div>
73
+
74
+ <!-- Mobile Menu -->
75
+ <div id="mobile-menu" class="hidden md:hidden pb-4">
76
+ <a href="/marketplace.html" class="block py-2 text-gray-700">Marketplace</a>
77
+ <a href="/collections" class="block py-2 text-gray-700">Collections</a>
78
+ <a href="/about" class="block py-2 text-gray-700">About</a>
79
+ <div class="guest-only pt-2 space-y-2">
80
+ <a href="/login" class="block py-2 text-gray-700">Login</a>
81
+ <a href="/register" class="block py-2 text-blue-600 font-medium">Sign Up</a>
82
+ </div>
83
+ <div class="auth-only pt-2 space-y-2">
84
+ <a href="/profile" class="block py-2 text-gray-700">Profile</a>
85
+ <a href="/wallet" class="block py-2 text-gray-700">Wallet</a>
86
+ <a href="/settings" class="block py-2 text-gray-700">Settings</a>
87
+ <a href="/logout" class="block py-2 text-gray-700">Sign out</a>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </nav>
92
+ `;
93
+
94
+ // Initialize user menu toggle
95
+ const userMenuButton = this.shadowRoot.getElementById('user-menu-button');
96
+ const userMenu = this.shadowRoot.getElementById('user-menu');
97
+
98
+ if (userMenuButton && userMenu) {
99
+ userMenuButton.addEventListener('click', () => {
100
+ userMenu.classList.toggle('active');
101
+ });
102
+
103
+ // Close when clicking outside
104
+ document.addEventListener('click', (e) => {
105
+ if (!this.shadowRoot.contains(e.target)) {
106
+ userMenu.classList.remove('active');
107
+ }
108
+ });
109
+ }
110
+
111
+ // Initialize mobile menu toggle
112
+ const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
113
+ const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
114
+
115
+ if (mobileMenuButton && mobileMenu) {
116
+ mobileMenuButton.addEventListener('click', () => {
117
+ mobileMenu.classList.toggle('hidden');
118
+ feather.replace();
119
+ });
120
+ }
121
+ }
122
+ }
123
+
124
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,98 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>GodsRods | Premium 3D Car Marketplace</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ <script src="components/car-card.js"></script>
14
+ </head>
15
+ <body class="bg-gray-100">
16
+ <custom-navbar></custom-navbar>
17
+
18
+ <main class="container mx-auto px-4 py-8">
19
+ <!-- Hero Section -->
20
+ <section class="hero bg-gradient-to-r from-blue-600 to-indigo-800 rounded-xl p-8 mb-12 text-white">
21
+ <div class="max-w-3xl">
22
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Discover Rare 3D Car Models</h1>
23
+ <p class="text-xl mb-6">The ultimate marketplace for premium 3D automotive assets and collectibles</p>
24
+ <div class="flex flex-wrap gap-4">
25
+ <a href="/login" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Login</a>
26
+ <a href="/marketplace" class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">Browse Marketplace</a>
27
+ </div>
28
+ </div>
29
+ </section>
30
+
31
+ <!-- Featured Cars -->
32
+ <section class="mb-16">
33
+ <h2 class="text-3xl font-bold mb-8 text-gray-800">Featured Listings</h2>
34
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
35
+ <custom-car-card
36
+ title="1969 Ford Mustang Boss 429"
37
+ price="2499"
38
+ tokens="500"
39
+ image="http://static.photos/automotive/640x360/1"
40
+ model="/models/mustang.glb">
41
+ </custom-car-card>
42
+
43
+ <custom-car-card
44
+ title="2023 Porsche 911 GT3 RS"
45
+ price="3499"
46
+ tokens="700"
47
+ image="http://static.photos/automotive/640x360/2"
48
+ model="/models/porsche.glb">
49
+ </custom-car-card>
50
+
51
+ <custom-car-card
52
+ title="1970 Dodge Charger R/T"
53
+ price="2899"
54
+ tokens="600"
55
+ image="http://static.photos/automotive/640x360/3"
56
+ model="/models/charger.glb">
57
+ </custom-car-card>
58
+ </div>
59
+ </section>
60
+
61
+ <!-- How It Works -->
62
+ <section class="bg-white rounded-xl p-8 shadow-lg mb-16">
63
+ <h2 class="text-3xl font-bold mb-8 text-center text-gray-800">How GodsRods Works</h2>
64
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
65
+ <div class="text-center">
66
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
67
+ <i data-feather="user" class="text-blue-600"></i>
68
+ </div>
69
+ <h3 class="text-xl font-semibold mb-2">Create Account</h3>
70
+ <p class="text-gray-600">Sign up and get your free GTR tokens to start collecting</p>
71
+ </div>
72
+ <div class="text-center">
73
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
74
+ <i data-feather="search" class="text-blue-600"></i>
75
+ </div>
76
+ <h3 class="text-xl font-semibold mb-2">Browse Models</h3>
77
+ <p class="text-gray-600">Explore our premium collection of 3D car models</p>
78
+ </div>
79
+ <div class="text-center">
80
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
81
+ <i data-feather="shopping-cart" class="text-blue-600"></i>
82
+ </div>
83
+ <h3 class="text-xl font-semibold mb-2">Purchase & Collect</h3>
84
+ <p class="text-gray-600">Buy with cash or GTR tokens and add to your collection</p>
85
+ </div>
86
+ </div>
87
+ </section>
88
+ </main>
89
+
90
+ <custom-footer></custom-footer>
91
+
92
+ <script>
93
+ feather.replace();
94
+ </script>
95
+ <script src="script.js"></script>
96
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
97
+ </body>
98
+ </html>
marketplace.html ADDED
@@ -0,0 +1,111 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Marketplace | AutoVerse Exotics</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="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
+ <script src="components/car-card.js"></script>
13
+ <script src="components/filter-sidebar.js"></script>
14
+ </head>
15
+ <body class="bg-gray-100">
16
+ <custom-navbar></custom-navbar>
17
+
18
+ <main class="container mx-auto px-4 py-8">
19
+ <div class="flex flex-col md:flex-row gap-8">
20
+ <!-- Filter Sidebar -->
21
+ <custom-filter-sidebar></custom-filter-sidebar>
22
+
23
+ <!-- Main Content -->
24
+ <div class="flex-1">
25
+ <div class="flex justify-between items-center mb-8">
26
+ <h1 class="text-3xl font-bold text-gray-800">Premium 3D Car Marketplace</h1>
27
+ <div class="flex items-center space-x-2">
28
+ <span class="text-gray-600">Sort by:</span>
29
+ <select class="bg-white border border-gray-300 rounded-md px-3 py-2">
30
+ <option>Most Recent</option>
31
+ <option>Price: Low to High</option>
32
+ <option>Price: High to Low</option>
33
+ <option>Token Cost</option>
34
+ <option>Most Popular</option>
35
+ </select>
36
+ </div>
37
+ </div>
38
+
39
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
40
+ <!-- Car Cards will be dynamically loaded here -->
41
+ <custom-car-card
42
+ title="1967 Shelby GT500"
43
+ price="3200"
44
+ tokens="650"
45
+ image="http://static.photos/automotive/640x360/4"
46
+ model="/models/shelby.glb">
47
+ </custom-car-card>
48
+
49
+ <custom-car-card
50
+ title="2024 Lamborghini Revuelto"
51
+ price="4200"
52
+ tokens="850"
53
+ image="http://static.photos/automotive/640x360/5"
54
+ model="/models/lambo.glb">
55
+ </custom-car-card>
56
+
57
+ <custom-car-card
58
+ title="1995 Toyota Supra MK4"
59
+ price="2800"
60
+ tokens="550"
61
+ image="http://static.photos/automotive/640x360/6"
62
+ model="/models/supra.glb">
63
+ </custom-car-card>
64
+
65
+ <custom-car-card
66
+ title="1963 Chevrolet Corvette C2"
67
+ price="2900"
68
+ tokens="580"
69
+ image="http://static.photos/automotive/640x360/7"
70
+ model="/models/corvette.glb">
71
+ </custom-car-card>
72
+
73
+ <custom-car-card
74
+ title="2018 McLaren P1 GTR"
75
+ price="3800"
76
+ tokens="750"
77
+ image="http://static.photos/automotive/640x360/8"
78
+ model="/models/mclaren.glb">
79
+ </custom-car-card>
80
+
81
+ <custom-car-card
82
+ title="2022 Ford GT Heritage Edition"
83
+ price="3600"
84
+ tokens="720"
85
+ image="http://static.photos/automotive/640x360/9"
86
+ model="/models/fordgt.glb">
87
+ </custom-car-card>
88
+ </div>
89
+
90
+ <!-- Pagination -->
91
+ <div class="flex justify-center mt-10">
92
+ <div class="flex space-x-2">
93
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-md">Previous</button>
94
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md">1</button>
95
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-md">2</button>
96
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-md">3</button>
97
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-md">Next</button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </main>
103
+
104
+ <custom-footer></custom-footer>
105
+
106
+ <script>
107
+ feather.replace();
108
+ </script>
109
+ <script src="script.js"></script>
110
+ </body>
111
+ </html>
script.js ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Initialize 3D model viewers when car cards are loaded
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // This would be replaced with actual 3D viewer initialization
4
+ // For example using model-viewer or three.js
5
+ console.log('Initializing 3D viewers...');
6
+
7
+ // Example of handling car card interactions
8
+ document.querySelectorAll('custom-car-card').forEach(card => {
9
+ card.addEventListener('click', function() {
10
+ const modelUrl = this.getAttribute('model');
11
+ console.log(`Loading 3D model: ${modelUrl}`);
12
+ // In a real app, this would open a modal with the 3D viewer
13
+ });
14
+ });
15
+
16
+ // Check for authentication status
17
+ checkAuthStatus();
18
+ });
19
+
20
+ function checkAuthStatus() {
21
+ // This would check cookies/localStorage for auth token
22
+ // and update UI accordingly
23
+ const isLoggedIn = false; // Replace with actual check
24
+
25
+ if (isLoggedIn) {
26
+ document.querySelectorAll('.auth-only').forEach(el => {
27
+ el.classList.remove('hidden');
28
+ });
29
+ document.querySelectorAll('.guest-only').forEach(el => {
30
+ el.classList.add('hidden');
31
+ });
32
+ } else {
33
+ document.querySelectorAll('.auth-only').forEach(el => {
34
+ el.classList.add('hidden');
35
+ });
36
+ document.querySelectorAll('.guest-only').forEach(el => {
37
+ el.classList.remove('hidden');
38
+ });
39
+ }
40
+ }
41
+
42
+ // Handle login/logout
43
+ function handleLogin() {
44
+ // Implementation would depend on your auth system
45
+ console.log('Login handler');
46
+ }
47
+
48
+ function handleLogout() {
49
+ // Implementation would depend on your auth system
50
+ console.log('Logout handler');
51
+ }
style.css CHANGED
@@ -1,28 +1,62 @@
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
1
+ /* Custom styles that extend Tailwind */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
+
4
  body {
5
+ font-family: 'Inter', sans-serif;
6
+ }
7
+
8
+ .hero {
9
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://static.photos/automotive/1200x630/10');
10
+ background-size: cover;
11
+ background-position: center;
12
+ min-height: 400px;
13
+ display: flex;
14
+ align-items: center;
15
+ }
16
+
17
+ /* 3D Viewer Container */
18
+ .model-viewer-container {
19
+ width: 100%;
20
+ height: 300px;
21
+ background-color: #f3f4f6;
22
+ border-radius: 0.5rem;
23
+ overflow: hidden;
24
+ position: relative;
25
+ }
26
+
27
+ /* Loading spinner for 3D models */
28
+ .model-loading {
29
+ position: absolute;
30
+ top: 50%;
31
+ left: 50%;
32
+ transform: translate(-50%, -50%);
33
+ width: 40px;
34
+ height: 40px;
35
+ border: 4px solid rgba(59, 130, 246, 0.2);
36
+ border-radius: 50%;
37
+ border-top-color: #3b82f6;
38
+ animation: spin 1s ease-in-out infinite;
39
  }
40
 
41
+ @keyframes spin {
42
+ to { transform: translate(-50%, -50%) rotate(360deg); }
 
43
  }
44
 
45
+ /* Custom scrollbar */
46
+ ::-webkit-scrollbar {
47
+ width: 8px;
48
+ height: 8px;
 
49
  }
50
 
51
+ ::-webkit-scrollbar-track {
52
+ background: #f1f1f1;
 
 
 
 
53
  }
54
 
55
+ ::-webkit-scrollbar-thumb {
56
+ background: #3b82f6;
57
+ border-radius: 4px;
58
  }
59
+
60
+ ::-webkit-scrollbar-thumb:hover {
61
+ background: #2563eb;
62
+ }