purgetss/lib/templates/create/index.xml

A package that simplifies mobile app creation for Titanium developers.

<Alloy>
  <Window class="extend-safe-area-false bg-gradient-to-b from-purple-700 to-blue-800">
    <ScrollView class="vertical mx-4">
      <!-- Header -->
      <Label class="text-center text-3xl font-bold text-white">Welcome to PurgeTSS</Label>
      <Label class="text-center text-sm text-white">Utility-first styling for Titanium/Alloy</Label>

      <!-- Typography Examples -->
      <Label class="mt-4 text-center text-xl font-semibold text-white">Typography</Label>

      <Label class="m-2 h-auto text-center text-lg font-bold text-purple-400">Heading Text</Label>
      <Label class="mx-2 text-center text-sm text-gray-300">Body text with normal weight</Label>
      <Label class="m-2 h-auto text-center text-xs italic text-green-400">Small italic text</Label>

      <!-- Color Examples -->
      <Label class="mt-4 text-center text-xl font-semibold text-white">Colors</Label>

      <View class="horizontal my-2">
        <View class="wh-12 m-1 rounded bg-red-500" />
        <View class="wh-12 m-1 rounded bg-orange-500" />
        <View class="wh-12 m-1 rounded bg-amber-500" />
        <View class="wh-12 m-1 rounded bg-yellow-500" />
        <View class="wh-12 m-1 rounded bg-lime-500" />
        <View class="wh-12 m-1 rounded bg-green-500" />
        <View class="wh-12 m-1 rounded bg-emerald-500" />
        <View class="wh-12 m-1 rounded bg-teal-500" />
        <View class="wh-12 m-1 rounded bg-cyan-500" />
        <View class="wh-12 m-1 rounded bg-sky-500" />
        <View class="wh-12 m-1 rounded bg-blue-500" />
        <View class="wh-12 m-1 rounded bg-indigo-500" />
        <View class="wh-12 m-1 rounded bg-violet-500" />
        <View class="wh-12 m-1 rounded bg-purple-500" />
        <View class="wh-12 m-1 rounded bg-fuchsia-500" />
        <View class="wh-12 m-1 rounded bg-pink-500" />
        <View class="wh-12 m-1 rounded bg-rose-500" />
        <View class="wh-12 bg-brand-500 m-1 rounded" />
      </View>

      <!-- Layout Examples -->
      <Label class="mt-4 text-center text-xl font-semibold text-white">Layouts</Label>

      <Label class="mt-2 text-center text-xs text-gray-400">Horizontal layout</Label>
      <View class="horizontal">
        <View class="wh-12 m-1 rounded bg-red-500" />
        <View class="wh-12 m-1 rounded bg-green-500" />
        <View class="wh-12 m-1 rounded bg-blue-500" />
      </View>

      <Label class="mt-2 text-center text-xs text-gray-400">Vertical layout</Label>
      <View class="vertical mb-2">
        <View class="wh-12 m-1 rounded bg-yellow-500" />
        <View class="wh-12 m-1 rounded bg-pink-500" />
      </View>

      <!-- Border & Radius Examples -->
      <Label class="mt-4 text-center text-xl font-semibold text-white">Borders & Radius</Label>

      <View class="horizontal mt-2">
        <View class="wh-14 m-1 rounded border-2 border-white bg-black/30" />
        <View class="rounded-full-14 m-1 border-2 border-blue-500 bg-black/30" />
        <View class="wh-14 m-1 rounded-lg border-2 border-purple-500 bg-black/30" />
      </View>

      <!-- CTA Button -->
      <Label class="mt-2 text-center text-xs text-blue-50">Open app/views/index.xml to customize this screen</Label>
    </ScrollView>
  </Window>
</Alloy>