Refine CJ OnStyle login visual direction
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
@@ -24,40 +24,6 @@
|
||||
Duration="0:0:8"
|
||||
EnableDependentAnimation="True" />
|
||||
</Storyboard>
|
||||
<Storyboard x:Name="LoginLineStoryboard" RepeatBehavior="Forever">
|
||||
<DoubleAnimation
|
||||
Storyboard.TargetName="RouteLineATransform"
|
||||
Storyboard.TargetProperty="TranslateX"
|
||||
From="-36"
|
||||
To="68"
|
||||
Duration="0:0:3.8"
|
||||
AutoReverse="True"
|
||||
EnableDependentAnimation="True" />
|
||||
<DoubleAnimation
|
||||
Storyboard.TargetName="RouteLineA"
|
||||
Storyboard.TargetProperty="Opacity"
|
||||
From="0.16"
|
||||
To="0.76"
|
||||
Duration="0:0:1.9"
|
||||
AutoReverse="True" />
|
||||
<DoubleAnimation
|
||||
Storyboard.TargetName="RouteLineBTransform"
|
||||
Storyboard.TargetProperty="TranslateX"
|
||||
From="52"
|
||||
To="-44"
|
||||
BeginTime="0:0:1.1"
|
||||
Duration="0:0:4.1"
|
||||
AutoReverse="True"
|
||||
EnableDependentAnimation="True" />
|
||||
<DoubleAnimation
|
||||
Storyboard.TargetName="RouteLineB"
|
||||
Storyboard.TargetProperty="Opacity"
|
||||
From="0.12"
|
||||
To="0.64"
|
||||
BeginTime="0:0:1.1"
|
||||
Duration="0:0:2.1"
|
||||
AutoReverse="True" />
|
||||
</Storyboard>
|
||||
</Page.Resources>
|
||||
<Page.Content>
|
||||
<Grid Background="{StaticResource AppBackgroundBrush}">
|
||||
@@ -584,43 +550,6 @@
|
||||
</Rectangle.Fill>
|
||||
</Rectangle>
|
||||
|
||||
<Border
|
||||
x:Name="RouteLineA"
|
||||
Width="460"
|
||||
Height="2"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"
|
||||
Margin="92,198,0,0"
|
||||
Background="#C8C8FF17"
|
||||
Opacity="0.28"
|
||||
RenderTransformOrigin="0,0.5">
|
||||
<Border.RenderTransform>
|
||||
<CompositeTransform x:Name="RouteLineATransform" Rotation="-11" />
|
||||
</Border.RenderTransform>
|
||||
</Border>
|
||||
<Ellipse
|
||||
Width="8"
|
||||
Height="8"
|
||||
HorizontalAlignment="Left"
|
||||
VerticalAlignment="Top"
|
||||
Margin="548,157,0,0"
|
||||
Fill="#C8C8FF17" />
|
||||
|
||||
<Border
|
||||
x:Name="RouteLineB"
|
||||
Width="380"
|
||||
Height="2"
|
||||
HorizontalAlignment="Right"
|
||||
VerticalAlignment="Bottom"
|
||||
Margin="0,0,86,166"
|
||||
Background="#B97632FF"
|
||||
Opacity="0.22"
|
||||
RenderTransformOrigin="1,0.5">
|
||||
<Border.RenderTransform>
|
||||
<CompositeTransform x:Name="RouteLineBTransform" Rotation="15" />
|
||||
</Border.RenderTransform>
|
||||
</Border>
|
||||
|
||||
<Grid
|
||||
Width="1120"
|
||||
MaxWidth="1120"
|
||||
@@ -637,33 +566,17 @@
|
||||
MaxWidth="620"
|
||||
Spacing="16"
|
||||
VerticalAlignment="Bottom">
|
||||
<Border
|
||||
Width="54"
|
||||
Height="54"
|
||||
HorizontalAlignment="Left"
|
||||
Background="#7A341069"
|
||||
BorderBrush="#66C8FF17"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8">
|
||||
<TextBlock
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontFamily="Bahnschrift SemiBold"
|
||||
FontSize="18"
|
||||
Foreground="#C8FF17"
|
||||
Text="TA" />
|
||||
</Border>
|
||||
<TextBlock
|
||||
FontFamily="Bahnschrift SemiBold"
|
||||
FontSize="13"
|
||||
Foreground="#D7D0B7FF"
|
||||
Text="CJ ONSTYLE CG AUTOMATION" />
|
||||
Text="TORNADOACE FOR CJ ONSTYLE" />
|
||||
<TextBlock
|
||||
FontFamily="Bahnschrift SemiBold"
|
||||
FontSize="48"
|
||||
Foreground="White"
|
||||
LineHeight="56"
|
||||
Text="방송 자막 제작을 ON 상태로 준비합니다"
|
||||
Text="CJ OnStyle 방송 그래픽 제작을 준비합니다"
|
||||
TextWrapping="WrapWholeWords" />
|
||||
<TextBlock
|
||||
MaxWidth="540"
|
||||
@@ -671,37 +584,8 @@
|
||||
FontSize="17"
|
||||
Foreground="#DDE7EAEE"
|
||||
LineHeight="28"
|
||||
Text="큐시트 데이터, Tornado Scene, 자동 검수 흐름을 하나의 제작 데스크에서 확인합니다."
|
||||
Text="라이브 커머스 화면, 상품 정보, 자막 검수 흐름을 제작 데스크에서 자연스럽게 이어갑니다."
|
||||
TextWrapping="WrapWholeWords" />
|
||||
<StackPanel Orientation="Horizontal" Spacing="8">
|
||||
<Border
|
||||
MinHeight="30"
|
||||
Padding="10,6"
|
||||
Background="#55341069"
|
||||
BorderBrush="#66FFFFFF"
|
||||
BorderThickness="1"
|
||||
CornerRadius="4">
|
||||
<TextBlock Foreground="#E8FFFFFF" Text="Cue Sheet" />
|
||||
</Border>
|
||||
<Border
|
||||
MinHeight="30"
|
||||
Padding="10,6"
|
||||
Background="#55341069"
|
||||
BorderBrush="#66FFFFFF"
|
||||
BorderThickness="1"
|
||||
CornerRadius="4">
|
||||
<TextBlock Foreground="#E8FFFFFF" Text="Tornado Scene" />
|
||||
</Border>
|
||||
<Border
|
||||
MinHeight="30"
|
||||
Padding="10,6"
|
||||
Background="#66341069"
|
||||
BorderBrush="#99C8FF17"
|
||||
BorderThickness="1"
|
||||
CornerRadius="4">
|
||||
<TextBlock Foreground="#C8FF17" Text="Auto Verify" />
|
||||
</Border>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
|
||||
<Border
|
||||
@@ -726,7 +610,7 @@
|
||||
FontFamily="Bahnschrift"
|
||||
FontSize="13"
|
||||
Foreground="#62606A"
|
||||
Text="초기 빌드에서는 화면 전환 확인용 로그인입니다." />
|
||||
Text="제작자 접속 정보를 입력하세요." />
|
||||
|
||||
<StackPanel Spacing="6">
|
||||
<TextBlock
|
||||
@@ -770,12 +654,6 @@
|
||||
</StackPanel>
|
||||
</Button>
|
||||
|
||||
<TextBlock
|
||||
FontFamily="Bahnschrift"
|
||||
FontSize="12"
|
||||
Foreground="#7D7688"
|
||||
Text="CJ ONSTYLE Inspiring Purple / Vibrant Lime tone"
|
||||
TextWrapping="WrapWholeWords" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</Grid>
|
||||
@@ -815,34 +693,6 @@
|
||||
Height="5"
|
||||
IsIndeterminate="True"
|
||||
Foreground="#C8FF17" />
|
||||
<Grid ColumnSpacing="6">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border Padding="8" Background="#F3EEF9" CornerRadius="5">
|
||||
<TextBlock
|
||||
HorizontalAlignment="Center"
|
||||
FontSize="12"
|
||||
Foreground="#341069"
|
||||
Text="큐시트" />
|
||||
</Border>
|
||||
<Border Grid.Column="1" Padding="8" Background="#F3EEF9" CornerRadius="5">
|
||||
<TextBlock
|
||||
HorizontalAlignment="Center"
|
||||
FontSize="12"
|
||||
Foreground="#341069"
|
||||
Text="Scene" />
|
||||
</Border>
|
||||
<Border Grid.Column="2" Padding="8" Background="#F3EEF9" CornerRadius="5">
|
||||
<TextBlock
|
||||
HorizontalAlignment="Center"
|
||||
FontSize="12"
|
||||
Foreground="#341069"
|
||||
Text="검수" />
|
||||
</Border>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
@@ -18,7 +18,6 @@ namespace TornadoAce_CJOnStyle.Views
|
||||
private void MainPage_Loaded(object sender, RoutedEventArgs e)
|
||||
{
|
||||
LoginIntroStoryboard.Begin();
|
||||
LoginLineStoryboard.Begin();
|
||||
OperatorNameTextBox.Focus(FocusState.Programmatic);
|
||||
}
|
||||
|
||||
|
||||
@@ -23,8 +23,9 @@
|
||||
|
||||
## 도입 화면 방향
|
||||
|
||||
- CargoRadar의 전체 화면 사진형 로그인 도입부를 참고하되, TornadoAce는 방송 CG 제작실/송출 콘솔 분위기로 전환한다.
|
||||
- CJ ONSTYLE 공식 소개의 `Inspiring Purple` / `Vibrant Lime` 조합을 로그인 카드, 신호 라인, 강조 텍스트의 기준 톤으로 사용한다.
|
||||
- CargoRadar의 전체 화면 사진형 로그인 도입부를 참고하되, TornadoAce는 CJ OnStyle 라이브커머스/방송 CG 제작 데스크 분위기로 전환한다.
|
||||
- CJ ONSTYLE 공식 소개의 `Inspiring Purple` / `Vibrant Lime` 조합은 로그인 카드와 핵심 강조색에만 절제해서 사용한다.
|
||||
- 관제/비행/지도/레이더처럼 보이는 모니터 그래픽이나 불필요한 신호선 장식은 사용하지 않는다.
|
||||
- 현재 로그인은 실제 인증이 아니라 초기 빌드용 진입 게이트이며, 추후 사내 계정/권한 정책이 정해지면 인증 서비스로 교체한다.
|
||||
|
||||
## 다음 설계 결정 지점
|
||||
|
||||
Reference in New Issue
Block a user