phone mockup

Phone mockup shows a mockup of an iPhone.

Base Phone Mockup

mockup_phone = SingleValueFactory("mockup-phone", "Base phone mockup component") # Base mockup phone component
mockup_phone_camera = SingleValueFactory("mockup-phone-camera", "Camera part") # Mockup phone camera part
mockup_phone_display = SingleValueFactory("mockup-phone-display", "Display part") # Mockup phone display part

Phone Mockup Test Examples

---

source

test_mockup_phone_basic_examples

 test_mockup_phone_basic_examples ()

Test basic mockup_phone utilities.

def test_mockup_phone_basic_examples():
    """Test basic mockup_phone utilities."""
    # Basic mockup_phone
    assert str(mockup_phone) == "mockup-phone"
    assert str(mockup_phone_camera) == "mockup-phone-camera"
    assert str(mockup_phone_display) == "mockup-phone-display"
    
    # Test with modifiers
    assert str(mockup_phone.hover) == "hover:mockup-phone"
    assert str(mockup_phone.md) == "md:mockup-phone"
    assert str(mockup_phone.dark) == "dark:mockup-phone"

# Run the tests
test_mockup_phone_basic_examples()

---

source

test_phone_mockup_basic_fasthtml_examples

 test_phone_mockup_basic_fasthtml_examples ()

Test basic iPhone mockup from daisyUI v5 documentation.

def test_phone_mockup_basic_fasthtml_examples():
    """Test basic iPhone mockup from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_content, grid_display
    
    # iPhone mockup
    iphone_mockup = Div(
        Div(cls=str(mockup_phone_camera)),
        Div(
            "It's Glowtime.",
            cls=combine_classes(mockup_phone_display, text_color.white, grid_display, place_content.center)
        ),
        cls=str(mockup_phone)
    )
    
    # Verify structure
    assert iphone_mockup.tag == "div"
    assert iphone_mockup.attrs['class'] == "mockup-phone"
    assert len(iphone_mockup.children) == 2
    
    # Verify camera element
    camera_element = iphone_mockup.children[0]
    assert camera_element.tag == "div"
    assert camera_element.attrs['class'] == "mockup-phone-camera"
    assert camera_element.children == ()  # Empty div
    
    # Verify display element
    display_element = iphone_mockup.children[1]
    assert display_element.tag == "div"
    assert "mockup-phone-display" in display_element.attrs['class']
    assert "text-white" in display_element.attrs['class']
    assert "grid" in display_element.attrs['class']
    assert "place-content-center" in display_element.attrs['class']
    assert display_element.children[0] == "It's Glowtime."
    
    return iphone_mockup

# Run the tests
test_phone_mockup_basic_fasthtml_examples()

<div class="mockup-phone">
  <div class="mockup-phone-camera"></div>
  <div class="mockup-phone-display text-white grid place-content-center">It's Glowtime.</div>
</div>

test_func = test_phone_mockup_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_phone_mockup_with_color_and_wallpaper_fasthtml_examples

 test_phone_mockup_with_color_and_wallpaper_fasthtml_examples ()

Test phone mockup with color and wallpaper from daisyUI v5 documentation.

def test_phone_mockup_with_color_and_wallpaper_fasthtml_examples():
    """Test phone mockup with color and wallpaper from daisyUI v5 documentation."""
    from fasthtml.common import Div, Img
    from cjm_fasthtml_daisyui.utilities.semantic_colors import border_dui
    
    # Phone mockup with color and wallpaper
    phone_with_wallpaper = Div(
        Div(cls=str(mockup_phone_camera)),
        Div(
            Img(
                alt="wallpaper",
                src="https://img.daisyui.com/images/stock/453966.webp"
            ),
            cls=str(mockup_phone_display)
        ),
        cls=combine_classes(mockup_phone, border_dui.primary)
    )
    
    # Verify structure
    assert phone_with_wallpaper.tag == "div"
    assert "mockup-phone" in phone_with_wallpaper.attrs['class']
    assert "border-primary" in phone_with_wallpaper.attrs['class']
    assert len(phone_with_wallpaper.children) == 2
    
    # Verify camera element
    camera_element = phone_with_wallpaper.children[0]
    assert camera_element.tag == "div"
    assert camera_element.attrs['class'] == "mockup-phone-camera"
    assert camera_element.children == ()  # Empty div
    
    # Verify display element with image
    display_element = phone_with_wallpaper.children[1]
    assert display_element.tag == "div"
    assert display_element.attrs['class'] == "mockup-phone-display"
    assert len(display_element.children) == 1
    
    # Verify wallpaper image
    wallpaper_img = display_element.children[0]
    assert wallpaper_img.tag == "img"
    assert wallpaper_img.attrs['alt'] == "wallpaper"
    assert wallpaper_img.attrs['src'] == "https://img.daisyui.com/images/stock/453966.webp"
    
    return phone_with_wallpaper

# Run the tests
test_phone_mockup_with_color_and_wallpaper_fasthtml_examples()

<div class="mockup-phone border-primary">
  <div class="mockup-phone-camera"></div>
  <div class="mockup-phone-display">
<img alt="wallpaper" src="https://img.daisyui.com/images/stock/453966.webp">  </div>
</div>

test_func = test_phone_mockup_with_color_and_wallpaper_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()