Spaces:

akashx
/

facetime-mirror-mockup

Running

App Files Files Community

akashx commited on Sep 26, 2025

Commit

577b3ee

verified ·

1 Parent(s): f56c058

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS FaceTime UI Recreation</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(to bottom, #1a1a3a 0%, #3a1a1a 100%);
color: white;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.container {
width: 375px; /* Approximate iPhone width */
height: 812px; /* Approximate iPhone height */
position: relative;
overflow: hidden;
}

.call-duration {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
color: #cccccc;
}

.phone-number {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 28px;
font-weight: 500;
}

.control-buttons {
position: absolute;
top: 350px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
width: 280px;
}

.button {
text-align: center;
width: 80px;
}

.circle {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 auto;
}

.active {
background-color: white;
color: black;
}

.inactive {
background-color: rgba(255, 255, 255, 0.2);
color: white;
}

.label {
margin-top: 8px;
font-size: 14px;
font-weight: 500;
}

.bottom-controls {
position: absolute;
bottom: 150px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
width: 300px;
align-items: center;
}

.bottom-circle {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}

.gray {
background-color: rgba(255, 255, 255, 0.2);
color: white;
}

.red {
background-color: #ff3b30;
color: white;
}

.small-gray {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}

.hangup-icon {
transform: rotate(135deg);
}

.screenshot-panel {
position: absolute;
bottom: 0;
width: 100%;
background-color: white;
color: black;
padding: 10px 0;
font-size: 14px;
}

.add-caption {
text-align: center;
font-weight: 500;
margin-bottom: 5px;
}

.date-adjust {
display: flex;
justify-content: space-between;
padding: 0 20px;
color: #007aff;
font-size: 13px;
margin-bottom: 10px;
}

.image-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}

.image-name {
background-color: #f0f0f0;
border-radius: 20px;
padding: 5px 15px;
font-size: 13px;
color: black;
}

.toolbar-icons {
display: flex;
gap: 20px;
}

.toolbar-button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: black;
}

.no-location {
text-align: center;
border-top: 1px solid #ddd;
padding-top: 5px;
font-size: 13px;
color: #888;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="call-duration">04:32</div>
<div class="phone-number">0116 235 1034</div>
<div class="control-buttons">
<div class="button">
<div class="circle active"><i class="fas fa-headset"></i></div>
<div class="label">Audio</div>
</div>
<div class="button">
<div class="circle inactive"><i class="fas fa-video"></i></div>
<div class="label">FaceTime</div>
</div>
<div class="button">
<div class="circle inactive"><i class="fas fa-microphone"></i></div>
<div class="label">Mute</div>
</div>
</div>
<div class="bottom-controls">
<div class="bottom-circle gray"><i class="fas fa-ellipsis-h"></i></div>
<div class="bottom-circle red">
<i class="fas fa-phone-alt hangup-icon"></i>
</div>
<div class="bottom-circle gray"><i class="fas fa-th"></i></div>
<div class="small-gray"><i class="fas fa-magic"></i></div>
</div>
<div class="screenshot-panel">
<div class="add-caption">Add a Caption</div>
<div class="date-adjust">
<span>Friday · 26 Sep 2025 · 14:27</span>
<span>Adjust</span>
</div>
<div class="image-info">
<div class="image-name">IMG_9733</div>
<div class="toolbar-icons">
<button class="toolbar-button"><i class="fas fa-share-square"></i></button>
<button class="toolbar-button"><i class="fas fa-heart"></i></button>
<button class="toolbar-button"><i class="fas fa-info-circle"></i></button>
<button class="toolbar-button"><i class="fas fa-bars"></i></button>
<button class="toolbar-button"><i class="fas fa-trash"></i></button>
</div>
</div>
<div class="no-location">No Location Information</div>
</div>
</div>
</body>
</html>

fix the screenshot section

Files changed (2) hide show

README.md +8 -5
index.html +116 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Facetime Mirror Mockup
-emoji: 📈
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: FaceTime Mirror Mockup 📸
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,116 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FaceTime Mirror Mockup</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📸</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <style>
+        :root {
+            --ios-red: #ff3b30;
+            --ios-gray: rgba(255,255,255,.2);
+            --ios-dark-bg: #1a1a3a;
+            --ios-dark-gradient-end: #3a1a1a;
+            --ios-light-bg: #ffffff;
+            --ios-light-text: #000000;
+            --ios-light-border: #dddddd;
+            --ios-light-caption-bg: #f0f0f0;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(to bottom, var(--ios-dark-bg) 0%, var(--ios-dark-gradient-end) 100%);
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+        }
+        .phone-frame {
+            width: 375px;
+            height: 812px;
+            position: relative;
+            overflow: hidden;
+            border-radius: 40px;
+            box-shadow: 0 24px 48px rgba(0,0,0,.35);
+            background: #000;
+        }
+        .screenshot-panel {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 220px;
+            background: rgba(0,0,0,.85);
+            backdrop-filter: blur(20px);
+            border-top: 1px solid rgba(255,255,255,.1);
+            padding: 16px;
+            transform: translateY(100%);
+            transition: transform .4s cubic-bezier(.4,0,.2,1);
+        }
+        .screenshot-panel.active {
+            transform: translateY(0);
+        }
+        .screenshot-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 12px;
+            height: 100%;
+        }
+        .screenshot-item {
+            background: rgba(255,255,255,.1);
+            border-radius: 12px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: all .3s ease;
+            position: relative;
+        }
+        .screenshot-item:hover {
+            transform: scale(1.05);
+            box-shadow: 0 8px 24px rgba(0,0,0,.4);
+        }
+        .screenshot-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .screenshot-item .overlay {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(to top, rgba(0,0,0,.7), transparent 50%);
+            opacity: 0;
+            transition: opacity .3s ease;
+            display: flex;
+            align-items: flex-end;
+            padding: 8px;
+        }
+        .screenshot-item:hover .overlay {
+            opacity: 1;
+        }
+        .screenshot-item .timestamp {
+            color: white;
+            font-size: 10px;
+            font-weight: 500;
+        }
+        .floating-btn {
+            position: absolute;
+            bottom: 90px;
+            right: 24px;
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: rgba(255,255,255,.15);
+            backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all .3s ease;
+            box-shadow: 0 4px 16px rgba(0,0,0,.3);
+        }
+        .floating-btn:hover {
+            background: rgba(255
+</head>
+</html>