Merge branch 'ui' of https://github.com/mostafa-elhaiany/DineDevine i…

…nto ui

.gitignore

@@ -1,3 +1,109 @@
+# Ignore node_modules
+node_modules/
+
+# Ignore platform-specific files
+platforms/
+plugins/
+www/
+
+# Ignore built files
+build/
+www-built/
+
+# Ignore configuration files
 .env
+.env.local
+.env.development
+.env.test
+.env.production
+*.config.js
+
+# Ignore logs
+*.log
+
+# Ignore macOS system files
 .DS_Store
-__pycache__
+
+# Ignore temporary files
+*.tmp
+
+# Ignore build artifacts
+*.apk
+*.aab
+*.ipa
+*.xcodeproj
+*.xcworkspace
+*.swp
+
+# Ignore dependency directories
+ios/Pods/
+ios/Podfile.lock
+ios/Podfile
+android/build/
+android/app/build/
+android/capacitor-cordova-android-plugins/build/
+android/capacitor-cordova-android-plugins/capacitor-cordova-android-plugins.iml
+
+# Ignore Gradle files
+.gradle/
+/build/
+
+# Ignore IDE files and directories
+.idea/
+.vscode/
+.project
+.classpath
+.settings/
+
+# Ignore npm logs
+npm-debug.log*
+
+# Ignore Android files
+*.iml
+android/local.properties
+android/capacitor-cordova-android-plugins/local.properties
+android/capacitor-cordova-android-plugins/cordova.cmd
+android/capacitor-cordova-android-plugins/gradle-wrapper.jar
+android/capacitor-cordova-android-plugins/cordova-wrapper.bat
+
+# Ignore iOS files
+ios/*.mode1v3
+ios/*.mode2v3
+ios/*.perspectivev3
+ios/*.pbxuser
+ios/*.xccheckout
+ios/*.xcscmblueprint
+ios/xcuserdata
+ios/*/xcshareddata
+ios/*/xcuserdata
+
+# Ignore macOS metadata files
+ios/*.xcodeproj/project.xcworkspace/xcuserdata
+ios/*.xcodeproj/xcuserdata
+
+# Ignore Android Studio files
+*.iml
+.gradle
+/local.properties
+/.idea/caches
+/.idea/libraries
+/.idea/modules.xml
+/.idea/workspace.xml
+/.idea/tasks.xml
+/.idea/.name
+/.idea/.gitignore
+/.idea/gradle.xml
+/.idea/encodings.xml
+/.idea/misc.xml
+/.idea/vcs.xml
+.idea/*.iml
+.idea/modules
+.cordova
+node_modules
+build
+
+# Ignore capacitor plugins artifacts
+capacitor-cordova-android-plugins/cordova-cordova-android-plugins.gradle
+
+# Ignore app configuration
+capacitor.config.json

DineDevineUI/src/pages/MatchConfirmedPage.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+
+const VideoPage = () => {
+    return (
+        <IonPage>
+            <IonHeader>
+                <IonToolbar>
+                    <IonTitle>Video Page</IonTitle>
+                </IonToolbar>
+            </IonHeader>
+            <IonContent>
+                <div className="ion-padding">
+                    <h1>MP4 Video</h1>
+                    <video controls>
+                        <source src="/public/match-success.mp4" type="video/mp4" />
+                        Your browser does not support the video tag.
+                    </video>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+};
+
+export default VideoPage;

DineDevineUI/src/pages/ProfilePage.css

@@ -34,4 +34,23 @@
 
 .ion-delegate-host {
     background: white;
-}
+}
+
+/* Add this CSS code to your styles.css (or equivalent) file */
+.achievements-card .ion-col {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Optional: Add spacing between the icons and text */
+.achievements-card .ion-col ion-img {
+    margin-bottom: 10px;
+}
+
+/* Optional: Increase the spacing between columns */
+.achievements-card ion-row ion-col {
+    margin: 10px;
+}

DineDevineUI/src/pages/ProfilePage.tsx

@@ -4,8 +4,8 @@ import {
     IonBackButton,
     IonButton, IonButtons, IonCard, IonChip, IonCol,
     IonContent, IonGrid,
-    IonHeader, IonItem, IonList,
-    IonPage, IonPopover, IonRow, IonSelect, IonSelectOption,
+    IonHeader, IonImg, IonItem, IonList,
+    IonPage, IonPopover, IonRow, IonSelect, IonSelectOption, IonText,
     IonTitle,
     IonToolbar,
 } from '@ionic/react';
@@ -138,6 +138,45 @@ const ProfilePage: React.FC<Profile> = (props: Profile) => {
                             </IonCard>
                         </IonCol>
                     </IonRow>
+                    <IonRow>
+                        <IonCol>
+                            <IonCard className="achievements-card">
+                                <h1 className="ion-margin-start">Achievements</h1>
+                                <IonRow>
+                                    <IonCol className="ion-col"> {/* Use "ion-col" class here */}
+                                        <IonImg
+                                            src="./public/img/black-ribbon.png"
+                                            alt="Description for the black ribbon"
+                                        ></IonImg>
+                                        <IonText>Went out with everyone in the building</IonText>
+                                    </IonCol>
+                                    <IonCol className="ion-col"> {/* Use "ion-col" class here */}
+                                        <IonImg
+                                            src="./public/img/green-ribbon.png"
+                                            alt="Description for the green ribbon"
+                                        ></IonImg>
+                                        <IonText>Ate at 3 restaurants</IonText>
+                                    </IonCol>
+                                    <IonCol className="ion-col"> {/* Use "ion-col" class here */}
+                                        <IonImg
+                                            src="./public/img/orange-ribbon.png"
+                                            alt="Description for the orange ribbon"
+                                        ></IonImg>
+                                        <IonText>Ate vegan</IonText>
+                                    </IonCol>
+                                    <IonCol className="ion-col"> {/* Use "ion-col" class here */}
+                                        <IonImg
+                                            src="./public/img/empty.png"
+                                            alt="Description for the empty image"
+                                        ></IonImg>
+                                        <IonText>
+                                            Most liked
+                                        </IonText>
+                                    </IonCol>
+                                </IonRow>
+                            </IonCard>
+                        </IonCol>
+                    </IonRow>
                 </IonGrid>
             </IonContent>
         </IonPage>

DineDevineUIMobile/ionic.config.json

@@ -0,0 +1,5 @@
+{
+  "name": "New Ionic App",
+  "integrations": {},
+  "type": "react"
+}