From 10dcc55a6479753be3c1cf57171b2bbd99470253 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Fri, 27 Feb 2026 15:38:40 +0000
Subject: [PATCH] 11

---
 frontend/src/components/MobileSimulator.tsx   |  65 +++++
 frontend/src/components/NavBarItem.tsx        |   5 +-
 frontend/src/layouts/Authenticated.tsx        |  22 +-
 frontend/src/pages/index.tsx                  | 252 ++++++++----------
 frontend/src/pages/projects/projects-view.tsx |  12 +-
 5 files changed, 206 insertions(+), 150 deletions(-)
 create mode 100644 frontend/src/components/MobileSimulator.tsx

diff --git a/frontend/src/components/MobileSimulator.tsx b/frontend/src/components/MobileSimulator.tsx
new file mode 100644
index 0000000..dab6439
--- /dev/null
+++ b/frontend/src/components/MobileSimulator.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { mdiOpenInNew } from '@mdi/js';
+import BaseIcon from './BaseIcon';
+
+type MobileSimulatorProps = {
+  url?: string;
+};
+
+const MobileSimulator: React.FC<MobileSimulatorProps> = ({ url }) => {
+  if (!url) {
+    return (
+      <div className="flex flex-col justify-center items-center py-8 h-full w-full">
+        <div className="relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[640px] w-[320px] shadow-2xl flex items-center justify-center">
+            <div className="rounded-[2rem] overflow-hidden w-full h-full bg-white dark:bg-gray-900 flex flex-col items-center justify-center text-center p-4">
+               <p className="text-gray-500">No URL provided to preview.</p>
+            </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Ensure URL has https:// prefix
+  const formattedUrl = url.startsWith('http') ? url : `https://${url}`;
+
+  return (
+    <div className="flex flex-col justify-center items-center py-8 h-full w-full">
+      <div className="text-center mb-6">
+          <h3 className="text-2xl font-bold text-gray-800 dark:text-gray-100">Live App Preview</h3>
+          <p className="text-sm text-gray-500 mt-2 flex items-center justify-center gap-1">
+             Previewing: <a href={formattedUrl} target="_blank" rel="noreferrer" className="text-indigo-600 hover:underline">{formattedUrl}</a>
+             <BaseIcon path={mdiOpenInNew} size={14} className="text-gray-400" />
+          </p>
+      </div>
+      {/* Phone Frame */}
+      <div className="relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[640px] w-[320px] shadow-2xl transition-transform hover:scale-[1.02] duration-300">
+        {/* Notch */}
+        <div className="w-[120px] h-[25px] bg-gray-800 top-0 rounded-b-[1.2rem] left-1/2 -translate-x-1/2 absolute z-10 flex justify-center items-center">
+             {/* Speaker / Camera details inside notch */}
+             <div className="w-[40px] h-[4px] bg-black/40 rounded-full mx-1"></div>
+             <div className="w-[8px] h-[8px] bg-black/40 rounded-full mx-1"></div>
+        </div>
+        {/* Left Side Buttons */}
+        <div className="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
+        <div className="h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
+        {/* Right Side Button */}
+        <div className="h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>
+        
+        {/* Screen Content */}
+        <div className="rounded-[2rem] overflow-hidden w-full h-full bg-white dark:bg-gray-900 flex flex-col relative z-0">
+          {/* Iframe for the website */}
+          <iframe 
+            src={formattedUrl} 
+            className="w-full h-full border-none"
+            title="App Preview"
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+          />
+          {/* Fake Bottom Home Indicator */}
+          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-1/3 h-[5px] bg-black/30 dark:bg-white/30 rounded-full pointer-events-none"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileSimulator;
\ No newline at end of file
diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx
index 72935e6..4ced3eb 100644
--- a/frontend/src/components/NavBarItem.tsx
+++ b/frontend/src/components/NavBarItem.tsx
@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}
\ No newline at end of file
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 1b9907d..1949890 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -13,6 +12,7 @@ import { useAppDispatch, useAppSelector } from '../stores/hooks'
 import Search from '../components/Search';
 import { useRouter } from 'next/router'
 import {findMe, logoutUser} from "../stores/authSlice";
+import { create } from '../stores/projects/projectsSlice';
 
 import {hasPermission} from "../helpers/userPermissions";
 
@@ -63,6 +63,24 @@ export default function LayoutAuthenticated({
 
     if (!hasPermission(currentUser, permission)) router.push('/error');
   }, [currentUser, permission]);
+
+  // Handle pending conversion URL
+  useEffect(() => {
+    if (currentUser) {
+      const pendingUrl = localStorage.getItem('pending_conversion_url');
+      if (pendingUrl) {
+        localStorage.removeItem('pending_conversion_url');
+        dispatch(create({
+          name: `App for ${new URL(pendingUrl).hostname}`,
+          source_website_url: pendingUrl,
+          status: 'draft',
+          platform: 'both'
+        })).then(() => {
+          router.push('/projects/projects-list');
+        });
+      }
+    }
+  }, [currentUser]);
   
 
   const darkMode = useAppSelector((state) => state.style.darkMode)
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index ed3bfe5..f07f012 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,166 +1,130 @@
 
-import React, { useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
+import React, { useEffect, useState, ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import BaseButton from '../components/BaseButton';
 import CardBox from '../components/CardBox';
 import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
 import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
-
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { mdiArrowRight, mdiWeb } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
+import { create } from '../stores/projects/projectsSlice';
 
 export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('image');
-    const [contentPosition, setContentPosition] = useState('left');
-    const textColor = useAppSelector((state) => state.style.linkColor);
+    const router = useRouter();
+    const dispatch = useAppDispatch();
+    const { currentUser } = useAppSelector((state) => state.auth);
+    const [websiteUrl, setWebsiteUrl] = useState('');
+    const [loading, setLoading] = useState(false);
 
-    const title = 'App Preview'
+    const handleConvert = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!websiteUrl) return;
 
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
+        if (!currentUser) {
+            // Save to localStorage for post-registration
+            localStorage.setItem('pending_conversion_url', websiteUrl);
+            router.push('/register');
+        } else {
+            setLoading(true);
+            try {
+                const resultAction = await dispatch(create({ 
+                    name: `App for ${new URL(websiteUrl).hostname}`,
+                    source_website_url: websiteUrl,
+                    status: 'draft',
+                    platform: 'both'
+                }));
+                if (create.fulfilled.match(resultAction)) {
+                    router.push('/projects/projects-list');
+                }
+            } catch (err) {
+                console.error('Failed to create project:', err);
+            } finally {
+                setLoading(false);
+            }
         }
     };
 
-  return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
-      <Head>
-        <title>{getPageTitle('Starter Page')}</title>
-      </Head>
+    return (
+        <div className="min-h-screen">
+            <Head>
+                <title>{getPageTitle('Web to Mobile App Converter')}</title>
+            </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your App Preview app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
+            <SectionFullScreen bg="violet">
+                <div className="max-w-4xl mx-auto px-6 py-12 text-center flex flex-col items-center">
+                    <div className="mb-8 inline-flex items-center justify-center p-3 bg-indigo-100 rounded-full text-indigo-600">
+                        <BaseIcon path={mdiWeb} size={48} />
+                    </div>
+                    
+                    <h1 className="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 tracking-tight">
+                        Convert Your Website to <span className="text-indigo-600">Mobile App</span>
+                    </h1>
+                    
+                    <p className="text-xl text-gray-600 mb-10 max-w-2xl">
+                        Turn your website into a powerful, high-performance Android and iOS app in minutes. No coding required.
+                    </p>
 
-            </BaseButtons>
-        </CardBox>
+                    <CardBox className="w-full max-w-2xl shadow-2xl border-none">
+                        <form onSubmit={handleConvert} className="flex flex-col md:flex-row gap-4">
+                            <div className="relative flex-grow">
+                                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                                    <BaseIcon path={mdiWeb} size={20} />
+                                </div>
+                                <input
+                                    type="url"
+                                    required
+                                    placeholder="https://yourwebsite.com"
+                                    className="block w-full pl-10 pr-3 py-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-lg transition-all"
+                                    value={websiteUrl}
+                                    onChange={(e) => setWebsiteUrl(e.target.value)}
+                                />
+                            </div>
+                            <BaseButton
+                                type="submit"
+                                color="info"
+                                label={loading ? 'Creating...' : 'Convert Now'}
+                                icon={mdiArrowRight}
+                                className="px-8 py-4 text-lg font-bold h-auto md:w-auto w-full"
+                                disabled={loading}
+                            />
+                        </form>
+                        <p className="mt-4 text-sm text-gray-400">
+                            Enter your website URL and we&apos;ll handle the rest.
+                        </p>
+                    </CardBox>
+
+                    <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
+                        <div className="p-6 bg-white/50 backdrop-blur-sm rounded-2xl">
+                            <div className="text-indigo-600 font-bold text-2xl mb-2">1. Connect</div>
+                            <p className="text-gray-500">Provide your website URL and basic app info.</p>
+                        </div>
+                        <div className="p-6 bg-white/50 backdrop-blur-sm rounded-2xl">
+                            <div className="text-indigo-600 font-bold text-2xl mb-2">2. Configure</div>
+                            <p className="text-gray-500">Choose your colors, icons and features.</p>
+                        </div>
+                        <div className="p-6 bg-white/50 backdrop-blur-sm rounded-2xl">
+                            <div className="text-indigo-600 font-bold text-2xl mb-2">3. Build</div>
+                            <p className="text-gray-500">Receive your ready-to-publish APK and IPA.</p>
+                        </div>
+                    </div>
+                </div>
+            </SectionFullScreen>
+
+            <footer className="bg-white border-t py-12 text-center">
+                <p className="text-gray-500 mb-4">© 2026 Web2App. Built with Flatlogic.</p>
+                <div className="flex justify-center space-x-6">
+                    <Link href="/login" className="text-indigo-600 hover:text-indigo-800 font-medium">Admin Dashboard</Link>
+                    <Link href="/privacy-policy" className="text-gray-400 hover:text-gray-600">Privacy Policy</Link>
+                </div>
+            </footer>
         </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
-
-    </div>
-  );
+    );
 }
 
 Starter.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutGuest>{page}</LayoutGuest>;
+    return <LayoutGuest>{page}</LayoutGuest>;
 };
