"me-web?" 0.10.0: three cards that fold as you scroll, then a yes or a no

- The first screen is three cards you scroll through: what you could have (your family's photos at home, open from anywhere), how it works (a small computer that stays on, and an address of your own), and the question that matters: does your home have one?
- As you scroll down, the first two cards fold into two bubbles at the top. Tap a bubble to go back to its card.
- The last card ends with a choice: "Yes, let's find out" starts the check; "Not for me" says goodbye and closes the app.
- After your first check, the app opens on the last card, with the first two already folded.
- The swipe-through pages and the circling drawing are gone; the six things you could host stay listed under the cards.
- While a check runs, nothing is left empty: each thing you could host has its card from the start, with a "Checking" label and a moving shimmer, until its answer arrives. Checks still running look the same.
- The question, the two answers and the goodbye are in every language; translations other than English and Italian are still drafts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012CzABvBkbcFqoHdmi8b9WB

src/MeWeb.App/Views/MainView.axaml

@@ -10,9 +10,10 @@
              Background="{StaticResource GroundBrush}">
   <UserControl.Resources>
     <DataTemplate x:Key="CardTemplate" x:DataType="vm:CardViewModel">
-      <Border Classes="card"
+      <Border Classes="card" Classes.pending="{Binding ShowRunning}"
               Classes.good="{Binding IsGood}" Classes.caution="{Binding IsCaution}"
               Classes.bad="{Binding IsBad}" Classes.unknown="{Binding IsUnknown}" Classes.info="{Binding IsInfo}">
+        <Grid>
         <StackPanel Spacing="10">
           <Grid ColumnDefinitions="Auto,*,Auto">
             <Path Grid.Column="0" Classes="icon" Data="{Binding Icon}" VerticalAlignment="Center" />
@@ -21,7 +22,10 @@
               <TextBlock Text="{Binding OutcomeFormatted}" />
             </Border>
           </Grid>
-          <ProgressBar Classes="thin" IsIndeterminate="True" IsVisible="{Binding ShowRunning}" />
+          <StackPanel Spacing="8" IsVisible="{Binding ShowRunning}">
+            <Border Classes="skeleton" />
+            <Border Classes="skeleton short" />
+          </StackPanel>
           <TextBlock Classes="summary" Text="{Binding Summary}" IsVisible="{Binding ShowSettled}" />
           <ItemsControl ItemsSource="{Binding Facts}" IsVisible="{Binding ShowSettled}">
             <ItemsControl.ItemTemplate>
@@ -52,6 +56,8 @@
             <TextBlock Classes="body" FontSize="14" Text="{Binding Explain}" />
           </Expander>
         </StackPanel>
+        <Border Classes="sweep" IsVisible="{Binding ShowRunning}" />
+        </Grid>
       </Border>
     </DataTemplate>
   </UserControl.Resources>
@@ -93,7 +99,7 @@
       </StackPanel>
 
       <Grid>
-      <ScrollViewer x:Name="Scroller" HorizontalScrollBarVisibility="Disabled" IsVisible="{Binding !ShowIntro}">
+      <ScrollViewer x:Name="Scroller" HorizontalScrollBarVisibility="Disabled">
         <StackPanel Spacing="26" Margin="8,4,8,24">
           <Border Classes="banner" IsVisible="{Binding ShowUpdate}">
             <StackPanel Orientation="Horizontal" Spacing="12">
@@ -104,31 +110,79 @@
             </StackPanel>
           </Border>
 
-          <StackPanel Spacing="14" HorizontalAlignment="Center" MaxWidth="600" Margin="8,0,8,0" IsVisible="{Binding !HasResults}">
-            <Border Classes="statusChip" HorizontalAlignment="Center">
-              <StackPanel Orientation="Horizontal" Spacing="8">
-                <Grid Width="10" Height="10" VerticalAlignment="Center">
-                  <Ellipse Fill="{StaticResource GoodBrush}" IsVisible="{Binding ShowOnline}" />
-                  <Ellipse Fill="{StaticResource CautionBrush}" IsVisible="{Binding ShowCaptive}" />
-                  <Ellipse Fill="{StaticResource BadBrush}" IsVisible="{Binding ShowOffline}" />
-                  <Ellipse Fill="{StaticResource TextSoftBrush}" IsVisible="{Binding ShowChecking}" />
-                </Grid>
-                <TextBlock Classes="chip" Text="{Binding StatusFormatted}" />
+          <StackPanel x:Name="Story" Spacing="20" MaxWidth="600" Margin="8,0" IsVisible="{Binding !HasResults}">
+            <Border x:Name="WishCard" Classes="story">
+              <StackPanel>
+                <Border Classes="scene">
+                  <Grid>
+                    <Viewbox Stretch="Uniform">
+                      <v:IntroScene x:Name="WishScene" Step="0" />
+                    </Viewbox>
+                    <Border Classes="storyMark">
+                      <Path Classes="icon" Data="{StaticResource IconImages}" />
+                    </Border>
+                  </Grid>
+                </Border>
+                <StackPanel Spacing="10" Margin="20,14,20,22">
+                  <TextBlock Classes="hero" Text="{s:Tr IntroWishTitle}" />
+                  <TextBlock Classes="lead" Text="{s:Tr IntroWishBody}" />
+                </StackPanel>
               </StackPanel>
             </Border>
-            <Viewbox StretchDirection="DownOnly" HorizontalAlignment="Center">
-              <v:HomeOrbit />
-            </Viewbox>
-            <TextBlock Classes="hero" Text="{s:Tr StartTitle}" />
-            <TextBlock Classes="lead" Text="{s:Tr StartBody}" />
-            <Button Classes="primary" Content="{Binding CheckFormatted}" Margin="0,6,0,0"
-                    AutomationProperties.AutomationId="main-check"
-                    Command="{Binding CheckCommand}" />
-            <TextBlock Classes="small" Text="{s:Tr StartPromise}" TextAlignment="Center" MaxWidth="460" HorizontalAlignment="Center" />
-            <Button Classes="link" Content="{s:Tr IntroReplay}" FontSize="15" HorizontalAlignment="Center"
-                    AutomationProperties.AutomationId="main-intro-replay"
-                    Command="{Binding ReplayIntroCommand}" />
-            <TextBlock Classes="section" Text="{s:Tr StartUsesTitle}" HorizontalAlignment="Center" Margin="8,14,8,0" />
+
+            <Border x:Name="WayCard" Classes="story">
+              <StackPanel>
+                <Border Classes="scene">
+                  <Grid>
+                    <Viewbox Stretch="Uniform">
+                      <v:IntroScene x:Name="WayScene" Step="1" />
+                    </Viewbox>
+                    <Border Classes="storyMark">
+                      <Path Classes="icon" Data="{StaticResource IconHouse}" />
+                    </Border>
+                  </Grid>
+                </Border>
+                <StackPanel Spacing="10" Margin="20,14,20,22">
+                  <TextBlock Classes="hero" Text="{s:Tr IntroWayTitle}" />
+                  <TextBlock Classes="lead" Text="{s:Tr IntroWayBody}" />
+                </StackPanel>
+              </StackPanel>
+            </Border>
+
+            <Border x:Name="CheckCard" Classes="story final">
+              <StackPanel>
+                <Border Classes="scene">
+                  <Viewbox Stretch="Uniform">
+                    <v:IntroScene x:Name="CheckScene" Step="2" />
+                  </Viewbox>
+                </Border>
+                <StackPanel Spacing="12" Margin="20,14,20,24">
+                  <TextBlock Classes="hero" Text="{s:Tr StartQuestion}" />
+                  <TextBlock Classes="lead" Text="{s:Tr IntroWayHope}" />
+                  <TextBlock Classes="lead strong" Text="{s:Tr StartBody}" />
+                  <Border Classes="statusChip" HorizontalAlignment="Center" Margin="0,4,0,0">
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                      <Grid Width="10" Height="10" VerticalAlignment="Center">
+                        <Ellipse Fill="{StaticResource GoodBrush}" IsVisible="{Binding ShowOnline}" />
+                        <Ellipse Fill="{StaticResource CautionBrush}" IsVisible="{Binding ShowCaptive}" />
+                        <Ellipse Fill="{StaticResource BadBrush}" IsVisible="{Binding ShowOffline}" />
+                        <Ellipse Fill="{StaticResource TextSoftBrush}" IsVisible="{Binding ShowChecking}" />
+                      </Grid>
+                      <TextBlock Classes="chip" Text="{Binding StatusFormatted}" />
+                    </StackPanel>
+                  </Border>
+                  <Button Classes="primary" Content="{s:Tr StartYes}" Margin="0,4,0,0"
+                          AutomationProperties.AutomationId="main-check"
+                          Command="{Binding CheckCommand}" />
+                  <Button Classes="quiet" Content="{s:Tr StartNo}" HorizontalAlignment="Center"
+                          AutomationProperties.AutomationId="main-leave"
+                          Command="{Binding LeaveCommand}" />
+                  <TextBlock Classes="small" Text="{s:Tr StartPromise}" TextAlignment="Center" MaxWidth="460" HorizontalAlignment="Center" />
+                </StackPanel>
+              </StackPanel>
+            </Border>
+
+            <TextBlock Classes="section" Text="{s:Tr StartUsesTitle}" HorizontalAlignment="Center" Margin="8,8,8,0" />
             <WrapPanel HorizontalAlignment="Center" ItemSpacing="10" LineSpacing="10">
               <Border Classes="useChip">
                 <Grid ColumnDefinitions="Auto,*">
@@ -274,8 +328,10 @@
               <ItemsControl.ItemTemplate>
                 <DataTemplate x:DataType="vm:UseViewModel">
                   <Border Classes="card use" AutomationProperties.AutomationId="{Binding AutomationId}"
+                          Classes.pending="{Binding IsPending}"
                           Classes.good="{Binding IsGood}" Classes.caution="{Binding IsCaution}"
                           Classes.bad="{Binding IsBad}" Classes.unknown="{Binding IsUnknown}">
+                    <Grid>
                     <StackPanel Spacing="8">
                       <Grid ColumnDefinitions="Auto,*,Auto">
                         <Path Grid.Column="0" Classes="icon" Data="{Binding Icon}" VerticalAlignment="Center" />
@@ -284,9 +340,15 @@
                           <TextBlock Text="{Binding VerdictFormatted}" />
                         </Border>
                       </Grid>
-                      <TextBlock Classes="summary" Text="{Binding Reason}" />
+                      <StackPanel Spacing="8" IsVisible="{Binding IsPending}">
+                        <Border Classes="skeleton" />
+                        <Border Classes="skeleton short" />
+                      </StackPanel>
+                      <TextBlock Classes="summary" Text="{Binding Reason}" IsVisible="{Binding ShowReason}" />
                       <TextBlock Classes="body" FontSize="14" Foreground="{StaticResource TextSoftBrush}" Text="{Binding Advice}" IsVisible="{Binding ShowAdvice}" />
                     </StackPanel>
+                    <Border Classes="sweep" IsVisible="{Binding IsPending}" />
+                    </Grid>
                   </Border>
                 </DataTemplate>
               </ItemsControl.ItemTemplate>
@@ -406,48 +468,23 @@
         </StackPanel>
       </ScrollViewer>
 
-      <Grid RowDefinitions="*,Auto" MaxWidth="640" IsVisible="{Binding ShowIntro}">
-        <Carousel SelectedIndex="{Binding IntroPage}" IsSwipeEnabled="True"
-                  AutomationProperties.AutomationId="intro-pages">
-          <Carousel.PageTransition>
-            <PageSlide Duration="0:0:0.3" Orientation="Horizontal" />
-          </Carousel.PageTransition>
-          <ScrollViewer HorizontalScrollBarVisibility="Disabled">
-            <StackPanel Spacing="14" Margin="16,4,16,12" VerticalAlignment="Center">
-              <Viewbox Stretch="Uniform" MaxWidth="540">
-                <v:IntroScene Step="0" />
-              </Viewbox>
-              <TextBlock Classes="hero" Text="{s:Tr IntroWishTitle}" />
-              <TextBlock Classes="lead" Text="{s:Tr IntroWishBody}" />
-            </StackPanel>
-          </ScrollViewer>
-          <ScrollViewer HorizontalScrollBarVisibility="Disabled">
-            <StackPanel Spacing="14" Margin="16,4,16,12" VerticalAlignment="Center">
-              <Viewbox Stretch="Uniform" MaxWidth="540">
-                <v:IntroScene Step="1" />
-              </Viewbox>
-              <TextBlock Classes="hero" Text="{s:Tr IntroWayTitle}" />
-              <TextBlock Classes="lead" Text="{s:Tr IntroWayBody}" />
-              <TextBlock Classes="lead strong" Text="{s:Tr IntroWayHope}" />
-            </StackPanel>
-          </ScrollViewer>
-        </Carousel>
-        <Grid Grid.Row="1" ColumnDefinitions="*,Auto,*" Margin="20,8,20,6">
-          <Button Grid.Column="0" Classes="link" Content="{s:Tr IntroSkip}" FontSize="15"
-                  HorizontalAlignment="Left" VerticalAlignment="Center"
-                  IsVisible="{Binding IntroOnWish}"
-                  AutomationProperties.AutomationId="intro-skip"
-                  Command="{Binding FinishIntroCommand}" />
-          <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center" Margin="12,0">
-            <Border Classes="dot" Classes.on="{Binding IntroOnWish}" />
-            <Border Classes="dot" Classes.on="{Binding IntroOnWay}" />
-            <Border Classes="dot" />
-          </StackPanel>
-          <Button Grid.Column="2" Classes="primary small" Content="{s:Tr IntroNext}"
-                  HorizontalAlignment="Right" VerticalAlignment="Center"
-                  AutomationProperties.AutomationId="intro-next"
-                  Command="{Binding IntroNextCommand}" />
-        </Grid>
+      <Grid VerticalAlignment="Top" IsVisible="{Binding !HasResults}">
+        <Border x:Name="Shade" Classes="bubbles" Opacity="0" IsHitTestVisible="False" />
+        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,8,0,0">
+          <Button x:Name="WishBubble" Classes="bubble" Opacity="0" IsHitTestVisible="False" Click="OnBubble"
+                  AutomationProperties.AutomationId="story-wish"
+                  AutomationProperties.Name="{s:Tr IntroWishTitle}"
+                  ToolTip.Tip="{s:Tr IntroWishTitle}">
+            <Path Classes="icon" Data="{StaticResource IconImages}" />
+          </Button>
+          <Rectangle x:Name="BubbleLink" Classes="bubbleLink" Opacity="0" />
+          <Button x:Name="WayBubble" Classes="bubble" Opacity="0" IsHitTestVisible="False" Click="OnBubble"
+                  AutomationProperties.AutomationId="story-way"
+                  AutomationProperties.Name="{s:Tr IntroWayTitle}"
+                  ToolTip.Tip="{s:Tr IntroWayTitle}">
+            <Path Classes="icon" Data="{StaticResource IconHouse}" />
+          </Button>
+        </StackPanel>
       </Grid>
       </Grid>
     </DockPanel>
@@ -526,6 +563,10 @@
       </Border>
     </Border>
 
+    <Border Classes="farewell" IsVisible="{Binding Leaving}">
+      <TextBlock Classes="hero" Text="{s:Tr Goodbye}" VerticalAlignment="Center" Margin="32,0" />
+    </Border>
+
     <Border Classes="scrim" IsVisible="{Binding ShowShareSheet}">
       <Border Classes="sheet">
         <ScrollViewer HorizontalScrollBarVisibility="Disabled">