-
diff --git a/frontend/src/pages/projects/projects-view.tsx b/frontend/src/pages/projects/projects-view.tsx
index 326ae78..181e62a 100644
--- a/frontend/src/pages/projects/projects-view.tsx
+++ b/frontend/src/pages/projects/projects-view.tsx
@@ -19,6 +19,7 @@ import BaseDivider from "../../components/BaseDivider";
 import {mdiChartTimelineVariant} from "@mdi/js";
 import {SwitchField} from "../../components/SwitchField";
 import FormField from "../../components/FormField";
+import MobileSimulator from "../../components/MobileSimulator";
 
 
 const ProjectsView = () => {
@@ -52,7 +53,9 @@ const ProjectsView = () => {
                   href={`/projects/projects-edit/?id=${id}`}
                 />
             </SectionTitleLineWithButton>
-            <CardBox>
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+              <div className="flex flex-col gap-6">
+              <CardBox>
             
 
               
@@ -953,6 +956,13 @@ const ProjectsView = () => {
                     onClick={() => router.push('/projects/projects-list')}
                 />
               </CardBox>
+              </div>
+              <div className="xl:sticky xl:top-24 h-max pb-8">
+                <CardBox className="h-full min-h-[700px] flex items-center justify-center">
+                    <MobileSimulator url={projects?.source_website_url} />
+                </CardBox>
+              </div>
+            </div>
           </SectionMain>
       </>
     );